fix(reactivity-transform): edge case for comments

Author: tuchg

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

@@ -27,6 +27,9 @@ exports[`$$ 1`] = `
 exports[`$$ with some edge cases 1`] = `
 "import { ref as _ref } from 'vue'
 
+    /* 2 */ count /* 2 */
+    ;(   count /* 2 */, /**/ a   )
+    ;   (count /* 2 */, /**/ a /**/   )
     {
       a:(count,a)
     }

packages/reactivity-transform/__tests__/reactivityTransform.spec.ts

@@ -307,6 +307,9 @@ test('$$', () => {
 
 test('$$ with some edge cases',()=>{
   const { code } = transform(`
+    $$(  /* 2 */ count /* 2 */   )
+    $$(   count /* 2 */, /**/ a   )
+    $$(   (count /* 2 */, /**/ a) /**/   )
     {
       a:$$(count,a)
     }
@@ -315,22 +318,25 @@ test('$$ with some edge cases',()=>{
     $$ (count )
     console.log($$($$(a)))
     $$(a,b)
-    $$($$((a,b)))
+    $$($$((a++,b)))
     count = $$( a++ ,b)
     count = ()=>$$(a++,b)
     let r1 = $ref(a, $$(a++,b))
     let r2 = { a:$$(a++,b),b:$$ (a) }
-    switch(c){
+    switch($$(c)){
       case d:
         $$(a)
         $$($$(h,f))
         break
     }
     ($$(count++,$$(count),$$(count,a)))
     `)
-  expect(code).toMatch("a:(count,a)")
-  expect(code).toMatch(";((count) + 1)")
-  expect(code).toMatch(";([count])")
+  expect(code).toMatch(`/* 2 */ count /* 2 */`)
+  expect(code).toMatch(`;(   count /* 2 */, /**/ a   )`)
+  expect(code).toMatch(`;   (count /* 2 */, /**/ a /**/   )`)
+  expect(code).toMatch(`a:(count,a)`)
+  expect(code).toMatch(`;((count) + 1)`)
+  expect(code).toMatch(`;([count])`)
   expect(code).toMatch(`;(a,b)`)
   expect(code).toMatch(`log(a)`)
   expect(code).toMatch(`count = ( a++ ,b)`)

packages/reactivity-transform/src/reactivityTransform.ts

@@ -554,23 +554,28 @@ export function transformAST(
    * unwrap the code form the macro($、$$), fix #6312 and keep the ideally behavior with the RFC#369
    */
   function unwrapMacro(node: CallExpression) {
-    const argsLength = node.arguments.length
     const bracketStart = node.callee.end! + offset
-
     s.remove(node.callee.start! + offset, bracketStart)
 
-    if (argsLength === 1) {
-      const bracketEnd = node.arguments[argsLength - 1].end! + offset
+    if (node.arguments.length === 1) {
+      const bracketEnd = node.arguments.at(-1)!.end! + offset
       // remove brackets of macros
-      const argsType = node.arguments[0].type
+      const firstArg = node.arguments[0]
+      const argsType = firstArg.type
       if (
         argsType === 'CallExpression' ||
         argsType === 'Identifier' ||
         argsType === 'ObjectExpression'
       ) {
-        // fix space place
-        s.remove(node.start! + offset, node.arguments[0].start! + offset)
-        s.remove(bracketEnd, node.end! + offset)
+        const leading = firstArg.leadingComments?.at(0)!.start ?? Infinity
+        const trailing = firstArg.trailingComments?.at(-1)!.end ?? 0
+        console.log(leading, trailing)
+        // fix space & comments place
+        s.remove(
+          node.start! + offset,
+          Math.min(firstArg.start!, leading) + offset
+        )
+        s.remove(Math.max(bracketEnd, trailing + offset), node.end! + offset)
 
         // avoid traversal of like `$$(a)`
         if (argsType === 'Identifier') {