Why import components in react/vue?


in react/vue you need to import ui components you want to use. I believe in Vue you can do so at top level for all, or at individual level - pending how you want to do the bundling.

This seems to have a benefit in tree shaking etc.

But if you look at the Ionic source code for Vue/React they seem to register the webcomponent first and then insert it as the actual content of the v-dom element it needs to add (using createElement in React, or H in vue). So why not register only one place and then use the kebab labels for elements in the code, not needing to do the imports everywhere? That imho would save some code in development time and bundle (a bit)

So using ion-card instead of IonCard after first usage (or global registration)

Not sure if anyone on this forum knows this. I reckon @ldebeasi knows or maybe @aaronksaunders knows - just tagging a few experts here :slight_smile:

See react Proxies - ionic-framework/proxies.ts at a52bfe6525c5351fdd8c6cd335dbb155c1b6ac86 · ionic-team/ionic-framework · GitHub

And create-react-element-ionic : ionic-framework/createComponent.tsx at a52bfe6525c5351fdd8c6cd335dbb155c1b6ac86 · ionic-team/ionic-framework · GitHub - line 35 as first step to register the webcomponent under the kebab case and then the insert of vdom element using that tag.

Or to ask in a different way - once I imported and used an IonCard element in a react/vue component, can I then also use the kebab notation knowing it is registered as webcomponent in the browser repository? (ion-card)