feat(vue-jsx-vapor): support vue sfc

Author: zhiyuanzmj

packages/vue-jsx-vapor/src/core/index.ts

@@ -12,9 +12,17 @@ export function transformVueJsxVapor(
   options?: Options,
   needSourceMap = false,
 ) {
+  const params = new URLSearchParams(id)
+  const vapor = params.get('vapor')
   return transformSync(code, {
     plugins: [
-      [jsx, { compile: options?.compile, interop: options?.interop }],
+      [
+        jsx,
+        {
+          compile: options?.compile,
+          interop: vapor ? false : options?.interop,
+        },
+      ],
       ...(id.endsWith('.tsx')
         ? [[babelTypescript, { isTSX: true, allowExtensions: true }]]
         : []),

playground/package.json

@@ -8,6 +8,8 @@
     "build": "node vite.js build"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue-macros/define-render": "catalog:",
     "vite": "catalog:",
     "vite-hyper-config": "^0.7.0",
     "vite-node": "^3.2.4",

playground/src/App.tsx

@@ -1,5 +1,6 @@
 import { defineVaporComponent, ref, type Ref } from 'vue'
 import { useRef } from 'vue-jsx-vapor'
+import VueComp from './Comp.vue'
 import Count2 from './count'
 import For from './for'
 import Html from './html'
@@ -25,7 +26,7 @@ export default defineVaporComponent(() => {
   return (
     <>
       <fieldset>
-        <legend>Component</legend>
+        <VueComp />
         <input
           value_prop={count.value}
           onInput={(e) => (count.value = e.currentTarget.value)}

playground/src/Comp.vue

@@ -0,0 +1,3 @@
+<script vapor lang="tsx">
+defineRender(<legend>Component</legend>)
+</script>

playground/tsconfig.json

@@ -8,7 +8,7 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
-    "types": ["vite/client"],
+    "types": ["vite/client", "@vue-macros/define-render/macros-global.d.ts"],
     "strict": true,
     "strictNullChecks": true,
     "esModuleInterop": true

playground/vite.config.ts

@@ -1,12 +1,19 @@
+import Vue from '@vitejs/plugin-vue'
+import DefineRender from '@vue-macros/define-render/vite'
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
 import VueJsxVapor from 'vue-jsx-vapor/vite'
 
 export default defineConfig({
   plugins: [
+    Vue(),
     VueJsxVapor({
+      // interop: true,
       macros: true,
     }),
+    DefineRender({
+      vapor: true,
+    }),
     Inspect(),
   ],
 })