fix: remove brackets after transform

Author: danielroe

src/utils/template.ts

@@ -221,11 +221,7 @@ async function transformJsSnippet(code: string, transform: (code: string) => Pro
   // but it can't be transformed.
   // We can warp it with `()` to make it a valid js file
 
-  // Check if the code is a v-slot destructuring expression like "{ active, ...slotProps }"
-  // These should not be wrapped in parentheses as Vue template syntax doesn't support it
-  const isObject = /^\s*\{.*\}\s*$/.test(code)
-
-  let res = isObject ? await transform(code) : await transform(`(${code})`)
+  let res = await transform(`(${code})`)
 
   res = res.trim()
 
@@ -234,5 +230,13 @@ async function transformJsSnippet(code: string, transform: (code: string) => Pro
     res = res.slice(0, -1)
   }
 
+  // Check if the code was a v-slot destructuring expression like "{ active, ...slotProps }"
+  // These should not be wrapped in parentheses as Vue template syntax doesn't support it
+  const isObject = /^\s*\{.*\}\s*$/.test(code)
+  if (isObject) {
+    // Remove the parentheses
+    res = res.match(/^\((.*)\)$/)?.[1] ?? res
+  }
+
   return res
 }

test/template.test.ts

@@ -48,6 +48,12 @@ describe('transform typescript template', () => {
     expect(
       await fixture(`<MyComponent v-slot="{ active, ...slotProps }">{{ active }}</MyComponent>`),
     ).toEqual(`<MyComponent v-slot="{ active, ...slotProps }">{{ active }}</MyComponent>`)
+
+    expect(
+      await fixture(
+        `<MyComponent v-slot="{ remaining, duration } as { remaining: number, duration: number }">{{ remaining }}</MyComponent>`,
+      ),
+    ).toMatchInlineSnapshot(`"<MyComponent v-slot="{ remaining, duration }">{{ remaining }}</MyComponent>"`)
   })
 
   it('custom directives', async () => {