javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(vue): composition api lifecycle methods (#22241)

Browse Source
This commit is contained in:
Michael Tintiuc
2020-11-10 16:14:24 +02:00
committed by GitHub
parent 1267945480
commit f5b0299729
7 changed files with 152 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/vue/src/components/IonRouterOutlet.ts
View File

@ -10,9 +10,9 @@ import {
InjectionKey,
onUnmounted
} from 'vue';
import { AnimationBuilder } from '@ionic/core';
import { AnimationBuilder, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
import { useRoute } from 'vue-router';
import { fireLifecycle, generateId, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '../utils';
import { fireLifecycle, generateId } from '../utils';
let viewDepthKey: InjectionKey<0> = Symbol(0);
export const IonRouterOutlet = defineComponent({
@ -194,13 +194,13 @@ export const IonRouterOutlet = defineComponent({
if (enteringViewItem === leavingViewItem) return;
fireLifecycle(enteringViewItem.vueComponentRef, LIFECYCLE_WILL_ENTER);
fireLifecycle(enteringViewItem.vueComponent, enteringViewItem.vueComponentRef, LIFECYCLE_WILL_ENTER);
if (leavingViewItem) {
let animationBuilder = routerAnimation;
const leavingEl = leavingViewItem.ionPageElement;
fireLifecycle(leavingViewItem.vueComponentRef, LIFECYCLE_WILL_LEAVE);
fireLifecycle(leavingViewItem.vueComponent, leavingViewItem.vueComponentRef, LIFECYCLE_WILL_LEAVE);
/**
* If we are going back from a page that
@ -242,7 +242,7 @@ export const IonRouterOutlet = defineComponent({
}
}
fireLifecycle(leavingViewItem.vueComponentRef, LIFECYCLE_DID_LEAVE);
fireLifecycle(leavingViewItem.vueComponent, leavingViewItem.vueComponentRef, LIFECYCLE_DID_LEAVE);
} else {
/**
* If there is no leaving element, just show
@ -253,7 +253,7 @@ export const IonRouterOutlet = defineComponent({
requestAnimationFrame(() => enteringEl.classList.remove('ion-page-invisible'));
}
fireLifecycle(enteringViewItem.vueComponentRef, LIFECYCLE_DID_ENTER);
fireLifecycle(enteringViewItem.vueComponent, enteringViewItem.vueComponentRef, LIFECYCLE_DID_ENTER);
components.value = viewStacks.getChildrenToRender(id);
}

10
packages/vue/src/globalExtensions.ts Normal file
View File

@ -0,0 +1,10 @@
import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
declare module '@vue/runtime-core' {
export interface ComponentCustomOptions {
[LIFECYCLE_DID_ENTER]?: () => void;
[LIFECYCLE_DID_LEAVE]?: () => void;
[LIFECYCLE_WILL_ENTER]?: () => void;
[LIFECYCLE_WILL_LEAVE]?: () => void;
}
}

2
packages/vue/src/index.ts
View File

@ -23,6 +23,8 @@ export {
popoverController
} from './controllers';
export * from './globalExtensions';
export {
// Overlay Controllers
alertController,

19
packages/vue/src/utils.ts
View File

@ -1,9 +1,7 @@
import { Ref } from 'vue';
import { Ref, ComponentPublicInstance } from 'vue';
import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core';
export const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
export const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
export const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
export const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
type LIFECYCLE_EVENTS = typeof LIFECYCLE_WILL_ENTER | typeof LIFECYCLE_DID_ENTER | typeof LIFECYCLE_WILL_LEAVE | typeof LIFECYCLE_DID_LEAVE;
const ids: { [k: string]: number } = { main: 0 };
@ -14,8 +12,13 @@ export const generateId = (type = 'main') => {
};
// TODO types
export const fireLifecycle = (vueComponentRef: Ref<any>, lifecycle: string) => {
if (vueComponentRef && vueComponentRef.value && vueComponentRef.value[lifecycle]) {
vueComponentRef.value[lifecycle]();
export const fireLifecycle = (vueComponent: any, vueInstance: Ref<ComponentPublicInstance>, lifecycle: LIFECYCLE_EVENTS) => {
if (vueComponent?.[lifecycle]) {
vueComponent[lifecycle].bind(vueInstance?.value)();
}
const instance = vueInstance?.value as any;
if (instance?.[lifecycle]) {
instance[lifecycle]();
}
}