feat: JSX handling

close #5

README.MD

@@ -9,12 +9,34 @@
 const { createVuePlugin } = require('vite-plugin-vue2')
 
 module.exports = {
-  plugins: [createVuePlugin()],
+  plugins: [createVuePlugin(/*options*/)],
 }
 ```
 
+## [Options](https://github.com/underfin/vite-plugin-vue2/blob/master/src/index.ts#L7)
+
+### `vueTemplateOptions`
+
+Type: `Object`<br>
+Default: `null`
+
+The options for `@vue/component-compiler-utils`.
+
+### `rollupPluginVueOptions`
+
+Type: `Object`<br>
+Default: `null`
+
+The options for `rollup-plugin-vue`.
+
+### `jsx`
+
+Type: `Boolean`<br>
+Default: `false`
+
+The options for jsx transform.
+
 ## Todo
 
-- JSX handing
 - Custom Block
 - SSR Build

package.json

@@ -40,8 +40,13 @@
     ]
   },
   "dependencies": {
+    "@babel/core": "^7.11.6",
     "@vue/compiler-sfc": "^3.0.0-rc.5",
     "@vue/component-compiler-utils": "^3.2.0",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-preset-env": "^1.7.0",
     "chalk": "^4.1.0",
     "debug": "^4.1.1",
     "esbuild": "^0.5.19",

playground/App.vue

@@ -6,6 +6,7 @@
     <TestCssModules/>
     <TestHmr/>
     <TestAssets/>
+    <TestJsx/>
   </div>
 </template>
 
@@ -15,6 +16,7 @@ import TestScopedCss from './css/TestScopedCss.vue'
 import TestCssModules from './css/TestCssModules.vue'
 import TestHmr from './hmr/TestHmr.vue'
 import TestAssets from './test-assets/TestAssets.vue'
+import TestJsx from './TestJsx.tsx'
 
 export default {
   name: 'App',
@@ -23,7 +25,8 @@ export default {
     TestBlockSrcImport,
     TestCssModules,
     TestHmr,
-    TestAssets
+    TestAssets,
+    TestJsx
   }
 }
 </script>

playground/TestJsx.tsx

@@ -0,0 +1,5 @@
+export default {
+	render() {
+		return <div class={'jsx'}> JSX works! </div>
+	}
+}

playground/vite.config.js

@@ -1,7 +1,7 @@
 const { createVuePlugin } = require('../dist')
 
 const config = {
-  plugins: [createVuePlugin()],
+  plugins: [createVuePlugin({ jsx: true })],
 }
 
 export default config

src/index.ts

@@ -2,6 +2,7 @@ import { resolver } from './resolver'
 import { vuePlugin, setVueCompilerOptions } from './serverPlugin'
 import { TemplateCompileOptions } from '@vue/component-compiler-utils/lib/compileTemplate'
 import { VuePluginOptions } from 'rollup-plugin-vue'
+import { jsxTransform } from './jsxTransform'
 
 export interface VueViteOptions {
   /**
@@ -12,16 +13,24 @@ export interface VueViteOptions {
    * The options for `rollup-plugin-vue`.
    */
   rollupPluginVueOptions?: VuePluginOptions
+  /**
+   * The options for jsx transform
+   * @default false
+   */
+  jsx?: boolean
 }
 
 export function createVuePlugin(options: VueViteOptions = {}) {
-  const { vueTemplateOptions, rollupPluginVueOptions } = options
+  const { vueTemplateOptions, rollupPluginVueOptions, jsx } = options
   if (vueTemplateOptions) {
     setVueCompilerOptions(vueTemplateOptions)
   }
 
   return {
     resolvers: [resolver],
+    transforms: [jsxTransform],
+    // if set truly `jsx` option, should disabled esbuild
+    enableEsbuild: !jsx,
     configureServer: vuePlugin,
     enableRollupPluginVue: false,
     rollupInputOptions: {

src/jsxTransform.ts

@@ -0,0 +1,20 @@
+import { Transform } from 'vite/dist/node/transform'
+import { transform } from '@babel/core'
+
+export const jsxTransform: Transform = {
+  test({ path }) {
+    return /\.(tsx?|jsx?)$/.test(path)
+  },
+  transform({ id, code }) {
+    const result = transform(code, {
+      plugins: ['transform-vue-jsx'],
+      filename: id,
+      sourceMaps: true,
+    })!
+
+    return {
+      code: result.code as string,
+      map: result.map as any,
+    }
+  },
+}

test/util.ts

@@ -198,4 +198,8 @@ export function declareTests(isBuild: boolean) {
       // )
     }
   })
+
+  test('Jsx', async () => {
+    expect(await getText('.jsx')).toMatch('JSX works!')
+  })
 }