vue-jsx 0.2.8 → 3.3.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 zhiyuanzmj <https://github.com/zhiyuanzmj>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,112 +1,111 @@
 # vue-jsx
 
-## 目标
-简化 vue createElement 写法，从而可以手写 render vnode。
+[![NPM version](https://img.shields.io/npm/v/vue-jsx?color=a1b858&label=)](https://www.npmjs.com/package/vue-jsx)
 
+High-performance Vue JSX Compiler powered by Oxc.
 
-## 安装
+## Features
 
+- ⚡️ High Performance: The same compiler principles as Vue.
+- 💨 Vapor Mode: The same compiler principles as Vue Vapor.
+- 🦀 Rust Compiler: Powered by Oxc, 35× faster (Virtual DOM) and 50× faster (Vapor) than Babel.
+- 🦾 Type Safe: Native type support for Typescript 7.0.
+- ✨ Unplugin: Provide `vite`, `rollup`, `rolldown` `webpack`, `rspack`, `rsbuild` , `esbuild`, `bun` and more plugins.
+- 📦 Custom Element: Support custom-element by default.
+
+## Installation
+
+```bash
+npm i vue-jsx
 ```
-npm install --save vue-jsx
+
+## Usage
+
+- [📜 Documentation](https://vuejsx.dev/)
+- [🛰️ Playground](https://repl.vuejsx.dev)
+
+<details>
+<summary>Vite</summary><br>
+
+```ts
+// vite.config.ts
+import VueJsx from 'vue-jsx/vite'
+
+export default defineConfig({
+  plugins: [VueJsx()],
+})
 ```
 
-## 使用
+Example: [`playground/`](./playground/)
 
-```javascript
-import jsx from 'vue-jsx'
+<br></details>
 
-const HelloWorld = {
-  props: {
-    msg: String,
-  },
-  render (h) {
-    jsx.use(h)
-    
-    return jsx.create('div', {
-      style_color:'red', 
-      classes: 'hello world',
-    }, this.msg)
-  }
+<details>
+<summary>Rollup</summary><br>
+
+```ts
+// rollup.config.js
+import VueJsx from 'vue-jsx/rollup'
+
+export default {
+  plugins: [VueJsx()],
+}
+```
+
+<br></details>
+
+<details>
+<summary>Webpack</summary><br>
+
+```ts
+// webpack.config.js
+module.exports = {
+  /* ... */
+  plugins: [require('vue-jsx/webpack')()],
 }
 ```
 
-## Api
-
-``` javascript
-1、jsx.use
-  描述：指定依赖的 vue h
-  用法：jsx.use(h)
-
-2、jsx.create
-  描述：创建 vnode 节点
-  用法：
-    jsx.create('div')
-
-    // class 的简写模式
-    jsx.create('div.hello + world')
-    
-    jsx.create('div', {
-      // vif，就是 v-if
-      vif: false,
-
-      // vmodel，就是 v-model
-      // 最多支持4个参数，vmodel: [this, 'val' ,'modelProp', 'modelEvent']
-      vmodel: [this, 'val'],
-
-      classes: 'hello world',
-      class_hello: true,
-      style_color: 'red',
-      attrs_id: 'my_id',
-      props_msg: 'hello, world',
-      domProps_value: 'input value',
-      on_click () {},
-      nativeOn_click () {},
-    })
-
-    jsx.create('div', {style_color:'red'}, 'nihao', 'nihao2')
-
-3、jsx.bind
-  描述：构建快捷方式
-  用法：
-    const div = jsx.bind('div')
-    const HelloWorld = jsx.bind('hello-world')
-
-    const App = {
-      render (h) {
-        jsx.use(h)
-
-        return div({style_color:'red'}, 
-          HelloWorld()
-        )
-      }
-    }
-  备注：实际上 jsx 内置 bind 了大部分常用 dom 元素，比如 a,b,button,dd,div,dl,dt,em,form,i,iframe,img,input,textarea,label,li,ol,optgroup,option,p,select,span,table,th,thead,tbody,tr,td,col,colgroup,ul,h1,h2,h3,h4,h5,h6
+<br></details>
+
+<details>
+<summary>Nuxt</summary><br>
+
+```ts
+// nuxt.config.js
+export default defineNuxtConfig({
+  modules: ['vue-jsx/nuxt'],
+})
 ```
 
-## 演示
-``` javascript
-import jsx from 'vue-jsx'
+> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
+
+<br></details>
 
-const {div, h2, p, span, img} = jsx
+<details>
+<summary>Vue CLI</summary><br>
 
-const HelloWord = {
-  props: {
-    data: Array,
+```ts
+// vue.config.js
+module.exports = {
+  configureWebpack: {
+    plugins: [require('vue-jsx/webpack')()],
   },
-  render (h) {
-    jsx.use(h)
-
-    return div('.hello-world'
-      h2('hello-world-title'),
-      div('.hello-world-list'
-        ...this.data.map(item => {
-          return div('.hello-world-item',
-            img({attrs_src: item.imgSrc}),
-            p(item.content),
-          )
-        })
-      )
-    )
-  }
 }
 ```
+
+<br></details>
+
+<details>
+<summary>esbuild</summary><br>
+
+```ts
+// esbuild.config.js
+import { build } from 'esbuild'
+import VueJsx from 'vue-jsx/esbuild'
+
+build({
+  plugins: [VueJsx()],
+})
+```
+
+<br></details>

package/dist/api.d.ts

@@ -0,0 +1,7 @@
+import * as _$_vue_jsx_compiler0 from "@vue-jsx/compiler";
+import { CompilerOptions } from "@vue-jsx/compiler";
+
+//#region src/core/index.d.ts
+declare function transformVueJsx(code: string, id: string, options?: CompilerOptions): _$_vue_jsx_compiler0.TransformReturn;
+//#endregion
+export { type CompilerOptions, transformVueJsx };

package/dist/api.js

@@ -0,0 +1,2 @@
+import { t as transformVueJsx } from "./core-D6A0aY-g.js";
+export { transformVueJsx };

package/dist/astro.d.ts

@@ -0,0 +1,11 @@
+import { t as Options } from "./options-DHzozgGn.js";
+
+//#region src/astro.d.ts
+declare const _default: (options: Options) => {
+  name: string;
+  hooks: {
+    'astro:config:setup': (astro: any) => void;
+  };
+};
+//#endregion
+export { _default as default };

package/dist/astro.js

@@ -0,0 +1,11 @@
+import unplugin from "./unplugin.js";
+//#region src/astro.ts
+var astro_default = (options) => ({
+	name: "vue-jsx",
+	hooks: { "astro:config:setup": (astro) => {
+		astro.config.vite.plugins ||= [];
+		astro.config.vite.plugins.push(unplugin.vite(options));
+	} }
+});
+//#endregion
+export { astro_default as default };

package/dist/bun.d.ts

@@ -0,0 +1,6 @@
+import { t as Options } from "./options-DHzozgGn.js";
+
+//#region src/bun.d.ts
+declare const _default: (options?: Options | undefined) => BunPlugin;
+//#endregion
+export { _default as default };

package/dist/bun.js

@@ -0,0 +1,5 @@
+import unplugin from "./unplugin.js";
+//#region src/bun.ts
+var bun_default = unplugin.bun;
+//#endregion
+export { bun_default as default };

package/dist/core-D6A0aY-g.js

@@ -0,0 +1,11 @@
+import { transform } from "@vue-jsx/compiler";
+//#region src/core/index.ts
+function transformVueJsx(code, id, options) {
+	return transform(code, {
+		filename: id,
+		interop: new URLSearchParams(id).get("vapor") ? false : options?.interop,
+		...options
+	});
+}
+//#endregion
+export { transformVueJsx as t };

package/dist/esbuild.d.ts

@@ -0,0 +1,7 @@
+import { t as Options } from "./options-DHzozgGn.js";
+import * as _$unplugin from "unplugin";
+
+//#region src/esbuild.d.ts
+declare const _default: (options?: Options | undefined) => _$unplugin.EsbuildPlugin;
+//#endregion
+export { _default as default };

package/dist/esbuild.js

@@ -0,0 +1,5 @@
+import unplugin from "./unplugin.js";
+//#region src/esbuild.ts
+var esbuild_default = unplugin.esbuild;
+//#endregion
+export { esbuild_default as default };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "@vue-jsx/runtime";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "@vue-jsx/runtime";
+export {};

package/dist/nuxt.d.ts

@@ -0,0 +1,8 @@
+import { t as Options } from "./options-DHzozgGn.js";
+import * as _$_nuxt_schema0 from "@nuxt/schema";
+
+//#region src/nuxt.d.ts
+interface ModuleOptions extends Options {}
+declare const _default: _$_nuxt_schema0.NuxtModule<ModuleOptions, ModuleOptions, false>;
+//#endregion
+export { ModuleOptions, _default as default };

package/dist/nuxt.js

@@ -0,0 +1,17 @@
+import vite_default from "./vite.js";
+import webpack_default from "./webpack.js";
+import { addVitePlugin, addWebpackPlugin, defineNuxtModule } from "@nuxt/kit";
+import "@nuxt/schema";
+//#region src/nuxt.ts
+var nuxt_default = defineNuxtModule({
+	meta: {
+		name: "nuxt-vue-jsx",
+		configKey: "vue-jsx"
+	},
+	setup(options) {
+		addVitePlugin(() => vite_default(options));
+		addWebpackPlugin(() => webpack_default(options));
+	}
+});
+//#endregion
+export { nuxt_default as default };

package/dist/options-DHzozgGn.d.ts

@@ -0,0 +1,25 @@
+import { CompilerOptions } from "@vue-jsx/compiler";
+import { FilterPattern } from "unplugin";
+import { Options } from "@vue-jsx/macros";
+
+//#region src/options.d.ts
+interface Options$1 extends CompilerOptions {
+  // define your plugin options here
+  include?: FilterPattern;
+  exclude?: FilterPattern;
+  /**
+   * @default true
+   * By default, only JSX elements inside `defineVaporComponent` / `defineVaporCustomElement`,
+   * or in files ending with `.vapor.jsx` / `.vapor.tsx` (e.g., `Comp.vapor.tsx`), will be compiled to Vapor DOM.
+   * Set this to `true` if you want all JSX elements to be compiled to Vapor DOM.
+   */
+  vapor?: boolean;
+  /** @default true */
+  ref?: {
+    alias?: string[];
+  } | boolean;
+  /** @default false */
+  macros?: Options | boolean;
+}
+//#endregion
+export { Options$1 as t };

package/dist/raw.d.ts

@@ -0,0 +1,7 @@
+import { t as Options } from "./options-DHzozgGn.js";
+import { UnpluginOptions } from "unplugin";
+
+//#region src/raw.d.ts
+declare const plugin: (options?: Options) => UnpluginOptions[];
+//#endregion
+export { plugin as default };

package/dist/raw.js

@@ -0,0 +1,64 @@
+import { t as transformVueJsx } from "./core-D6A0aY-g.js";
+import macros from "@vue-jsx/macros/raw";
+import { propsHelperCode, propsHelperId, ssrHelperCode, ssrHelperId, vaporHelperCode, vaporHelperId, vdomHelperCode, vdomHelperId } from "@vue-jsx/runtime/raw";
+import { relative } from "pathe";
+import { normalizePath } from "unplugin-utils";
+//#region src/raw.ts
+const plugin = (options = {}) => {
+	let root = "";
+	let hmr = false;
+	let sourceMap = false;
+	const helperId = /^\/vue-jsx-vapor\//;
+	return [...options.macros === false ? [] : options.macros ? macros(options.macros === true ? void 0 : options.macros) : [], {
+		enforce: "pre",
+		name: "vue-jsx",
+		vite: {
+			config(config) {
+				return { 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
+				} };
+			},
+			configResolved(config) {
+				root = config.root;
+				hmr = config.command === "serve";
+				sourceMap = config.command === "serve" || !!config.build.sourcemap;
+			}
+		},
+		resolveId: {
+			filter: { id: helperId },
+			handler: (id) => id
+		},
+		load: {
+			filter: { id: helperId },
+			handler(id) {
+				if (id === ssrHelperId) return ssrHelperCode;
+				if (id === propsHelperId) return propsHelperCode;
+				if (id === vdomHelperId) return vdomHelperCode;
+				if (id === vaporHelperId) return vaporHelperCode;
+			}
+		},
+		transform: {
+			filter: { id: {
+				include: options?.include || /\.[cm]?[jt]sx(?=$|[?#])/,
+				exclude: options?.exclude || /node_modules/
+			} },
+			handler(code, id, { ssr } = {}) {
+				const result = transformVueJsx(code, ssr ? normalizePath(relative(root, id)) : id, {
+					hmr,
+					sourceMap,
+					ssr,
+					interop: !options.vapor,
+					...options
+				});
+				if (result?.code) return {
+					code: result.code,
+					map: result.map ? JSON.parse(result.map) : null
+				};
+			}
+		}
+	}];
+};
+//#endregion
+export { plugin as default };

package/dist/rolldown.d.ts

@@ -0,0 +1,7 @@
+import { t as Options } from "./options-DHzozgGn.js";
+import * as _$rollup from "rollup";
+
+//#region src/rolldown.d.ts
+declare const _default: (options?: Options | undefined) => _$rollup.Plugin<any>[] | _$rollup.Plugin<any>;
+//#endregion
+export { _default as default };

package/dist/rolldown.js

@@ -0,0 +1,6 @@
+import { unpluginFactory } from "./unplugin.js";
+import { createRollupPlugin } from "unplugin";
+//#region src/rolldown.ts
+var rolldown_default = createRollupPlugin(unpluginFactory);
+//#endregion
+export { rolldown_default as default };

package/dist/rollup.d.ts

@@ -0,0 +1,7 @@
+import { t as Options } from "./options-DHzozgGn.js";
+import * as _$rollup from "rollup";
+
+//#region src/rollup.d.ts
+declare const _default: (options?: Options | undefined) => _$rollup.Plugin<any>[];
+//#endregion
+export { _default as default };

package/dist/rollup.js

@@ -0,0 +1,5 @@
+import unplugin from "./unplugin.js";
+//#region src/rollup.ts
+var rollup_default = unplugin.rollup;
+//#endregion
+export { rollup_default as default };

package/dist/rsbuild.d.ts

@@ -0,0 +1,9 @@
+import { t as Options } from "./options-DHzozgGn.js";
+
+//#region src/rsbuild.d.ts
+declare const _default: (options?: Options) => {
+  name: string;
+  setup(api: any): void;
+};
+//#endregion
+export { _default as default };

package/dist/rsbuild.js

@@ -0,0 +1,12 @@
+import unplugin from "./unplugin.js";
+//#region src/rsbuild.ts
+var rsbuild_default = (options = {}) => ({
+	name: "rsbuild:vue-jsx-compiler",
+	setup(api) {
+		api.modifyBundlerChain((chain) => {
+			chain.plugin("vue-jsx").use(unplugin.rspack(options));
+		});
+	}
+});
+//#endregion
+export { rsbuild_default as default };

package/dist/rspack.d.ts

@@ -0,0 +1,6 @@
+import { t as Options } from "./options-DHzozgGn.js";
+
+//#region src/rspack.d.ts
+declare const _default: (options?: Options | undefined) => RspackPluginInstance;
+//#endregion
+export { _default as default };

package/dist/rspack.js

@@ -0,0 +1,5 @@
+import unplugin from "./unplugin.js";
+//#region src/rspack.ts
+var rspack_default = unplugin.rspack;
+//#endregion
+export { rspack_default as default };

package/dist/unplugin.d.ts

@@ -0,0 +1,9 @@
+import { t as Options } from "./options-DHzozgGn.js";
+import * as _$unplugin from "unplugin";
+import { UnpluginFactory } from "unplugin";
+
+//#region src/unplugin.d.ts
+declare const unpluginFactory: UnpluginFactory<Options | undefined, true>;
+declare const unplugin: _$unplugin.UnpluginInstance<Options | undefined, true>;
+//#endregion
+export { type Options, unplugin as default, unplugin, unpluginFactory };

package/dist/unplugin.js

@@ -0,0 +1,9 @@
+import plugin from "./raw.js";
+import { createUnplugin } from "unplugin";
+//#region src/unplugin.ts
+const unpluginFactory = (options = {}) => {
+	return plugin(options);
+};
+const unplugin = /* @__PURE__ */ createUnplugin(unpluginFactory);
+//#endregion
+export { unplugin as default, unplugin, unpluginFactory };

package/dist/vapor.d.ts

@@ -0,0 +1,3 @@
+import { VaporFor as For, vaporH as h } from "@vue-jsx/runtime";
+import { VaporKeepAlive as KeepAlive, VaporTeleport as Teleport, VaporTransition as Transition, VaporTransitionGroup as TransitionGroup } from "vue";
+export { For, KeepAlive, Teleport, Transition, TransitionGroup, h };

package/dist/vapor.js

@@ -0,0 +1,3 @@
+import { VaporFor as For, vaporH as h } from "@vue-jsx/runtime";
+import { VaporKeepAlive as KeepAlive, VaporTeleport as Teleport, VaporTransition as Transition, VaporTransitionGroup as TransitionGroup } from "vue";
+export { For, KeepAlive, Teleport, Transition, TransitionGroup, h };

package/dist/vite.d.ts

@@ -0,0 +1,7 @@
+import { t as Options } from "./options-DHzozgGn.js";
+import * as _$vite from "vite";
+
+//#region src/vite.d.ts
+declare const _default: (options?: Options | undefined) => _$vite.Plugin<any>[];
+//#endregion
+export { _default as default };

package/dist/vite.js

@@ -0,0 +1,5 @@
+import unplugin from "./unplugin.js";
+//#region src/vite.ts
+var vite_default = unplugin.vite;
+//#endregion
+export { vite_default as default };

package/dist/volar.d.ts

@@ -0,0 +1,7 @@
+import { t as Options } from "./options-DHzozgGn.js";
+import { PluginReturn } from "ts-macro";
+
+//#region src/volar.d.ts
+declare const plugin: PluginReturn<Options | undefined, true>;
+//#endregion
+export { plugin as default, plugin as "module.exports" };