jetstream icon indicating copy to clipboard operation
jetstream copied to clipboard

[2.x] Remove "Jet" component prefix

Open jessarcher opened this issue 1 year ago • 0 comments

Continuing from https://github.com/laravel/jetstream/pull/1110, this PR removes the "Jet" prefix from the component imports in the Vue stack to give users a better sense of ownership over the scaffolding.

This does mean that some components are now a single word, which the Vue style guide says not to do. I asked Evan You whether he'd still advocate against this, and he responded:

Not as strictly, but I’d still avoid names that overlap with known native elements.

After the rename, there are three components that overlap with native elements:

  • Button
  • Input
  • Label

I've renamed the Button component to PrimaryButton because we already have a SecondaryButton component.

The other two components are a bit trickier, which is why this PR is marked as a draft.

Some ideas:

  • FormInput and FormLabel - the downside is that we have an InputError and Checkbox component which would probably make more sense with the Form prefix as well.
  • TextInput and InputLabel - the downside is that the TextInput component would accept the type attribute which makes it more than just a text input.

Alternatively, the overlapping components work fine so we could leave them. It may be worth noting that because we're using Inertia, there are already other Vue components in the project that have overlapping names - Link and Head.

jessarcher avatar Aug 10 '22 04:08 jessarcher

This meant that some components were now a single word, which goes against the Vue style guide.

I feel like this is a weird rule as it's still obvious that these are components rather than native elements. But as long as we don't change the Livewire side of things, all good to me 😅

driesvints avatar Sep 05 '22 07:09 driesvints

Yeah, I agree it's a little weird. I guess because with Vue you can use kebab-case or PascalCase, and if you chose kebab-case then the single-word components could have identical names to native elements. Personally, I don't mind this and just disable that particular rule when using Vue's eslint prefix.

I wish it wasn't breaking to change the Livewire components, otherwise, I'd love to make them match.

jessarcher avatar Sep 05 '22 07:09 jessarcher

Won't this just make upgrading harder for little to no benefit?

chrysanthos avatar Sep 05 '22 07:09 chrysanthos

@chrysanthos there isn't really an upgrade path for Jetstream. It's a scaffold tool.

driesvints avatar Sep 05 '22 07:09 driesvints

@chrysanthos there isn't really an upgrade path for Jetstream. It's a scaffold tool.

I know, and the way to go about upgrading is to manually monitor the releases for changes. This PR will make this harder for no benefit.

chrysanthos avatar Sep 05 '22 07:09 chrysanthos

You're still talking about "upgrading" but there really isn't any such thing.

driesvints avatar Sep 05 '22 07:09 driesvints