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

[chenjiahan]

Summary

🤖 Generated by Copilot at b5e4d6d

This pull request adds support for Vue 3 JSX compilation using the @vue/babel-plugin-jsx package to the @modern-js/builder-plugin-vue package. It updates the plugin function, the interface, the tests, the changeset, and the documentation files to reflect the new feature. It also adds a new end-to-end test case with a basic Vue JSX component.

Details

🤖 Generated by Copilot at b5e4d6d

• Add Vue 3 JSX compilation feature to @modern-js/builder-plugin-vue package (link, link, link, link, link, link, link, link)
• Add changeset file to document patch version update and feature introduction (link)
• Add vueJsxOptions property to PluginVueOptions interface to pass options to @vue/babel-plugin-jsx package (link)
• Merge custom configuration with existing configuration using mergeBuilderConfig helper function (link)
  * Set disableSvgr property to true in output object to avoid SVG React component transformation (link)
  * Add @vue/babel-plugin-jsx plugin with options.vueJsxOptions to babel tool in tools object to enable Vue 3 JSX compilation (link)
• Remove optional chaining operator from options.vueLoaderOptions property when merging with vueLoaderOptions object (link)
• Add documentation for vueJsxOptions property in English and Chinese files (link, link)
• Add end-to-end test case for basic Vue JSX component using builderPluginVue function (link, link, link)
  * Add A.jsx file with Vue JSX component definition (link)
  * Add index.js file with entry point for Vue app instance (link)
  * Use build, getHrefByEntryName, and page helper functions to create builder instance, get URL, and interact with browser (link)
  * Expect button element with id of button1 to have correct innerHTML value (link)
  * Close builder instance after test (link)
• Add unit test cases for @vue/babel-plugin-jsx plugin application and configuration (link, link)
• Import builderPluginBabel function from @modern-js/builder-webpack-provider/plugins/babel package (link)
• Check that @vue/babel-plugin-jsx plugin is applied correctly with default options (link)
• Check that @vue/babel-plugin-jsx plugin options can be configured through vueJsxOptions property (link)
• Use createStubBuilder, unwrapWebpackConfig, and toMatchSnapshot helper functions to create mock builder instance, get webpack config, and compare with snapshot (link)

Related Issue

Checklist

• I have added changeset via pnpm run change.
• I have updated the documentation.
• I have added tests to cover my changes.

[changeset-bot]

🦋 Changeset detected

Latest commit: ba900c0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 216 packages

Name	Type
@modern-js/builder-plugin-vue	Patch
@e2e/builder	Patch
@modern-js/babel-preset-app	Patch
@modern-js/babel-preset-base	Patch
@modern-js/core	Patch
@modern-js/doc-core	Patch
@modern-js/doc-plugin-auto-sidebar	Patch
@modern-js/doc-plugin-medium-zoom	Patch
@modern-js/doc-plugin-preview	Patch
@modern-js/plugin-bff	Patch
@modern-js/plugin-changeset	Patch
@modern-js/plugin-data-loader	Patch
@modern-js/plugin-i18n	Patch
@modern-js/plugin-lint	Patch
@modern-js/plugin-proxy	Patch
@modern-js/plugin-ssg	Patch
@modern-js/plugin-storybook	Patch
@modern-js/plugin-swc	Patch
@modern-js/plugin-tailwindcss	Patch
@modern-js/builder-doc	Patch
@modern-js/doc-tools-doc	Patch
@modern-js/main-doc	Patch
@modern-js/module-tools-docs	Patch
@modern-js/plugin-garfish	Patch
@modern-js/plugin-router-v5	Patch
@modern-js/runtime	Patch
@modern-js/plugin-testing	Patch
@modern-js/new-action	Patch
@modern-js-app/eslint-config	Patch
@modern-js/eslint-config	Patch
@modern-js/tsconfig	Patch
@modern-js/bff-core	Patch
@modern-js/bff-runtime	Patch
@modern-js/server-core	Patch
@modern-js/create-request	Patch
@modern-js/plugin-express	Patch
@modern-js/plugin-koa	Patch
@modern-js/plugin-polyfill	Patch
@modern-js/plugin-server	Patch
@modern-js/plugin-worker	Patch
@modern-js/prod-server	Patch
@modern-js/server	Patch
@modern-js/server-utils	Patch
@modern-js/builder-cli	Patch
@modern-js/builder-rspack-provider	Patch
@modern-js/builder-shared	Patch
@modern-js/builder-webpack-provider	Patch
@modern-js/builder	Patch
@modern-js/builder-plugin-esbuild	Patch
@modern-js/builder-plugin-image-compress	Patch
@modern-js/builder-plugin-node-polyfill	Patch
@modern-js/builder-plugin-stylus	Patch
@modern-js/builder-plugin-swc	Patch
@modern-js/plugin-module-babel	Patch
@modern-js/plugin-module-banner	Patch
@modern-js/plugin-module-doc	Patch
@modern-js/plugin-module-import	Patch
@modern-js/plugin-module-main-fields	Patch
@modern-js/plugin-module-node-polyfill	Patch
@modern-js/plugin-module-polyfill	Patch
@modern-js/plugin-module-target	Patch
@modern-js/app-tools	Patch
@modern-js/doc-tools	Patch
@modern-js/module-tools	Patch
@modern-js/monorepo-tools	Patch
@modern-js/create	Patch
@modern-js/e2e	Patch
@modern-js/node-bundle-require	Patch
@modern-js/plugin	Patch
@modern-js/remark-container	Patch
@modern-js/types	Patch
@modern-js/upgrade	Patch
@modern-js/utils	Patch
@modern-js/babel-compiler	Patch
@scripts/build	Patch
@scripts/check-changeset	Patch
@scripts/codemod	Patch
@scripts/jest-config	Patch
@scripts/lint-package-json	Patch
@scripts/prebundle	Patch
@scripts/update-codesmith	Patch
@scripts/vitest-config	Patch
tests	Patch
@integration-test/alias-set	Patch
api-service-koa	Patch
app-docmuent	Patch
integration-dev-asset-prefix	Patch
integration-asset-prefix	Patch
async-entry-test	Patch
bff-express	Patch
bff-koa	Patch
integration-register-builder-plugins	Patch
integration-builder-plugins	Patch
builder-rspack	Patch
integration-clean-dist-path	Patch
integration-copy-public-html	Patch
integration-copy-assets	Patch
composes-basic	Patch
composes-external	Patch
dev-module	Patch
global-module	Patch
prod-module	Patch
css	Patch
antd-less	Patch
bad-nested-npm-import	Patch
bad-npm-import	Patch
base-import	Patch
disable-source-map	Patch
exclude-less	Patch
exclude-sass	Patch
import-common-css	Patch
less-import	Patch
less-inline-js	Patch
less-npm-import	Patch
multi-css	Patch
multi-less	Patch
multi-sass	Patch
nested-npm-import	Patch
npm-import	Patch
integration-tailwindcss-v2	Patch
integration-tailwindcss-v3	Patch
twin-macro-v2	Patch
twin-macro-v3	Patch
css-modules	Patch
integration-custom-render	Patch
integration-custom-template	Patch
dev-server	Patch
simple-doc-template	Patch
i18n-doc	Patch
doc-plugin	Patch
simple-doc-production	Patch
with-base	Patch
doc-tools	Patch
legacy-esbuild-minify-js	Patch
esbuild-transform-and-minify	Patch
esbuild-integration	Patch
@cypress-test/garfish-dashboard-router-v6	Patch
@cypress-test/garfish-dashboard	Patch
@cypress-test/garfish-main-router-v6	Patch
@cypress-test/garfish-main-rspack	Patch
@cypress-test/garfish-main	Patch
@cypress-test/garfish-table	Patch
integration-config-async-config-test	Patch
integration-basic-local-config	Patch
integration-config-function-params	Patch
integration-local-config-function	Patch
integration-load-config	Patch
integration-module-doc	Patch
tmp	Patch
nonce	Patch
routes	Patch
file-based-router	Patch
use-loader	Patch
runtime	Patch
select-mul-entry-test	Patch
select-one-entry-test	Patch
entry	Patch
server-config	Patch
server-middleware	Patch
server-hook-reqeust	Patch
server-hook-response	Patch
server-hook-router	Patch
@integration-test/server-hook-reqeust	Patch
server-prod	Patch
ssg-fixtures-nested-routes	Patch
ssg-fixtures-simple	Patch
ssg-fixtures-web-server	Patch
ssg	Patch
ssr-base-json-test	Patch
ssr-base-test	Patch
init	Patch
ssr-streaming-test	Patch
ssr	Patch
swc-minify-css	Patch
swc-minify-js	Patch
transform-fail	Patch
swc-integration	Patch
tmp-dir	Patch
worker-test	Patch
write-to-dist	Patch
@e2e/builder-cli-rspack	Patch
@e2e/builder-cli-webpack	Patch
@e2e/webpack-builder-css-modules	Patch
@e2e/webpack-builder-image-compress	Patch
@e2e/webpack-builder-import-antd-v4	Patch
@e2e/webpack-builder-import-antd-v5	Patch
@e2e/webpack-builder-import-arco	Patch
@e2e/webpack-builder-test-moment	Patch
@e2e/webpack-builder-node-polyfill	Patch
@e2e/builder-plugin-import	Patch
@modern-js/generator-common	Patch
@modern-js/generator-plugin	Patch
@modern-js/generator-utils	Patch
@modern-js/bff-generator	Patch
@modern-js/dependence-generator	Patch
@modern-js/doc-generator	Patch
@modern-js/entry-generator	Patch
@modern-js/generator-generator	Patch
@modern-js/module-generator	Patch
@modern-js/module-test-generator	Patch
@modern-js/monorepo-generator	Patch
@modern-js/mwa-generator	Patch
@modern-js/router-v5-generator	Patch
@modern-js/rspack-generator	Patch
@modern-js/ssg-generator	Patch
@modern-js/storybook-generator	Patch
@modern-js/test-generator	Patch
@modern-js/upgrade-generator	Patch
@modern-js/generator-plugin-plugin	Patch
@modern-js/repo-generator	Patch
@modern-js/generator-cases	Patch
@modern-js/base-generator	Patch
@modern-js/changeset-generator	Patch
@modern-js/packages-generator	Patch
@modern-js/server-generator	Patch
@modern-js/tailwindcss-generator	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

Patch coverage has no change and project coverage change: -0.30 ⚠️

Comparison is base (99693f0) 57.59% compared to head (ba900c0) 57.30%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4013      +/-   ##
==========================================
- Coverage   57.59%   57.30%   -0.30%     
==========================================
  Files         672      645      -27     
  Lines       17794    17527     -267     
  Branches     3876     3841      -35     
==========================================
- Hits        10249    10044     -205     
+ Misses       6934     6859      -75     
- Partials      611      624      +13     

see 324 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.