feat: add restructure plugin

Author: zhiyuanzmj

README.md

@@ -12,6 +12,54 @@ Convert Vue JSX to Vapor.
 npm i unplugin-vue-jsx-vapor
 ```
 
+> [!CAUTION]
+> The destructuring of props in a functional component will cause loss of reactivity.
+
+```tsx
+function Comp({ foo }) {
+  return <div>{foo}</div>
+}
+
+const foo = ref('foo')
+export default <Comp foo={foo.value} />
+```
+
+#### Solutions
+
+1. Pass a ref variable as prop:
+
+```tsx
+function Comp({ foo }) {
+  return <div>{foo.value}</div>
+}
+
+const foo = ref('foo')
+export default <Comp foo={foo} />
+```
+
+2. Turn on the restructure option to restructure props.
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  plugins: [
+    VueJsxVapor({
+      restructure: true,
+    }),
+  ],
+})
+```
+
+```tsx
+function Comp({ foo }) {
+  return <div>{foo}</div>
+}
+// Will be convert to:
+function Comp(_ctx0) {
+  return <div>{_ctx0.foo}</div>
+}
+```
+
 <details>
 <summary>Vite</summary><br>
 
@@ -20,9 +68,7 @@ npm i unplugin-vue-jsx-vapor
 import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'
 
 export default defineConfig({
-  plugins: [
-    VueJsxVapor(),
-  ],
+  plugins: [VueJsxVapor()],
 })
 ```
 
@@ -38,9 +84,7 @@ Example: [`playground/`](./playground/)
 import VueJsxVapor from 'unplugin-vue-jsx-vapor/rollup'
 
 export default {
-  plugins: [
-    VueJsxVapor(),
-  ],
+  plugins: [VueJsxVapor()],
 }
 ```
 
@@ -53,9 +97,7 @@ export default {
 // webpack.config.js
 module.exports = {
   /* ... */
-  plugins: [
-    require('unplugin-vue-jsx-vapor/webpack')(),
-  ],
+  plugins: [require('unplugin-vue-jsx-vapor/webpack')()],
 }
 ```
 
@@ -67,11 +109,7 @@ module.exports = {
 ```ts
 // nuxt.config.js
 export default defineNuxtConfig({
-  modules: [
-    [
-      'unplugin-vue-jsx-vapor/nuxt',
-    ],
-  ],
+  modules: [['unplugin-vue-jsx-vapor/nuxt']],
 })
 ```
 
@@ -86,9 +124,7 @@ export default defineNuxtConfig({
 // vue.config.js
 module.exports = {
   configureWebpack: {
-    plugins: [
-      require('unplugin-vue-jsx-vapor/webpack')(),
-    ],
+    plugins: [require('unplugin-vue-jsx-vapor/webpack')()],
   },
 }
 ```
@@ -104,9 +140,7 @@ import { build } from 'esbuild'
 import VueJsxVapor from 'unplugin-vue-jsx-vapor/esbuild'
 
 build({
-  plugins: [
-    VueJsxVapor()
-  ],
+  plugins: [VueJsxVapor()],
 })
 ```
 

src/core/transformRestructure.ts

@@ -0,0 +1,78 @@
+import {
+  MagicString,
+  babelParse,
+  generateTransform,
+  getLang,
+  walkAST,
+} from '@vue-macros/common'
+import { walkIdentifiers } from '@vue-vapor/compiler-core'
+import { isFunctionExpression } from './utils'
+import type { Node } from '@babel/types'
+
+export function transformRestructure(code: string, id: string) {
+  const s = new MagicString(code)
+  const ast = babelParse(code, getLang(id))
+
+  let index = 0
+  walkAST<Node>(ast, {
+    enter(node) {
+      if (isFunctionExpression(node)) {
+        const result = new Map()
+        for (const param of node.params) {
+          const paths = `_ctx${index++}`
+          if (resolveParams(param, paths, result)) {
+            s.overwrite(param.start!, param.end!, paths)
+          }
+        }
+        if (!result.size) return
+
+        walkIdentifiers(
+          node.body,
+          (id, parent, __, ___, isLocal) => {
+            if (!isLocal && result.get(id.name)) {
+              s.overwrite(
+                id.start!,
+                id.end!,
+                parent.type === 'ObjectProperty' && parent.shorthand
+                  ? `${id.name}: ${result.get(id.name)}`
+                  : result.get(id.name),
+              )
+            }
+          },
+          false,
+        )
+      }
+    },
+  })
+
+  return generateTransform(s, id)
+}
+
+function resolveParams(
+  param: Node,
+  paths: string = '',
+  result: Map<string, string>,
+) {
+  const elements =
+    param.type === 'ObjectPattern'
+      ? param.properties
+      : param.type === 'ArrayPattern'
+        ? param.elements
+        : []
+  if (!elements.length) return
+
+  elements.forEach((element, index) => {
+    if (element?.type === 'Identifier') {
+      result.set(element.name, `${paths}[${index}]`)
+    } else if (
+      element?.type === 'ObjectProperty' &&
+      element.key.type === 'Identifier'
+    ) {
+      if (!resolveParams(element.value, `${paths}.${element.key.name}`, result))
+        result.set(element.key.name, `${paths}.${element.key.name}`)
+    } else if (element) {
+      resolveParams(element, `${paths}[${index}]`, result)
+    }
+  })
+  return true
+}

src/index.ts

@@ -1,21 +1,74 @@
 import { type UnpluginFactory, createUnplugin } from 'unplugin'
-import { createFilter } from 'vite'
+import { createFilter, transformWithEsbuild } from 'vite'
 import { transformVueJsxVapor } from './core/transform'
+import { transformRestructure } from './core/transformRestructure'
 import type { Options } from './types'
 
 export const unpluginFactory: UnpluginFactory<Options | undefined> = (
   options = {},
-) => ({
-  enforce: 'pre',
-  name: 'unplugin-vue-jsx-vapor',
-  transformInclude: createFilter(
+) => {
+  const transformInclude = createFilter(
     options?.include || /\.[jt]sx$/,
     options?.exclude,
-  ),
-  transform(code, id) {
-    return transformVueJsxVapor(code, id, options)
-  },
-})
+  )
+  return [
+    {
+      name: 'unplugin-vue-jsx-vapor',
+      vite: {
+        config(config) {
+          return {
+            // only apply esbuild to ts files
+            // since we are handling jsx and tsx now
+            esbuild: {
+              include: /\.ts$/,
+            },
+            define: {
+              __VUE_OPTIONS_API__: config.define?.__VUE_OPTIONS_API__ ?? true,
+              __VUE_PROD_DEVTOOLS__:
+                config.define?.__VUE_PROD_DEVTOOLS__ ?? false,
+              __VUE_PROD_HYDRATION_MISMATCH_DETAILS__:
+                config.define?.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ?? false,
+            },
+          }
+        },
+      },
+      transformInclude,
+      transform(code, id) {
+        const result = transformVueJsxVapor(code, id, options)
+        return result
+      },
+    },
+    {
+      name: 'unplugin-esbuild',
+      transformInclude,
+      transform(code, id) {
+        return transformWithEsbuild(code, id, {
+          target: 'esnext',
+          charset: 'utf8',
+          minify: false,
+          minifyIdentifiers: false,
+          minifySyntax: false,
+          minifyWhitespace: false,
+          treeShaking: false,
+          keepNames: false,
+          supported: {
+            'dynamic-import': true,
+            'import-meta': true,
+          },
+        })
+      },
+    },
+    ...(options?.restructure
+      ? [
+          {
+            name: 'unplugin-restructure',
+            transformInclude,
+            transform: transformRestructure,
+          },
+        ]
+      : []),
+  ]
+}
 
 export const unplugin = /* #__PURE__ */ createUnplugin(unpluginFactory)
 

src/types.ts

@@ -6,4 +6,5 @@ export interface Options {
   include?: FilterPattern
   exclude?: FilterPattern
   compile?: CompilerOptions
+  restructure?: boolean
 }

test/transformReconstruct.spec.ts

@@ -0,0 +1,26 @@
+import { describe, expect, test } from 'vitest'
+import { transformRestructure } from '../src/core/transformRestructure'
+
+describe('transform', () => {
+  test('transform reconstruct', () => {
+    const { code } = transformRestructure(
+      `const App = ([[[,foo]], {id: {foo: [bar]}}], { baz }) => {
+        function onClick({ foo }){
+          return { foo, baz: baz.baz }
+        };
+        return [ foo, bar, baz ]
+      }`,
+      'tsx',
+    )!
+    expect(code).toMatchInlineSnapshot(
+      `
+      "const App = (_ctx0, _ctx1) => {
+              function onClick(_ctx2){
+                return { foo: _ctx2.foo, baz: _ctx1.baz.baz }
+              };
+              return [ _ctx0[0][0][1], _ctx0[1].id.foo[0], _ctx1.baz ]
+            }"
+    `,
+    )
+  })
+})