From d60973b2449b29a982b752a98b10d2b043ecff2f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 13 Oct 2022 12:35:15 -0500 Subject: [PATCH] fix(vue): routing components define child components (#26107) --- packages/vue/src/components/IonApp.ts | 5 ++--- packages/vue/src/components/IonBackButton.ts | 7 ++----- packages/vue/src/components/IonIcon.ts | 5 ++--- packages/vue/src/components/IonNav.ts | 5 ++--- packages/vue/src/components/IonRouterOutlet.ts | 6 +++--- packages/vue/src/components/IonTabBar.ts | 5 ++--- packages/vue/src/components/IonTabButton.ts | 5 ++--- packages/vue/src/utils.ts | 8 -------- 8 files changed, 15 insertions(+), 31 deletions(-) diff --git a/packages/vue/src/components/IonApp.ts b/packages/vue/src/components/IonApp.ts index 9dc4771760..3355a662c3 100644 --- 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 index 2f86022ff3..7d4468a2b4 100644 --- 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 index 4bcc75c992..02944de8c6 100644 --- 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 index af7889ea37..982a5ff027 100644 --- 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 index 6ab254557a..339f24942e 100644 --- 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 index 02473295c6..e61bd8629a 100644 --- 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 index b80a135475..dc522e9e5c 100644 --- 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 index bf38e9a449..db46362024 100644 --- 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); - } -}