feat: support @vue:mounted & @vnode-mounted in Vue 3

cloydlau · Oct 6, 2023 · 0f11f1e · 0f11f1e
1 parent b4f534e
commit 0f11f1e
Show file tree

Hide file tree

Showing 10 changed files with 206 additions and 171 deletions.
diff --git a/README.md b/README.md
@@ -40,7 +40,7 @@ app.use(YourComponent, {
   },
 
   // Global Hook
-  '@vnodeMounted': function () {
+  '@vue:mounted': function () {
     console.log('Global Mounted')
   },
 
@@ -109,7 +109,7 @@ Entangled in global/local/default parameters, which one to choose? It should be
     - Support triggering either global listener or local listener
     - Support current instance (`this`) access
 - Support global **Hooks** (internal API)
-    - Such as `@vnodeMounted` in Vue 3, see https://github.com/vuejs/core/issues/4457
+    - Such as `@vue:mounted`/`@vnode-mounted`/`@vnodeMounted`/`onVnodeMounted` in Vue 3, see https://github.com/vuejs/core/issues/4457
     - Such as `@hook:mounted` in Vue 2, see https://github.com/vuejs/vue/issues/10312
     - Support current instance (`this`) access
 - Support global **Slots** & **Scoped Slots**

diff --git a/__tests__/conclude.test.ts b/__tests__/conclude.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import conclude from '../src/conclude'
+import { conclude } from 'vue-global-config'
 
 describe('conclude', () => {
   describe('非plain object', () => {

diff --git a/demo/vue2.6/YourComponent.vue b/demo/vue2.6/YourComponent.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-for-template-key-on-child -->
 <script>
-import { conclude, getLocalListeners, listenGlobalHooks, resolveConfig } from '../../src'
+import { conclude, getLocalListeners, listenGlobalHooks, resolveConfig } from 'vue-global-config'
 
 const globalProps = {}
 const globalAttrs = {}

diff --git a/demo/vue2.7/YourComponent/Component.vue b/demo/vue2.7/YourComponent/Component.vue
@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-v-for-template-key-on-child -->
 <script lang="ts" setup>
 import { computed, useAttrs } from 'vue'
-import { conclude, getLocalListeners, listenGlobalHooks } from '../../../src'
+import { conclude, getLocalListeners, listenGlobalHooks } from 'vue-global-config'
 import { globalAttrs, globalHooks, globalListeners, globalProps, globalSlots } from './index'
 
 const props = defineProps(['title'])

diff --git a/demo/vue2.7/YourComponent/index.ts b/demo/vue2.7/YourComponent/index.ts
@@ -1,5 +1,5 @@
 import type { Plugin, install } from 'vue-demi'
-import { resolveConfig } from '../../../src'
+import { resolveConfig } from 'vue-global-config'
 import Component from './Component.vue'
 
 type SFCWithInstall<T> = T & Plugin & { install: typeof install }

diff --git a/demo/vue3/YourComponent/Component.vue b/demo/vue3/YourComponent/Component.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, useAttrs, useSlots } from 'vue'
-import { conclude } from '../../../src'
+import { conclude } from 'vue-global-config'
 import { globalAttrs, globalHooks, globalListeners, globalProps, globalSlots } from './index'
 
 const props = defineProps(['title'])

diff --git a/demo/vue3/YourComponent/index.ts b/demo/vue3/YourComponent/index.ts
@@ -1,5 +1,5 @@
 import type { Plugin, install } from 'vue-demi'
-import { resolveConfig } from '../../../src'
+import { resolveConfig } from 'vue-global-config'
 import Component from './Component.vue'
 
 type SFCWithInstall<T> = T & Plugin & { install: typeof install }

diff --git a/demo/vue3/index.ts b/demo/vue3/index.ts
@@ -41,9 +41,24 @@ const app = createApp(App)
       console.log('Global LeftCheckChange')
     },
 
+    // Global Hook
+    '@vue:mounted': function () {
+      console.log('Global Mounted (from @vue:mounted)')
+    },
+
+    // Global Hook
+    '@vnode-mounted': function () {
+      console.log('Global Mounted (from @vnode-mounted)')
+    },
+
     // Global Hook
     '@vnodeMounted': function () {
-      console.log('Global Mounted')
+      console.log('Global Mounted (from @vnodeMounted)')
+    },
+
+    // Global Hook
+    'onVnodeMounted': function () {
+      console.log('Global Mounted (from onVnodeMounted)')
     },
 
     // Global Slot