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

diff --git a/packages/compiler-core/src/transforms/vModel.ts b/packages/compiler-core/src/transforms/vModel.ts
index 2acb5af195222c4820debbe015b879ef7adc7505..0274b642e5a90b95ac4a67ebfca6094fc81ab453 100644 (file)
--- a/packages/compiler-core/src/transforms/vModel.ts
+++ b/packages/compiler-core/src/transforms/vModel.ts
@@ -62,13 +62,13 @@ export const transformModel: DirectiveTransform = (dir, node, context) => {
 
   const assigmentExp = isUnrefExp
     ? // 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(
-        `$event => { if (${context.helperString(IS_REF)}(${rawExp})) {` +
-          `${rawExp}.value = $event` +
-          ` } else {${context.isTS ? `\n//@ts-ignore\n` : ``}` +
-          `${rawExp} = $event` +
-          ` }}`,
+        `$event => (${context.helperString(IS_REF)}(${rawExp}) ` +
+          `? (${rawExp}.value = $event) ` +
+          `: ${context.isTS ? `//@ts-ignore\n` : ``}` +
+          `(${rawExp} = $event)` +
+          `)`,
         false,
         exp.loc
       )

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 907a47c8dc678f894b6788160ec2299f1e617c4a..1664ee4b173efd8646b8b896b32f472708e840b6 100644 (file)
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -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`] = `
 "import { ref as _ref } from 'vue'
 

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index a336dd2c07f9daefcaab9eab1d4f0a008af0911c..41771fd242748c6858cc3f61ed0a254524eb52cb 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -121,8 +121,7 @@ const bar = 1
     test('avoid unref() when necessary', () => {
       // function, const, component import
       const { content } = compile(
-        `
-        <script setup>
+        `<script setup>
         import { ref, defineOptions } from 'vue'
         import Foo from './Foo.vue'
         import other from './util'
@@ -151,6 +150,21 @@ const bar = 1
       // no need to mark constant fns in patch flag
       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', () => {