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

fix #4062

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 → 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",