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

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

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
     }
 

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>