fix: do not wrap objects in brackets

Author: danielroe

src/utils/template.ts

@@ -126,12 +126,7 @@ function handleNode(
  }
 }
 
-export async function transpileVueTemplate(
- content: string,
- root: RootNode,
- offset = 0,
- transform: (code: string) => Promise<string>,
-): Promise<string> {
+export async function transpileVueTemplate(content: string, root: RootNode, offset = 0, transform: (code: string) => Promise<string>): Promise<string> {
  const { MagicString } = await import('vue/compiler-sfc')
  const expressions: Expression[] = []
 
@@ -221,15 +216,16 @@ function getSurrounding(code: string, start: number, end: number) {
  : undefined
 }
 
-async function transformJsSnippet(
- code: string,
- transform: (code: string) => Promise<string>,
-): Promise<string> {
+async function transformJsSnippet(code: string, transform: (code: string) => Promise<string>): Promise<string> {
  // `{ key: val } as any` in `<div :style="{ key: val } as any" />` is a valid js snippet,
  // but it can't be transformed.
  // We can warp it with `()` to make it a valid js file
 
- let res = await transform(`(${code})`)
+ // 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})`)
 
  res = res.trim()
 

test/template.test.ts

@@ -44,6 +44,12 @@ describe('transform typescript template', () => {
  ).toEqual(`<div @click="(e) => handleClick(e)" />`)
  })
 
+ it('destructuring', async () => {
+ expect(
+ await fixture(`<MyComponent v-slot="{ active, ...slotProps }">{{ active }}</MyComponent>`),
+ ).toEqual(`<MyComponent v-slot="{ active, ...slotProps }">{{ active }}</MyComponent>`)
+ })
+
  it('custom directives', async () => {
  expect(
  await fixture(`<div v-highlight="(highlight as boolean)" />`),