vsf-capybara icon indicating copy to clipboard operation
vsf-capybara copied to clipboard

Register ui components globally

Open PawFV opened this issue 4 years ago • 2 comments

What is the motivation for adding/enhancing this feature?

Vue ui components are getting imported manually in each component, since they are spreadly used they should be registered globally to avoid having to import and registering them in each component.

Examples:

Manual imports inside a component: image

Registered globally. image

16 lines of code avoided. just in one file...

What are the acceptance criteria?

Vue docs about global registration.

  • [ ] Be able to use SF UI components in any component without having to import them
  • [ ] Be able to use SF UI components in any component without having to add them to components array

Can you complete this feature request by yourself?

  • [x] YES
  • [ ] NO

Additional information

PawFV avatar Feb 11 '21 19:02 PawFV

What is the performance impact of doing this?

dt2patel avatar Apr 12 '21 11:04 dt2patel

What is the performance impact of doing this?

From my point of view, not much, you prioritize development speed, clean code structure and scalability over 100kb extra in your bundle size. I'm just using what I listed above and if any it eased a bit the chaos when developing, I'm more concerned about the performance of other setups if that makes sense. If you want a clean approach which it's documented in Vuejs docs

docs

It's essentially describing the issue I see here, where you have too many repetitions. First thing that clicks into my mind when I start to see repeated patterns, "If I'm doing that much repetition then I'm doing something wrong".

You can actually use a fancier solution which is registering them on-demand, it's linked in the docs I sent you, here is the example.

Another issue I see with the way this whole ecosystem is that isn't published as an npm packages, so it would be miles easier to let the user decide which component/mixin/functionality they want to use and just link the docs for its usage.

Another example you can look is, a well known UI library, Vuetify. Take a look at how it's built.

Here is an example, I built a vuejs app with default webpack config without vuetify, and then with Vuetify install option. (Which just comes with automatic registration of components, you don't have to import them).

Plain vue webpack-plain

Vuetify installed webpack-vuetify

PawFV avatar Apr 12 '21 18:04 PawFV