feat: add interop mode

Author: zhiyuanzmj

packages/babel/src/index.ts

@@ -14,8 +14,15 @@ export type Options = {
   delegateEventSet: Set<string>
   preambleMap: Map<string, string>
   preambleIndex: number
-  roots: { node: JSXElement | JSXFragment; source: string }[]
-  compile?: CompilerOptions
+  roots: {
+    node: JSXElement | JSXFragment
+    source: string
+    inVaporComponent: boolean
+  }[]
+  opts: {
+    interop?: boolean
+    compile?: CompilerOptions
+  }
 }
 
 export default (): {
@@ -47,6 +54,18 @@ export default (): {
               state.roots.push({
                 node: path.node,
                 source: path.getSource(),
+                inVaporComponent: !state.opts.interop
+                  ? true
+                  : (
+                      path.findParent(
+                        ({ node }) =>
+                          node.type === 'CallExpression' &&
+                          node.callee.type === 'Identifier' &&
+                          ['defineVaporComponent', 'defineComponent'].includes(
+                            node.callee.name,
+                          ),
+                      ) as any
+                    )?.node.callee.name === 'defineVaporComponent',
               })
             }
           }

packages/babel/src/transform.ts

@@ -13,15 +13,15 @@ export const transformJSX: VisitNodeFunction<
   if (isJSXElement(path.parent)) return
 
   const root = state.roots.shift()
-  if (!root) return
+  if (!root || !root.inVaporComponent) return
 
   const isTS = state.filename?.endsWith('tsx')
   let { code, helpers, preamble, map } = compile(root.node, {
     isTS,
     filename: state.filename,
     sourceMap: true,
     source: ' '.repeat(root.node.start || 0) + root.source,
-    ...state?.compile,
+    ...state.opts.compile,
   })
 
   helpers.forEach((helper) => state.importSet.add(helper))

packages/babel/test/interop.spec.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from 'vitest'
+import { transformSync } from '@babel/core'
+import jsx from '../src/index'
+
+describe('transform', () => {
+  test('transform multiple components', () => {
+    const { code } = transformSync(
+      `const A = defineComponent(() => {
+         defineVaporComponent(() => <div />)
+         return () => <div />
+       })
+       const B = defineVaporComponent(() => {
+        const C = defineComponent(() => <div />)
+        const D = <div />
+        return <div />
+       })`,
+      {
+        filename: 'test.tsx',
+        plugins: [[jsx, { interop: true }]],
+      },
+    )!
+    expect(code).toMatchInlineSnapshot(`
+      "import { template as _template } from 'vue';
+      const _t00 = _template("<div></div>", true);
+      const A = defineComponent(() => {
+        defineVaporComponent(() => (() => {
+          const n0 = _t00();
+          return n0;
+        })());
+        return () => <div />;
+      });
+      const B = defineVaporComponent(() => {
+        const C = defineComponent(() => <div />);
+        const D = (() => {
+          const n0 = _t00();
+          return n0;
+        })();
+        return (() => {
+          const n0 = _t00();
+          return n0;
+        })();
+      });"
+    `)
+  })
+})

packages/unplugin/src/core/index.ts

@@ -17,7 +17,7 @@ export function transformVueJsxVapor(
 ) {
   const result = transformSync(code, {
     plugins: [
-      [jsx, { compile: options?.compile }],
+      [jsx, { compile: options?.compile, interop: options?.interop }],
       id.endsWith('.tsx')
         ? [babelTypescript, { isTSX: true, allowExtensions: true }]
         : null,

packages/unplugin/src/index.ts

@@ -9,29 +9,31 @@ export const unpluginFactory: UnpluginFactory<Options | undefined> = (
 ) => {
   return [
     plugin(options, meta),
-    {
-      name: 'unplugin-esbuild',
-      transformInclude: createFilter(
-        options?.include || /\.[jt]sx$/,
-        options?.exclude,
-      ),
-      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.interop
+      ? { name: 'interop' }
+      : {
+          name: 'unplugin-esbuild',
+          transformInclude: createFilter(
+            options?.include || /\.[jt]sx$/,
+            options?.exclude,
+          ),
+          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,
+              },
+            })
           },
-        })
-      },
-    },
+        },
   ]
 }
 

packages/unplugin/src/types.ts

@@ -5,5 +5,6 @@ export interface Options {
   // define your plugin options here
   include?: FilterPattern
   exclude?: FilterPattern
+  interop?: boolean
   compile?: CompilerOptions
 }

playground/main.ts

@@ -1,13 +1,13 @@
-import { createVaporApp } from 'vue'
+import { createApp, vaporInteropPlugin } from 'vue'
 
 const modules = import.meta.glob<any>('./src/*.tsx')
 const mod = (
   modules[`./src${location.pathname}.tsx`] || modules['./src/App.tsx']
 )()
 
 mod.then(({ default: mod }) => {
-  const app = createVaporApp(mod)
-  app.mount('#app')
+  const app = createApp(mod)
+  app.use(vaporInteropPlugin).mount('#app')
 
   // @ts-expect-error
   globalThis.unmount = () => {

playground/src/interop.tsx

@@ -0,0 +1,24 @@
+import { defineComponent, defineVaporComponent, ref } from 'vue'
+
+const VaporComp = defineVaporComponent(
+  (props) => {
+    return (
+      <div>
+        Vapor Component:
+        {props.model}
+      </div>
+    )
+  },
+  { props: ['model'] },
+)
+
+const Comp = (props) => <div>Virtual Dom Component:{props.model}</div>
+
+export default defineComponent(() => {
+  const model = ref('')
+  return () => [
+    <input v-model={model.value}></input>,
+    <Comp model={model.value}></Comp>,
+    <VaporComp model={model.value} />,
+  ]
+})

playground/vite.config.ts

@@ -1,7 +1,14 @@
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
 import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'
+import VueJsx from '@vitejs/plugin-vue-jsx'
 
 export default defineConfig({
-  plugins: [VueJsxVapor(), Inspect()],
+  plugins: [
+    VueJsxVapor({
+      interop: true,
+    }),
+    VueJsx(),
+    Inspect(),
+  ],
 })