feat: support jsx, closes element-plus#5708 (element-plus#5947)

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = defineConfig({
       files: ['**/__tests__/**', '**/gulpfile.ts'],
       rules: {
         'no-console': 'off',
+        'vue/one-component-per-file': 'off',
       },
     },
   ],

babel.config.js

@@ -0,0 +1,8 @@
+// For jest use only
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+  plugins: ['@vue/babel-plugin-jsx'],
+}

build/full-bundle.ts

@@ -4,6 +4,7 @@ import { rollup } from 'rollup'
 import commonjs from '@rollup/plugin-commonjs'
 import vue from '@vitejs/plugin-vue'
 import DefineOptions from 'unplugin-vue-define-options/vite'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import esbuild from 'rollup-plugin-esbuild'
 import replace from '@rollup/plugin-replace'
 import filesize from 'rollup-plugin-filesize'
@@ -35,6 +36,7 @@ async function buildFullEntry(minify: boolean) {
       vue({
         isProduction: true,
       }) as Plugin,
+      vueJsx(),
       nodeResolve({
         extensions: ['.mjs', '.js', '.json', '.ts'],
       }),

build/modules.ts

@@ -1,5 +1,6 @@
 import { rollup } from 'rollup'
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import DefineOptions from 'unplugin-vue-define-options/vite'
 import css from 'rollup-plugin-css-only'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
@@ -32,6 +33,7 @@ export const buildModules = async () => {
       vue({
         isProduction: false,
       }),
+      vueJsx(),
       nodeResolve({
         extensions: ['.mjs', '.js', '.json', '.ts'],
       }),

docs/vite.config.ts

@@ -5,6 +5,7 @@ import DefineOptions from 'unplugin-vue-define-options/vite'
 import WindiCSS from 'vite-plugin-windicss'
 import mkcert from 'vite-plugin-mkcert'
 import glob from 'fast-glob'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 
 import Components from 'unplugin-vue-components/vite'
 import Icons from 'unplugin-icons/vite'
@@ -70,6 +71,7 @@ export default async () => {
       },
     },
     plugins: [
+      vueJsx(),
       DefineOptions(),
 
       // https://github.com/antfu/unplugin-vue-components

jest.config.js

@@ -2,21 +2,12 @@
  * @type import('@jest/types').Config.InitialOptions
  */
 module.exports = {
-  globals: {
-    // work around: https://github.com/kulshekhar/ts-jest/issues/748#issuecomment-423528659
-    'ts-jest': {
-      diagnostics: {
-        ignoreCodes: [151001],
-      },
-    },
-  },
   setupFiles: ['./jest.setup.js'],
   testPathIgnorePatterns: ['/node_modules/', 'dist'],
   modulePathIgnorePatterns: ['/node_modules/', 'dist', 'cypress'],
   testEnvironment: 'jsdom',
   transform: {
-    // Doesn't support jsx/tsx since sucrase doesn't support Vue JSX
-    '\\.(j|t)s$': '@sucrase/jest-plugin',
+    '\\.[jt]sx?$': 'babel-jest',
     '^.+\\.vue$': '<rootDir>/build/vue-jest-transformer.js',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'vue'],

package.json

@@ -73,6 +73,9 @@
     "normalize-wheel-es": "^1.1.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.2",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-typescript": "^7.16.7",
     "@commitlint/cli": "16.1.0",
     "@commitlint/config-conventional": "16.0.0",
     "@pnpm/find-workspace-packages": "3.1.40",
@@ -81,7 +84,6 @@
     "@rollup/plugin-commonjs": "21.0.1",
     "@rollup/plugin-node-resolve": "13.1.3",
     "@rollup/plugin-replace": "3.0.1",
-    "@sucrase/jest-plugin": "2.2.0",
     "@types/fs-extra": "9.0.13",
     "@types/gulp": "4.0.9",
     "@types/jest": "26.0.24",
@@ -92,7 +94,10 @@
     "@typescript-eslint/eslint-plugin": "5.11.0",
     "@typescript-eslint/parser": "5.11.0",
     "@vitejs/plugin-vue": "2.2.0",
+    "@vitejs/plugin-vue-jsx": "^1.3.3",
+    "@vue/babel-plugin-jsx": "^1.1.1",
     "@vue/test-utils": "2.0.0-rc.16",
+    "babel-jest": "26.6.3",
     "chalk": "4.1.2",
     "components-helper": "2.0.0",
     "csstype": "2.6.19",

play/vite.config.ts

@@ -1,6 +1,7 @@
 import path from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Inspect from 'vite-plugin-inspect'
@@ -39,6 +40,7 @@ export default defineConfig(async () => {
     },
     plugins: [
       vue(),
+      vueJsx(),
       DefineOptions(),
       Components({
         include: `${__dirname}/**`,