wip: test case for v-model + inline mode codegen

This commit is contained in:
Evan You 2020-11-17 15:59:09 -05:00
parent 94736f7729
commit a67325140b
3 changed files with 45 additions and 8 deletions

View File

@ -62,13 +62,13 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
const assigmentExp = isUnrefExp const assigmentExp = isUnrefExp
? // v-model used on a potentially ref binding in <script setup> inline mode. ? // v-model used on a potentially ref binding in <script setup> inline mode.
// not the most beautiful codegen here but it gets the job done. // the assignment needs to check whether the binding is actually a ref.
createSimpleExpression( createSimpleExpression(
`$event => { if (${context.helperString(IS_REF)}(${rawExp})) {` + `$event => (${context.helperString(IS_REF)}(${rawExp}) ` +
`${rawExp}.value = $event` + `? (${rawExp}.value = $event) ` +
` } else {${context.isTS ? `\n//@ts-ignore\n` : ``}` + `: ${context.isTS ? `//@ts-ignore\n` : ``}` +
`${rawExp} = $event` + `(${rawExp} = $event)` +
` }}`, `)`,
false, false,
exp.loc exp.loc
) )

View File

@ -166,6 +166,29 @@ return (_ctx, _cache) => {
}" }"
`; `;
exports[`SFC compile <script setup> inlineTemplate mode v-model codegen with unref() 1`] = `
"import { unref as _unref, isRef as _isRef, vModelText as _vModelText, createVNode as _createVNode, withDirectives as _withDirectives, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
import { ref } from 'vue'
export default {
expose: [],
setup(__props) {
const count = ref(0)
return (_ctx, _cache) => {
return _withDirectives((_openBlock(), _createBlock(\\"input\\", {
\\"onUpdate:modelValue\\": _cache[1] || (_cache[1] = $event => (_isRef(count) ? (count.value = $event) : (count = $event)))
}, null, 512 /* NEED_PATCH */)), [
[_vModelText, _unref(count)]
])
}
}
}"
`;
exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`] = ` exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`] = `
"import { ref as _ref } from 'vue' "import { ref as _ref } from 'vue'

View File

@ -121,8 +121,7 @@ const bar = 1
test('avoid unref() when necessary', () => { test('avoid unref() when necessary', () => {
// function, const, component import // function, const, component import
const { content } = compile( const { content } = compile(
` `<script setup>
<script setup>
import { ref, defineOptions } from 'vue' import { ref, defineOptions } from 'vue'
import Foo from './Foo.vue' import Foo from './Foo.vue'
import other from './util' import other from './util'
@ -151,6 +150,21 @@ const bar = 1
// no need to mark constant fns in patch flag // no need to mark constant fns in patch flag
expect(content).not.toMatch(`PROPS`) expect(content).not.toMatch(`PROPS`)
}) })
test('v-model codegen with unref()', () => {
const { content } = compile(
`<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<input v-model="count">
</template>
`,
{ inlineTemplate: true }
)
assertCode(content)
})
}) })
describe('with TypeScript', () => { describe('with TypeScript', () => {