一覧へ戻る
xxholly32/rollup-plugin-vue-jsx(新しいタブで開きます)
主要言語: TypeScript
rollup-plugin-vue-jsx
- star 数
- 8
- watcher 数
- 1
- fork 数
- 0
- issue 数
- 2
- 最終更新
- 2021/06/11
主要言語: TypeScript
rollup-plugin-vue-jsx
work with rollup-plugin-esbuild, and just for vue-jsx
change foo.tsx
export default class Foo { render() { return <div className="hehe">hello there!!!</div>; } }
to
import { createVNode, isVNode } from "vue"; const slice = Array.prototype.slice; function vueJsxCompat(tag, props = null, children = null) { if (arguments.length > 3 || isVNode(children)) { children = slice.call(arguments, 2); } return createVNode(tag, props, children); } class Foo { render() { return /* @__PURE__ */ vueJsxCompat( "div", { className: "hehe", }, "hello there!!!" ); } }
add vue-jsx-compat to transform vue-jsx
import vueJsx from "rollup-plugin-vue-jsx-compat" import esbuild from "rollup-plugin-esbuild"; export default { ... plugins: [ vueJsx(), esbuild({ jsxFactory: "vueJsxCompat", }), ], };
or you can add your config
vueJsx({ // it only use same function name with esbuild jsxFactory: "vueJsxCompat", // if you not use default vus-jsx-transformer, you write your own file path in here path: "you file path", });