wip(vapor): v-model checkbox, radio, select, dynamic

Author: yyx990803

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

@@ -37,8 +37,8 @@ import {
 } from '@vue/compiler-core'
 import { genEventHandler } from './event'
 import { genDirectiveModifiers, genDirectivesForElement } from './directive'
-import { genModelHandler } from './modelValue'
 import { genBlock } from './block'
+import { genModelHandler } from './vModel'
 
 export function genCreateComponent(
   operation: CreateComponentIRNode,
@@ -223,7 +223,7 @@ function genModelEvent(prop: IRProp, context: CodegenContext): CodeFragment[] {
     : ['["onUpdate:" + ', ...genExpression(prop.key, context), ']']
   const handler = genModelHandler(prop.values[0], context)
 
-  return [',', NEWLINE, ...name, ': ', ...handler]
+  return [',', NEWLINE, ...name, ': () => ', ...handler]
 }
 
 function genModelModifiers(

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

@@ -5,7 +5,6 @@ import { genSetDynamicEvents, genSetEvent } from './event'
 import { genFor } from './for'
 import { genSetHtml } from './html'
 import { genIf } from './if'
-import { genSetModelValue } from './modelValue'
 import { genDynamicProps, genSetProp } from './prop'
 import { genDeclareOldRef, genSetTemplateRef } from './templateRef'
 import { genCreateTextNode, genSetText } from './text'
@@ -51,8 +50,6 @@ export function genOperation(
       return genSetHtml(oper, context)
     case IRNodeTypes.SET_TEMPLATE_REF:
       return genSetTemplateRef(oper, context)
-    case IRNodeTypes.SET_MODEL_VALUE:
-      return genSetModelValue(oper, context)
     case IRNodeTypes.CREATE_TEXT_NODE:
       return genCreateTextNode(oper, context)
     case IRNodeTypes.INSERT_NODE:

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

@@ -2,6 +2,7 @@ import type { CodegenContext } from '../generate'
 import type { DirectiveIRNode } from '../ir'
 import { type CodeFragment, NEWLINE, genCall } from './utils'
 import { genExpression } from './expression'
+import type { SimpleExpressionNode } from '@vue/compiler-dom'
 
 const helperMap = {
   text: 'applyTextModel',
@@ -30,15 +31,22 @@ export function genVModel(
       // getter
       [`() => (`, ...genExpression(exp!, context), `)`],
       // setter
-      [
-        `${context.options.isTS ? `($event: any)` : `$event`} => (`,
-        ...genExpression(exp!, context, '$event'),
-        ')',
-      ],
+      genModelHandler(exp!, context),
       // modifiers
       modifiers.length
         ? `{ ${modifiers.map(e => e.content + ': true').join(',')} }`
         : undefined,
     ),
   ]
 }
+
+export function genModelHandler(
+  exp: SimpleExpressionNode,
+  context: CodegenContext,
+): CodeFragment[] {
+  return [
+    `${context.options.isTS ? `(_value: any)` : `_value`} => (`,
+    ...genExpression(exp, context, '_value'),
+    ')',
+  ]
+}

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

@@ -1,5 +1,4 @@
 import type {
-  BindingTypes,
   CompoundExpressionNode,
   DirectiveNode,
   RootNode,
@@ -23,7 +22,6 @@ export enum IRNodeTypes {
   SET_DYNAMIC_EVENTS,
   SET_HTML,
   SET_TEMPLATE_REF,
-  SET_MODEL_VALUE,
 
   INSERT_NODE,
   PREPEND_NODE,
@@ -154,15 +152,6 @@ export interface SetTemplateRefIRNode extends BaseIRNode {
   effect: boolean
 }
 
-export interface SetModelValueIRNode extends BaseIRNode {
-  type: IRNodeTypes.SET_MODEL_VALUE
-  element: number
-  key: SimpleExpressionNode
-  value: SimpleExpressionNode
-  bindingType?: BindingTypes
-  isComponent: boolean
-}
-
 export interface CreateTextNodeIRNode extends BaseIRNode {
   type: IRNodeTypes.CREATE_TEXT_NODE
   id: number
@@ -227,7 +216,6 @@ export type OperationNode =
   | SetDynamicEventsIRNode
   | SetHtmlIRNode
   | SetTemplateRefIRNode
-  | SetModelValueIRNode
   | CreateTextNodeIRNode
   | InsertNodeIRNode
   | PrependNodeIRNode

packages/compiler-vapor/src/ir/index.ts

@@ -139,15 +139,6 @@ export const transformVModel: DirectiveTransform = (dir, node, context) => {
     )
   }
 
-  // TODO this should no longer be needed
-  context.registerOperation({
-    type: IRNodeTypes.SET_MODEL_VALUE,
-    element: context.reference(),
-    key: arg || createSimpleExpression('modelValue', true),
-    value: exp,
-    isComponent,
-  })
-
   if (modelType)
     context.registerOperation({
       type: IRNodeTypes.DIRECTIVE,