feat(plugin-vue): support Vue 3 JSX compilation (#4013)

web-infra-dev · Jun 20, 2023 · 3223b8b · 3223b8b
1 parent 4a82c3b
commit 3223b8b
Show file tree

Hide file tree

Showing 9 changed files with 652 additions and 5 deletions.
diff --git a/.changeset/kind-ears-act.md b/.changeset/kind-ears-act.md
@@ -0,0 +1,7 @@
+---
+'@modern-js/builder-plugin-vue': patch
+---
+
+feat(plugin-vue): support Vue 3 JSX compilation
+
+feat(plugin-vue): 支持编译 Vue 3 JSX
diff --git a/packages/builder/plugin-vue/src/index.ts b/packages/builder/plugin-vue/src/index.ts
@@ -3,13 +3,15 @@ import { VueLoaderPlugin } from 'vue-loader';
 import type { BuilderPlugin } from '@modern-js/builder';
 import type { BuilderPluginAPI } from '@modern-js/builder-webpack-provider';
 import type { VueLoaderOptions } from 'vue-loader';
+import type { VueJSXPluginOptions } from '@vue/babel-plugin-jsx';
 
 export type PluginVueOptions = {
+  vueJsxOptions?: VueJSXPluginOptions;
   vueLoaderOptions?: VueLoaderOptions;
 };
 
 export function builderPluginVue(
-  options?: PluginVueOptions,
+  options: PluginVueOptions = {},
 ): BuilderPlugin<BuilderPluginAPI> {
   return {
     name: 'builder-plugin-vue',
@@ -23,9 +25,22 @@ export function builderPluginVue(
     ],
 
     async setup(api) {
-      api.modifyBuilderConfig(config => {
-        config.output ||= {};
-        config.output.disableSvgr = true;
+      api.modifyBuilderConfig((config, { mergeBuilderConfig }) => {
+        return mergeBuilderConfig(config, {
+          output: {
+            disableSvgr: true,
+          },
+          tools: {
+            babel(_, { addPlugins }) {
+              addPlugins([
+                [
+                  require.resolve('@vue/babel-plugin-jsx'),
+                  options.vueJsxOptions || {},
+                ],
+              ]);
+            },
+          },
+        });
       });
 
       api.modifyBundlerChain(async (chain, { CHAIN_ID }) => {
@@ -39,7 +54,7 @@ export function builderPluginVue(
             experimentalInlineMatchResource:
               api.context.bundlerType === 'rspack',
           },
-          options?.vueLoaderOptions,
+          options.vueLoaderOptions,
         );
 
         chain.module