yyx990803

soda

sxzz

amour1688

@vue/babel-plugin-jsx

  "description": "Babel plugin for Vue 3 JSX",

  "author": "Amour1688 <lcz_1996@foxmail.com>",

  "homepage": "https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-jsx#readme",

    "url": "git+https://github.com/vuejs/babel-plugin-jsx"

    "url": "https://github.com/vuejs/babel-plugin-jsx/issues"

    "@babel/helper-module-imports": "^7.22.15",

    "@babel/helper-plugin-utils": "^7.22.5",

    "@babel/plugin-syntax-jsx": "^7.23.3",

    "@vue/babel-helper-vue-transform-on": "1.2.0",

    "@vue/babel-plugin-resolve-type": "1.2.0-beta.0"

    "@vue/babel-helper-vue-transform-on": "1.2.1",

    "@vue/babel-plugin-resolve-type": "1.2.1"

[![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)

[![issues-helper](https://img.shields.io/badge/Issues%20Manage%20By-issues--helper-blueviolet?style=flat-square)](https://github.com/actions-cool/issues-helper)

English | [简体中文](/packages/babel-plugin-jsx/README-zh_CN.md)

Then add the plugin to your babel config:

transform `on: { click: xx }` to `onClick: xxx`

enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.

merge static and dynamic class / style attributes / onXXX handlers

Whether 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.

Replace the function used when compiling JSX expressions.

(**Experimental**) Infer component metadata from types (e.g. `props`, `emits`, `name`). This is an experimental feature and may not work in all cases.

import { withModifiers, defineComponent } from 'vue';

      <div onClick={withModifiers(inc, ['self'])}>{count.value}</div>

const App = () => <input type="email" />;

const App = () => <input type="email" placeholder={placeholderText} />;

    return <input v-show={this.visible} />;

> Note: You should pass the second param as string for using `arg`.

		{
		"name": "@vue/babel-plugin-jsx",
		"version": "1.2.0",
		"version": "1.2.1",
		"description": "Babel plugin for Vue 3 JSX",
		@@ -31,4 +31,4 @@ "author": "Amour1688 <lcz_1996@foxmail.com>",
		"svg-tags": "^1.0.0",
		"@vue/babel-helper-vue-transform-on": "1.2.0",
		"@vue/babel-plugin-resolve-type": "1.2.0-beta.0"
		"@vue/babel-helper-vue-transform-on": "1.2.1",
		"@vue/babel-plugin-resolve-type": "1.2.1"
		},
		@@ -35,0 +35,0 @@ "devDependencies": {

		@@ -78,2 +78,10 @@ # Babel Plugin JSX for Vue 3

		#### resolveType

		Type: `boolean`

		Default: `false`

		(Experimental) Infer component metadata from types (e.g. `props`, `emits`, `name`). This is an experimental feature and may not work in all cases.

		## Syntax
		@@ -80,0 +88,0 @@

New alerts

Improved metrics

Worsened metrics

Dependency changes