chore(plugin-vue): pre-copy vue-loader

Author: fi3ework

packages/plugin-vue/package.json

@@ -20,28 +20,40 @@
   "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "compiled"
   ],
   "scripts": {
     "build": "rslib build",
     "dev": "rslib build -w",
     "bump": "pnpx bumpp --no-tag"
   },
   "dependencies": {
-    "vue-loader": "^17.4.2",
-    "webpack": "^5.102.1"
+    "chalk": "^4.1.0",
+    "hash-sum": "^2.0.0",
+    "webpack": "^5.102.1",
+    "watchpack": "^2.4.0"
   },
   "devDependencies": {
     "@rsbuild/core": "workspace:*",
     "@rslib/core": "0.15.1",
     "@scripts/test-helper": "workspace:*",
     "@types/node": "^22.18.11",
     "typescript": "^5.9.3",
-    "vue": "^3.5.22"
+    "vue": "^3.5.22",
+    "vue-loader": "^17.4.2"
   },
   "peerDependencies": {
     "@rsbuild/core": "1.x"
   },
+  "peerDependenciesMeta": {
+    "@vue/compiler-sfc": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

packages/plugin-vue/rslib.config.ts

@@ -1,3 +1,54 @@
+import fs from 'node:fs';
+import path from 'node:path';
 import { dualPackage } from '@rsbuild/config/rslib.config.ts';
+import { defineConfig, rsbuild } from '@rslib/core';
 
-export default dualPackage;
+const pluginTrimVueLoaderPackageJson: rsbuild.RsbuildPlugin = {
+  name: 'trim-vue-loader-package-json',
+  setup(api) {
+    api.onBeforeBuild(() => {
+      const cwd = process.cwd();
+      const sourceRoot = path.join(cwd, 'node_modules/vue-loader');
+      const targetRoot = path.join(cwd, 'compiled/vue-loader');
+
+      fs.rmSync(targetRoot, { recursive: true, force: true });
+
+      fs.cpSync(path.join(sourceRoot, 'dist'), targetRoot, {
+        recursive: true,
+      });
+
+      for (const file of ['package.json', 'LICENSE']) {
+        fs.copyFileSync(
+          path.join(sourceRoot, file),
+          path.join(targetRoot, file),
+        );
+      }
+    });
+
+    api.onAfterBuild(() => {
+      const pkgPath = path.join(
+        process.cwd(),
+        'compiled/vue-loader/package.json',
+      );
+      const pkgJson = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+      const fields = ['name', 'author', 'version', 'funding', 'license'];
+      const trimmed = Object.fromEntries(
+        fields
+          .filter((field) => field in pkgJson)
+          .map((field) => [field, pkgJson[field]]),
+      );
+      fs.writeFileSync(
+        pkgPath,
+        `${JSON.stringify(trimmed, null, 2)}\n`,
+        'utf8',
+      );
+    });
+  },
+};
+
+export default defineConfig(
+  rsbuild.mergeRsbuildConfig(dualPackage, {
+    lib: [],
+    plugins: [pluginTrimVueLoaderPackageJson],
+  }),
+);

packages/plugin-vue/src/index.ts

@@ -1,6 +1,9 @@
 import { createRequire } from 'node:module';
 import type { EnvironmentConfig, RsbuildPlugin } from '@rsbuild/core';
-import { type VueLoaderOptions, VueLoaderPlugin } from 'vue-loader';
+import {
+  type VueLoaderOptions,
+  VueLoaderPlugin,
+} from '../compiled/vue-loader/index.js';
 import { applySplitChunksRule } from './splitChunks.js';
 
 const require = createRequire(import.meta.url);
@@ -90,7 +93,7 @@ export function pluginVue(options: PluginVueOptions = {}): RsbuildPlugin {
           .rule(CHAIN_ID.RULE.VUE)
           .test(VUE_REGEXP)
           .use(CHAIN_ID.USE.VUE)
-          .loader(require.resolve('vue-loader'))
+          .loader(require.resolve('../compiled/vue-loader/index.js'))
           .options(vueLoaderOptions);
 
         // Support for lang="postcss" and lang="pcss" in SFC

packages/plugin-vue/tests/__snapshots__/index.test.ts.snap

@@ -5,7 +5,7 @@ exports[`plugin-vue > should add vue-loader and VueLoaderPlugin correctly 1`] =
   "test": /\\\\\\.vue\\$/,
   "use": [
     {
-      "loader": "<ROOT>/node_modules/<PNPM_INNER>/vue-loader/dist/index.js",
+      "loader": "<ROOT>/packages/plugin-vue/compiled/vue-loader/index.js",
       "options": {
         "compilerOptions": {
           "preserveWhitespace": false,
@@ -41,7 +41,7 @@ exports[`plugin-vue > should allow to configure vueLoader options 1`] = `
   "test": /\\\\\\.vue\\$/,
   "use": [
     {
-      "loader": "<ROOT>/node_modules/<PNPM_INNER>/vue-loader/dist/index.js",
+      "loader": "<ROOT>/packages/plugin-vue/compiled/vue-loader/index.js",
       "options": {
         "compilerOptions": {
           "preserveWhitespace": false,

packages/plugin-vue/tsconfig.json

@@ -11,5 +11,5 @@
       "path": "../core"
     }
   ],
-  "include": ["src"]
+  "include": ["src", "compiled"]
 }

patches/vue-loader.patch

@@ -0,0 +1,12 @@
+diff --git a/dist/pluginWebpack5.js b/dist/pluginWebpack5.js
+index 7c5eadf2ad45157aed2fd23a83ae4b1a2fb4b8ac..b9cd4eb701c366fa7f7f4782a20d4e3568705a94 100644
+--- a/dist/pluginWebpack5.js
++++ b/dist/pluginWebpack5.js
+@@ -61,6 +61,7 @@ const ruleSetCompiler = new RuleSetCompiler([
+     new BasicEffectRulePlugin('resolve'),
+     new BasicEffectRulePlugin('generator'),
+     new BasicEffectRulePlugin('layer'),
++    new BasicEffectRulePlugin('with'),
+     new UseEffectRulePlugin(),
+ ]);
+ class VueLoaderPlugin {

pnpm-lock.yaml

@@ -10,6 +10,8 @@ packages:
   - '!**/create-rsbuild/template-*/**'
   - '!**/test-temp-*/**'
 
+engineStrict: true
+
 hoistPattern: []
 
 patchedDependencies:
@@ -18,6 +20,6 @@ patchedDependencies:
   [email protected]: patches/[email protected]
   [email protected]: patches/[email protected]
   url-loader: patches/[email protected]
+  vue-loader: patches/vue-loader.patch
 
 strictPeerDependencies: false
-engineStrict: true

pnpm-workspace.yaml

@@ -13,7 +13,7 @@ export default defineConfig({
     alias,
   },
   output: {
-    externals: ['@rsbuild/core'],
+    externals: ['@rsbuild/core', /\/compiled\/vue-loader/],
   },
   name: 'node',
   globals: true,