vite-plugin-lang-jsx

Support write jsx in js files

English | 简体中文

✅ Support write jsx in .vue files
✅ Compatible create-react-app

Install

npm i vite-plugin-lang-jsx -D

Usage

Vue2 Project

Automatically add lang="jsx" to <script> tag when using vite-plugin-vue2

🚧 The plugin should be placed before vite-plugin-vue2

import langJsx from 'vite-plugin-lang-jsx'
import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [
    langJsx(),
    createVuePlugin(),
  ]
}

create-react-app

import langJsx from 'vite-plugin-lang-jsx'

export default {
  plugins: [
    langJsx(),
    // ...other plugins
  ]
}

How to work

.vue files

// source code
<script>
  export default {
    render() {
      return <div>Hello world!</div>;
    },
  }
</script>

// transformed
<script lang="jsx">
  export default {
    render() {
      return <div>Hello world!</div>;
    },
  }
</script>

.js files

// source code
import JsxComponent from './jsx-component'

// add `lang.jsx` suffix
import JsxComponent from './jsx-component?lang.jsx'

Why

When 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 <script>. 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.