fix(vue): routing components define child components (#26107)

ionic-team · Oct 13, 2022 · d60973b · d60973b
1 parent 5e48926
commit d60973b
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 31 deletions.
diff --git a/packages/vue/src/components/IonApp.ts b/packages/vue/src/components/IonApp.ts
@@ -1,10 +1,9 @@
 import { h, defineComponent, shallowRef, VNode } from 'vue';
-import { defineCustomElement } from '../utils';
-import { IonApp as IonAppCmp } from '@ionic/core/components/ion-app.js';
+import { defineCustomElement } from '@ionic/core/components/ion-app.js';
 
 const userComponents = shallowRef([]);
 export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-  defineCustomElement('ion-app', IonAppCmp);
+  defineCustomElement();
   return () => {
     return h(
       'ion-app',

diff --git a/packages/vue/src/components/IonBackButton.ts b/packages/vue/src/components/IonBackButton.ts
@@ -1,11 +1,8 @@
 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';
+import { defineCustomElement } from '@ionic/core/components/ion-back-button.js';
 
 export const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-  defineCustomElement('ion-back-button', IonBackButtonCmp);
-  defineCustomElement('ion-icon', IonIconCmp);
+  defineCustomElement();
 
   const ionRouter: any = inject('navManager');
 

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

diff --git a/packages/vue/src/components/IonNav.ts b/packages/vue/src/components/IonNav.ts
@@ -1,10 +1,9 @@
 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';
+import { defineCustomElement } from '@ionic/core/components/ion-nav.js';
 
 export const IonNav = /*@__PURE__*/ defineComponent(() => {
-  defineCustomElement('ion-nav', IonNavCmp);
+  defineCustomElement();
   const views = shallowRef([]);
 
   /**

diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts
@@ -12,9 +12,9 @@ import {
   Ref
 } from 'vue';
 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 { defineCustomElement } from '@ionic/core/components/ion-router-outlet.js';
 import { matchedRouteKey, routeLocationKey, useRoute } from 'vue-router';
-import { fireLifecycle, generateId, getConfig, defineCustomElement } from '../utils';
+import { fireLifecycle, generateId, getConfig } from '../utils';
 
 const isViewVisible = (enteringEl: HTMLElement) => {
   return !enteringEl.classList.contains('ion-page-hidden') && !enteringEl.classList.contains('ion-page-invisible');
@@ -24,7 +24,7 @@ let viewDepthKey: InjectionKey<0> = Symbol(0);
 export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
   name: 'IonRouterOutlet',
   setup() {
-    defineCustomElement('ion-router-outlet', IonRouterOutletCmp);
+    defineCustomElement();
 
     const injectedRoute = inject(routeLocationKey)!;
     const route = useRoute();

diff --git a/packages/vue/src/components/IonTabBar.ts b/packages/vue/src/components/IonTabBar.ts
@@ -1,6 +1,5 @@
 import { h, defineComponent, getCurrentInstance, inject, VNode } from 'vue';
-import { defineCustomElement } from '../utils';
-import { IonTabBar as IonTabBarCmp } from '@ionic/core/components/ion-tab-bar.js';
+import { defineCustomElement } from '@ionic/core/components/ion-tab-bar.js';
 
 interface TabState {
   activeTab?: string;
@@ -172,7 +171,7 @@ export const IonTabBar = defineComponent({
     ionRouter.registerHistoryChangeListener(() => this.checkActiveTab(ionRouter));
   },
   setup(_, { slots }) {
-    defineCustomElement('ion-tab-bar', IonTabBarCmp);
+    defineCustomElement();
 
     return () => {
       return h(

diff --git a/packages/vue/src/components/IonTabButton.ts b/packages/vue/src/components/IonTabButton.ts
@@ -1,6 +1,5 @@
 import { h, defineComponent, inject } from 'vue';
-import { defineCustomElement } from '../utils';
-import { IonTabButton as IonTabButtonCmp } from '@ionic/core/components/ion-tab-button.js';
+import { defineCustomElement } from '@ionic/core/components/ion-tab-button.js';
 
 export const IonTabButton = /*@__PURE__*/ defineComponent({
   name: 'IonTabButton',
@@ -16,7 +15,7 @@ export const IonTabButton = /*@__PURE__*/ defineComponent({
     target: String
   },
   setup(props, { slots }) {
-    defineCustomElement('ion-tab-button', IonTabButtonCmp);
+    defineCustomElement();
 
     const ionRouter: any = inject('navManager');
     const onClick = (ev: Event) => {

diff --git a/packages/vue/src/utils.ts b/packages/vue/src/utils.ts
@@ -57,11 +57,3 @@ 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);
-  }
-}