feat: jsx to template

Author: zhiyuanzmj

README.md

@@ -2,22 +2,7 @@
 
 [![NPM version](https://img.shields.io/npm/v/unplugin-vue-jsx-vapor?color=a1b858&label=)](https://www.npmjs.com/package/unplugin-vue-jsx-vapor)
 
-Starter template for [unplugin](https://github.com/unjs/unplugin).
-
-## Template Usage
-
-To use this template, clone it down using:
-
-```bash
-npx degit unplugin/unplugin-vue-jsx-vapor my-unplugin
-```
-
-And do a global replacement of `unplugin-vue-jsx-vapor` with your plugin name.
-
-Then you can start developing your unplugin 🔥
-
-To test your plugin, run: `pnpm run dev`
-To release a new version, run: `pnpm run release`
+Convert JSX to Template for compiler-vapor.
 
 ## Install
 
@@ -30,11 +15,13 @@ npm i unplugin-vue-jsx-vapor
 
 ```ts
 // vite.config.ts
-import Starter from 'unplugin-vue-jsx-vapor/vite'
+import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'
 
 export default defineConfig({
   plugins: [
-    Starter({ /* options */ }),
+    VueJsxVapor({
+      /* options */
+    }),
   ],
 })
 ```
@@ -48,18 +35,19 @@ Example: [`playground/`](./playground/)
 
 ```ts
 // rollup.config.js
-import Starter from 'unplugin-vue-jsx-vapor/rollup'
+import VueJsxVapor from 'unplugin-vue-jsx-vapor/rollup'
 
 export default {
   plugins: [
-    Starter({ /* options */ }),
+    VueJsxVapor({
+      /* options */
+    }),
   ],
 }
 ```
 
 <br></details>
 
-
 <details>
 <summary>Webpack</summary><br>
 
@@ -68,8 +56,10 @@ export default {
 module.exports = {
   /* ... */
   plugins: [
-    require('unplugin-vue-jsx-vapor/webpack')({ /* options */ })
-  ]
+    require('unplugin-vue-jsx-vapor/webpack')({
+      /* options */
+    }),
+  ],
 }
 ```
 
@@ -82,7 +72,12 @@ module.exports = {
 // nuxt.config.js
 export default defineNuxtConfig({
   modules: [
-    ['unplugin-vue-jsx-vapor/nuxt', { /* options */ }],
+    [
+      'unplugin-vue-jsx-vapor/nuxt',
+      {
+        /* options */
+      },
+    ],
   ],
 })
 ```
@@ -99,7 +94,9 @@ export default defineNuxtConfig({
 module.exports = {
   configureWebpack: {
     plugins: [
-      require('unplugin-vue-jsx-vapor/webpack')({ /* options */ }),
+      require('unplugin-vue-jsx-vapor/webpack')({
+        /* options */
+      }),
     ],
   },
 }
@@ -113,10 +110,10 @@ module.exports = {
 ```ts
 // esbuild.config.js
 import { build } from 'esbuild'
-import Starter from 'unplugin-vue-jsx-vapor/esbuild'
+import VueJsxVapor from 'unplugin-vue-jsx-vapor/esbuild'
 
 build({
-  plugins: [Starter()],
+  plugins: [VueJsxVapor()],
 })
 ```
 

package.json

@@ -91,7 +91,8 @@
     "prepublishOnly": "npm run build",
     "release": "bumpp && npm publish",
     "start": "esno src/index.ts",
-    "test": "vitest"
+    "test": "vitest",
+    "postinstall": "if [ ! -d './core-vapor' ]; then git clone https://github.com/vuejs/core-vapor.git; cd core-vapor; pnpm i; pnpm build; pnpm build-dts; cd ..; pnpm add ./core-vapor/packages/vue; fi"
   },
   "peerDependencies": {
     "@nuxt/kit": "^3",
@@ -122,13 +123,15 @@
     }
   },
   "dependencies": {
-    "unplugin": "^1.5.1"
+    "@vue-macros/common": "^1.10.0",
+    "unplugin": "^1.5.1",
+    "vue": "link:core-vapor/packages/vue"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.2.2",
     "@nuxt/kit": "^3.8.2",
     "@nuxt/schema": "^3.8.2",
     "@types/node": "^20.10.3",
+    "@typescript-eslint/parser": "^6.18.1",
     "bumpp": "^9.2.0",
     "chalk": "^5.3.0",
     "eslint": "^8.55.0",
@@ -139,7 +142,7 @@
     "rollup": "^4.6.1",
     "tsup": "^8.0.1",
     "typescript": "^5.3.2",
-    "vite": "^5.0.4",
+    "vite": "^4.5.1",
     "vitest": "^0.34.6",
     "webpack": "^5.89.0"
   }

playground/App.vue

@@ -0,0 +1,33 @@
+<script lang="tsx">
+import { defineComponent } from 'vue';
+import { ref } from 'vue/vapor'
+
+export default defineComponent({
+  setup() {
+    const count = ref(1)
+
+    return (
+      <>
+        <form onSubmit_prevent>
+          <input
+            v-bind:value={count.value}
+            onInput={(event: any) => count.value=event.target.value} 
+          />
+
+          <div>v-text: <span v-text={count.value}/></div>
+          <div>v-html: <span v-html={count.value}/></div>
+          <div>v-once: <span v-once>{count.value}</span></div>
+          <div>v-pre: <span v-pre>{count.value}</span></div>
+          <div>v-cloak: <span v-cloak>{count.value}</span></div>
+        </form>
+      </>
+    )
+  }  
+})
+</script>
+
+<style>
+[v-cloak] {
+  color: red;
+}
+</style>

playground/index.html

@@ -7,7 +7,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <a href="/__inspect/#/module?id=./main.ts&index=2" target="_blank" style="text-decoration: none; margin-top:10px; display: block;">visit /__inspect/ to inspect the intermediate state</a>
   <script type="module" src="./main.ts"></script>
 </body>
 </html>

playground/macros-global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vue-macros/define-render/macros-global" />

playground/main.ts

@@ -1 +1,6 @@
-document.getElementById('app')!.innerHTML = '__UNPLUGIN__'
+import { render } from 'vue/vapor'
+
+const modules = import.meta.glob<any>('./*.(vue|js)')
+const mod = (modules[`.${location.pathname}`] || modules['./App.vue'])()
+
+mod.then(({ default: mod }) => render(mod, {}, '#app'))

playground/package.json

@@ -4,7 +4,12 @@
     "dev": "nodemon -w '../src/**/*.ts' -e .ts -x vite"
   },
   "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.2",
+    "@vue-macros/volar": "^0.18.10",
     "vite": "^5.0.4",
-    "vite-plugin-inspect": "^0.8.1"
+    "vite-plugin-inspect": "^0.8.1",
+    "@vue-macros/define-render": "^1.5.1",
+    "@vue-macros/reactivity-transform": "^0.4.2",
+    "unplugin-vue-jsx-vapor": "workspace:*"
   }
 }

playground/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "lib": ["esnext", "DOM"],
+    "module": "esnext",
+    "jsxImportSource": "vue",
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/export-render",
+      "@vue-macros/volar/jsx-directive",
+    ]
+  },
+  "exclude": ["dist", "eslint.config.js"]
+}

playground/vite.config.ts

@@ -1,10 +1,9 @@
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
-import Unplugin from '../src/vite'
+import Vue from '@vitejs/plugin-vue'
+import defineRender from '@vue-macros/define-render/vite'
+import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'
 
 export default defineConfig({
-  plugins: [
-    Inspect(),
-    Unplugin(),
-  ],
+  plugins: [Vue(), defineRender(), VueJsxVapor(), Inspect()],
 })