{"_id":"@cabloy/vue-babel-plugin-jsx","_rev":"2-e5073ce8a2a5db5987abfb124788369e","name":"@cabloy/vue-babel-plugin-jsx","dist-tags":{"latest":"2.0.1"},"versions":{"1.2.5":{"name":"@cabloy/vue-babel-plugin-jsx","version":"1.2.5","author":{"name":"Amour1688","email":"lcz_1996@foxmail.com"},"license":"MIT","_id":"@cabloy/vue-babel-plugin-jsx@1.2.5","maintainers":[{"name":"zhennann","email":"zhen.nann@icloud.com"}],"homepage":"https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-jsx#readme","bugs":{"url":"https://github.com/vuejs/babel-plugin-jsx/issues"},"dist":{"shasum":"7684848612d20fa8950449529ae092134651ff72","tarball":"https://registry.npmjs.org/@cabloy/vue-babel-plugin-jsx/-/vue-babel-plugin-jsx-1.2.5.tgz","fileCount":7,"integrity":"sha512-9O4DITSqg5v1TKjYBYeIIp8rAFZLZuYut5j9eAc5cFwXY9um/4zIsoWkeKYValJS4myUyGl2qGHk1fBythaQiQ==","signatures":[{"sig":"MEQCIEoLD7VTQ7jkoIAc1dgnVljC3PSj1mTw0DWBC0/fYJLxAiBHFC53+wUUgnY6asdhW3OHWRkqZ6ttXNbTGEErFbG2GQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":81960},"main":"dist/index.js","_from":"file:cabloy-vue-babel-plugin-jsx-1.2.5.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"build":"tsup","watch":"tsup --watch"},"_npmUser":{"name":"zhennann","email":"zhen.nann@icloud.com"},"_resolved":"/private/var/folders/qy/ds95fdx91vz7rplzrblbdxnr0000gn/T/1e6cb0ec9f9b8fcc7277fada72fe91ca/cabloy-vue-babel-plugin-jsx-1.2.5.tgz","_integrity":"sha512-9O4DITSqg5v1TKjYBYeIIp8rAFZLZuYut5j9eAc5cFwXY9um/4zIsoWkeKYValJS4myUyGl2qGHk1fBythaQiQ==","repository":{"url":"git+https://github.com/vuejs/babel-plugin-jsx.git","type":"git"},"_npmVersion":"10.9.0","description":"Babel plugin for Vue 3 JSX","directories":{},"_nodeVersion":"22.12.0","dependencies":{"svg-tags":"^1.0.0","html-tags":"^3.3.1","@babel/types":"^7.26.5","@babel/template":"^7.25.9","@babel/traverse":"^7.26.5","@babel/plugin-syntax-jsx":"^7.25.9","@babel/helper-plugin-utils":"^7.26.5","@babel/helper-module-imports":"^7.25.9","@vue/babel-plugin-resolve-type":"1.2.5","@vue/babel-helper-vue-transform-on":"1.2.5"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.3","@babel/core":"^7.26.0","@types/svg-tags":"^1.0.2","@vue/test-utils":"^2.4.6","@babel/preset-env":"^7.26.0","regenerator-runtime":"^0.14.1","@types/babel__template":"^7.4.4","@types/babel__traverse":"^7.20.6"},"peerDependencies":{"@babel/core":"^7.0.0-0"},"peerDependenciesMeta":{"@babel/core":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/vue-babel-plugin-jsx_1.2.5_1736945100806_0.9073433101076558","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@cabloy/vue-babel-plugin-jsx","version":"2.0.1","description":"Babel plugin for Vue 3 JSX","homepage":"https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-jsx#readme","bugs":{"url":"https://github.com/vuejs/babel-plugin-jsx/issues"},"license":"MIT","author":{"name":"Amour1688","email":"lcz_1996@foxmail.com"},"repository":{"type":"git","url":"git+https://github.com/vuejs/babel-plugin-jsx.git","directory":"packages/babel-plugin-jsx"},"type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":"./dist/index.js","./package.json":"./package.json"},"dependencies":{"@babel/helper-module-imports":"^7.27.1","@babel/helper-plugin-utils":"^7.27.1","@babel/plugin-syntax-jsx":"^7.27.1","@babel/template":"^7.27.2","@babel/traverse":"^7.28.5","@babel/types":"^7.28.5","@vue/shared":"^3.5.26","@vue/babel-helper-vue-transform-on":"2.0.1","@vue/babel-plugin-resolve-type":"2.0.1"},"devDependencies":{"@babel/core":"^7.28.5","@babel/preset-env":"^7.28.5","@types/babel__template":"^7.4.4","@types/babel__traverse":"^7.28.0","@vue/test-utils":"^2.4.6","regenerator-runtime":"^0.14.1","vue":"^3.5.26"},"peerDependencies":{"@babel/core":"^7.0.0-0"},"peerDependenciesMeta":{"@babel/core":{"optional":true}},"_id":"@cabloy/vue-babel-plugin-jsx@2.0.1","_integrity":"sha512-bBPOQXE/92VnXzH0qOWMRut3aW/E4svYOem1KNhfAbbNMox16r9EcTcE0p3gImoi4HlpnpyZYatp9EtjZN64FA==","_resolved":"/private/var/folders/qy/ds95fdx91vz7rplzrblbdxnr0000gn/T/dee21b6e25f322db1789ca26fecb3f02/cabloy-vue-babel-plugin-jsx-2.0.1.tgz","_from":"file:cabloy-vue-babel-plugin-jsx-2.0.1.tgz","_nodeVersion":"24.8.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-bBPOQXE/92VnXzH0qOWMRut3aW/E4svYOem1KNhfAbbNMox16r9EcTcE0p3gImoi4HlpnpyZYatp9EtjZN64FA==","shasum":"8783201682032dc3edeba62aedc3e41d657eabe8","tarball":"https://registry.npmjs.org/@cabloy/vue-babel-plugin-jsx/-/vue-babel-plugin-jsx-2.0.1.tgz","fileCount":5,"unpackedSize":41324,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCbVFA9ij6komFobLMxNYhB0kRi2s8joTKmER5MQDH2owIhAPfNCZjs2y2BT2VtZUS9J2haNG/aEJ1LmBbT8725FTmT"}]},"_npmUser":{"name":"zhennann","email":"zhen.nann@icloud.com"},"directories":{},"maintainers":[{"name":"zhennann","email":"zhen.nann@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-babel-plugin-jsx_2.0.1_1774181541821_0.847740619717932"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-15T12:45:00.703Z","modified":"2026-03-22T12:12:22.101Z","1.2.5":"2025-01-15T12:45:00.983Z","2.0.1":"2026-03-22T12:12:21.956Z"},"bugs":{"url":"https://github.com/vuejs/babel-plugin-jsx/issues"},"author":{"name":"Amour1688","email":"lcz_1996@foxmail.com"},"license":"MIT","homepage":"https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-jsx#readme","repository":{"type":"git","url":"git+https://github.com/vuejs/babel-plugin-jsx.git","directory":"packages/babel-plugin-jsx"},"description":"Babel plugin for Vue 3 JSX","maintainers":[{"name":"zhennann","email":"zhen.nann@icloud.com"}],"readme":"# Babel Plugin JSX for Vue 3\n\n[![npm package](https://img.shields.io/npm/v/@vue/babel-plugin-jsx.svg?style=flat-square)](https://www.npmjs.com/package/@vue/babel-plugin-jsx)\n[![issues-helper](https://img.shields.io/badge/Issues%20Manage%20By-issues--helper-blueviolet?style=flat-square)](https://github.com/actions-cool/issues-helper)\n\nTo add Vue JSX support.\n\nEnglish | [简体中文](/packages/babel-plugin-jsx/README-zh_CN.md)\n\n## Installation\n\nInstall the plugin with:\n\n```bash\nnpm install @vue/babel-plugin-jsx -D\n```\n\nThen add the plugin to your babel config:\n\n```json\n{\n \"plugins\": [\"@vue/babel-plugin-jsx\"]\n}\n```\n\n## Usage\n\n### options\n\n#### transformOn\n\nType: `boolean`\n\nDefault: `false`\n\ntransform `on: { click: xx }` to `onClick: xxx`\n\n#### optimize\n\nType: `boolean`\n\nDefault: `false`\n\nWhen enabled, this plugin generates optimized runtime code using [`PatchFlags`](https://vuejs.org/guide/extras/rendering-mechanism#patch-flags) and [`SlotFlags`](https://github.com/vuejs/core/blob/v3.5.13/packages/runtime-core/src/componentSlots.ts#L69-L77) to improve rendering performance. However, due to JSX's dynamic nature, the optimizations are not as comprehensive as those in Vue's official template compiler.\n\nSince the optimized code may skip certain re-renders to improve performance, we strongly recommend thorough testing of your application after enabling this option to ensure everything works as expected.\n\n#### isCustomElement\n\nType: `(tag: string) => boolean`\n\nDefault: `undefined`\n\nconfiguring custom elements\n\n#### mergeProps\n\nType: `boolean`\n\nDefault: `true`\n\nmerge static and dynamic class / style attributes / onXXX handlers\n\n#### enableObjectSlots\n\nType: `boolean`\n\nDefault: `true`\n\nWhether to enable `object slots` (mentioned below the document) syntax\". It might be useful in JSX, but it will add a lot of `_isSlot` condition expressions which increase your bundle size. And `v-slots` is still available even if `enableObjectSlots` is turned off.\n\n#### pragma\n\nType: `string`\n\nDefault: `createVNode`\n\nReplace the function used when compiling JSX expressions.\n\n#### resolveType\n\nType: `boolean`\n\nDefault: `false`\n\n(**Experimental**) Infer component metadata from types (e.g. `props`, `emits`, `name`). This is an experimental feature and may not work in all cases.\n\n## Syntax\n\n### Content\n\nfunctional component\n\n```jsx\nconst App = () =>
Vue 3.0
\n```\n\nwith render\n\n```jsx\nconst App = {\n render() {\n return
Vue 3.0
\n },\n}\n```\n\n```jsx\nimport { defineComponent, withModifiers } from 'vue'\n\nconst App = defineComponent({\n setup() {\n const count = ref(0)\n\n const inc = () => {\n count.value++\n }\n\n return () =>
{count.value}
\n },\n})\n```\n\nFragment\n\n```jsx\nconst App = () => (\n <>\n I'm\n Fragment\n \n)\n```\n\n### Attributes / Props\n\n```jsx\nconst App = () => \n```\n\nwith a dynamic binding:\n\n```jsx\nconst placeholderText = 'email'\nconst App = () => \n```\n\n### Directives\n\n#### v-show\n\n```jsx\nconst App = {\n data() {\n return { visible: true }\n },\n render() {\n return \n },\n}\n```\n\n#### v-model\n\n> Note: You should pass the second param as string for using `arg`.\n\n```jsx\n\n```\n\n```jsx\n\n```\n\n```jsx\n;\n// Or\n;\n```\n\n```jsx\n;\n// Or\n;\n```\n\nWill compile to:\n\n```js\nh(A, {\n argument: val,\n argumentModifiers: {\n modifier: true,\n },\n 'onUpdate:argument': ($event) => (val = $event),\n})\n```\n\n#### v-models (Not recommended since v1.1.0)\n\n> Note: You should pass a Two-dimensional Arrays to v-models.\n\n```jsx\n\n```\n\n```jsx\n\n```\n\n```jsx\n\n```\n\nWill compile to:\n\n```js\nh(A, {\n modelValue: foo,\n modelModifiers: {\n modifier: true,\n },\n 'onUpdate:modelValue': ($event) => (foo = $event),\n bar,\n barModifiers: {\n modifier: true,\n },\n 'onUpdate:bar': ($event) => (bar = $event),\n})\n```\n\n#### custom directive\n\nRecommended when using string arguments\n\n```jsx\nconst App = {\n directives: { custom: customDirective },\n setup() {\n return () => \n },\n}\n```\n\n```jsx\nconst App = {\n directives: { custom: customDirective },\n setup() {\n return () => \n },\n}\n```\n\n### Slot\n\n> Note: In `jsx`, _`v-slot`_ should be replaced with **`v-slots`**\n\n```jsx\nconst A = (props, { slots }) => (\n <>\n

{slots.default ? slots.default() : 'foo'}

\n

{slots.bar?.()}

\n \n)\n\nconst App = {\n setup() {\n const slots = {\n bar: () => B,\n }\n return () => (\n \n
A
\n \n )\n },\n}\n\n// or\n\nconst App2 = {\n setup() {\n const slots = {\n default: () =>
A
,\n bar: () => B,\n }\n return () => \n },\n}\n\n// or you can use object slots when `enableObjectSlots` is not false.\nconst App3 = {\n setup() {\n return () => (\n <>\n \n {{\n default: () =>
A
,\n bar: () => B,\n }}\n \n {() => 'foo'}\n \n )\n },\n}\n```\n\n### In TypeScript\n\n`tsconfig.json`:\n\n```json\n{\n \"compilerOptions\": {\n \"jsx\": \"preserve\"\n }\n}\n```\n\n## Who is using\n\n\n \n \n \n \n \n \n \n \n
\n \n \n
\n Ant Design Vue\n \n 		\n \n \n
\n Vant\n \n 		\n \n \n
\n Element Plus\n \n 		\n \n \n
\n Vue Json Pretty\n \n
\n\n## Compatibility\n\nThis repo is only compatible with:\n\n- **Babel 7+**\n- **Vue 3+**\n","readmeFilename":"README.md"}