https://github.com/vite-plugin/vite-plugin-lang-jsx
Support write jsx in js files
https://github.com/vite-plugin/vite-plugin-lang-jsx
Last synced: about 1 year ago
JSON representation
Support write jsx in js files
- Host: GitHub
- URL: https://github.com/vite-plugin/vite-plugin-lang-jsx
- Owner: vite-plugin
- License: mit
- Created: 2022-06-10T01:57:17.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-19T06:54:20.000Z (over 2 years ago)
- Last Synced: 2025-04-30T14:29:54.457Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 47.9 KB
- Stars: 9
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-lang-jsx
Support write jsx in js files
[](https://www.npmjs.com/package/vite-plugin-lang-jsx)
[](https://npmjs.org/package/vite-plugin-lang-jsx)
[](https://npmjs.org/package/vite-plugin-lang-jsx)
English | [简体中文](https://github.com/vite-plugin/vite-plugin-lang-jsx/blob/main/README.zh-CN.md)
✅ Support write `jsx` in `.vue` files
✅ Compatible `create-react-app`
## Install
```sh
npm i vite-plugin-lang-jsx -D
```
## Usage
#### Vue2 Project
Automatically add `lang="jsx"` to `` tag when using `vite-plugin-vue2`
🚧 The plugin should be placed before `vite-plugin-vue2`
```js
import langJsx from 'vite-plugin-lang-jsx'
import { createVuePlugin } from 'vite-plugin-vue2'
export default {
plugins: [
langJsx(/* options */),
createVuePlugin(),
]
}
```
#### create-react-app
```js
import langJsx from 'vite-plugin-lang-jsx'
export default {
plugins: [
langJsx(),
// ...other plugins
]
}
```
## API <sub><sup>(Define)</sup></sub>
```ts
export interface LangJsx {
(options?: {
filter?: (id: string) => boolean | void;
/**
* Check JSX with ast, and use RegExp by default.
*/
useAst?: boolean;
}): Plugin[];
}
```
## How to work
`.vue` files
```html
// source code
<script>
export default {
render() {
return <div>Hello world!</div>;
},
}
// transformed
export default {
render() {
return <div>Hello world!</div>;
},
}
```
`.js` files
```js
// source code
import JsxComponent from './jsx-component'
// add `lang.jsx` suffix
import JsxComponent from './jsx-component?lang.jsx'
```
## Why
While we upgrade the Vue2.x proejct created by `@vue/cli` to Vite, we will use `vue-plugin-vue2`.
1. However, `vue-plugin-vue2` does not automatically handle the `jsx` syntax in ``. So we need to add `lang=jsx` above `<script>` to ensure its worked.
2. Secondly, the plugin allows you to write `jsx` syntax in the `.js` file.
Many times many prople like to write `jsx` in the `.js` file in the React project.