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)