feat(compiler-vapor): v-model for component

Author: Jevon617

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

@@ -1,4 +1,4 @@
-import { extend, isArray } from '@vue/shared'
+import { camelize, extend, isArray } from '@vue/shared'
 import type { CodegenContext } from '../generate'
 import type { CreateComponentIRNode, IRProp } from '../ir'
 import {
@@ -13,6 +13,8 @@ import { genExpression } from './expression'
 import { genPropKey } from './prop'
 import { createSimpleExpression } from '@vue/compiler-dom'
 import { genEventHandler } from './event'
+import { genDirectiveModifiers } from './directive'
+import { genModelHandler } from './modelValue'
 
 // TODO: generate component slots
 export function genCreateComponent(
@@ -79,8 +81,34 @@ export function genCreateComponent(
           ...(prop.handler
             ? genEventHandler(context, prop.values[0])
             : ['() => (', ...genExpression(prop.values[0], context), ')']),
+          ...(prop.model
+            ? [...genModel(prop, context), ...genModifiers(prop, context)]
+            : []),
         ]
       }),
     )
+
+    function genModel(prop: IRProp, context: CodegenContext) {
+      const name = prop.key.isStatic
+        ? [JSON.stringify(`onUpdate:${camelize(prop.key.content)}`)]
+        : ['[`onUpdate:${', ...genExpression(prop.key, context), '}`]']
+      const handler = genModelHandler(prop.values[0], context)
+
+      return [',', ...name, ':', ...handler]
+    }
+
+    function genModifiers(prop: IRProp, context: CodegenContext) {
+      const { key, modifiers } = prop
+      if (!isArray(modifiers) || modifiers.length === 0) return []
+
+      const modifiersKey = key.isStatic
+        ? key.content === 'modelValue'
+          ? [`modelModifiers`]
+          : [`${key.content}Modifiers`]
+        : ['[`${', ...genExpression(key, context), '}Modifiers`]']
+
+      const modifiersVal = genDirectiveModifiers(modifiers)
+      return [',', ...modifiersKey, ':', `() => ({${modifiersVal}})`]
+    }
   }
 }

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

@@ -35,7 +35,7 @@ export function genWithDirective(
         ? NULL
         : false
     const modifiers = dir.modifiers.length
-      ? ['{ ', genDirectiveModifiers(), ' }']
+      ? ['{ ', genDirectiveModifiers(dir.modifiers), ' }']
       : false
 
     return genMulti(['[', ']', ', '], directive, value, argument, modifiers)
@@ -61,14 +61,14 @@ export function genWithDirective(
         }
       }
     }
-
-    function genDirectiveModifiers() {
-      return dir.modifiers
-        .map(
-          value =>
-            `${isSimpleIdentifier(value) ? value : JSON.stringify(value)}: true`,
-        )
-        .join(', ')
-    }
   }
 }
+
+export function genDirectiveModifiers(modifiers: string[]) {
+  return modifiers
+    .map(
+      value =>
+        `${isSimpleIdentifier(value) ? value : JSON.stringify(value)}: true`,
+    )
+    .join(', ')
+}

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

@@ -3,28 +3,36 @@ import { genExpression } from './expression'
 import type { SetModelValueIRNode } from '../ir'
 import type { CodegenContext } from '../generate'
 import { type CodeFragment, NEWLINE, genCall } from './utils'
+import type { SimpleExpressionNode } from '@vue/compiler-dom'
 
 export function genSetModelValue(
   oper: SetModelValueIRNode,
   context: CodegenContext,
 ): CodeFragment[] {
-  const {
-    vaporHelper,
-
-    options: { isTS },
-  } = context
-
+  const { vaporHelper } = context
   const name = oper.key.isStatic
     ? [JSON.stringify(`update:${camelize(oper.key.content)}`)]
     : ['`update:${', ...genExpression(oper.key, context), '}`']
-  const handler = [
-    `() => ${isTS ? `($event: any)` : `$event`} => (`,
-    ...genExpression(oper.value, context, '$event'),
-    ')',
-  ]
+
+  const handler = genModelHandler(oper.value, context)
 
   return [
     NEWLINE,
     ...genCall(vaporHelper('delegate'), `n${oper.element}`, name, handler),
   ]
 }
+
+export function genModelHandler(
+  value: SimpleExpressionNode,
+  context: CodegenContext,
+) {
+  const {
+    options: { isTS },
+  } = context
+
+  return [
+    `() => ${isTS ? `($event: any)` : `$event`} => (`,
+    ...genExpression(value, context, '$event'),
+    ')',
+  ]
+}

packages/compiler-vapor/src/transform.ts

@@ -44,6 +44,8 @@ export interface DirectiveTransformResult {
   modifier?: '.' | '^'
   runtimeCamelize?: boolean
   handler?: boolean
+  model?: boolean
+  modifiers?: string[]
 }
 
 // A structural directive transform is technically also a NodeTransform;

packages/compiler-vapor/src/transforms/vModel.ts

@@ -65,6 +65,12 @@ export const transformVModel: DirectiveTransform = (dir, node, context) => {
   let runtimeDirective: VaporHelper | undefined
 
   if (isComponent) {
+    return {
+      key: arg ? arg : createSimpleExpression('modelValue', true),
+      value: exp,
+      model: true,
+      modifiers: dir.modifiers,
+    }
   } else {
     if (dir.arg)
       context.options.onError(