Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(compiler-core): generate TS-cast safe assignment code for v-model
fix #4655
  • Loading branch information
yyx990803 committed Sep 22, 2021
1 parent 1873f0f commit 686d014
Show file tree
Hide file tree
Showing 6 changed files with 51 additions and 52 deletions.
Expand Up @@ -6,7 +6,7 @@ exports[`compiler: transform v-model compound expression (with prefixIdentifiers
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", {
modelValue: _ctx.model[_ctx.index],
\\"onUpdate:modelValue\\": $event => (_ctx.model[_ctx.index] = $event)
\\"onUpdate:modelValue\\": $event => ((_ctx.model[_ctx.index]) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
}"
`;
Expand All @@ -20,7 +20,7 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", {
modelValue: model[index],
\\"onUpdate:modelValue\\": $event => (model[index] = $event)
\\"onUpdate:modelValue\\": $event => ((model[index]) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
}
}"
Expand All @@ -39,11 +39,11 @@ return function render(_ctx, _cache) {
.
foo
,
\\"onUpdate:modelValue\\": $event => (
\\"onUpdate:modelValue\\": $event => ((
model
.
foo
= $event)
) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
}
}"
Expand All @@ -55,7 +55,7 @@ exports[`compiler: transform v-model simple expression (with prefixIdentifiers)
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", {
modelValue: _ctx.model,
\\"onUpdate:modelValue\\": $event => (_ctx.model = $event)
\\"onUpdate:modelValue\\": $event => ((_ctx.model) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
}"
`;
Expand All @@ -69,7 +69,7 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", {
modelValue: model,
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"modelValue\\", \\"onUpdate:modelValue\\"]))
}
}"
Expand All @@ -84,7 +84,7 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", {
value: model,
\\"onUpdate:value\\": $event => (model = $event)
\\"onUpdate:value\\": $event => ((model) = $event)
}, null, 40 /* PROPS, HYDRATE_EVENTS */, [\\"value\\", \\"onUpdate:value\\"]))
}
}"
Expand All @@ -96,7 +96,7 @@ exports[`compiler: transform v-model with dynamic argument (with prefixIdentifie
export function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
[_ctx.value]: _ctx.model,
[\\"onUpdate:\\" + _ctx.value]: $event => (_ctx.model = $event)
[\\"onUpdate:\\" + _ctx.value]: $event => ((_ctx.model) = $event)
}), null, 16 /* FULL_PROPS */))
}"
`;
Expand All @@ -110,7 +110,7 @@ return function render(_ctx, _cache) {
return (_openBlock(), _createElementBlock(\\"input\\", _normalizeProps({
[value]: model,
[\\"onUpdate:\\" + value]: $event => (model = $event)
[\\"onUpdate:\\" + value]: $event => ((model) = $event)
}), null, 16 /* FULL_PROPS */))
}
}"
Expand Down
32 changes: 16 additions & 16 deletions packages/compiler-core/__tests__/transforms/vModel.spec.ts
Expand Up @@ -65,12 +65,12 @@ describe('compiler: transform v-model', () => {
},
value: {
children: [
'$event => (',
'$event => ((',
{
content: 'model',
isStatic: false
},
' = $event)'
') = $event)'
]
}
})
Expand Down Expand Up @@ -104,12 +104,12 @@ describe('compiler: transform v-model', () => {
},
value: {
children: [
'$event => (',
'$event => ((',
{
content: '_ctx.model',
isStatic: false
},
' = $event)'
') = $event)'
]
}
})
Expand Down Expand Up @@ -142,12 +142,12 @@ describe('compiler: transform v-model', () => {
},
value: {
children: [
'$event => (',
'$event => ((',
{
content: '\n model\n.\nfoo \n',
isStatic: false
},
' = $event)'
') = $event)'
]
}
})
Expand Down Expand Up @@ -179,12 +179,12 @@ describe('compiler: transform v-model', () => {
},
value: {
children: [
'$event => (',
'$event => ((',
{
content: 'model[index]',
isStatic: false
},
' = $event)'
') = $event)'
]
}
})
Expand Down Expand Up @@ -228,7 +228,7 @@ describe('compiler: transform v-model', () => {
},
value: {
children: [
'$event => (',
'$event => ((',
{
children: [
{
Expand All @@ -243,7 +243,7 @@ describe('compiler: transform v-model', () => {
']'
]
},
' = $event)'
') = $event)'
]
}
})
Expand Down Expand Up @@ -274,12 +274,12 @@ describe('compiler: transform v-model', () => {
},
value: {
children: [
'$event => (',
'$event => ((',
{
content: 'model',
isStatic: false
},
' = $event)'
') = $event)'
]
}
})
Expand Down Expand Up @@ -322,12 +322,12 @@ describe('compiler: transform v-model', () => {
},
value: {
children: [
'$event => (',
'$event => ((',
{
content: 'model',
isStatic: false
},
' = $event)'
') = $event)'
]
}
}
Expand Down Expand Up @@ -376,12 +376,12 @@ describe('compiler: transform v-model', () => {
},
value: {
children: [
'$event => (',
'$event => ((',
{
content: '_ctx.model',
isStatic: false
},
' = $event)'
') = $event)'
]
}
}
Expand Down
12 changes: 6 additions & 6 deletions packages/compiler-core/src/transforms/vModel.ts
Expand Up @@ -76,26 +76,26 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
if (bindingType === BindingTypes.SETUP_REF) {
// v-model used on known ref.
assignmentExp = createCompoundExpression([
`${eventArg} => (`,
`${eventArg} => ((`,
createSimpleExpression(rawExp, false, exp.loc),
`.value = $event)`
`).value = $event)`
])
} else {
// v-model used on a potentially ref binding in <script setup> inline mode.
// the assignment needs to check whether the binding is actually a ref.
const altAssignment =
bindingType === BindingTypes.SETUP_LET ? `${rawExp} = $event` : `null`
assignmentExp = createCompoundExpression([
`${eventArg} => (${context.helperString(IS_REF)}(${rawExp}) ? `,
`${eventArg} => (${context.helperString(IS_REF)}(${rawExp}) ? (`,
createSimpleExpression(rawExp, false, exp.loc),
`.value = $event : ${altAssignment})`
`).value = $event : ${altAssignment})`
])
}
} else {
assignmentExp = createCompoundExpression([
`${eventArg} => (`,
`${eventArg} => ((`,
exp,
` = $event)`
`) = $event)`
])
}

Expand Down
Expand Up @@ -8,7 +8,7 @@ return function render(_ctx, _cache) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"my-input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelText, model]
])
Expand All @@ -24,7 +24,7 @@ return function render(_ctx, _cache) {
const { vModelDynamic: _vModelDynamic, mergeProps: _mergeProps, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", _mergeProps(obj, {
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}), null, 16 /* FULL_PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelDynamic, model]
])
Expand All @@ -42,7 +42,7 @@ return function render(_ctx, _cache) {
const _directive_bind = _resolveDirective(\\"bind\\")
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_directive_bind, val, key],
[_vModelDynamic, model]
Expand All @@ -59,7 +59,7 @@ return function render(_ctx, _cache) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[
_vModelText,
Expand All @@ -80,7 +80,7 @@ return function render(_ctx, _cache) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[
_vModelText,
Expand All @@ -101,7 +101,7 @@ return function render(_ctx, _cache) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[
_vModelText,
Expand All @@ -122,7 +122,7 @@ return function render(_ctx, _cache) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelText, model]
])
Expand All @@ -139,7 +139,7 @@ return function render(_ctx, _cache) {
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
type: \\"checkbox\\",
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelCheckbox, model]
])
Expand All @@ -157,7 +157,7 @@ return function render(_ctx, _cache) {
const _directive_bind = _resolveDirective(\\"bind\\")
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_directive_bind, foo, \\"type\\"],
[_vModelDynamic, model]
Expand All @@ -175,7 +175,7 @@ return function render(_ctx, _cache) {
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
type: \\"radio\\",
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelRadio, model]
])
Expand All @@ -192,7 +192,7 @@ return function render(_ctx, _cache) {
return _withDirectives((_openBlock(), _createElementBlock(\\"input\\", {
type: \\"text\\",
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelText, model]
])
Expand All @@ -208,7 +208,7 @@ return function render(_ctx, _cache) {
const { vModelSelect: _vModelSelect, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"select\\", {
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelSelect, model]
])
Expand All @@ -224,7 +224,7 @@ return function render(_ctx, _cache) {
const { vModelText: _vModelText, withDirectives: _withDirectives, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
return _withDirectives((_openBlock(), _createElementBlock(\\"textarea\\", {
\\"onUpdate:modelValue\\": $event => (model = $event)
\\"onUpdate:modelValue\\": $event => ((model) = $event)
}, null, 8 /* PROPS */, [\\"onUpdate:modelValue\\"])), [
[_vModelText, model]
])
Expand Down
Expand Up @@ -924,17 +924,17 @@ export default {
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_withDirectives(_createElementVNode(\\"input\\", {
\\"onUpdate:modelValue\\": _cache[0] || (_cache[0] = $event => (count.value = $event))
\\"onUpdate:modelValue\\": _cache[0] || (_cache[0] = $event => ((count).value = $event))
}, null, 512 /* NEED_PATCH */), [
[_vModelText, count.value]
]),
_withDirectives(_createElementVNode(\\"input\\", {
\\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? maybe.value = $event : null))
\\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (_isRef(maybe) ? (maybe).value = $event : null))
}, null, 512 /* NEED_PATCH */), [
[_vModelText, _unref(maybe)]
]),
_withDirectives(_createElementVNode(\\"input\\", {
\\"onUpdate:modelValue\\": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? lett.value = $event : lett = $event))
\\"onUpdate:modelValue\\": _cache[2] || (_cache[2] = $event => (_isRef(lett) ? (lett).value = $event : lett = $event))
}, null, 512 /* NEED_PATCH */), [
[_vModelText, _unref(lett)]
])
Expand Down
9 changes: 4 additions & 5 deletions packages/compiler-sfc/__tests__/compileScript.spec.ts
Expand Up @@ -523,13 +523,12 @@ defineExpose({ foo: 123 })
{ inlineTemplate: true }
)
// known const ref: set value
expect(content).toMatch(`count.value = $event`)
// const but maybe ref: also assign .value directly since non-ref
// won't work
expect(content).toMatch(`maybe.value = $event`)
expect(content).toMatch(`(count).value = $event`)
// const but maybe ref: assign if ref, otherwise do nothing
expect(content).toMatch(`_isRef(maybe) ? (maybe).value = $event : null`)
// let: handle both cases
expect(content).toMatch(
`_isRef(lett) ? lett.value = $event : lett = $event`
`_isRef(lett) ? (lett).value = $event : lett = $event`
)
assertCode(content)
})
Expand Down

0 comments on commit 686d014

Please sign in to comment.