Feat(plugin-module-vue): Add support for *.vue files to modern build --watch

[Lakphy]

Summary

The original @modern-js/plugin-module-vue plugin will not watch *.vue files modifications when running modern build --watch . I added an esbuild plugin that can add *.vue files to modern.js built-in watcher in the file list.

One thing to note is that compiler.addWatchFile requires the compiler object (type: class EsbuildCompiler implements ICompiler in EsbuildCompiler declaration). I got the compiler object through config.hooks. The code is as follows:

  let compiler = null as unknown as ICompiler;
  config.hooks.push({
    name: 'vue-watch-adapter',
    apply(_compiler: ICompiler) {
      compiler = _compiler;
    },
  });

I think this might be unstable. I'm wondering if there is a more stable way to get the compiler object for external plugins?

Thanks!

Related Links

EsbuildCompiler declaration

Checklist

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

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 65e2654a29786bafec26ab1995a31d204b8d83f0

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

This PR includes changesets to release 257 packages

Name	Type
@modern-js/plugin-module-vue	Minor
integration-module-tools	Minor
@modern-js/core	Minor
@modern-js/doc-plugin-auto-sidebar	Minor
@modern-js/plugin-bff	Minor
@modern-js/plugin-changeset	Minor
@modern-js/plugin-data-loader	Minor
@modern-js/plugin-i18n	Minor
@modern-js/plugin-lint	Minor
@modern-js/plugin-proxy	Minor
@modern-js/plugin-ssg	Minor
@modern-js/plugin-swc	Minor
@modern-js/plugin-tailwindcss	Minor
@modern-js/rsbuild-plugin-esbuild	Minor
@modern-js/uni-builder	Minor
@modern-js/builder-doc	Minor
@modern-js/main-doc	Minor
@modern-js/module-tools-docs	Minor
@modern-js/devtools-client	Minor
@modern-js/devtools-kit	Minor
@modern-js/plugin-devtools	Minor
@modern-js/plugin-garfish	Minor
@modern-js/plugin-router-v5	Minor
@modern-js/runtime	Minor
@modern-js/plugin-testing	Minor
@modern-js/new-action	Minor
@modern-js/sandpack-react	Minor
@modern-js-app/eslint-config	Minor
@modern-js/eslint-config	Minor
@modern-js/tsconfig	Minor
@modern-js/babel-plugin-module-resolver	Minor
@modern-js/bff-core	Minor
@modern-js/bff-runtime	Minor
@modern-js/server-core	Minor
@modern-js/create-request	Minor
@modern-js/plugin-express	Minor
@modern-js/plugin-koa	Minor
@modern-js/plugin-polyfill	Minor
@modern-js/plugin-server	Minor
@modern-js/plugin-worker	Minor
@modern-js/prod-server	Minor
@modern-js/server	Minor
@modern-js/server-utils	Minor
@modern-js/plugin-module-babel	Minor
@modern-js/plugin-module-banner	Minor
@modern-js/plugin-module-import	Minor
@modern-js/plugin-module-node-polyfill	Minor
@modern-js/plugin-module-polyfill	Minor
@modern-js/app-tools	Minor
@modern-js/module-tools	Minor
@modern-js/monorepo-tools	Minor
@modern-js/create	Minor
@modern-js/e2e	Minor
@modern-js/node-bundle-require	Minor
@modern-js/plugin	Minor
@modern-js/runtime-utils	Minor
@modern-js/types	Minor
@modern-js/upgrade	Minor
@modern-js/utils	Minor
@modern-js/babel-compiler	Minor
@modern-js/storybook-builder	Minor
@modern-js/storybook	Minor
@scripts/build	Minor
@scripts/check-changeset	Minor
@scripts/jest-config	Minor
@scripts/lint-package-json	Minor
@scripts/prebundle	Minor
@scripts/update-codesmith	Minor
@scripts/update-rsbuild	Minor
@scripts/update-rspress	Minor
@scripts/vitest-config	Minor
tests	Minor
@integration-test/alias-set	Minor
api-service-koa	Minor
app-docmuent	Minor
integration-asset-prefix	Minor
async-entry-test	Minor
tmp	Minor
bff-express	Minor
bff-koa	Minor
integration-builder-plugins	Minor
integration-clean-dist-path	Minor
integration-compatibility	Minor
integration-copy-assets	Minor
integration-custom-dist-path	Minor
integration-custom-render	Minor
integration-custom-template	Minor
dev-server	Minor
@integration-test/devtools	Minor
integration-disable-html	Minor
esbuild-transform-and-minify	Minor
esbuild-integration	Minor
integration-config-async-config-test	Minor
integration-basic-local-config	Minor
integration-config-function-params	Minor
integration-local-config-function	Minor
integration-load-config	Minor
main-entry-name	Minor
alias-js-test	Minor
alias-ts-test	Minor
asset-limit-test	Minor
asset-name-test	Minor
asset-path-test	Minor
asset-publicPath-test	Minor
svgr-test	Minor
auto-extension-commonjs-test	Minor
auto-extension-type-module-test	Minor
auto-external-test	Minor
banner-footer-test	Minor
build-type-test	Minor
copy-test	Minor
decorator-test	Minor
global-vars-js-test	Minor
global-vars-ts-test	Minor
dts-composite	Minor
dts-test	Minor
esbuild-options-test	Minor
external-test	Minor
format-cjs-test	Minor
format-esm-test	Minor
format-iife-test	Minor
format-umd-test	Minor
entry-test	Minor
jsx-test	Minor
metafile-test	Minor
minify-test	Minor
platform-test	Minor
redirect-test	Minor
data-url-test	Minor
browser-false	Minor
resolve-false	Minor
ndoe-protocol-test	Minor
lib1	Minor
lib2	Minor
lib3	Minor
condition-exports-test	Minor
js-extensions-test	Minor
main-fields-test	Minor
shims-test	Minor
module-tools-side-effects-test	Minor
source-dir-test	Minor
sourcemap-test	Minor
splitting-test	Minor
css-test	Minor
less-test	Minor
style-test	Minor
postcss-test	Minor
sass-test	Minor
tailwindcss-test	Minor
target-test	Minor
transform-import	Minor
transform-lodash	Minor
tsconfig-test	Minor
tsconfig-extends-test	Minor
umdGlobals-test	Minor
get-module-id-test	Minor
dev-test	Minor
build-platform-test	Minor
build-preset-error-test	Minor
build-preset-function-test	Minor
build-preset-test	Minor
build-preset-string-test	Minor
plugin-babel	Minor
module-hooks-test	Minor
plugin-node-polyfill	Minor
plugin-polyfill	Minor
plugin-vue	Minor
nonce	Minor
routes	Minor
file-based-router	Minor
use-loader	Minor
runtime	Minor
select-mul-entry-test	Minor
select-one-entry-test	Minor
entry	Minor
server-config	Minor
server-middleware	Minor
server-hook-reqeust	Minor
server-hook-response	Minor
server-hook-router	Minor
@integration-test/server-hook-reqeust	Minor
server-prod	Minor
@source-code-build/app-ts-loader	Minor
@source-code-build/app	Minor
@source-code-build/common	Minor
@source-code-build/components	Minor
@source-code-build/utils	Minor
ssg-fixtures-nested-routes	Minor
ssg-fixtures-simple	Minor
ssg-fixtures-web-server	Minor
ssg	Minor
ssr-base-json-test	Minor
ssr-base-test	Minor
ssr-base-fallback-test	Minor
init	Minor
ssr-inline	Minor
ssr-preload	Minor
ssr-script-loading	Minor
ssr-streaming-test	Minor
ssr	Minor
integration-tests-storybook	Minor
swc-test-decorator-legacy	Minor
swc-test-decorator	Minor
swc-minify-css	Minor
swc-minify-js	Minor
transform-fail	Minor
swc-integration	Minor
integration-tailwindcss-v2	Minor
integration-tailwindcss-v3-js-config	Minor
integration-tailwindcss-v3-merge-config	Minor
integration-tailwindcss-v3-ts-config	Minor
integration-tailwindcss-v3	Minor
twin-macro-v2	Minor
twin-macro-v3	Minor
tailwindcss-integration-test	Minor
tmp-dir	Minor
@e2e/testing-plugin	Minor
transform-import-type-test	Minor
write-to-dist	Minor
@e2e/webpack-builder-import-antd-v4	Minor
@e2e/webpack-builder-import-antd-v5	Minor
@e2e/webpack-builder-import-arco	Minor
@e2e/webpack-builder-test-moment	Minor
@e2e/builder-remove-prop-types	Minor
@e2e/webpack-builder-source-map	Minor
@e2e/builder	Minor
@e2e/garfish-dashboard-router-v6	Minor
@e2e/garfish-dashboard	Minor
@e2e/garfish-main-router-v6	Minor
@e2e/garfish-main	Minor
@e2e/garfish-table	Minor
@e2e/garfish	Minor
@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/entry-generator	Patch
@modern-js/generator-generator	Patch
@modern-js/module-doc-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/ssg-generator	Patch
@modern-js/storybook-next-generator	Patch
@modern-js/test-generator	Patch
@modern-js/upgrade-generator	Patch
@modern-js/generator-plugin-plugin	Patch
@modern-js/base-generator	Patch
@modern-js/changeset-generator	Patch
@modern-js/packages-generator	Patch
@modern-js/repo-generator	Patch
@modern-js/server-generator	Patch
@modern-js/tailwindcss-generator	Patch
@modern-js/generator-cases	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