fix: add support for multiple statements in v-on snippets (#36)

Author: Teages

README.md

@@ -13,10 +13,10 @@ Install package:
 
 ```sh
 # npm
-npm install vue-sfc-transformer
+npm install vue-sfc-transformer vue @vue/compiler-core esbuild
 
 # pnpm
-pnpm install vue-sfc-transformer
+pnpm install vue-sfc-transformer vue @vue/compiler-core esbuild
 ```
 
 ```js

package.json

@@ -44,6 +44,7 @@
     "test:types": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@vue/compiler-core": "^3.5.13",
     "esbuild": "*",
     "vue": "^3.5.13"
   },
@@ -55,6 +56,7 @@
     "@babel/types": "7.27.0",
     "@types/node": "22.14.1",
     "@vitest/coverage-v8": "3.1.2",
+    "@vue/compiler-core": "3.5.13",
     "@vue/compiler-dom": "3.5.13",
     "bumpp": "10.1.0",
     "changelogithub": "13.13.0",

pnpm-lock.yaml

@@ -1,4 +1,5 @@
-import type { AttributeNode, DirectiveNode, ExpressionNode, ForParseResult, ParentNode, RootNode, SourceLocation, TemplateChildNode, TextNode } from '@vue/compiler-dom'
+import type { AttributeNode, DirectiveNode, ExpressionNode, ParentNode, RootNode, SourceLocation, TemplateChildNode, TextNode } from '@vue/compiler-dom'
+import { isFnExpressionBrowser as isFnExpression, isMemberExpressionBrowser as isMemberExpression } from '@vue/compiler-core'
 
 // copy from `@vue/compiler-dom`
 enum NodeTypes {
@@ -37,14 +38,8 @@ enum NodeTypes {
   JS_RETURN_STATEMENT,
 }
 
-interface ExpressionTrack {
-  type: NodeTypes
-  name?: string
-  forParseResult?: ForParseResult
-}
-
 interface Expression {
-  track: ExpressionTrack[]
+  track: VueTemplateNode[]
   loc: SourceLocation
   src: string
   replacement?: string
@@ -60,7 +55,7 @@ type VueTemplateNode =
 function handleNode(
   node: VueTemplateNode | undefined,
   addExpression: (...expressions: Expression[]) => void,
-  track: ExpressionTrack[],
+  track: VueTemplateNode[],
 ) {
   if (!node) {
     return
@@ -264,6 +259,43 @@ const defaultSnippetHandler: SnippetHandler = {
   standalone: false,
 }
 
+const multipleStatementsSnippetHandler: SnippetHandler = {
+  key: (node) => {
+    const key = `multipleStatements$:${node.src}`
+    const secondLastTrack = node.track.at(-2)
+    const lastTrack = node.track.at(-1)
+
+    if (
+      lastTrack?.type === NodeTypes.SIMPLE_EXPRESSION
+      && secondLastTrack?.type === NodeTypes.DIRECTIVE
+      && secondLastTrack.name === 'on'
+    ) {
+      const isMemberExp = isMemberExpression(lastTrack)
+      const isInlineStatement = !(isMemberExp || isFnExpression(lastTrack))
+
+      const hasMultipleStatements = node.src.includes(';')
+
+      if ((isInlineStatement || isMemberExp) && hasMultipleStatements) {
+        return key
+      }
+    }
+
+    return null
+  },
+  prepare: (node, id) => `wrapper_${id}(() => {${node.src}});`,
+  parse: (code) => {
+    const wrapperRegex = /^(wrapper_\d+)\(\(\) => \{([\s\S]*?)\}\);$/
+
+    const [_, wrapperName, res] = code.trim().match(wrapperRegex) ?? []
+    if (!wrapperName || !res) {
+      return undefined
+    }
+
+    return res.trim().replace(/;$/, '')
+  },
+  standalone: false,
+}
+
 const destructureSnippetHandler: SnippetHandler = {
   key: (node) => {
     const key = `destructure$:${node.src}`
@@ -299,7 +331,7 @@ const destructureSnippetHandler: SnippetHandler = {
   standalone: true,
 }
 
-const snippetHandlers = [destructureSnippetHandler, defaultSnippetHandler]
+const snippetHandlers = [destructureSnippetHandler, multipleStatementsSnippetHandler, defaultSnippetHandler]
 function getKey(expression: Expression) {
   for (const handler of snippetHandlers) {
     const key = handler.key(expression)

src/utils/template.ts

@@ -58,6 +58,22 @@ describe('transform typescript template', () => {
         ping();
       }" />"
     `)
+
+    // https://github.com/nuxt/module-builder/issues/587#issuecomment-2820414064
+    expect(
+      await fixture(`<div @click="a(); b()" />`),
+    ).toMatchInlineSnapshot(`
+      "<div @click="a();
+        b()" />"
+    `)
+    expect(
+      await fixture(`<div @click="a(); () => {}; b()" />`),
+    ).toMatchInlineSnapshot(`
+      "<div @click="a();
+        () => {
+        };
+        b()" />"
+    `)
   })
 
   it('v-slot', async () => {