From 578c1222591503bc36143c88a84b9a9589c6f743 Mon Sep 17 00:00:00 2001 From: Mr-ccyou <1787176370@qq.com> Date: Thu, 18 Apr 2024 11:53:20 +0800 Subject: [PATCH 1/4] feat(compiler-vapor): v-model for component --- .../src/generators/component.ts | 30 ++++++++++++++++++- .../src/generators/directive.ts | 20 ++++++------- .../src/generators/modelValue.ts | 30 ++++++++++++------- packages/compiler-vapor/src/transform.ts | 2 ++ .../compiler-vapor/src/transforms/vModel.ts | 6 ++++ 5 files changed, 66 insertions(+), 22 deletions(-) diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts index ec9b9064e..ee8c25553 100644 --- a/packages/compiler-vapor/src/generators/component.ts +++ b/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}})`] + } } } diff --git a/packages/compiler-vapor/src/generators/directive.ts b/packages/compiler-vapor/src/generators/directive.ts index 6dcbef50c..452b79f9d 100644 --- a/packages/compiler-vapor/src/generators/directive.ts +++ b/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(', ') +} diff --git a/packages/compiler-vapor/src/generators/modelValue.ts b/packages/compiler-vapor/src/generators/modelValue.ts index fec871391..2a3ab4cda 100644 --- a/packages/compiler-vapor/src/generators/modelValue.ts +++ b/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'), + ')', + ] +} diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts index b00069fbd..7be6b3137 100644 --- a/packages/compiler-vapor/src/transform.ts +++ b/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; diff --git a/packages/compiler-vapor/src/transforms/vModel.ts b/packages/compiler-vapor/src/transforms/vModel.ts index 8831db92d..357ec46be 100644 --- a/packages/compiler-vapor/src/transforms/vModel.ts +++ b/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( From f76d222ad25dff4dae2d9b536a128c0b444f959a Mon Sep 17 00:00:00 2001 From: Mr-ccyou <1787176370@qq.com> Date: Fri, 19 Apr 2024 11:43:51 +0800 Subject: [PATCH 2/4] test: add test cases --- .../__snapshots__/vModel.spec.ts.snap | 251 ++++++++++++++++++ .../__tests__/transforms/vModel.spec.ts | 169 +++++++++++- 2 files changed, 419 insertions(+), 1 deletion(-) diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap index 8f3203a9e..42dd8b2e7 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap @@ -1,5 +1,141 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`compiler: vModel transform > component > v-model for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event),modelModifiers:() => ({trim: true, "bar-baz": true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > component > v-model for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > component > v-model with arguments for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + foo: () => (_ctx.foo),"onUpdate:foo":() => $event => (_ctx.foo = $event),fooModifiers:() => ({trim: true}), + bar: () => (_ctx.bar),"onUpdate:bar":() => $event => (_ctx.bar = $event),barModifiers:() => ({number: true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > component > v-model with arguments for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + bar: () => (_ctx.foo),"onUpdate:bar":() => $event => (_ctx.foo = $event) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > component > v-model with dynamic arguments for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + [_ctx.foo]: () => (_ctx.foo),[\`onUpdate:\${_ctx.foo}\`]:() => $event => (_ctx.foo = $event),[\`\${_ctx.foo}Modifiers\`]:() => ({trim: true}), + [_ctx.bar]: () => (_ctx.bar),[\`onUpdate:\${_ctx.bar}\`]:() => $event => (_ctx.bar = $event),[\`\${_ctx.bar}Modifiers\`]:() => ({number: true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > component > v-model with dynamic arguments for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + [_ctx.arg]: () => (_ctx.foo),[\`onUpdate:\${_ctx.arg}\`]:() => $event => (_ctx.foo = $event) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > errors > v-model for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event),modelModifiers:() => ({trim: true, "bar-baz": true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > errors > v-model for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > errors > v-model with arguments for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + foo: () => (_ctx.foo),"onUpdate:foo":() => $event => (_ctx.foo = $event),fooModifiers:() => ({trim: true}), + bar: () => (_ctx.bar),"onUpdate:bar":() => $event => (_ctx.bar = $event),barModifiers:() => ({number: true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > errors > v-model with arguments for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + bar: () => (_ctx.foo),"onUpdate:bar":() => $event => (_ctx.foo = $event) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > errors > v-model with dynamic arguments for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + [_ctx.foo]: () => (_ctx.foo),[\`onUpdate:\${_ctx.foo}\`]:() => $event => (_ctx.foo = $event),[\`\${_ctx.foo}Modifiers\`]:() => ({trim: true}), + [_ctx.bar]: () => (_ctx.bar),[\`onUpdate:\${_ctx.bar}\`]:() => $event => (_ctx.bar = $event),[\`\${_ctx.bar}Modifiers\`]:() => ({number: true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > errors > v-model with dynamic arguments for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + [_ctx.arg]: () => (_ctx.foo),[\`onUpdate:\${_ctx.arg}\`]:() => $event => (_ctx.foo = $event) + }], true) + return n0 +}" +`; + exports[`compiler: vModel transform > modifiers > .lazy 1`] = ` "import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor'; const t0 = _template("") @@ -36,6 +172,41 @@ export function render(_ctx) { }" `; +exports[`compiler: vModel transform > should generate modelModifiers for component v-model 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event),modelModifiers:() => ({trim: true, "bar-baz": true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > should generate modelModifiers for component v-model with arguments 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + foo: () => (_ctx.foo),"onUpdate:foo":() => $event => (_ctx.foo = $event),fooModifiers:() => ({trim: true}), + bar: () => (_ctx.bar),"onUpdate:bar":() => $event => (_ctx.bar = $event),barModifiers:() => ({number: true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > should generate modelModifiers for component v-model with dynamic arguments 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + [_ctx.foo]: () => (_ctx.foo),[\`onUpdate:\${_ctx.foo}\`]:() => $event => (_ctx.foo = $event),[\`\${_ctx.foo}Modifiers\`]:() => ({trim: true}), + [_ctx.bar]: () => (_ctx.bar),[\`onUpdate:\${_ctx.bar}\`]:() => $event => (_ctx.bar = $event),[\`\${_ctx.bar}Modifiers\`]:() => ({number: true}) + }], true) + return n0 +}" +`; + exports[`compiler: vModel transform > should support input (checkbox) 1`] = ` "import { vModelCheckbox as _vModelCheckbox, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor'; const t0 = _template("") @@ -177,3 +348,83 @@ export function render(_ctx) { return n0 }" `; + +exports[`compiler: vModel transform > v-model for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event),modelModifiers:() => ({trim: true, "bar-baz": true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > v-model for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > v-model with arguments for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + foo: () => (_ctx.foo),"onUpdate:foo":() => $event => (_ctx.foo = $event),fooModifiers:() => ({trim: true}), + bar: () => (_ctx.bar),"onUpdate:bar":() => $event => (_ctx.bar = $event),barModifiers:() => ({number: true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > v-model with arguments for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + bar: () => (_ctx.foo),"onUpdate:bar":() => $event => (_ctx.foo = $event) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > v-model with dynamic arguments for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + [_ctx.foo]: () => (_ctx.foo),[\`onUpdate:\${_ctx.foo}\`]:() => $event => (_ctx.foo = $event),[\`\${_ctx.foo}Modifiers\`]:() => ({trim: true}), + [_ctx.bar]: () => (_ctx.bar),[\`onUpdate:\${_ctx.bar}\`]:() => $event => (_ctx.bar = $event),[\`\${_ctx.bar}Modifiers\`]:() => ({number: true}) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > v-model with dynamic arguments for component should work 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + [_ctx.arg]: () => (_ctx.foo),[\`onUpdate:\${_ctx.arg}\`]:() => $event => (_ctx.foo = $event) + }], true) + return n0 +}" +`; + +exports[`compiler: vModel transform > v-model with static arguments for component should generate modelModifiers 1`] = ` +"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; + +export function render(_ctx) { + const n0 = _createComponent(_resolveComponent("Comp"), [{ + foo: () => (_ctx.foo),"onUpdate:foo":() => $event => (_ctx.foo = $event),fooModifiers:() => ({trim: true}), + bar: () => (_ctx.bar),"onUpdate:bar":() => $event => (_ctx.bar = $event),barModifiers:() => ({number: true}) + }], true) + return n0 +}" +`; diff --git a/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts b/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts index 862f54480..7e8055e82 100644 --- a/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts @@ -1,5 +1,10 @@ import { makeCompile } from './_utils' -import { transformChildren, transformElement, transformVModel } from '../../src' +import { + IRNodeTypes, + transformChildren, + transformElement, + transformVModel, +} from '../../src' import { BindingTypes, DOMErrorCodes } from '@vue/compiler-dom' const compileWithVModel = makeCompile({ @@ -198,4 +203,166 @@ describe('compiler: vModel transform', () => { expect(code).toMatchSnapshot() }) + + describe('component', () => { + test('v-model for component should work', () => { + const { code, ir } = compileWithVModel('') + expect(code).toMatchSnapshot() + expect(code).contains( + `modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event)`, + ) + expect(ir.block.operation).toMatchObject([ + { + type: IRNodeTypes.CREATE_COMPONENT_NODE, + tag: 'Comp', + props: [ + [ + { + key: { content: 'modelValue', isStatic: true }, + model: true, + modifiers: [], + values: [{ content: 'foo', isStatic: false }], + }, + ], + ], + }, + ]) + }) + + test('v-model with arguments for component should work', () => { + const { code, ir } = compileWithVModel('') + expect(code).toMatchSnapshot() + expect(code).contains( + `bar: () => (_ctx.foo),"onUpdate:bar":() => $event => (_ctx.foo = $event)`, + ) + expect(ir.block.operation).toMatchObject([ + { + type: IRNodeTypes.CREATE_COMPONENT_NODE, + tag: 'Comp', + props: [ + [ + { + key: { content: 'bar', isStatic: true }, + model: true, + modifiers: [], + values: [{ content: 'foo', isStatic: false }], + }, + ], + ], + }, + ]) + }) + + test('v-model with dynamic arguments for component should work', () => { + const { code, ir } = compileWithVModel('') + expect(code).toMatchSnapshot() + expect(code).contains( + `[_ctx.arg]: () => (_ctx.foo),[\`onUpdate:\${_ctx.arg}\`]:() => $event => (_ctx.foo = $event)`, + ) + expect(ir.block.operation).toMatchObject([ + { + type: IRNodeTypes.CREATE_COMPONENT_NODE, + tag: 'Comp', + props: [ + [ + { + key: { content: 'arg', isStatic: false }, + model: true, + modifiers: [], + values: [{ content: 'foo', isStatic: false }], + }, + ], + ], + }, + ]) + }) + + test('v-model for component should generate modelModifiers', () => { + const { code, ir } = compileWithVModel( + '', + ) + expect(code).toMatchSnapshot() + expect(code).contain( + `modelModifiers:() => ({trim: true, "bar-baz": true})`, + ) + expect(ir.block.operation).toMatchObject([ + { + type: IRNodeTypes.CREATE_COMPONENT_NODE, + tag: 'Comp', + props: [ + [ + { + key: { content: 'modelValue', isStatic: true }, + model: true, + modifiers: ['trim', 'bar-baz'], + values: [{ content: 'foo', isStatic: false }], + }, + ], + ], + }, + ]) + }) + + test('v-model with arguments for component should generate modelModifiers', () => { + const { code, ir } = compileWithVModel( + '', + ) + expect(code).toMatchSnapshot() + expect(code).contain(`fooModifiers:() => ({trim: true})`) + expect(code).contain(`barModifiers:() => ({number: true})`) + expect(ir.block.operation).toMatchObject([ + { + type: IRNodeTypes.CREATE_COMPONENT_NODE, + tag: 'Comp', + props: [ + [ + { + key: { content: 'foo', isStatic: true }, + model: true, + modifiers: ['trim'], + values: [{ content: 'foo', isStatic: false }], + }, + { + key: { content: 'bar', isStatic: true }, + model: true, + modifiers: ['number'], + values: [{ content: 'bar', isStatic: false }], + }, + ], + ], + }, + ]) + }) + + test('v-model with dynamic arguments for component should generate modelModifiers ', () => { + const { code, ir } = compileWithVModel( + '', + ) + expect(code).toMatchSnapshot() + expect(code).contain(`[\`\${_ctx.foo}Modifiers\`]:() => ({trim: true})`) + expect(code).contain(`[\`\${_ctx.bar}Modifiers\`]:() => ({number: true})`) + expect(ir.block.operation).toMatchObject([ + { + type: IRNodeTypes.CREATE_COMPONENT_NODE, + tag: 'Comp', + props: [ + [ + { + key: { content: 'foo', isStatic: false }, + model: true, + modifiers: ['trim'], + values: [{ content: 'foo', isStatic: false }], + }, + { + key: { content: 'bar', isStatic: false }, + model: true, + modifiers: ['number'], + values: [{ content: 'bar', isStatic: false }], + }, + ], + ], + }, + ]) + }) + }) }) From 27195647352d0454c0ad72698db8dda2aa69daac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Fri, 19 Apr 2024 17:04:41 +0800 Subject: [PATCH 3/4] chore: update snapshot --- .../__snapshots__/vModel.spec.ts.snap | 183 ------------------ 1 file changed, 183 deletions(-) diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap index 42dd8b2e7..1d9b9f440 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap @@ -68,74 +68,6 @@ export function render(_ctx) { }" `; -exports[`compiler: vModel transform > errors > v-model for component should generate modelModifiers 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event),modelModifiers:() => ({trim: true, "bar-baz": true}) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > errors > v-model for component should work 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > errors > v-model with arguments for component should generate modelModifiers 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - foo: () => (_ctx.foo),"onUpdate:foo":() => $event => (_ctx.foo = $event),fooModifiers:() => ({trim: true}), - bar: () => (_ctx.bar),"onUpdate:bar":() => $event => (_ctx.bar = $event),barModifiers:() => ({number: true}) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > errors > v-model with arguments for component should work 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - bar: () => (_ctx.foo),"onUpdate:bar":() => $event => (_ctx.foo = $event) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > errors > v-model with dynamic arguments for component should generate modelModifiers 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - [_ctx.foo]: () => (_ctx.foo),[\`onUpdate:\${_ctx.foo}\`]:() => $event => (_ctx.foo = $event),[\`\${_ctx.foo}Modifiers\`]:() => ({trim: true}), - [_ctx.bar]: () => (_ctx.bar),[\`onUpdate:\${_ctx.bar}\`]:() => $event => (_ctx.bar = $event),[\`\${_ctx.bar}Modifiers\`]:() => ({number: true}) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > errors > v-model with dynamic arguments for component should work 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - [_ctx.arg]: () => (_ctx.foo),[\`onUpdate:\${_ctx.arg}\`]:() => $event => (_ctx.foo = $event) - }], true) - return n0 -}" -`; - exports[`compiler: vModel transform > modifiers > .lazy 1`] = ` "import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor'; const t0 = _template("") @@ -172,41 +104,6 @@ export function render(_ctx) { }" `; -exports[`compiler: vModel transform > should generate modelModifiers for component v-model 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event),modelModifiers:() => ({trim: true, "bar-baz": true}) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > should generate modelModifiers for component v-model with arguments 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - foo: () => (_ctx.foo),"onUpdate:foo":() => $event => (_ctx.foo = $event),fooModifiers:() => ({trim: true}), - bar: () => (_ctx.bar),"onUpdate:bar":() => $event => (_ctx.bar = $event),barModifiers:() => ({number: true}) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > should generate modelModifiers for component v-model with dynamic arguments 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - [_ctx.foo]: () => (_ctx.foo),[\`onUpdate:\${_ctx.foo}\`]:() => $event => (_ctx.foo = $event),[\`\${_ctx.foo}Modifiers\`]:() => ({trim: true}), - [_ctx.bar]: () => (_ctx.bar),[\`onUpdate:\${_ctx.bar}\`]:() => $event => (_ctx.bar = $event),[\`\${_ctx.bar}Modifiers\`]:() => ({number: true}) - }], true) - return n0 -}" -`; - exports[`compiler: vModel transform > should support input (checkbox) 1`] = ` "import { vModelCheckbox as _vModelCheckbox, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor'; const t0 = _template("") @@ -348,83 +245,3 @@ export function render(_ctx) { return n0 }" `; - -exports[`compiler: vModel transform > v-model for component should generate modelModifiers 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event),modelModifiers:() => ({trim: true, "bar-baz": true}) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > v-model for component should work 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > v-model with arguments for component should generate modelModifiers 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - foo: () => (_ctx.foo),"onUpdate:foo":() => $event => (_ctx.foo = $event),fooModifiers:() => ({trim: true}), - bar: () => (_ctx.bar),"onUpdate:bar":() => $event => (_ctx.bar = $event),barModifiers:() => ({number: true}) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > v-model with arguments for component should work 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - bar: () => (_ctx.foo),"onUpdate:bar":() => $event => (_ctx.foo = $event) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > v-model with dynamic arguments for component should generate modelModifiers 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - [_ctx.foo]: () => (_ctx.foo),[\`onUpdate:\${_ctx.foo}\`]:() => $event => (_ctx.foo = $event),[\`\${_ctx.foo}Modifiers\`]:() => ({trim: true}), - [_ctx.bar]: () => (_ctx.bar),[\`onUpdate:\${_ctx.bar}\`]:() => $event => (_ctx.bar = $event),[\`\${_ctx.bar}Modifiers\`]:() => ({number: true}) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > v-model with dynamic arguments for component should work 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - [_ctx.arg]: () => (_ctx.foo),[\`onUpdate:\${_ctx.arg}\`]:() => $event => (_ctx.foo = $event) - }], true) - return n0 -}" -`; - -exports[`compiler: vModel transform > v-model with static arguments for component should generate modelModifiers 1`] = ` -"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor'; - -export function render(_ctx) { - const n0 = _createComponent(_resolveComponent("Comp"), [{ - foo: () => (_ctx.foo),"onUpdate:foo":() => $event => (_ctx.foo = $event),fooModifiers:() => ({trim: true}), - bar: () => (_ctx.bar),"onUpdate:bar":() => $event => (_ctx.bar = $event),barModifiers:() => ({number: true}) - }], true) - return n0 -}" -`; From ef2b521144c299fec67d85bbf3038d1fbd3803af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Fri, 19 Apr 2024 19:41:59 +0800 Subject: [PATCH 4/4] refactor --- .../__snapshots__/vModel.spec.ts.snap | 29 ++++++++---- .../__tests__/transforms/vModel.spec.ts | 47 ++++++++++--------- .../src/generators/component.ts | 28 +++++------ packages/compiler-vapor/src/transform.ts | 2 +- .../compiler-vapor/src/transforms/vModel.ts | 2 +- 5 files changed, 62 insertions(+), 46 deletions(-) diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap index 1d9b9f440..d75f1ea9b 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap @@ -5,7 +5,9 @@ exports[`compiler: vModel transform > component > v-model for component should g export function render(_ctx) { const n0 = _createComponent(_resolveComponent("Comp"), [{ - modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event),modelModifiers:() => ({trim: true, "bar-baz": true}) + modelValue: () => (_ctx.foo), + "onUpdate:modelValue": () => $event => (_ctx.foo = $event), + modelModifiers: () => ({ trim: true, "bar-baz": true }) }], true) return n0 }" @@ -16,7 +18,8 @@ exports[`compiler: vModel transform > component > v-model for component should w export function render(_ctx) { const n0 = _createComponent(_resolveComponent("Comp"), [{ - modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event) + modelValue: () => (_ctx.foo), + "onUpdate:modelValue": () => $event => (_ctx.foo = $event) }], true) return n0 }" @@ -27,8 +30,12 @@ exports[`compiler: vModel transform > component > v-model with arguments for com export function render(_ctx) { const n0 = _createComponent(_resolveComponent("Comp"), [{ - foo: () => (_ctx.foo),"onUpdate:foo":() => $event => (_ctx.foo = $event),fooModifiers:() => ({trim: true}), - bar: () => (_ctx.bar),"onUpdate:bar":() => $event => (_ctx.bar = $event),barModifiers:() => ({number: true}) + foo: () => (_ctx.foo), + "onUpdate:foo": () => $event => (_ctx.foo = $event), + fooModifiers: () => ({ trim: true }), + bar: () => (_ctx.bar), + "onUpdate:bar": () => $event => (_ctx.bar = $event), + barModifiers: () => ({ number: true }) }], true) return n0 }" @@ -39,7 +46,8 @@ exports[`compiler: vModel transform > component > v-model with arguments for com export function render(_ctx) { const n0 = _createComponent(_resolveComponent("Comp"), [{ - bar: () => (_ctx.foo),"onUpdate:bar":() => $event => (_ctx.foo = $event) + bar: () => (_ctx.foo), + "onUpdate:bar": () => $event => (_ctx.foo = $event) }], true) return n0 }" @@ -50,8 +58,12 @@ exports[`compiler: vModel transform > component > v-model with dynamic arguments export function render(_ctx) { const n0 = _createComponent(_resolveComponent("Comp"), [{ - [_ctx.foo]: () => (_ctx.foo),[\`onUpdate:\${_ctx.foo}\`]:() => $event => (_ctx.foo = $event),[\`\${_ctx.foo}Modifiers\`]:() => ({trim: true}), - [_ctx.bar]: () => (_ctx.bar),[\`onUpdate:\${_ctx.bar}\`]:() => $event => (_ctx.bar = $event),[\`\${_ctx.bar}Modifiers\`]:() => ({number: true}) + [_ctx.foo]: () => (_ctx.foo), + ["onUpdate:" + _ctx.foo]: () => $event => (_ctx.foo = $event), + [_ctx.foo + "Modifiers"]: () => ({ trim: true }), + [_ctx.bar]: () => (_ctx.bar), + ["onUpdate:" + _ctx.bar]: () => $event => (_ctx.bar = $event), + [_ctx.bar + "Modifiers"]: () => ({ number: true }) }], true) return n0 }" @@ -62,7 +74,8 @@ exports[`compiler: vModel transform > component > v-model with dynamic arguments export function render(_ctx) { const n0 = _createComponent(_resolveComponent("Comp"), [{ - [_ctx.arg]: () => (_ctx.foo),[\`onUpdate:\${_ctx.arg}\`]:() => $event => (_ctx.foo = $event) + [_ctx.arg]: () => (_ctx.foo), + ["onUpdate:" + _ctx.arg]: () => $event => (_ctx.foo = $event) }], true) return n0 }" diff --git a/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts b/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts index 7e8055e82..80a22c880 100644 --- a/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/vModel.spec.ts @@ -209,7 +209,8 @@ describe('compiler: vModel transform', () => { const { code, ir } = compileWithVModel('') expect(code).toMatchSnapshot() expect(code).contains( - `modelValue: () => (_ctx.foo),"onUpdate:modelValue":() => $event => (_ctx.foo = $event)`, + `modelValue: () => (_ctx.foo), + "onUpdate:modelValue": () => $event => (_ctx.foo = $event)`, ) expect(ir.block.operation).toMatchObject([ { @@ -220,7 +221,7 @@ describe('compiler: vModel transform', () => { { key: { content: 'modelValue', isStatic: true }, model: true, - modifiers: [], + modelModifiers: [], values: [{ content: 'foo', isStatic: false }], }, ], @@ -233,7 +234,8 @@ describe('compiler: vModel transform', () => { const { code, ir } = compileWithVModel('') expect(code).toMatchSnapshot() expect(code).contains( - `bar: () => (_ctx.foo),"onUpdate:bar":() => $event => (_ctx.foo = $event)`, + `bar: () => (_ctx.foo), + "onUpdate:bar": () => $event => (_ctx.foo = $event)`, ) expect(ir.block.operation).toMatchObject([ { @@ -244,7 +246,7 @@ describe('compiler: vModel transform', () => { { key: { content: 'bar', isStatic: true }, model: true, - modifiers: [], + modelModifiers: [], values: [{ content: 'foo', isStatic: false }], }, ], @@ -257,7 +259,8 @@ describe('compiler: vModel transform', () => { const { code, ir } = compileWithVModel('') expect(code).toMatchSnapshot() expect(code).contains( - `[_ctx.arg]: () => (_ctx.foo),[\`onUpdate:\${_ctx.arg}\`]:() => $event => (_ctx.foo = $event)`, + `[_ctx.arg]: () => (_ctx.foo), + ["onUpdate:" + _ctx.arg]: () => $event => (_ctx.foo = $event)`, ) expect(ir.block.operation).toMatchObject([ { @@ -267,9 +270,9 @@ describe('compiler: vModel transform', () => { [ { key: { content: 'arg', isStatic: false }, - model: true, - modifiers: [], values: [{ content: 'foo', isStatic: false }], + model: true, + modelModifiers: [], }, ], ], @@ -283,7 +286,7 @@ describe('compiler: vModel transform', () => { ) expect(code).toMatchSnapshot() expect(code).contain( - `modelModifiers:() => ({trim: true, "bar-baz": true})`, + `modelModifiers: () => ({ trim: true, "bar-baz": true })`, ) expect(ir.block.operation).toMatchObject([ { @@ -293,9 +296,9 @@ describe('compiler: vModel transform', () => { [ { key: { content: 'modelValue', isStatic: true }, - model: true, - modifiers: ['trim', 'bar-baz'], values: [{ content: 'foo', isStatic: false }], + model: true, + modelModifiers: ['trim', 'bar-baz'], }, ], ], @@ -308,8 +311,8 @@ describe('compiler: vModel transform', () => { '', ) expect(code).toMatchSnapshot() - expect(code).contain(`fooModifiers:() => ({trim: true})`) - expect(code).contain(`barModifiers:() => ({number: true})`) + expect(code).contain(`fooModifiers: () => ({ trim: true })`) + expect(code).contain(`barModifiers: () => ({ number: true })`) expect(ir.block.operation).toMatchObject([ { type: IRNodeTypes.CREATE_COMPONENT_NODE, @@ -318,15 +321,15 @@ describe('compiler: vModel transform', () => { [ { key: { content: 'foo', isStatic: true }, - model: true, - modifiers: ['trim'], values: [{ content: 'foo', isStatic: false }], + model: true, + modelModifiers: ['trim'], }, { key: { content: 'bar', isStatic: true }, - model: true, - modifiers: ['number'], values: [{ content: 'bar', isStatic: false }], + model: true, + modelModifiers: ['number'], }, ], ], @@ -339,8 +342,8 @@ describe('compiler: vModel transform', () => { '', ) expect(code).toMatchSnapshot() - expect(code).contain(`[\`\${_ctx.foo}Modifiers\`]:() => ({trim: true})`) - expect(code).contain(`[\`\${_ctx.bar}Modifiers\`]:() => ({number: true})`) + expect(code).contain(`[_ctx.foo + "Modifiers"]: () => ({ trim: true })`) + expect(code).contain(`[_ctx.bar + "Modifiers"]: () => ({ number: true })`) expect(ir.block.operation).toMatchObject([ { type: IRNodeTypes.CREATE_COMPONENT_NODE, @@ -349,15 +352,15 @@ describe('compiler: vModel transform', () => { [ { key: { content: 'foo', isStatic: false }, - model: true, - modifiers: ['trim'], values: [{ content: 'foo', isStatic: false }], + model: true, + modelModifiers: ['trim'], }, { key: { content: 'bar', isStatic: false }, - model: true, - modifiers: ['number'], values: [{ content: 'bar', isStatic: false }], + model: true, + modelModifiers: ['number'], }, ], ], diff --git a/packages/compiler-vapor/src/generators/component.ts b/packages/compiler-vapor/src/generators/component.ts index ee8c25553..8f1b01003 100644 --- a/packages/compiler-vapor/src/generators/component.ts +++ b/packages/compiler-vapor/src/generators/component.ts @@ -25,7 +25,7 @@ export function genCreateComponent( const tag = genTag() const isRoot = oper.root - const props = genProps() + const rawProps = genRawProps() return [ NEWLINE, @@ -33,7 +33,7 @@ export function genCreateComponent( ...genCall( vaporHelper('createComponent'), tag, - props || (isRoot ? 'null' : false), + rawProps || (isRoot ? 'null' : false), isRoot && 'true', ), ] @@ -49,11 +49,11 @@ export function genCreateComponent( } } - function genProps() { + function genRawProps() { const props = oper.props .map(props => { if (isArray(props)) { - if (!props.length) return undefined + if (!props.length) return return genStaticProps(props) } else { let expr = genExpression(props.value, context) @@ -82,33 +82,33 @@ export function genCreateComponent( ? genEventHandler(context, prop.values[0]) : ['() => (', ...genExpression(prop.values[0], context), ')']), ...(prop.model - ? [...genModel(prop, context), ...genModifiers(prop, context)] + ? [...genModelEvent(prop), ...genModelModifiers(prop)] : []), ] }), ) - function genModel(prop: IRProp, context: CodegenContext) { + function genModelEvent(prop: IRProp): CodeFragment[] { const name = prop.key.isStatic ? [JSON.stringify(`onUpdate:${camelize(prop.key.content)}`)] - : ['[`onUpdate:${', ...genExpression(prop.key, context), '}`]'] + : ['["onUpdate:" + ', ...genExpression(prop.key, context), ']'] const handler = genModelHandler(prop.values[0], context) - return [',', ...name, ':', ...handler] + return [',', NEWLINE, ...name, ': ', ...handler] } - function genModifiers(prop: IRProp, context: CodegenContext) { - const { key, modifiers } = prop - if (!isArray(modifiers) || modifiers.length === 0) return [] + function genModelModifiers(prop: IRProp): CodeFragment[] { + const { key, modelModifiers } = prop + if (!modelModifiers || !modelModifiers.length) return [] const modifiersKey = key.isStatic ? key.content === 'modelValue' ? [`modelModifiers`] : [`${key.content}Modifiers`] - : ['[`${', ...genExpression(key, context), '}Modifiers`]'] + : ['[', ...genExpression(key, context), ' + "Modifiers"]'] - const modifiersVal = genDirectiveModifiers(modifiers) - return [',', ...modifiersKey, ':', `() => ({${modifiersVal}})`] + const modifiersVal = genDirectiveModifiers(modelModifiers) + return [',', NEWLINE, ...modifiersKey, `: () => ({ ${modifiersVal} })`] } } } diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts index 7be6b3137..14ed88944 100644 --- a/packages/compiler-vapor/src/transform.ts +++ b/packages/compiler-vapor/src/transform.ts @@ -45,7 +45,7 @@ export interface DirectiveTransformResult { runtimeCamelize?: boolean handler?: boolean model?: boolean - modifiers?: string[] + modelModifiers?: string[] } // A structural directive transform is technically also a NodeTransform; diff --git a/packages/compiler-vapor/src/transforms/vModel.ts b/packages/compiler-vapor/src/transforms/vModel.ts index 357ec46be..72382ffb4 100644 --- a/packages/compiler-vapor/src/transforms/vModel.ts +++ b/packages/compiler-vapor/src/transforms/vModel.ts @@ -69,7 +69,7 @@ export const transformVModel: DirectiveTransform = (dir, node, context) => { key: arg ? arg : createSimpleExpression('modelValue', true), value: exp, model: true, - modifiers: dir.modifiers, + modelModifiers: dir.modifiers, } } else { if (dir.arg)