feat(compiler-vapor): functional custom directive support updated hooks (#58)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

diff --git a/packages/runtime-vapor/src/directive.ts b/packages/runtime-vapor/src/directive.ts
index f255153fdc406ce155de26c29ba96d8e18fdcb64..3906eb7234696052c74a0a4db3b17bc113d30388 100644 (file)
--- a/packages/runtime-vapor/src/directive.ts
+++ b/packages/runtime-vapor/src/directive.ts
@@ -76,9 +76,9 @@ export function withDirectives<T extends Node>(
     let [dir, source, arg, modifiers] = directive
     if (!dir) continue
     if (isFunction(dir)) {
-      // TODO function directive
       dir = {
-        created: dir,
+        mounted: dir,
+        updated: dir,
       } satisfies ObjectDirective
     }
 

diff --git a/playground/src/directive.vue b/playground/src/directive.vue
index 1b9202606085cf65548362aa3ead176560a45437..81d4a3e5322471d2f21c8b3f58c425acad09ec30 100644 (file)
--- a/playground/src/directive.vue
+++ b/playground/src/directive.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ObjectDirective } from '@vue/vapor'
+import { ObjectDirective, FunctionDirective, ref } from '@vue/vapor'
 
-const text = 'created (overwrite by v-text), '
+const text = ref('created (overwrite by v-text), ')
 const vDirective: ObjectDirective<HTMLDivElement, undefined> = {
   created(node) {
     if (!node.parentElement) {
@@ -18,8 +18,19 @@ const vDirective: ObjectDirective<HTMLDivElement, undefined> = {
     if (node.parentElement) node.textContent += 'mounted, '
   }
 }
+const vDirectiveSimple: FunctionDirective<HTMLDivElement> = (node, binding) => {
+  console.log(node, binding)
+}
+const handleClick = () => {
+  text.value = 'change'
+}
 </script>
 
 <template>
-  <div v-directive:foo.bar="text" v-text="text" />
+  <div
+    v-directive:foo.bar="text"
+    v-text="text"
+    v-directive-simple="text"
+    @click="handleClick"
+  />
 </template>