fix(compiler-sfc): should not rewrite ref sugar identifiers in types

fix #4062

Author: yyx990803

packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefSugar.spec.ts.snap

@@ -0,0 +1,228 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<script setup> ref sugar accessing ref binding 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  setup(__props, { expose }) {
+  expose()
+
+    const a = _ref(1)
+    console.log(a.value)
+    function get() {
+      return a.value + 1
+    }
+    
+return { a, get }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar array destructure 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  setup(__props, { expose }) {
+  expose()
+
+    const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()
+const a = _ref(__a);
+const b = _ref(__b);
+const c = _ref(__c);
+    console.log(n.value, a.value, b.value, c.value)
+    
+return { n, a, b, c }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar convert ref declarations 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  setup(__props, { expose }) {
+  expose()
+
+    const foo = _ref()
+    const a = _ref(1)
+    const b = _ref({
+      count: 0
+    })
+    let c = () => {}
+    let d
+    
+return { foo, a, b, c, d }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar multi ref declarations 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  setup(__props, { expose }) {
+  expose()
+
+    const a = _ref(1), b = _ref(2), c = _ref({
+      count: 0
+    })
+    
+return { a, b, c }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar mutating ref binding 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  setup(__props, { expose }) {
+  expose()
+
+    const a = _ref(1)
+    const b = _ref({ count: 0 })
+    function inc() {
+      a.value++
+      a.value = a.value + 1
+      b.value.count++
+      b.value.count = b.value.count + 1
+      ;({ a: a.value } = { a: 2 })
+      ;[a.value] = [1]
+    }
+    
+return { a, b, inc }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar nested destructure 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  setup(__props, { expose }) {
+  expose()
+
+    const [{ a: { b: __b }}] = useFoo()
+const b = _ref(__b);
+    const { c: [__d, __e] } = useBar()
+const d = _ref(__d);
+const e = _ref(__e);
+    console.log(b.value, d.value, e.value)
+    
+return { b, d, e }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar object destructure 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  setup(__props, { expose }) {
+  expose()
+
+    const n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()
+const a = _ref(__a);
+const c = _ref(__c);
+const d = _ref(__d);
+const f = _ref(__f);
+const g = _ref(__g);
+    const { foo: __foo } = useSomthing(() => 1);
+const foo = _ref(__foo);
+    console.log(n.value, a.value, c.value, d.value, f.value, g.value, foo.value)
+    
+return { n, a, c, d, f, g, foo }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar should not convert non ref labels 1`] = `
+"export default {
+  setup(__props, { expose }) {
+  expose()
+
+    foo: a = 1, b = 2, c = {
+      count: 0
+    }
+    
+return {  }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar should not rewrite scope variable 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  setup(__props, { expose }) {
+  expose()
+
+      const a = _ref(1)
+      const b = _ref(1)
+      const d = _ref(1)
+      const e = 1
+      function test() {
+        const a = 2
+        console.log(a)
+        console.log(b.value)
+        let c = { c: 3 }
+        console.log(c)
+        let $d
+        console.log($d)
+        console.log(d.value)
+        console.log(e)
+      }
+    
+return { a, b, d, e, test }
+}
+
+}"
+`;
+
+exports[`<script setup> ref sugar should not rewrite type identifiers 1`] = `
+"import { ref as _ref, defineComponent as _defineComponent } from 'vue'
+
+export default _defineComponent({
+  props: {
+    msg: { type: String, required: true },
+    ids: { type: Array, required: false }
+  } as unknown as undefined,
+  setup(__props: {msg: string; ids?: string[]}, { expose }) {
+  expose()
+
+const props = __props
+        
+        const ids = _ref([])
+      
+return { props, ids }
+}
+
+})"
+`;
+
+exports[`<script setup> ref sugar using ref binding in property shorthand 1`] = `
+"import { ref as _ref } from 'vue'
+
+export default {
+  setup(__props, { expose }) {
+  expose()
+
+    const a = _ref(1)
+    const b = { a: a.value }
+    function test() {
+      const { a } = b
+    }
+    
+return { a, b, test }
+}
+
+}"
+`;

packages/compiler-sfc/__tests__/compileScriptRefSugar.ts renamed to packages/compiler-sfc/__tests__/compileScriptRefSugar.spec.ts

@@ -236,6 +236,22 @@ describe('<script setup> ref sugar', () => {
     assertCode(content)
   })
 
+  //#4062
+  test('should not rewrite type identifiers', () => {
+    const { content } = compile(
+      `
+      <script setup lang="ts">
+        const props = defineProps<{msg: string; ids?: string[]}>()
+        ref: ids = []
+      </script>`,
+      {
+        refSugar: true
+      }
+    )
+    assertCode(content)
+    expect(content).not.toMatch('.value')
+  })
+
   describe('errors', () => {
     test('ref: non-assignment expressions', () => {
       expect(() =>

packages/compiler-sfc/src/compileScript.ts

@@ -1708,6 +1708,9 @@ export function walkIdentifiers(
   ;(walk as any)(root, {
     enter(node: Node & { scopeIds?: Set<string> }, parent: Node | undefined) {
       parent && parentStack.push(parent)
+      if (node.type.startsWith('TS')) {
+        return this.skip()
+      }
       if (node.type === 'Identifier') {
         if (
           !knownIds[node.name] &&

packages/sfc-playground/package.json

@@ -18,7 +18,7 @@
     "@types/codemirror": "^0.0.108",
     "@vitejs/plugin-vue": "^1.2.0",
     "codemirror": "^5.60.0",
-    "vite": "^2.1.5"
+    "vite": "^2.4.0"
   },
   "dependencies": {
     "file-saver": "^2.0.5",