wip(vapor): custom directives

packages/compiler-vapor/src/generators/directive.ts

@@ -57,7 +57,6 @@ function genCustomDirectives(
 
   return [
     NEWLINE,
-    // @ts-expect-error
     ...genCall(helper('withVaporDirectives'), element, directives),
   ]
 

packages/runtime-vapor/src/directives/custom.ts

@@ -0,0 +1,36 @@
+import type { DirectiveModifiers } from '@vue/runtime-dom'
+import type { VaporComponentInstance } from '../component'
+import { renderEffect } from '../renderEffect'
+
+// !! vapor directive is different from vdom directives
+export type VaporDirective = (
+  node: Element | VaporComponentInstance,
+  value?: () => any,
+  argument?: string,
+  modifiers?: DirectiveModifiers,
+) => (() => void) | void
+
+type DirectiveArguments = Array<
+  | [VaporDirective | undefined]
+  | [VaporDirective | undefined, () => any]
+  | [VaporDirective | undefined, () => any, argument: string]
+  | [
+      VaporDirective | undefined,
+      value: () => any,
+      argument: string,
+      modifiers: DirectiveModifiers,
+    ]
+>
+
+export function withVaporDirectives(
+  node: Element | VaporComponentInstance,
+  dirs: DirectiveArguments,
+): void {
+  // TODO handle custom directive on component
+  for (const [dir, value, argument, modifiers] of dirs) {
+    if (dir) {
+      const ret = dir(node, value, argument, modifiers)
+      if (ret) renderEffect(ret)
+    }
+  }
+}

packages/runtime-vapor/src/directives/vModel.ts

@@ -1,4 +1,5 @@
 import {
+  currentInstance,
   onMounted,
   vModelCheckboxInit,
   vModelCheckboxUpdate,
@@ -26,12 +27,20 @@ type VaporModelDirective<
   modifiers?: { [key in Modifiers]?: true },
 ) => void
 
+function ensureMounted(cb: () => void) {
+  if (currentInstance!.isMounted) {
+    cb()
+  } else {
+    onMounted(cb)
+  }
+}
+
 export const applyTextModel: VaporModelDirective<
   HTMLInputElement | HTMLTextAreaElement,
   'trim' | 'number' | 'lazy'
 > = (el, get, set, { trim, number, lazy } = {}) => {
   vModelTextInit(el, trim, number, lazy, set)
-  onMounted(() => {
+  ensureMounted(() => {
     let value: any
     renderEffect(() => {
       vModelTextUpdate(el, value, (value = get()), trim, number, lazy)
@@ -45,7 +54,7 @@ export const applyCheckboxModel: VaporModelDirective<HTMLInputElement> = (
   set,
 ) => {
   vModelCheckboxInit(el, set)
-  onMounted(() => {
+  ensureMounted(() => {
     let value: any
     renderEffect(() => {
       vModelCheckboxUpdate(
@@ -64,7 +73,7 @@ export const applyRadioModel: VaporModelDirective<HTMLInputElement> = (
   set,
 ) => {
   addEventListener(el, 'change', () => set(vModelGetValue(el)))
-  onMounted(() => {
+  ensureMounted(() => {
     let value: any
     renderEffect(() => {
       if (value !== (value = get())) {
@@ -79,7 +88,7 @@ export const applySelectModel: VaporModelDirective<
   'number'
 > = (el, get, set, modifiers) => {
   vModelSelectInit(el, get(), modifiers && modifiers.number, set)
-  onMounted(() => {
+  ensureMounted(() => {
     renderEffect(() => vModelSetSelected(el, traverse(get())))
   })
 }

packages/runtime-vapor/src/index.ts

@@ -2,6 +2,7 @@
 export { createVaporApp } from './apiCreateApp'
 export { defineVaporComponent } from './apiDefineComponent'
 export { vaporInteropPlugin } from './vdomInterop'
+export type { VaporDirective } from './directives/custom'
 
 // compiler-use only
 export { insert, prepend, remove } from './block'
@@ -39,3 +40,4 @@ export {
   applySelectModel,
   applyDynamicModel,
 } from './directives/vModel'
+export { withVaporDirectives } from './directives/custom'