fix(reactivity-transform): ensure macro comply with the original semantics

Author: tuchg

Diff for: packages/compiler-sfc/__tests__/__snapshots__/compileScriptPropsTransform.spec.ts.snap

@@ -9,11 +9,11 @@ export default {
 const __props_bar = _toRef(__props, 'bar')
 const __props_foo = _toRef(__props, 'foo')
 
-      
-      console.log((__props_foo))
-      console.log((__props_bar))
-      ({ foo: __props_foo, baz: __props_bar })
-      
+
+      console.log(__props_foo)
+      console.log(__props_bar)
+      { foo: __props_foo, baz: __props_bar }
+
 return () => {}
 }
 
@@ -28,10 +28,10 @@ export default {
   props: ['foo'],
   setup(__props) {
 
-      
+
       let x = foo
       let y = __props.foo
-      
+
 return (_ctx, _cache) => {
   return _toDisplayString(__props.foo + __props.foo)
 }
@@ -48,9 +48,9 @@ export default {
   props: ['foo'],
   setup(__props) {
 
-      
+
       console.log(__props.foo)
-      
+
 return (_ctx, _cache) => {
   return _toDisplayString(__props.foo)
 }
@@ -69,8 +69,8 @@ export default {
 }),
   setup(__props) {
 
-      
-      
+
+
 return () => {}
 }
 
@@ -87,8 +87,8 @@ export default /*#__PURE__*/_defineComponent({
   },
   setup(__props: any) {
 
-      
-      
+
+
 return () => {}
 }
 
@@ -109,8 +109,8 @@ export default /*#__PURE__*/_defineComponent({
   },
   setup(__props: any) {
 
-      
-      
+
+
 return () => {}
 }
 
@@ -122,12 +122,12 @@ exports[`sfc props transform nested scope 1`] = `
   props: ['foo', 'bar'],
   setup(__props) {
 
-      
+
       function test(foo) {
         console.log(foo)
         console.log(__props.bar)
       }
-      
+
 return () => {}
 }
 
@@ -142,9 +142,9 @@ export default {
   props: { 'foo.bar': Function },
   setup(__props) {
 
-      
+
       let x = __props[\\"foo.bar\\"]
-      
+
 return (_ctx, _cache) => {
   return _toDisplayString(__props[\\"foo.bar\\"])
 }
@@ -162,8 +162,8 @@ export default {
 
 const rest = _createPropsRestProxy(__props, [\\"foo\\",\\"bar\\"])
 
-      
-      
+
+
 return () => {}
 }
 

Diff for: packages/compiler-sfc/__tests__/__snapshots__/compileScriptRefTransform.spec.ts.snap

@@ -7,11 +7,11 @@ export default {
   setup(__props, { expose }) {
   expose();
 
-    let foo = (ref())
-    let a = (ref(1))
-    let b = (shallowRef({
+    let foo = ref()
+    let a = ref(1)
+    let b = shallowRef({
       count: 0
-    }))
+    })
     let c = () => {}
     let d
     
@@ -65,7 +65,7 @@ exports[`sfc ref transform usage in normal <script> 1`] = `
       setup() {
         let count = _ref(0)
         const inc = () => count.value++
-        return ({ count })
+        return { count }
       }
     }
     "

Diff for: packages/compiler-sfc/__tests__/compileScriptPropsTransform.spec.ts

@@ -178,9 +178,9 @@ describe('sfc props transform', () => {
     `)
     expect(content).toMatch(`const __props_foo = _toRef(__props, 'foo')`)
     expect(content).toMatch(`const __props_bar = _toRef(__props, 'bar')`)
-    expect(content).toMatch(`console.log((__props_foo))`)
-    expect(content).toMatch(`console.log((__props_bar))`)
-    expect(content).toMatch(`({ foo: __props_foo, baz: __props_bar })`)
+    expect(content).toMatch(`console.log(__props_foo)`)
+    expect(content).toMatch(`console.log(__props_bar)`)
+    expect(content).toMatch(`{ foo: __props_foo, baz: __props_bar }`)
     assertCode(content)
   })
 

Diff for: packages/compiler-sfc/__tests__/compileScriptRefTransform.spec.ts

@@ -22,12 +22,12 @@ describe('sfc ref transform', () => {
     expect(content).not.toMatch(`$(ref())`)
     expect(content).not.toMatch(`$(ref(1))`)
     expect(content).not.toMatch(`$(shallowRef({`)
-    expect(content).toMatch(`let foo = (ref())`)
-    expect(content).toMatch(`let a = (ref(1))`)
+    expect(content).toMatch(`let foo = ref()`)
+    expect(content).toMatch(`let a = ref(1)`)
     expect(content).toMatch(`
-    let b = (shallowRef({
+    let b = shallowRef({
       count: 0
-    }))
+    })
     `)
     // normal declarations left untouched
     expect(content).toMatch(`let c = () => {}`)
@@ -95,7 +95,7 @@ describe('sfc ref transform', () => {
     expect(content).toMatch(`import { ref as _ref } from 'vue'`)
     expect(content).toMatch(`let count = _ref(0)`)
     expect(content).toMatch(`count.value++`)
-    expect(content).toMatch(`return ({ count })`)
+    expect(content).toMatch(`return { count }`)
     assertCode(content)
   })
 

Diff for: packages/reactivity-transform/__tests__/__snapshots__/reactivityTransform.spec.ts.snap

@@ -3,24 +3,24 @@
 exports[`$ unwrapping 1`] = `
 "
     import { ref, shallowRef } from 'vue'
-    let foo = (ref())
-    export let a = (ref(1))
-    let b = (shallowRef({
+    let foo = ref()
+    export let a = ref(1)
+    let b = shallowRef({
       count: 0
-    }))
+    })
     let c = () => {}
     let d
-    label: var e = (ref())
+    label: var e = ref()
     "
 `;
 
 exports[`$$ 1`] = `
 "import { ref as _ref } from 'vue'
 
     let a = _ref(1)
-    const b = (a)
-    const c = ({ a })
-    callExternal((a))
+    const b = a
+    const c = { a }
+    callExternal(a)
     "
 `;
 
@@ -59,7 +59,7 @@ exports[`accessing ref binding 1`] = `
 exports[`array destructure 1`] = `
 "import { ref as _ref, toRef as _toRef } from 'vue'
 
-    let n = _ref(1), __$temp_1 = (useFoo()),
+    let n = _ref(1), __$temp_1 = useFoo(),
   a = _toRef(__$temp_1, 0),
   b = _toRef(__$temp_1, 1, 1)
     console.log(n.value, a.value, b.value)
@@ -88,7 +88,7 @@ exports[`macro import alias and removal 1`] = `
     
 
     let a = _ref(1)
-    const __$temp_1 = (useMouse()),
+    const __$temp_1 = useMouse(),
   x = _toRef(__$temp_1, 'x'),
   y = _toRef(__$temp_1, 'y')
     "
@@ -129,9 +129,9 @@ exports[`mutating ref binding 1`] = `
 exports[`nested destructure 1`] = `
 "import { toRef as _toRef } from 'vue'
 
-    let __$temp_1 = (useFoo()),
+    let __$temp_1 = useFoo(),
   b = _toRef(__$temp_1[0].a, 'b')
-    let __$temp_2 = (useBar()),
+    let __$temp_2 = useBar(),
   d = _toRef(__$temp_2.c, 0),
   e = _toRef(__$temp_2.c, 1)
     console.log(b.value, d.value, e.value)
@@ -170,21 +170,21 @@ exports[`nested scopes 1`] = `
         a.value++ // if block a
       }
 
-      return ({ a, b, c, d })
+      return { a, b, c, d }
     }
     "
 `;
 
 exports[`object destructure 1`] = `
 "import { ref as _ref, toRef as _toRef } from 'vue'
 
-    let n = _ref(1), __$temp_1 = (useFoo()),
+    let n = _ref(1), __$temp_1 = useFoo(),
   a = _toRef(__$temp_1, 'a'),
   c = _toRef(__$temp_1, 'b'),
   d = _toRef(__$temp_1, 'd', 1),
   f = _toRef(__$temp_1, 'e', 2),
   h = _toRef(__$temp_1, g)
-    let __$temp_2 = (useSomething(() => 1)),
+    let __$temp_2 = useSomething(() => 1),
   foo = _toRef(__$temp_2, 'foo');
     console.log(n.value, a.value, c.value, d.value, f.value, h.value, foo.value)
     "
@@ -193,7 +193,7 @@ exports[`object destructure 1`] = `
 exports[`object destructure w/ mid-path default values 1`] = `
 "import { toRef as _toRef } from 'vue'
 
-    const __$temp_1 = (useFoo()),
+    const __$temp_1 = useFoo(),
   b = _toRef((__$temp_1.a || { b: 123 }), 'b')
     console.log(b.value)
   "

Diff for: packages/reactivity-transform/__tests__/reactivityTransform.spec.ts

@@ -30,17 +30,17 @@ test('$ unwrapping', () => {
   expect(code).not.toMatch(`$(ref())`)
   expect(code).not.toMatch(`$(ref(1))`)
   expect(code).not.toMatch(`$(shallowRef({`)
-  expect(code).toMatch(`let foo = (ref())`)
-  expect(code).toMatch(`export let a = (ref(1))`)
+  expect(code).toMatch(`let foo = ref()`)
+  expect(code).toMatch(`export let a = ref(1)`)
   expect(code).toMatch(`
-    let b = (shallowRef({
+    let b = shallowRef({
       count: 0
-    }))
+    })
     `)
   // normal declarations left untouched
   expect(code).toMatch(`let c = () => {}`)
   expect(code).toMatch(`let d`)
-  expect(code).toMatch(`label: var e = (ref())`)
+  expect(code).toMatch(`label: var e = ref()`)
   expect(rootRefs).toStrictEqual(['foo', 'a', 'b', 'e'])
   assertCode(code)
 })
@@ -299,9 +299,9 @@ test('$$', () => {
     const c = $$({ a })
     callExternal($$(a))
     `)
-  expect(code).toMatch(`const b = (a)`)
-  expect(code).toMatch(`const c = ({ a })`)
-  expect(code).toMatch(`callExternal((a))`)
+  expect(code).toMatch(`const b = a`)
+  expect(code).toMatch(`const c = { a }`)
+  expect(code).toMatch(`callExternal(a)`)
   assertCode(code)
 })
 
@@ -358,7 +358,7 @@ test('nested scopes', () => {
   // inner bar shadowed by function declaration
   expect(code).toMatch(`bar() // inner bar`)
 
-  expect(code).toMatch(`return ({ a, b, c, d })`)
+  expect(code).toMatch(`return { a, b, c, d }`)
   assertCode(code)
 })
 
@@ -412,7 +412,7 @@ test('macro import alias and removal', () => {
   // should remove imports
   expect(code).not.toMatch(`from 'vue/macros'`)
   expect(code).toMatch(`let a = _ref(1)`)
-  expect(code).toMatch(`const __$temp_1 = (useMouse())`)
+  expect(code).toMatch(`const __$temp_1 = useMouse()`)
   assertCode(code)
 })
 

Diff for: packages/reactivity-transform/src/reactivityTransform.ts

@@ -284,7 +284,7 @@ export function transformAST(
     if (method === convertSymbol) {
       // $
       // remove macro
-      s.remove(call.callee.start! + offset, call.callee.end! + offset)
+      unwrapMacro(call)
       if (id.type === 'Identifier') {
         // single variable
         registerRefBinding(id)
@@ -550,6 +550,18 @@ export function transformAST(
     }
   }
 
+  /**
+   * unwrap the code form the macro($、$$), fix #6312 and keep the ideally behavior with the RFC#369
+   */
+  function unwrapMacro(node: CallExpression) {
+    if (node.arguments.length) {
+      // remove macro $( and $$(
+      s.remove(node.callee.start! + offset, node.arguments[0].start! + offset)
+      // remove the end of macro
+      s.remove(node.arguments[0].end! + offset, node.end! + offset)
+    }
+  }
+
   // check root scope first
   walkScope(ast, true)
   ;(walk as any)(ast, {
@@ -623,7 +635,7 @@ export function transformAST(
         }
 
         if (callee === escapeSymbol) {
-          s.remove(node.callee.start! + offset, node.callee.end! + offset)
+          unwrapMacro(node)
           escapeScope = node
         }