feat(tryOnMounted): support target arguement (#3185)

Co-authored-by: Anthony Fu <[email protected]>

Author: tolking

packages/shared/tryOnBeforeMount/index.ts

@@ -1,15 +1,17 @@
-import { getCurrentInstance, nextTick, onBeforeMount } from 'vue-demi'
-import type { Fn } from '../utils'
+import { nextTick, onBeforeMount } from 'vue-demi'
+import { type Fn, getLifeCycleTarget } from '../utils'
 
 /**
  * Call onBeforeMount() if it's inside a component lifecycle, if not, just call the function
  *
  * @param fn
  * @param sync if set to false, it will run in the nextTick() of Vue
+ * @param target
  */
-export function tryOnBeforeMount(fn: Fn, sync = true) {
-  if (getCurrentInstance())
-    onBeforeMount(fn)
+export function tryOnBeforeMount(fn: Fn, sync = true, target?: any) {
+  const instance = getLifeCycleTarget(target)
+  if (instance)
+    onBeforeMount(fn, instance)
   else if (sync)
     fn()
   else

packages/shared/tryOnBeforeUnmount/index.ts

@@ -1,12 +1,14 @@
-import { getCurrentInstance, onBeforeUnmount } from 'vue-demi'
-import type { Fn } from '../utils'
+import { onBeforeUnmount } from 'vue-demi'
+import { type Fn, getLifeCycleTarget } from '../utils'
 
 /**
  * Call onBeforeUnmount() if it's inside a component lifecycle, if not, do nothing
  *
  * @param fn
+ * @param target
  */
-export function tryOnBeforeUnmount(fn: Fn) {
-  if (getCurrentInstance())
-    onBeforeUnmount(fn)
+export function tryOnBeforeUnmount(fn: Fn, target?: any) {
+  const instance = getLifeCycleTarget(target)
+  if (instance)
+    onBeforeUnmount(fn, instance)
 }

packages/shared/tryOnMounted/index.ts

@@ -1,16 +1,18 @@
 // eslint-disable-next-line no-restricted-imports
-import { getCurrentInstance, nextTick, onMounted } from 'vue-demi'
-import type { Fn } from '../utils'
+import { nextTick, onMounted } from 'vue-demi'
+import { type Fn, getLifeCycleTarget } from '../utils'
 
 /**
  * Call onMounted() if it's inside a component lifecycle, if not, just call the function
  *
  * @param fn
  * @param sync if set to false, it will run in the nextTick() of Vue
+ * @param target
  */
-export function tryOnMounted(fn: Fn, sync = true) {
-  if (getCurrentInstance())
-    onMounted(fn)
+export function tryOnMounted(fn: Fn, sync = true, target?: any) {
+  const instance = getLifeCycleTarget(target)
+  if (instance)
+    onMounted(fn, instance)
   else if (sync)
     fn()
   else

packages/shared/tryOnUnmounted/index.ts

@@ -1,13 +1,15 @@
 // eslint-disable-next-line no-restricted-imports
-import { getCurrentInstance, onUnmounted } from 'vue-demi'
-import type { Fn } from '../utils'
+import { onUnmounted } from 'vue-demi'
+import { type Fn, getLifeCycleTarget } from '../utils'
 
 /**
  * Call onUnmounted() if it's inside a component lifecycle, if not, do nothing
  *
  * @param fn
+ * @param target
  */
-export function tryOnUnmounted(fn: Fn) {
-  if (getCurrentInstance())
-    onUnmounted(fn)
+export function tryOnUnmounted(fn: Fn, target?: any) {
+  const instance = getLifeCycleTarget(target)
+  if (instance)
+    onUnmounted(fn, instance)
 }

packages/shared/utils/index.ts

@@ -1,3 +1,5 @@
+import { getCurrentInstance, isVue3 } from 'vue-demi'
+
 export * from './is'
 export * from './filters'
 export * from './types'
@@ -113,3 +115,9 @@ export function objectOmit<O extends object, T extends keyof O>(obj: O, keys: T[
 export function objectEntries<T extends object>(obj: T) {
   return Object.entries(obj) as Array<[keyof T, T[keyof T]]>
 }
+
+export function getLifeCycleTarget(target?: any) {
+  const instance = target || getCurrentInstance()
+
+  return isVue3 ? instance : instance?.proxy
+}