pref(transform): improve bundle size

Author: zhiyuanzmj

package.json

@@ -1,7 +1,7 @@
 {
   "name": "unplugin-vue-jsx-vapor",
   "version": "1.0.3",
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@9.5.0",
   "description": "Converts Vue JSX to Vapor",
   "type": "module",
   "keywords": [

playground/App.vue

@@ -17,7 +17,7 @@ export default defineComponent({
     }
 
     const Count1 = ({ value }) => {
-      return <div>{value}</div>
+      return <div>{value.value}</div>
     }
 
     return (
@@ -30,7 +30,7 @@ export default defineComponent({
           />
 
           <Count value={count.value} />
-          <Count1 value={count.value} />
+          <Count1 value={count} />
           <Count2 value={count.value} />
         </fieldset>
 

pnpm-lock.yaml

@@ -35,8 +35,10 @@ export function transformVueJsxVapor(
     },
   })
 
-  const importSet = new Set()
-  const preambles: string[] = []
+  let preambleIndex = 0
+  const importSet = new Set<string>()
+  const delegateEventSet = new Set<string>()
+  const preambleMap = new Map<string, string>()
   for (const { node } of rootNodes) {
     if (isJSXElement(node)) {
       let { code, vaporHelpers, preamble } = compile(s.sliceNode(node), {
@@ -47,22 +49,47 @@ export function transformVueJsxVapor(
         ...options?.compile,
       })
       vaporHelpers.forEach((helper) => importSet.add(helper))
-      preamble = preamble.replace(/^[^\n]*;\n?/, '')
+
       preamble = preamble.replaceAll(
-        /(?<=const t)(?=\d)/g,
-        `_${preambles.length}`,
-      )
-      s.overwriteNode(
-        node,
-        code.replaceAll(/(?<= t)(?=\d)/g, `_${preambles.length}`),
+        /(?<=const )t(?=(\d))/g,
+        `_${preambleIndex}`,
       )
-      preambles.push(preamble)
+      code = code.replaceAll(/(?<== )t(?=\d)/g, `_${preambleIndex}`)
+      preambleIndex++
+
+      for (const [, key, value] of preamble.matchAll(
+        /const (_\d+) = (_template\(.*\))/g,
+      )) {
+        const result = preambleMap.get(value)
+        if (result) {
+          code = code.replaceAll(key, result)
+        } else {
+          preambleMap.set(value, key)
+        }
+      }
+
+      for (const [, events] of preamble.matchAll(/_delegateEvents\((.*)\)/g)) {
+        events.split(', ').forEach((event) => delegateEventSet.add(event))
+      }
+
+      s.overwriteNode(node, code)
+    }
+  }
+
+  if (delegateEventSet.size) {
+    s.prepend(`_delegateEvents(${Array.from(delegateEventSet).join(', ')});\n`)
+  }
+
+  if (preambleMap.size) {
+    let preambleResult = ''
+    for (const [value, key] of preambleMap) {
+      preambleResult += `const ${key} = ${value}\n`
     }
+    s.prepend(preambleResult)
   }
 
-  s.prepend(
-    `import { ${Array.from(importSet).map((i) => `${i} as _${i}`)} } from 'vue/vapor';\n${preambles.join('')}`,
-  )
+  const importResult = Array.from(importSet).map((i) => `${i} as _${i}`)
+  s.prepend(`import { ${importResult} } from 'vue/vapor';\n`)
 
   return generateTransform(s, id)
 }

src/core/transform.ts

@@ -0,0 +1,35 @@
+import { describe, expect, test } from 'vitest'
+import { transformVueJsxVapor } from '../src/core/transform'
+
+describe('transform', () => {
+  test('transform multiple components', () => {
+    const { code } = transformVueJsxVapor(
+      `const a = <div onClick={onClick}>Hello</div>
+       const b = <>{foo? <div onClick={onClick}>Hello</div> : <div onDblclick={onDblclick}>World</div>}</>`,
+      'tsx',
+    )!
+    expect(code).toMatchInlineSnapshot(`
+      "import { delegate as _delegate,createIf as _createIf,delegateEvents as _delegateEvents,template as _template } from 'vue/vapor';
+      const _00 = _template("<div>Hello</div>")
+      const _01 = _template("<div>World</div>")
+      _delegateEvents("click", "dblclick");
+      const a = (() => {
+        const n0 = _00()
+        _delegate(n0, "click", () => onClick)
+        return n0
+      })()
+             const b = (() => {
+        const n0 = _createIf(() => (foo), () => {
+          const n2 = _00()
+          _delegate(n2, "click", () => onClick)
+          return n2
+        }, () => {
+          const n4 = _01()
+          _delegate(n4, "dblclick", () => onDblclick)
+          return n4
+        })
+        return n0
+      })()"
+    `)
+  })
+})