feat(vue): add custom elements bundle (#23458)

packages/vue/package.json

@@ -64,5 +64,6 @@
     "tags": "dist/vetur/tags.json",
     "attributes": "dist/vetur/attributes.json"
   },
-  "web-types": "dist/web-types.json"
+  "web-types": "dist/web-types.json",
+  "sideEffects": false
 }

packages/vue/rollup.config.js

@@ -1,3 +1,5 @@
+const external = ['vue', 'vue-router'];
+
 export default {
   input: 'dist-transpiled/index.js',
   output: [
@@ -15,5 +17,5 @@ export default {
       sourcemap: true
     }
   ],
-  external: ['ionicons', 'ionicons/icons', '@ionic/core', '@ionic/core/loader', 'vue', 'vue-router']
+  external: id => external.includes(id) || id.startsWith('@ionic/core') || id.startsWith('ionicons')
 };

packages/vue/scripts/copy-overlays.js

@@ -31,15 +31,17 @@ function generateOverlays() {
   ]
 
   let controllerImports = [];
+  let componentImports = [];
   let componentDefinitions = [];
 
   components.forEach(component => {
     const docsBlock = getDocsBlock(component.tag);
     const props = getPropsFromDocsBlock(docsBlock);
 
+    componentImports.push(`import { ${component.name} as ${component.name}Cmp } from '@ionic/core/components/${component.tag}.js'`);
     controllerImports.push(component.controller);
     componentDefinitions.push(`
-export const ${component.name} = /*@__PURE__*/defineOverlayContainer<JSX.${component.name}>('${component.tag}', [${props.join(', ')}], ${component.controller});
+export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${component.name}>('${component.tag}', ${component.name}Cmp, [${props.join(', ')}], ${component.controller});
     `);
   });
 
@@ -47,8 +49,10 @@ export const ${component.name} = /*@__PURE__*/defineOverlayContainer<JSX.${compo
 
 import {
   JSX,
-  ${controllerImports.join(',\n  ')}
-} from '@ionic/core';
+  ${controllerImports.join(',\n  ')},
+} from '@ionic/core/components';
+
+${componentImports.join('\n')}
 
 import { defineOverlayContainer } from '../vue-component-lib/overlays';
 ${componentDefinitions.join('')}

packages/vue/src/components/IonApp.ts

@@ -1,18 +1,18 @@
 import { h, defineComponent, shallowRef, VNode } from 'vue';
+import { defineCustomElement } from '../utils';
+import { IonApp as IonAppCmp } from '@ionic/core/components/ion-app.js';
 
 const userComponents = shallowRef([]);
-export const IonApp = defineComponent({
-  name: 'IonApp',
-  setup(_, { attrs, slots }) {
-    return () => {
-      return h(
-        'ion-app',
-        {
-          ...attrs
-        },
-        [slots.default && slots.default(), ...userComponents.value]
-      )
-    }
+export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
+  defineCustomElement('ion-app', IonAppCmp);
+  return () => {
+    return h(
+      'ion-app',
+      {
+        ...attrs
+      },
+      [slots.default && slots.default(), ...userComponents.value]
+    )
   }
 });
 

packages/vue/src/components/IonBackButton.ts

@@ -1,26 +1,29 @@
 import { h, inject, defineComponent } from 'vue';
+import { defineCustomElement } from '../utils';
+import { IonBackButton as IonBackButtonCmp } from '@ionic/core/components/ion-back-button.js';
+import { IonIcon as IonIconCmp } from 'ionicons/components/ion-icon.js';
 
-export const IonBackButton = defineComponent({
-  name: 'IonBackButton',
-  setup(_, { attrs, slots }) {
-    const ionRouter: any = inject('navManager');
+export const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
+  defineCustomElement('ion-back-button', IonBackButtonCmp);
+  defineCustomElement('ion-icon', IonIconCmp);
 
-    const onClick = () => {
-      const defaultHref = attrs['default-href'] || attrs['defaultHref'];
-      const routerAnimation = attrs['router-animation'] || attrs['routerAnimation'];
+  const ionRouter: any = inject('navManager');
 
-      ionRouter.handleNavigateBack(defaultHref, routerAnimation);
-    }
+  const onClick = () => {
+    const defaultHref = attrs['default-href'] || attrs['defaultHref'];
+    const routerAnimation = attrs['router-animation'] || attrs['routerAnimation'];
 
-    return () => {
-      return h(
-        'ion-back-button',
-        {
-          onClick,
-          ...attrs
-        },
-        slots.default && slots.default()
-      )
-    }
+    ionRouter.handleNavigateBack(defaultHref, routerAnimation);
+  }
+
+  return () => {
+    return h(
+      'ion-back-button',
+      {
+        onClick,
+        ...attrs
+      },
+      slots.default && slots.default()
+    )
   }
 });

packages/vue/src/components/IonIcon.ts

@@ -1,7 +1,9 @@
 import { h, defineComponent } from 'vue';
-import { isPlatform } from '@ionic/core';
+import { isPlatform } from '@ionic/core/components';
+import { defineCustomElement } from '../utils';
+import { IonIcon as IonIconCmp } from 'ionicons/components/ion-icon.js';
 
-export const IonIcon = defineComponent({
+export const IonIcon = /*@__PURE__*/ defineComponent({
   name: 'IonIcon',
   props: {
     ariaLabel: String,
@@ -17,6 +19,7 @@ export const IonIcon = defineComponent({
     src: String
   },
   setup(props, { slots }) {
+    defineCustomElement('ion-icon', IonIconCmp);
     return () => {
       const { icon, ios, md } = props;
 

packages/vue/src/components/IonModal.ts

@@ -1,22 +1,23 @@
 import { defineComponent, h, ref, onMounted } from 'vue';
+import { defineCustomElement } from '../utils';
+import { IonModal as IonModalCmp } from '@ionic/core/components/ion-modal.js';
 
-export const IonModal = defineComponent({
-  name: 'IonModal',
-  setup(_, { attrs, slots }) {
-    const isOpen = ref(false);
-    const elementRef = ref();
+export const IonModal = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
+  defineCustomElement('ion-modal', IonModalCmp);
 
-    onMounted(() => {
-      elementRef.value.addEventListener('will-present', () => isOpen.value = true);
-      elementRef.value.addEventListener('did-dismiss', () => isOpen.value = false);
-    });
+  const isOpen = ref(false);
+  const elementRef = ref();
 
-    return () => {
-      return h(
-        'ion-modal',
-        { ...attrs, ref: elementRef },
-        (isOpen.value) ? slots : undefined
-      )
-    }
+  onMounted(() => {
+    elementRef.value.addEventListener('will-present', () => isOpen.value = true);
+    elementRef.value.addEventListener('did-dismiss', () => isOpen.value = false);
+  });
+
+  return () => {
+    return h(
+      'ion-modal',
+      { ...attrs, ref: elementRef },
+      (isOpen.value) ? slots : undefined
+    )
   }
 });

packages/vue/src/components/IonNav.ts

@@ -1,25 +1,25 @@
 import { defineComponent, h, shallowRef, VNode } from 'vue';
 import { VueDelegate } from '../framework-delegate';
+import { defineCustomElement } from '../utils';
+import { IonNav as IonNavCmp } from '@ionic/core/components/ion-nav.js';
 
-export const IonNav = defineComponent({
-  name: 'IonNav',
-  setup() {
-    const views = shallowRef([]);
+export const IonNav = /*@__PURE__*/ defineComponent(() => {
+  defineCustomElement('ion-nav', IonNavCmp);
+  const views = shallowRef([]);
 
-    /**
-     * Allows us to create the component
-     * within the Vue application context.
-     */
-    const addView = (component: VNode) => views.value = [...views.value, component];
-    const removeView = (component: VNode) => views.value = views.value.filter(cmp => cmp !== component);
+  /**
+   * Allows us to create the component
+   * within the Vue application context.
+   */
+  const addView = (component: VNode) => views.value = [...views.value, component];
+  const removeView = (component: VNode) => views.value = views.value.filter(cmp => cmp !== component);
 
-    const delegate = VueDelegate(addView, removeView);
-    return () => {
-      return h(
-        'ion-nav',
-        { delegate },
-        views.value
-      )
-    }
+  const delegate = VueDelegate(addView, removeView);
+  return () => {
+    return h(
+      'ion-nav',
+      { delegate },
+      views.value
+    )
   }
 });

packages/vue/src/components/IonPage.ts

@@ -1,6 +1,6 @@
 import { h, defineComponent } from 'vue';
 
-export const IonPage = defineComponent({
+export const IonPage = /*@__PURE__*/ defineComponent({
   name: 'IonPage',
   props: {
     isInOutlet: { type: Boolean, default: false },

packages/vue/src/components/IonPopover.ts

@@ -1,22 +1,23 @@
 import { defineComponent, h, ref, onMounted } from 'vue';
+import { defineCustomElement } from '../utils';
+import { IonPopover as IonPopoverCmp } from '@ionic/core/components/ion-popover.js';
 
-export const IonPopover = defineComponent({
-  name: 'IonPopover',
-  setup(_, { attrs, slots }) {
-    const isOpen = ref(false);
-    const elementRef = ref();
+export const IonPopover = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
+  defineCustomElement('ion-popover', IonPopoverCmp);
 
-    onMounted(() => {
-      elementRef.value.addEventListener('will-present', () => isOpen.value = true);
-      elementRef.value.addEventListener('did-dismiss', () => isOpen.value = false);
-    });
+  const isOpen = ref(false);
+  const elementRef = ref();
 
-    return () => {
-      return h(
-        'ion-popover',
-        { ...attrs, ref: elementRef },
-        (isOpen.value) ? slots : undefined
-      )
-    }
+  onMounted(() => {
+    elementRef.value.addEventListener('will-present', () => isOpen.value = true);
+    elementRef.value.addEventListener('did-dismiss', () => isOpen.value = false);
+  });
+
+  return () => {
+    return h(
+      'ion-popover',
+      { ...attrs, ref: elementRef },
+      (isOpen.value) ? slots : undefined
+    )
   }
 });

packages/vue/src/components/IonRouterOutlet.ts

@@ -10,14 +10,17 @@ import {
   InjectionKey,
   onUnmounted
 } from 'vue';
-import { AnimationBuilder, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
+import { AnimationBuilder, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components';
+import { IonRouterOutlet as IonRouterOutletCmp } from '@ionic/core/components/ion-router-outlet.js';
 import { matchedRouteKey, routeLocationKey, useRoute } from 'vue-router';
-import { fireLifecycle, generateId, getConfig } from '../utils';
+import { fireLifecycle, generateId, getConfig, defineCustomElement } from '../utils';
 
 let viewDepthKey: InjectionKey<0> = Symbol(0);
-export const IonRouterOutlet = defineComponent({
+export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
   name: 'IonRouterOutlet',
   setup() {
+    defineCustomElement('ion-router-outlet', IonRouterOutletCmp);
+
     const injectedRoute = inject(routeLocationKey)!;
     const route = useRoute();
     const depth = inject(viewDepthKey, 0);

packages/vue/src/components/IonTabBar.ts

@@ -1,4 +1,6 @@
 import { h, defineComponent, getCurrentInstance, inject, VNode } from 'vue';
+import { defineCustomElement } from '../utils';
+import { IonTabBar as IonTabBarCmp } from '@ionic/core/components/ion-tab-bar.js';
 
 interface TabState {
   activeTab?: string;
@@ -162,6 +164,8 @@ export const IonTabBar = defineComponent({
     ionRouter.registerHistoryChangeListener(() => this.checkActiveTab(ionRouter));
   },
   setup(_, { slots }) {
+    defineCustomElement('ion-tab-bar', IonTabBarCmp);
+
     return () => {
       return h(
         'ion-tab-bar',

packages/vue/src/components/IonTabButton.ts

@@ -1,6 +1,8 @@
 import { h, defineComponent, inject } from 'vue';
+import { defineCustomElement } from '../utils';
+import { IonTabButton as IonTabButtonCmp } from '@ionic/core/components/ion-tab-button.js';
 
-export const IonTabButton = defineComponent({
+export const IonTabButton = /*@__PURE__*/ defineComponent({
   name: 'IonTabButton',
   props: {
     _getTabState: { type: Function, default: () => { return {} } },
@@ -14,6 +16,8 @@ export const IonTabButton = defineComponent({
     target: String
   },
   setup(props, { slots }) {
+    defineCustomElement('ion-tab-button', IonTabButtonCmp);
+
     const ionRouter: any = inject('navManager');
     const onClick = (ev: Event) => {
       if (ev.cancelable) {

packages/vue/src/components/IonTabs.ts

@@ -4,7 +4,7 @@ import { IonRouterOutlet } from './IonRouterOutlet';
 const WILL_CHANGE = 'ionTabsWillChange';
 const DID_CHANGE = 'ionTabsDidChange';
 
-export const IonTabs = defineComponent({
+export const IonTabs = /*@__PURE__*/ defineComponent({
   name: 'IonTabs',
   emits: [WILL_CHANGE, DID_CHANGE],
   render() {

packages/vue/src/components/Overlays.ts

@@ -6,18 +6,23 @@ import {
   alertController,
   loadingController,
   pickerController,
-  toastController
-} from '@ionic/core';
+  toastController,
+} from '@ionic/core/components';
+
+import { IonActionSheet as IonActionSheetCmp } from '@ionic/core/components/ion-action-sheet.js'
+import { IonAlert as IonAlertCmp } from '@ionic/core/components/ion-alert.js'
+import { IonLoading as IonLoadingCmp } from '@ionic/core/components/ion-loading.js'
+import { IonPicker as IonPickerCmp } from '@ionic/core/components/ion-picker.js'
+import { IonToast as IonToastCmp } from '@ionic/core/components/ion-toast.js'
 
 import { defineOverlayContainer } from '../vue-component-lib/overlays';
 
-export const IonActionSheet = /*@__PURE__*/defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent'], actionSheetController);
-    
-export const IonAlert = /*@__PURE__*/defineOverlayContainer<JSX.IonAlert>('ion-alert', ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController);
-    
-export const IonLoading = /*@__PURE__*/defineOverlayContainer<JSX.IonLoading>('ion-loading', ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent'], loadingController);
-    
-export const IonPicker = /*@__PURE__*/defineOverlayContainer<JSX.IonPicker>('ion-picker', ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController);
-    
-export const IonToast = /*@__PURE__*/defineOverlayContainer<JSX.IonToast>('ion-toast', ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController);
-    
+export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', IonActionSheetCmp, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent'], actionSheetController);
+
+export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', IonAlertCmp, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController);
+
+export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', IonLoadingCmp, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent'], loadingController);
+
+export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', IonPickerCmp, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController);
+
+export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', IonToastCmp, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController);

packages/vue/src/controllers.ts

@@ -1,26 +1,58 @@
 import {
-  modalController,
-  popoverController
-} from '@ionic/core';
+  modalController as modalCtrl,
+  popoverController as popoverCtrl,
+  alertController as alertCtrl,
+  actionSheetController as actionSheetCtrl,
+  loadingController as loadingCtrl,
+  pickerController as pickerCtrl,
+  toastController as toastCtrl,
+} from '@ionic/core/components';
+import { defineCustomElement } from './utils';
+
 import { VueDelegate } from './framework-delegate';
 
-const oldModalCreate = modalController.create.bind(modalController);
-modalController.create = (options) => {
-  return oldModalCreate({
-    ...options,
-    delegate: VueDelegate()
-  });
+import { IonModal } from '@ionic/core/components/ion-modal.js';
+import { IonPopover } from '@ionic/core/components/ion-popover.js'
+import { IonAlert } from '@ionic/core/components/ion-alert.js'
+import { IonActionSheet } from '@ionic/core/components/ion-action-sheet.js'
+import { IonLoading } from '@ionic/core/components/ion-loading.js'
+import { IonPicker } from '@ionic/core/components/ion-picker.js'
+import { IonToast } from '@ionic/core/components/ion-toast.js'
+
+/**
+ * Wrap the controllers export from @ionic/core
+ * register the underlying Web Component and
+ * (optionally) provide a framework delegate.
+ */
+const createController = (tagName: string, customElement: any, oldController: any, useDelegate = false) => {
+  const delegate = useDelegate ? VueDelegate() : undefined;
+  const oldCreate = oldController.create.bind(oldController);
+  oldController.create = (options: any) => {
+    defineCustomElement(tagName, customElement);
+
+    return oldCreate({
+      ...options,
+      delegate
+    })
+  }
+
+  return oldController;
 }
 
-const oldPopoverCreate = popoverController.create.bind(popoverController);
-popoverController.create = (options) => {
-  return oldPopoverCreate({
-    ...options,
-    delegate: VueDelegate()
-  });
-}
+const modalController = /*@__PURE__*/ createController('ion-modal', IonModal, modalCtrl, true);
+const popoverController = /*@__PURE__*/ createController('ion-popover', IonPopover, popoverCtrl, true);
+const alertController = /*@__PURE__*/ createController('ion-alert', IonAlert, alertCtrl);
+const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet', IonActionSheet, actionSheetCtrl);
+const loadingController = /*@__PURE__*/ createController('ion-loading', IonLoading, loadingCtrl);
+const pickerController = /*@__PURE__*/ createController('ion-picker', IonPicker, pickerCtrl);
+const toastController = /*@__PURE__*/ createController('ion-toast', IonToast, toastCtrl);
 
 export {
   modalController,
-  popoverController
+  popoverController,
+  alertController,
+  actionSheetController,
+  loadingController,
+  pickerController,
+  toastController
 }

packages/vue/src/globalExtensions.ts

@@ -1,4 +1,4 @@
-import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
+import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components';
 
 declare module '@vue/runtime-core' {
   export interface ComponentCustomOptions {

packages/vue/src/hooks.ts

@@ -1,4 +1,4 @@
-import { BackButtonEvent } from '@ionic/core';
+import { BackButtonEvent } from '@ionic/core/components';
 import {
   inject,
   ref,

packages/vue/src/index.ts

@@ -32,19 +32,18 @@ export {
 
 export {
   modalController,
-  popoverController
+  popoverController,
+  alertController,
+  actionSheetController,
+  loadingController,
+  pickerController,
+  toastController
 } from './controllers';
 
 export * from './globalExtensions';
 
 export {
-  // Overlay Controllers
-  alertController,
-  actionSheetController,
   menuController,
-  loadingController,
-  pickerController,
-  toastController,
 
   // Security
   IonicSafeString,
@@ -76,7 +75,7 @@ export {
 
   // Swiper
   IonicSwiper
-} from '@ionic/core';
+} from '@ionic/core/components';
 
 // Icons that are used by internal components
 addIcons({

packages/vue/src/ionic-vue.ts

@@ -1,6 +1,5 @@
 import { App, Plugin } from 'vue';
-import { IonicConfig, setupConfig } from '@ionic/core';
-import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
+import { IonicConfig, initialize } from '@ionic/core/components';
 
 /**
 * We need to make sure that the web component fires an event
@@ -23,19 +22,23 @@ export const IonicVue: Plugin = {
 
   async install(_: App, config: IonicConfig = {}) {
     if (typeof (window as any) !== 'undefined') {
+
+      /**
+       * By default Ionic Framework hides elements that
+       * are not hydrated, but in the CE build there is no
+       * hydration.
+       * TODO: Remove when all integrations have been
+       * migrated to CE build.
+       */
+      document.documentElement.classList.add('ion-ce');
+
       const { ael, rel, ce } = getHelperFunctions();
-      setupConfig({
+      initialize({
         ...config,
         _ael: ael,
         _rel: rel,
+        _ce: ce
       });
-      await applyPolyfills();
-      await defineCustomElements(window, {
-        exclude: ['ion-tabs'],
-        ce,
-        ael,
-        rel
-      } as any);
     }
   }
 };

packages/vue/src/proxies.ts

@@ -3,12 +3,80 @@
 /* auto-generated vue proxies */
 import { defineContainer } from './vue-component-lib/utils';
 
-import type { JSX } from '@ionic/core';
+import type { JSX } from '@ionic/core/components';
+
+import { IonAccordion as IonAccordionCmp } from '@ionic/core/components/ion-accordion.js';
+import { IonAccordionGroup as IonAccordionGroupCmp } from '@ionic/core/components/ion-accordion-group.js';
+import { IonAvatar as IonAvatarCmp } from '@ionic/core/components/ion-avatar.js';
+import { IonBackdrop as IonBackdropCmp } from '@ionic/core/components/ion-backdrop.js';
+import { IonBadge as IonBadgeCmp } from '@ionic/core/components/ion-badge.js';
+import { IonButton as IonButtonCmp } from '@ionic/core/components/ion-button.js';
+import { IonButtons as IonButtonsCmp } from '@ionic/core/components/ion-buttons.js';
+import { IonCard as IonCardCmp } from '@ionic/core/components/ion-card.js';
+import { IonCardContent as IonCardContentCmp } from '@ionic/core/components/ion-card-content.js';
+import { IonCardHeader as IonCardHeaderCmp } from '@ionic/core/components/ion-card-header.js';
+import { IonCardSubtitle as IonCardSubtitleCmp } from '@ionic/core/components/ion-card-subtitle.js';
+import { IonCardTitle as IonCardTitleCmp } from '@ionic/core/components/ion-card-title.js';
+import { IonCheckbox as IonCheckboxCmp } from '@ionic/core/components/ion-checkbox.js';
+import { IonChip as IonChipCmp } from '@ionic/core/components/ion-chip.js';
+import { IonCol as IonColCmp } from '@ionic/core/components/ion-col.js';
+import { IonContent as IonContentCmp } from '@ionic/core/components/ion-content.js';
+import { IonDatetime as IonDatetimeCmp } from '@ionic/core/components/ion-datetime.js';
+import { IonFab as IonFabCmp } from '@ionic/core/components/ion-fab.js';
+import { IonFabButton as IonFabButtonCmp } from '@ionic/core/components/ion-fab-button.js';
+import { IonFabList as IonFabListCmp } from '@ionic/core/components/ion-fab-list.js';
+import { IonFooter as IonFooterCmp } from '@ionic/core/components/ion-footer.js';
+import { IonGrid as IonGridCmp } from '@ionic/core/components/ion-grid.js';
+import { IonHeader as IonHeaderCmp } from '@ionic/core/components/ion-header.js';
+import { IonImg as IonImgCmp } from '@ionic/core/components/ion-img.js';
+import { IonInfiniteScroll as IonInfiniteScrollCmp } from '@ionic/core/components/ion-infinite-scroll.js';
+import { IonInfiniteScrollContent as IonInfiniteScrollContentCmp } from '@ionic/core/components/ion-infinite-scroll-content.js';
+import { IonInput as IonInputCmp } from '@ionic/core/components/ion-input.js';
+import { IonItem as IonItemCmp } from '@ionic/core/components/ion-item.js';
+import { IonItemDivider as IonItemDividerCmp } from '@ionic/core/components/ion-item-divider.js';
+import { IonItemGroup as IonItemGroupCmp } from '@ionic/core/components/ion-item-group.js';
+import { IonItemOption as IonItemOptionCmp } from '@ionic/core/components/ion-item-option.js';
+import { IonItemOptions as IonItemOptionsCmp } from '@ionic/core/components/ion-item-options.js';
+import { IonItemSliding as IonItemSlidingCmp } from '@ionic/core/components/ion-item-sliding.js';
+import { IonLabel as IonLabelCmp } from '@ionic/core/components/ion-label.js';
+import { IonList as IonListCmp } from '@ionic/core/components/ion-list.js';
+import { IonListHeader as IonListHeaderCmp } from '@ionic/core/components/ion-list-header.js';
+import { IonMenu as IonMenuCmp } from '@ionic/core/components/ion-menu.js';
+import { IonMenuButton as IonMenuButtonCmp } from '@ionic/core/components/ion-menu-button.js';
+import { IonMenuToggle as IonMenuToggleCmp } from '@ionic/core/components/ion-menu-toggle.js';
+import { IonNav as IonNavCmp } from '@ionic/core/components/ion-nav.js';
+import { IonNavLink as IonNavLinkCmp } from '@ionic/core/components/ion-nav-link.js';
+import { IonNote as IonNoteCmp } from '@ionic/core/components/ion-note.js';
+import { IonProgressBar as IonProgressBarCmp } from '@ionic/core/components/ion-progress-bar.js';
+import { IonRadio as IonRadioCmp } from '@ionic/core/components/ion-radio.js';
+import { IonRadioGroup as IonRadioGroupCmp } from '@ionic/core/components/ion-radio-group.js';
+import { IonRange as IonRangeCmp } from '@ionic/core/components/ion-range.js';
+import { IonRefresher as IonRefresherCmp } from '@ionic/core/components/ion-refresher.js';
+import { IonRefresherContent as IonRefresherContentCmp } from '@ionic/core/components/ion-refresher-content.js';
+import { IonReorder as IonReorderCmp } from '@ionic/core/components/ion-reorder.js';
+import { IonReorderGroup as IonReorderGroupCmp } from '@ionic/core/components/ion-reorder-group.js';
+import { IonRippleEffect as IonRippleEffectCmp } from '@ionic/core/components/ion-ripple-effect.js';
+import { IonRow as IonRowCmp } from '@ionic/core/components/ion-row.js';
+import { IonSearchbar as IonSearchbarCmp } from '@ionic/core/components/ion-searchbar.js';
+import { IonSegment as IonSegmentCmp } from '@ionic/core/components/ion-segment.js';
+import { IonSegmentButton as IonSegmentButtonCmp } from '@ionic/core/components/ion-segment-button.js';
+import { IonSelect as IonSelectCmp } from '@ionic/core/components/ion-select.js';
+import { IonSelectOption as IonSelectOptionCmp } from '@ionic/core/components/ion-select-option.js';
+import { IonSkeletonText as IonSkeletonTextCmp } from '@ionic/core/components/ion-skeleton-text.js';
+import { IonSlide as IonSlideCmp } from '@ionic/core/components/ion-slide.js';
+import { IonSlides as IonSlidesCmp } from '@ionic/core/components/ion-slides.js';
+import { IonSpinner as IonSpinnerCmp } from '@ionic/core/components/ion-spinner.js';
+import { IonSplitPane as IonSplitPaneCmp } from '@ionic/core/components/ion-split-pane.js';
+import { IonText as IonTextCmp } from '@ionic/core/components/ion-text.js';
+import { IonTextarea as IonTextareaCmp } from '@ionic/core/components/ion-textarea.js';
+import { IonThumbnail as IonThumbnailCmp } from '@ionic/core/components/ion-thumbnail.js';
+import { IonTitle as IonTitleCmp } from '@ionic/core/components/ion-title.js';
+import { IonToggle as IonToggleCmp } from '@ionic/core/components/ion-toggle.js';
+import { IonToolbar as IonToolbarCmp } from '@ionic/core/components/ion-toolbar.js';
+import { IonVirtualScroll as IonVirtualScrollCmp } from '@ionic/core/components/ion-virtual-scroll.js';
 
 
-
-
-export const IonAccordion = /*@__PURE__*/ defineContainer<JSX.IonAccordion>('ion-accordion', [
+export const IonAccordion = /*@__PURE__*/ defineContainer<JSX.IonAccordion>('ion-accordion', IonAccordionCmp, [
   'value',
   'disabled',
   'readonly',
@@ -17,7 +85,7 @@ export const IonAccordion = /*@__PURE__*/ defineContainer<JSX.IonAccordion>('ion
 ]);
 
 
-export const IonAccordionGroup = /*@__PURE__*/ defineContainer<JSX.IonAccordionGroup>('ion-accordion-group', [
+export const IonAccordionGroup = /*@__PURE__*/ defineContainer<JSX.IonAccordionGroup>('ion-accordion-group', IonAccordionGroupCmp, [
   'multiple',
   'value',
   'disabled',
@@ -27,10 +95,10 @@ export const IonAccordionGroup = /*@__PURE__*/ defineContainer<JSX.IonAccordionG
 ]);
 
 
-export const IonAvatar = /*@__PURE__*/ defineContainer<JSX.IonAvatar>('ion-avatar');
+export const IonAvatar = /*@__PURE__*/ defineContainer<JSX.IonAvatar>('ion-avatar', IonAvatarCmp);
 
 
-export const IonBackdrop = /*@__PURE__*/ defineContainer<JSX.IonBackdrop>('ion-backdrop', [
+export const IonBackdrop = /*@__PURE__*/ defineContainer<JSX.IonBackdrop>('ion-backdrop', IonBackdropCmp, [
   'visible',
   'tappable',
   'stopPropagation',
@@ -38,12 +106,12 @@ export const IonBackdrop = /*@__PURE__*/ defineContainer<JSX.IonBackdrop>('ion-b
 ]);
 
 
-export const IonBadge = /*@__PURE__*/ defineContainer<JSX.IonBadge>('ion-badge', [
+export const IonBadge = /*@__PURE__*/ defineContainer<JSX.IonBadge>('ion-badge', IonBadgeCmp, [
   'color'
 ]);
 
 
-export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-button', [
+export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-button', IonButtonCmp, [
   'color',
   'buttonType',
   'disabled',
@@ -64,12 +132,12 @@ export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-butto
 ]);
 
 
-export const IonButtons = /*@__PURE__*/ defineContainer<JSX.IonButtons>('ion-buttons', [
+export const IonButtons = /*@__PURE__*/ defineContainer<JSX.IonButtons>('ion-buttons', IonButtonsCmp, [
   'collapse'
 ]);
 
 
-export const IonCard = /*@__PURE__*/ defineContainer<JSX.IonCard>('ion-card', [
+export const IonCard = /*@__PURE__*/ defineContainer<JSX.IonCard>('ion-card', IonCardCmp, [
   'color',
   'button',
   'type',
@@ -83,26 +151,26 @@ export const IonCard = /*@__PURE__*/ defineContainer<JSX.IonCard>('ion-card', [
 ]);
 
 
-export const IonCardContent = /*@__PURE__*/ defineContainer<JSX.IonCardContent>('ion-card-content');
+export const IonCardContent = /*@__PURE__*/ defineContainer<JSX.IonCardContent>('ion-card-content', IonCardContentCmp);
 
 
-export const IonCardHeader = /*@__PURE__*/ defineContainer<JSX.IonCardHeader>('ion-card-header', [
+export const IonCardHeader = /*@__PURE__*/ defineContainer<JSX.IonCardHeader>('ion-card-header', IonCardHeaderCmp, [
   'color',
   'translucent'
 ]);
 
 
-export const IonCardSubtitle = /*@__PURE__*/ defineContainer<JSX.IonCardSubtitle>('ion-card-subtitle', [
+export const IonCardSubtitle = /*@__PURE__*/ defineContainer<JSX.IonCardSubtitle>('ion-card-subtitle', IonCardSubtitleCmp, [
   'color'
 ]);
 
 
-export const IonCardTitle = /*@__PURE__*/ defineContainer<JSX.IonCardTitle>('ion-card-title', [
+export const IonCardTitle = /*@__PURE__*/ defineContainer<JSX.IonCardTitle>('ion-card-title', IonCardTitleCmp, [
   'color'
 ]);
 
 
-export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox>('ion-checkbox', [
+export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox>('ion-checkbox', IonCheckboxCmp, [
   'color',
   'name',
   'checked',
@@ -114,24 +182,17 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox>('ion-c
   'ionBlur',
   'ionStyle'
 ],
-{
-  "modelProp": "checked",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'checked', 'v-ion-change', 'ionChange');
 
 
-export const IonChip = /*@__PURE__*/ defineContainer<JSX.IonChip>('ion-chip', [
+export const IonChip = /*@__PURE__*/ defineContainer<JSX.IonChip>('ion-chip', IonChipCmp, [
   'color',
   'outline',
   'disabled'
 ]);
 
 
-export const IonCol = /*@__PURE__*/ defineContainer<JSX.IonCol>('ion-col', [
+export const IonCol = /*@__PURE__*/ defineContainer<JSX.IonCol>('ion-col', IonColCmp, [
   'offset',
   'offsetXs',
   'offsetSm',
@@ -159,7 +220,7 @@ export const IonCol = /*@__PURE__*/ defineContainer<JSX.IonCol>('ion-col', [
 ]);
 
 
-export const IonContent = /*@__PURE__*/ defineContainer<JSX.IonContent>('ion-content', [
+export const IonContent = /*@__PURE__*/ defineContainer<JSX.IonContent>('ion-content', IonContentCmp, [
   'color',
   'fullscreen',
   'forceOverscroll',
@@ -172,7 +233,7 @@ export const IonContent = /*@__PURE__*/ defineContainer<JSX.IonContent>('ion-con
 ]);
 
 
-export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-datetime', [
+export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-datetime', IonDatetimeCmp, [
   'color',
   'name',
   'disabled',
@@ -197,17 +258,10 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime>('ion-d
   'ionBlur',
   'ionStyle'
 ],
-{
-  "modelProp": "value",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'value', 'v-ion-change', 'ionChange');
 
 
-export const IonFab = /*@__PURE__*/ defineContainer<JSX.IonFab>('ion-fab', [
+export const IonFab = /*@__PURE__*/ defineContainer<JSX.IonFab>('ion-fab', IonFabCmp, [
   'horizontal',
   'vertical',
   'edge',
@@ -215,7 +269,7 @@ export const IonFab = /*@__PURE__*/ defineContainer<JSX.IonFab>('ion-fab', [
 ]);
 
 
-export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion-fab-button', [
+export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion-fab-button', IonFabButtonCmp, [
   'color',
   'activated',
   'disabled',
@@ -235,29 +289,29 @@ export const IonFabButton = /*@__PURE__*/ defineContainer<JSX.IonFabButton>('ion
 ]);
 
 
-export const IonFabList = /*@__PURE__*/ defineContainer<JSX.IonFabList>('ion-fab-list', [
+export const IonFabList = /*@__PURE__*/ defineContainer<JSX.IonFabList>('ion-fab-list', IonFabListCmp, [
   'activated',
   'side'
 ]);
 
 
-export const IonFooter = /*@__PURE__*/ defineContainer<JSX.IonFooter>('ion-footer', [
+export const IonFooter = /*@__PURE__*/ defineContainer<JSX.IonFooter>('ion-footer', IonFooterCmp, [
   'translucent'
 ]);
 
 
-export const IonGrid = /*@__PURE__*/ defineContainer<JSX.IonGrid>('ion-grid', [
+export const IonGrid = /*@__PURE__*/ defineContainer<JSX.IonGrid>('ion-grid', IonGridCmp, [
   'fixed'
 ]);
 
 
-export const IonHeader = /*@__PURE__*/ defineContainer<JSX.IonHeader>('ion-header', [
+export const IonHeader = /*@__PURE__*/ defineContainer<JSX.IonHeader>('ion-header', IonHeaderCmp, [
   'collapse',
   'translucent'
 ]);
 
 
-export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', [
+export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', IonImgCmp, [
   'alt',
   'src',
   'ionImgWillLoad',
@@ -266,7 +320,7 @@ export const IonImg = /*@__PURE__*/ defineContainer<JSX.IonImg>('ion-img', [
 ]);
 
 
-export const IonInfiniteScroll = /*@__PURE__*/ defineContainer<JSX.IonInfiniteScroll>('ion-infinite-scroll', [
+export const IonInfiniteScroll = /*@__PURE__*/ defineContainer<JSX.IonInfiniteScroll>('ion-infinite-scroll', IonInfiniteScrollCmp, [
   'threshold',
   'disabled',
   'position',
@@ -274,13 +328,13 @@ export const IonInfiniteScroll = /*@__PURE__*/ defineContainer<JSX.IonInfiniteSc
 ]);
 
 
-export const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer<JSX.IonInfiniteScrollContent>('ion-infinite-scroll-content', [
+export const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer<JSX.IonInfiniteScrollContent>('ion-infinite-scroll-content', IonInfiniteScrollContentCmp, [
   'loadingSpinner',
   'loadingText'
 ]);
 
 
-export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input', [
+export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input', IonInputCmp, [
   'fireFocusEvents',
   'color',
   'accept',
@@ -315,17 +369,10 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput>('ion-input',
   'ionFocus',
   'ionStyle'
 ],
-{
-  "modelProp": "value",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'value', 'v-ion-change', 'ionChange');
 
 
-export const IonItem = /*@__PURE__*/ defineContainer<JSX.IonItem>('ion-item', [
+export const IonItem = /*@__PURE__*/ defineContainer<JSX.IonItem>('ion-item', IonItemCmp, [
   'color',
   'button',
   'detail',
@@ -342,16 +389,16 @@ export const IonItem = /*@__PURE__*/ defineContainer<JSX.IonItem>('ion-item', [
 ]);
 
 
-export const IonItemDivider = /*@__PURE__*/ defineContainer<JSX.IonItemDivider>('ion-item-divider', [
+export const IonItemDivider = /*@__PURE__*/ defineContainer<JSX.IonItemDivider>('ion-item-divider', IonItemDividerCmp, [
   'color',
   'sticky'
 ]);
 
 
-export const IonItemGroup = /*@__PURE__*/ defineContainer<JSX.IonItemGroup>('ion-item-group');
+export const IonItemGroup = /*@__PURE__*/ defineContainer<JSX.IonItemGroup>('ion-item-group', IonItemGroupCmp);
 
 
-export const IonItemOption = /*@__PURE__*/ defineContainer<JSX.IonItemOption>('ion-item-option', [
+export const IonItemOption = /*@__PURE__*/ defineContainer<JSX.IonItemOption>('ion-item-option', IonItemOptionCmp, [
   'color',
   'disabled',
   'download',
@@ -363,19 +410,19 @@ export const IonItemOption = /*@__PURE__*/ defineContainer<JSX.IonItemOption>('i
 ]);
 
 
-export const IonItemOptions = /*@__PURE__*/ defineContainer<JSX.IonItemOptions>('ion-item-options', [
+export const IonItemOptions = /*@__PURE__*/ defineContainer<JSX.IonItemOptions>('ion-item-options', IonItemOptionsCmp, [
   'side',
   'ionSwipe'
 ]);
 
 
-export const IonItemSliding = /*@__PURE__*/ defineContainer<JSX.IonItemSliding>('ion-item-sliding', [
+export const IonItemSliding = /*@__PURE__*/ defineContainer<JSX.IonItemSliding>('ion-item-sliding', IonItemSlidingCmp, [
   'disabled',
   'ionDrag'
 ]);
 
 
-export const IonLabel = /*@__PURE__*/ defineContainer<JSX.IonLabel>('ion-label', [
+export const IonLabel = /*@__PURE__*/ defineContainer<JSX.IonLabel>('ion-label', IonLabelCmp, [
   'color',
   'position',
   'ionColor',
@@ -383,19 +430,19 @@ export const IonLabel = /*@__PURE__*/ defineContainer<JSX.IonLabel>('ion-label',
 ]);
 
 
-export const IonList = /*@__PURE__*/ defineContainer<JSX.IonList>('ion-list', [
+export const IonList = /*@__PURE__*/ defineContainer<JSX.IonList>('ion-list', IonListCmp, [
   'lines',
   'inset'
 ]);
 
 
-export const IonListHeader = /*@__PURE__*/ defineContainer<JSX.IonListHeader>('ion-list-header', [
+export const IonListHeader = /*@__PURE__*/ defineContainer<JSX.IonListHeader>('ion-list-header', IonListHeaderCmp, [
   'color',
   'lines'
 ]);
 
 
-export const IonMenu = /*@__PURE__*/ defineContainer<JSX.IonMenu>('ion-menu', [
+export const IonMenu = /*@__PURE__*/ defineContainer<JSX.IonMenu>('ion-menu', IonMenuCmp, [
   'contentId',
   'menuId',
   'type',
@@ -411,7 +458,7 @@ export const IonMenu = /*@__PURE__*/ defineContainer<JSX.IonMenu>('ion-menu', [
 ]);
 
 
-export const IonMenuButton = /*@__PURE__*/ defineContainer<JSX.IonMenuButton>('ion-menu-button', [
+export const IonMenuButton = /*@__PURE__*/ defineContainer<JSX.IonMenuButton>('ion-menu-button', IonMenuButtonCmp, [
   'color',
   'disabled',
   'menu',
@@ -420,13 +467,13 @@ export const IonMenuButton = /*@__PURE__*/ defineContainer<JSX.IonMenuButton>('i
 ]);
 
 
-export const IonMenuToggle = /*@__PURE__*/ defineContainer<JSX.IonMenuToggle>('ion-menu-toggle', [
+export const IonMenuToggle = /*@__PURE__*/ defineContainer<JSX.IonMenuToggle>('ion-menu-toggle', IonMenuToggleCmp, [
   'menu',
   'autoHide'
 ]);
 
 
-export const IonNav = /*@__PURE__*/ defineContainer<JSX.IonNav>('ion-nav', [
+export const IonNav = /*@__PURE__*/ defineContainer<JSX.IonNav>('ion-nav', IonNavCmp, [
   'delegate',
   'swipeGesture',
   'animated',
@@ -439,7 +486,7 @@ export const IonNav = /*@__PURE__*/ defineContainer<JSX.IonNav>('ion-nav', [
 ]);
 
 
-export const IonNavLink = /*@__PURE__*/ defineContainer<JSX.IonNavLink>('ion-nav-link', [
+export const IonNavLink = /*@__PURE__*/ defineContainer<JSX.IonNavLink>('ion-nav-link', IonNavLinkCmp, [
   'component',
   'componentProps',
   'routerDirection',
@@ -447,12 +494,12 @@ export const IonNavLink = /*@__PURE__*/ defineContainer<JSX.IonNavLink>('ion-nav
 ]);
 
 
-export const IonNote = /*@__PURE__*/ defineContainer<JSX.IonNote>('ion-note', [
+export const IonNote = /*@__PURE__*/ defineContainer<JSX.IonNote>('ion-note', IonNoteCmp, [
   'color'
 ]);
 
 
-export const IonProgressBar = /*@__PURE__*/ defineContainer<JSX.IonProgressBar>('ion-progress-bar', [
+export const IonProgressBar = /*@__PURE__*/ defineContainer<JSX.IonProgressBar>('ion-progress-bar', IonProgressBarCmp, [
   'type',
   'reversed',
   'value',
@@ -461,7 +508,7 @@ export const IonProgressBar = /*@__PURE__*/ defineContainer<JSX.IonProgressBar>(
 ]);
 
 
-export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio>('ion-radio', [
+export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio>('ion-radio', IonRadioCmp, [
   'color',
   'name',
   'disabled',
@@ -470,33 +517,19 @@ export const IonRadio = /*@__PURE__*/ defineContainer<JSX.IonRadio>('ion-radio',
   'ionFocus',
   'ionBlur'
 ],
-{
-  "modelProp": "value",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'value', 'v-ion-change', 'ionChange');
 
 
-export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup>('ion-radio-group', [
+export const IonRadioGroup = /*@__PURE__*/ defineContainer<JSX.IonRadioGroup>('ion-radio-group', IonRadioGroupCmp, [
   'allowEmptySelection',
   'name',
   'value',
   'ionChange'
 ],
-{
-  "modelProp": "value",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'value', 'v-ion-change', 'ionChange');
 
 
-export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range', [
+export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range', IonRangeCmp, [
   'color',
   'debounce',
   'name',
@@ -514,17 +547,10 @@ export const IonRange = /*@__PURE__*/ defineContainer<JSX.IonRange>('ion-range',
   'ionFocus',
   'ionBlur'
 ],
-{
-  "modelProp": "value",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'value', 'v-ion-change', 'ionChange');
 
 
-export const IonRefresher = /*@__PURE__*/ defineContainer<JSX.IonRefresher>('ion-refresher', [
+export const IonRefresher = /*@__PURE__*/ defineContainer<JSX.IonRefresher>('ion-refresher', IonRefresherCmp, [
   'pullMin',
   'pullMax',
   'closeDuration',
@@ -537,7 +563,7 @@ export const IonRefresher = /*@__PURE__*/ defineContainer<JSX.IonRefresher>('ion
 ]);
 
 
-export const IonRefresherContent = /*@__PURE__*/ defineContainer<JSX.IonRefresherContent>('ion-refresher-content', [
+export const IonRefresherContent = /*@__PURE__*/ defineContainer<JSX.IonRefresherContent>('ion-refresher-content', IonRefresherContentCmp, [
   'pullingIcon',
   'pullingText',
   'refreshingSpinner',
@@ -545,24 +571,24 @@ export const IonRefresherContent = /*@__PURE__*/ defineContainer<JSX.IonRefreshe
 ]);
 
 
-export const IonReorder = /*@__PURE__*/ defineContainer<JSX.IonReorder>('ion-reorder');
+export const IonReorder = /*@__PURE__*/ defineContainer<JSX.IonReorder>('ion-reorder', IonReorderCmp);
 
 
-export const IonReorderGroup = /*@__PURE__*/ defineContainer<JSX.IonReorderGroup>('ion-reorder-group', [
+export const IonReorderGroup = /*@__PURE__*/ defineContainer<JSX.IonReorderGroup>('ion-reorder-group', IonReorderGroupCmp, [
   'disabled',
   'ionItemReorder'
 ]);
 
 
-export const IonRippleEffect = /*@__PURE__*/ defineContainer<JSX.IonRippleEffect>('ion-ripple-effect', [
+export const IonRippleEffect = /*@__PURE__*/ defineContainer<JSX.IonRippleEffect>('ion-ripple-effect', IonRippleEffectCmp, [
   'type'
 ]);
 
 
-export const IonRow = /*@__PURE__*/ defineContainer<JSX.IonRow>('ion-row');
+export const IonRow = /*@__PURE__*/ defineContainer<JSX.IonRow>('ion-row', IonRowCmp);
 
 
-export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion-searchbar', [
+export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion-searchbar', IonSearchbarCmp, [
   'color',
   'animated',
   'autocomplete',
@@ -589,17 +615,10 @@ export const IonSearchbar = /*@__PURE__*/ defineContainer<JSX.IonSearchbar>('ion
   'ionFocus',
   'ionStyle'
 ],
-{
-  "modelProp": "value",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'value', 'v-ion-change', 'ionChange');
 
 
-export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-segment', [
+export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-segment', IonSegmentCmp, [
   'color',
   'disabled',
   'scrollable',
@@ -609,33 +628,19 @@ export const IonSegment = /*@__PURE__*/ defineContainer<JSX.IonSegment>('ion-seg
   'ionSelect',
   'ionStyle'
 ],
-{
-  "modelProp": "value",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'value', 'v-ion-change', 'ionChange');
 
 
-export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButton>('ion-segment-button', [
+export const IonSegmentButton = /*@__PURE__*/ defineContainer<JSX.IonSegmentButton>('ion-segment-button', IonSegmentButtonCmp, [
   'disabled',
   'layout',
   'type',
   'value'
 ],
-{
-  "modelProp": "value",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'value', 'v-ion-change', 'ionChange');
 
 
-export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect>('ion-select', [
+export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect>('ion-select', IonSelectCmp, [
   'disabled',
   'cancelText',
   'okText',
@@ -653,31 +658,24 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect>('ion-selec
   'ionBlur',
   'ionStyle'
 ],
-{
-  "modelProp": "value",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'value', 'v-ion-change', 'ionChange');
 
 
-export const IonSelectOption = /*@__PURE__*/ defineContainer<JSX.IonSelectOption>('ion-select-option', [
+export const IonSelectOption = /*@__PURE__*/ defineContainer<JSX.IonSelectOption>('ion-select-option', IonSelectOptionCmp, [
   'disabled',
   'value'
 ]);
 
 
-export const IonSkeletonText = /*@__PURE__*/ defineContainer<JSX.IonSkeletonText>('ion-skeleton-text', [
+export const IonSkeletonText = /*@__PURE__*/ defineContainer<JSX.IonSkeletonText>('ion-skeleton-text', IonSkeletonTextCmp, [
   'animated'
 ]);
 
 
-export const IonSlide = /*@__PURE__*/ defineContainer<JSX.IonSlide>('ion-slide');
+export const IonSlide = /*@__PURE__*/ defineContainer<JSX.IonSlide>('ion-slide', IonSlideCmp);
 
 
-export const IonSlides = /*@__PURE__*/ defineContainer<JSX.IonSlides>('ion-slides', [
+export const IonSlides = /*@__PURE__*/ defineContainer<JSX.IonSlides>('ion-slides', IonSlidesCmp, [
   'options',
   'pager',
   'scrollbar',
@@ -700,7 +698,7 @@ export const IonSlides = /*@__PURE__*/ defineContainer<JSX.IonSlides>('ion-slide
 ]);
 
 
-export const IonSpinner = /*@__PURE__*/ defineContainer<JSX.IonSpinner>('ion-spinner', [
+export const IonSpinner = /*@__PURE__*/ defineContainer<JSX.IonSpinner>('ion-spinner', IonSpinnerCmp, [
   'color',
   'duration',
   'name',
@@ -708,7 +706,7 @@ export const IonSpinner = /*@__PURE__*/ defineContainer<JSX.IonSpinner>('ion-spi
 ]);
 
 
-export const IonSplitPane = /*@__PURE__*/ defineContainer<JSX.IonSplitPane>('ion-split-pane', [
+export const IonSplitPane = /*@__PURE__*/ defineContainer<JSX.IonSplitPane>('ion-split-pane', IonSplitPaneCmp, [
   'contentId',
   'disabled',
   'when',
@@ -716,12 +714,12 @@ export const IonSplitPane = /*@__PURE__*/ defineContainer<JSX.IonSplitPane>('ion
 ]);
 
 
-export const IonText = /*@__PURE__*/ defineContainer<JSX.IonText>('ion-text', [
+export const IonText = /*@__PURE__*/ defineContainer<JSX.IonText>('ion-text', IonTextCmp, [
   'color'
 ]);
 
 
-export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-textarea', [
+export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-textarea', IonTextareaCmp, [
   'fireFocusEvents',
   'color',
   'autocapitalize',
@@ -749,27 +747,20 @@ export const IonTextarea = /*@__PURE__*/ defineContainer<JSX.IonTextarea>('ion-t
   'ionBlur',
   'ionFocus'
 ],
-{
-  "modelProp": "value",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'value', 'v-ion-change', 'ionChange');
 
 
-export const IonThumbnail = /*@__PURE__*/ defineContainer<JSX.IonThumbnail>('ion-thumbnail');
+export const IonThumbnail = /*@__PURE__*/ defineContainer<JSX.IonThumbnail>('ion-thumbnail', IonThumbnailCmp);
 
 
-export const IonTitle = /*@__PURE__*/ defineContainer<JSX.IonTitle>('ion-title', [
+export const IonTitle = /*@__PURE__*/ defineContainer<JSX.IonTitle>('ion-title', IonTitleCmp, [
   'color',
   'size',
   'ionStyle'
 ]);
 
 
-export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggle', [
+export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggle', IonToggleCmp, [
   'color',
   'name',
   'checked',
@@ -780,22 +771,15 @@ export const IonToggle = /*@__PURE__*/ defineContainer<JSX.IonToggle>('ion-toggl
   'ionBlur',
   'ionStyle'
 ],
-{
-  "modelProp": "checked",
-  "modelUpdateEvent": [
-    "v-ionChange",
-    "v-ion-change"
-  ],
-  "externalModelUpdateEvent": "ionChange"
-});
+'checked', 'v-ion-change', 'ionChange');
 
 
-export const IonToolbar = /*@__PURE__*/ defineContainer<JSX.IonToolbar>('ion-toolbar', [
+export const IonToolbar = /*@__PURE__*/ defineContainer<JSX.IonToolbar>('ion-toolbar', IonToolbarCmp, [
   'color'
 ]);
 
 
-export const IonVirtualScroll = /*@__PURE__*/ defineContainer<JSX.IonVirtualScroll>('ion-virtual-scroll', [
+export const IonVirtualScroll = /*@__PURE__*/ defineContainer<JSX.IonVirtualScroll>('ion-virtual-scroll', IonVirtualScrollCmp, [
   'approxItemHeight',
   'approxHeaderHeight',
   'approxFooterHeight',

packages/vue/src/utils.ts

@@ -1,5 +1,5 @@
 import { Ref, ComponentPublicInstance } from 'vue';
-import { Config as CoreConfig, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
+import { Config as CoreConfig, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components';
 
 type LIFECYCLE_EVENTS = typeof LIFECYCLE_WILL_ENTER | typeof LIFECYCLE_DID_ENTER | typeof LIFECYCLE_WILL_LEAVE | typeof LIFECYCLE_DID_LEAVE;
 
@@ -57,3 +57,11 @@ export const getConfig = (): CoreConfig | null => {
   }
   return null;
 };
+
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (typeof customElements === 'undefined') return;
+
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, customElement);
+  }
+}

packages/vue/src/vue-component-lib/overlays.ts

@@ -1,10 +1,11 @@
 import { defineComponent, h, ref, VNode } from 'vue';
+import { defineCustomElement } from '../utils';
 
 export interface OverlayProps {
   isOpen?: boolean;
 }
 
-export const defineOverlayContainer = <Props extends object>(name: string, componentProps: string[] = [], controller: any) => {
+export const defineOverlayContainer = <Props extends object>(name: string, customElement: any, componentProps: string[] = [], controller: any) => {
   const eventListeners = [
     { componentEv: `${name}-will-present`, frameworkEv: 'willPresent' },
     { componentEv: `${name}-did-present`, frameworkEv: 'didPresent' },
@@ -13,6 +14,8 @@ export const defineOverlayContainer = <Props extends object>(name: string, compo
   ];
 
   const Container = defineComponent<Props & OverlayProps>((props, { slots, emit }) => {
+    defineCustomElement(name, customElement);
+
     const overlay = ref();
     const onVnodeMounted = async () => {
       const isOpen = props.isOpen;

packages/vue/src/vue-component-lib/utils.ts

@@ -14,12 +14,6 @@ interface NavManager<T = any> {
   navigate: (options: T) => void;
 }
 
-interface ComponentOptions {
-  modelProp?: string;
-  modelUpdateEvent?: string | string[];
-  externalModelUpdateEvent?: string;
-}
-
 const getComponentClasses = (classes: unknown) => {
   return (classes as string)?.split(' ') || [];
 };
@@ -36,18 +30,35 @@ const getElementClasses = (ref: Ref<HTMLElement | undefined>, componentClasses:
 * @prop componentProps - An array of properties on the
 * component. These usually match up with the @Prop definitions
 * in each component's TSX file.
-* @prop componentOptions - An object that defines additional
-* options for the component such as router or v-model
-* integrations.
+* @prop customElement - An option custom element instance to pass
+* to customElements.define. Only set if `includeImportCustomElements: true` in your config.
+* @prop modelProp - The prop that v-model binds to (i.e. value)
+* @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+* @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been
+* correctly updated when a user's event callback fires.
 */
-export const defineContainer = <Props>(name: string, componentProps: string[] = [], componentOptions: ComponentOptions = {}) => {
-  const { modelProp, modelUpdateEvent, externalModelUpdateEvent } = componentOptions;
-
+export const defineContainer = <Props>(
+  name: string,
+  customElement: any,
+  componentProps: string[] = [],
+  modelProp?: string,
+  modelUpdateEvent?: string,
+  externalModelUpdateEvent?: string
+) => {
   /**
   * Create a Vue component wrapper around a Web Component.
   * Note: The `props` here are not all properties on a component.
   * They refer to whatever properties are set on an instance of a component.
   */
+
+  if (
+    customElement !== undefined &&
+    typeof customElements !== 'undefined' &&
+    !customElements.get(name)
+  ) {
+    customElements.define(name, customElement);
+  }
+
   const Container = defineComponent<Props & InputProps>((props, { attrs, slots, emit }) => {
     let modelPropValue = (props as any)[modelProp];
     const containerRef = ref<HTMLElement>();
@@ -69,7 +80,9 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
              * native web component, but the v-model will
              * not have been updated yet.
              */
-            emit(externalModelUpdateEvent, e);
+            if (externalModelUpdateEvent) {
+              emit(externalModelUpdateEvent, e);
+            }
           });
         });
       }
@@ -117,13 +130,21 @@ export const defineContainer = <Props>(name: string, componentProps: string[] =
         ref: containerRef,
         class: getElementClasses(containerRef, classes),
         onClick: handleClick,
-        onVnodeBeforeMount: (modelUpdateEvent && externalModelUpdateEvent) ? onVnodeBeforeMount : undefined
+        onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined
       };
 
       if (modelProp) {
+        /**
+         * Starting in Vue 3.1.0, all properties are
+         * added as keys to the props object, even if
+         * they are not being used. In order to correctly
+         * account for both value props and v-model props,
+         * we need to check if the key exists for Vue <3.1.0
+         * and then check if it is not undefined for Vue >= 3.1.0.
+         */
         propsToAdd = {
           ...propsToAdd,
-          [modelProp]: props.hasOwnProperty('modelValue') ? props.modelValue : modelPropValue
+          [modelProp]: props.hasOwnProperty(MODEL_VALUE) && props[MODEL_VALUE] !== undefined ? props.modelValue : modelPropValue
         }
       }
 

packages/vue/test-app/jest.config.js

@@ -3,7 +3,7 @@ module.exports = {
   transform: {
     "^.+\\.vue$": "vue-jest"
   },
-  transformIgnorePatterns: ["node_modules/(?!@ionic/vue)"],
+  transformIgnorePatterns: ['/node_modules/(?!ionicons|@stencil/core|@ionic/core|@ionic/vue|@ionic/vue-router)'],
   globals: {
     "ts-jest": {
       diagnostics: {

packages/vue/test-app/package-lock.json

@@ -13,6 +13,7 @@
         "vue-router": "^4.0.0-rc.4"
       },
       "devDependencies": {
+        "@stencil/core": "2.6.0",
         "@types/jest": "^24.0.19",
         "@typescript-eslint/eslint-plugin": "^2.33.0",
         "@typescript-eslint/parser": "^2.33.0",
@@ -1702,9 +1703,9 @@
       "dev": true
     },
     "node_modules/@stencil/core": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.0.tgz",
-      "integrity": "sha512-gpoYJEYzu5LV2hr7uPZklug3zXhEbYGKyNodPfmOOYZtO9q42l7RQ3cAnC8MzEoF4jFrfemgtevGik8sqn9ClQ==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.6.0.tgz",
+      "integrity": "sha512-QsxWayZyusnqSZrlCl81R71rA3KqFjVVQSH4E0rGN15F1GdQaFonKlHLyCOLKLig1zzC+DQkLLiUuocexuvdeQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -24111,9 +24112,9 @@
       "dev": true
     },
     "@stencil/core": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.0.tgz",
-      "integrity": "sha512-gpoYJEYzu5LV2hr7uPZklug3zXhEbYGKyNodPfmOOYZtO9q42l7RQ3cAnC8MzEoF4jFrfemgtevGik8sqn9ClQ=="
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.6.0.tgz",
+      "integrity": "sha512-QsxWayZyusnqSZrlCl81R71rA3KqFjVVQSH4E0rGN15F1GdQaFonKlHLyCOLKLig1zzC+DQkLLiUuocexuvdeQ=="
     },
     "@types/anymatch": {
       "version": "1.3.1",

packages/vue/test-app/package.json

@@ -18,6 +18,7 @@
     "vue-router": "^4.0.0-rc.4"
   },
   "devDependencies": {
+    "@stencil/core": "2.6.0",
     "@types/jest": "^24.0.19",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",

packages/vue/test-app/scripts/sync.sh

@@ -9,11 +9,11 @@ rm -rf node_modules/@ionic/vue-router/dist
 cp -a ../../vue-router/dist node_modules/@ionic/vue-router/dist
 cp -a ../../vue-router/package.json node_modules/@ionic/vue-router/package.json
 
-# Copy core dist
-rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/loader
-cp -a ../../../core/dist node_modules/@ionic/core/dist
-cp -a ../../../core/loader node_modules/@ionic/core/loader
+# Copy core dist and components
+rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/components
 cp -a ../../../core/package.json node_modules/@ionic/core/package.json
+cp -a ../../../core/dist node_modules/@ionic/core/dist
+cp -a ../../../core/components node_modules/@ionic/core/components
 
 # Copy ionicons
 rm -rf node_modules/ionicons

packages/vue/test-app/src/theme/variables.css

@@ -229,4 +229,4 @@ http://ionicframework.com/docs/theming/ */
 
     --ion-card-background: #1e1e1e;
   }
-}
+}

packages/vue/types/proxies.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from '@ionic/core';
+import { JSX } from '@ionic/core/components';
 export declare const IonActionSheet: import("vue").FunctionalComponent<JSX.IonActionSheet & import("./vue-component-lib/utils").InputProps, {}>;
 export declare const IonAlert: import("vue").FunctionalComponent<JSX.IonAlert & import("./vue-component-lib/utils").InputProps, {}>;
 export declare const IonApp: import("vue").FunctionalComponent<JSX.IonApp & import("./vue-component-lib/utils").InputProps, {}>;
@@ -85,4 +85,4 @@ export declare const IonToast: import("vue").FunctionalComponent<JSX.IonToast &
 export declare const IonToggle: import("vue").FunctionalComponent<JSX.IonToggle & import("./vue-component-lib/utils").InputProps, {}>;
 export declare const IonToolbar: import("vue").FunctionalComponent<JSX.IonToolbar & import("./vue-component-lib/utils").InputProps, {}>;
 export declare const IonVirtualScroll: import("vue").FunctionalComponent<JSX.IonVirtualScroll & import("./vue-component-lib/utils").InputProps, {}>;
-//# sourceMappingURL=proxies.d.ts.map
+//# sourceMappingURL=proxies.d.ts.map