@rsbuild/plugin-vue2 0.0.0-next-20240514150515 → 0.0.0-next-20240708070719

package/dist/VueLoader15PitchFixPlugin.d.ts

@@ -1,4 +1,4 @@
-import type { Rspack } from '@rsbuild/shared';
+import type { Rspack } from '@rsbuild/core';
 /**
  * this plugin is a quick fix for issue https://github.com/web-infra-dev/rsbuild/issues/2093
  */

package/dist/index.cjs

@@ -35,10 +35,10 @@ var __publicField = (obj, key, value) => {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  PLUGIN_VUE2_NAME: () => PLUGIN_VUE2_NAME,
   pluginVue2: () => pluginVue2
 });
 module.exports = __toCommonJS(src_exports);
-var import_shared2 = require("@rsbuild/shared");
 var import_vue_loader = require("vue-loader");
 
 // src/VueLoader15PitchFixPlugin.ts
@@ -81,69 +81,110 @@ var VueLoader15PitchFixPlugin = class {
 };
 
 // src/splitChunks.ts
-var import_shared = require("@rsbuild/shared");
+var isPlainObject = (obj) => obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
 var applySplitChunksRule = (api, options = {
   vue: true,
   router: true
 }) => {
-  api.modifyBundlerChain((chain) => {
-    const config = api.getNormalizedConfig();
+  api.modifyBundlerChain((chain, { environment }) => {
+    const { config } = environment;
     if (config.performance.chunkSplit.strategy !== "split-by-experience") {
       return;
     }
     const currentConfig = chain.optimization.splitChunks.values();
-    if (!(0, import_shared.isPlainObject)(currentConfig)) {
+    if (!isPlainObject(currentConfig)) {
       return;
     }
     const extraGroups = {};
-    if (options.vue) {
-      extraGroups.vue = ["vue", "vue-loader"];
+    if (options.router) {
+      extraGroups.vue = {
+        name: "lib-vue",
+        test: /node_modules[\\/](?:vue|vue-loader)[\\/]/,
+        priority: 0
+      };
     }
     if (options.router) {
-      extraGroups.router = ["vue-router"];
+      extraGroups.router = {
+        name: "lib-router",
+        test: /node_modules[\\/]vue-router[\\/]/,
+        priority: 0
+      };
     }
     if (!Object.keys(extraGroups).length) {
       return;
     }
     chain.optimization.splitChunks({
       ...currentConfig,
-      // @ts-expect-error Rspack and Webpack uses different cacheGroups type
       cacheGroups: {
         ...currentConfig.cacheGroups,
-        ...(0, import_shared.createCacheGroups)(extraGroups)
+        ...extraGroups
       }
     });
   });
 };
 
 // src/index.ts
+var PLUGIN_VUE2_NAME = "rsbuild:vue2";
 function pluginVue2(options = {}) {
   return {
-    name: "rsbuild:vue2",
+    name: PLUGIN_VUE2_NAME,
     setup(api) {
+      const VUE_REGEXP = /\.vue$/;
+      const CSS_MODULES_REGEX = /\.modules?\.\w+$/i;
+      api.modifyRsbuildConfig((config) => {
+        config.output ||= {};
+        config.output.cssModules ||= {};
+        if (config.output.cssModules.auto === true) {
+          config.output.cssModules.auto = (path, query) => {
+            if (VUE_REGEXP.test(path)) {
+              return query.includes("type=style") && query.includes("module=true");
+            }
+            return CSS_MODULES_REGEX.test(path);
+          };
+        }
+        return config;
+      });
       api.modifyBundlerChain((chain, { CHAIN_ID }) => {
         chain.resolve.extensions.add(".vue");
         if (!chain.resolve.alias.get("vue$")) {
           chain.resolve.alias.set("vue$", "vue/dist/vue.runtime.esm.js");
         }
-        const vueLoaderOptions = (0, import_shared2.deepmerge)(
-          {
-            compilerOptions: {
-              preserveWhitespace: false
-            },
-            experimentalInlineMatchResource: true
-          },
-          options.vueLoaderOptions ?? {}
-        );
-        chain.module.rule(CHAIN_ID.RULE.VUE).test(/\.vue$/).use(CHAIN_ID.USE.VUE).loader(require.resolve("vue-loader")).options(vueLoaderOptions);
+        const userLoaderOptions = options.vueLoaderOptions ?? {};
+        const compilerOptions = {
+          // https://github.com/vuejs/vue-cli/pull/3853
+          whitespace: "condense",
+          ...userLoaderOptions.compilerOptions
+        };
+        const vueLoaderOptions = {
+          experimentalInlineMatchResource: true,
+          ...userLoaderOptions,
+          compilerOptions
+        };
+        const rule = chain.module.rule(CHAIN_ID.RULE.VUE);
+        rule.test(VUE_REGEXP).use(CHAIN_ID.USE.VUE).loader(require.resolve("vue-loader")).options(vueLoaderOptions);
+        if (chain.module.rules.has(CHAIN_ID.RULE.JS)) {
+          applyResolveConfig(rule, chain.module.rule(CHAIN_ID.RULE.JS));
+        }
+        chain.module.rule(CHAIN_ID.RULE.CSS).test(/\.(?:css|postcss|pcss)$/);
         chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(import_vue_loader.VueLoaderPlugin);
-        chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_15_PITCH_FIX_PLUGIN).use(VueLoader15PitchFixPlugin);
+        chain.plugin("vue-loader-15-pitch-fix").use(VueLoader15PitchFixPlugin);
       });
       applySplitChunksRule(api, options.splitChunks);
     }
   };
 }
+function applyResolveConfig(vueRule, jsRule) {
+  const fullySpecified = jsRule.resolve.get("fullySpecified");
+  const aliases = jsRule.resolve.alias.entries();
+  if (aliases) {
+    vueRule.resolve.alias.merge(aliases);
+  }
+  if (fullySpecified !== void 0) {
+    vueRule.resolve.fullySpecified(fullySpecified);
+  }
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  PLUGIN_VUE2_NAME,
   pluginVue2
 });

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import type { RsbuildPlugin } from '@rsbuild/core';
-import type { VueLoaderOptions } from 'vue-loader';
+import { type VueLoaderOptions } from 'vue-loader';
 export type SplitVueChunkOptions = {
     /**
      * Whether to enable split chunking for Vue-related dependencies (e.g., vue, vue-loader).
@@ -23,4 +23,5 @@ export type PluginVueOptions = {
      */
     splitChunks?: SplitVueChunkOptions;
 };
+export declare const PLUGIN_VUE2_NAME = "rsbuild:vue2";
 export declare function pluginVue2(options?: PluginVueOptions): RsbuildPlugin;

package/dist/index.js

@@ -15,12 +15,11 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 
-// ../../node_modules/.pnpm/@modern-js+module-tools@2.49.3_eslint@8.57.0_typescript@5.4.5/node_modules/@modern-js/module-tools/shims/esm.js
+// ../../node_modules/.pnpm/@modern-js+module-tools@2.54.6_eslint@9.6.0_typescript@5.5.2/node_modules/@modern-js/module-tools/shims/esm.js
 import { fileURLToPath } from "url";
 import path from "path";
 
 // src/index.ts
-import { deepmerge } from "@rsbuild/shared";
 import { VueLoaderPlugin } from "vue-loader";
 
 // src/VueLoader15PitchFixPlugin.ts
@@ -63,16 +62,13 @@ var VueLoader15PitchFixPlugin = class {
 };
 
 // src/splitChunks.ts
-import {
-  createCacheGroups,
-  isPlainObject
-} from "@rsbuild/shared";
+var isPlainObject = (obj) => obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
 var applySplitChunksRule = (api, options = {
   vue: true,
   router: true
 }) => {
-  api.modifyBundlerChain((chain) => {
-    const config = api.getNormalizedConfig();
+  api.modifyBundlerChain((chain, { environment }) => {
+    const { config } = environment;
     if (config.performance.chunkSplit.strategy !== "split-by-experience") {
       return;
     }
@@ -81,53 +77,94 @@ var applySplitChunksRule = (api, options = {
       return;
     }
     const extraGroups = {};
-    if (options.vue) {
-      extraGroups.vue = ["vue", "vue-loader"];
+    if (options.router) {
+      extraGroups.vue = {
+        name: "lib-vue",
+        test: /node_modules[\\/](?:vue|vue-loader)[\\/]/,
+        priority: 0
+      };
     }
     if (options.router) {
-      extraGroups.router = ["vue-router"];
+      extraGroups.router = {
+        name: "lib-router",
+        test: /node_modules[\\/]vue-router[\\/]/,
+        priority: 0
+      };
     }
     if (!Object.keys(extraGroups).length) {
       return;
     }
     chain.optimization.splitChunks({
       ...currentConfig,
-      // @ts-expect-error Rspack and Webpack uses different cacheGroups type
       cacheGroups: {
         ...currentConfig.cacheGroups,
-        ...createCacheGroups(extraGroups)
+        ...extraGroups
       }
     });
   });
 };
 
 // src/index.ts
+var PLUGIN_VUE2_NAME = "rsbuild:vue2";
 function pluginVue2(options = {}) {
   return {
-    name: "rsbuild:vue2",
+    name: PLUGIN_VUE2_NAME,
     setup(api) {
+      const VUE_REGEXP = /\.vue$/;
+      const CSS_MODULES_REGEX = /\.modules?\.\w+$/i;
+      api.modifyRsbuildConfig((config) => {
+        config.output ||= {};
+        config.output.cssModules ||= {};
+        if (config.output.cssModules.auto === true) {
+          config.output.cssModules.auto = (path2, query) => {
+            if (VUE_REGEXP.test(path2)) {
+              return query.includes("type=style") && query.includes("module=true");
+            }
+            return CSS_MODULES_REGEX.test(path2);
+          };
+        }
+        return config;
+      });
       api.modifyBundlerChain((chain, { CHAIN_ID }) => {
         chain.resolve.extensions.add(".vue");
         if (!chain.resolve.alias.get("vue$")) {
           chain.resolve.alias.set("vue$", "vue/dist/vue.runtime.esm.js");
         }
-        const vueLoaderOptions = deepmerge(
-          {
-            compilerOptions: {
-              preserveWhitespace: false
-            },
-            experimentalInlineMatchResource: true
-          },
-          options.vueLoaderOptions ?? {}
-        );
-        chain.module.rule(CHAIN_ID.RULE.VUE).test(/\.vue$/).use(CHAIN_ID.USE.VUE).loader(__require.resolve("vue-loader")).options(vueLoaderOptions);
+        const userLoaderOptions = options.vueLoaderOptions ?? {};
+        const compilerOptions = {
+          // https://github.com/vuejs/vue-cli/pull/3853
+          whitespace: "condense",
+          ...userLoaderOptions.compilerOptions
+        };
+        const vueLoaderOptions = {
+          experimentalInlineMatchResource: true,
+          ...userLoaderOptions,
+          compilerOptions
+        };
+        const rule = chain.module.rule(CHAIN_ID.RULE.VUE);
+        rule.test(VUE_REGEXP).use(CHAIN_ID.USE.VUE).loader(__require.resolve("vue-loader")).options(vueLoaderOptions);
+        if (chain.module.rules.has(CHAIN_ID.RULE.JS)) {
+          applyResolveConfig(rule, chain.module.rule(CHAIN_ID.RULE.JS));
+        }
+        chain.module.rule(CHAIN_ID.RULE.CSS).test(/\.(?:css|postcss|pcss)$/);
         chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(VueLoaderPlugin);
-        chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_15_PITCH_FIX_PLUGIN).use(VueLoader15PitchFixPlugin);
+        chain.plugin("vue-loader-15-pitch-fix").use(VueLoader15PitchFixPlugin);
       });
       applySplitChunksRule(api, options.splitChunks);
     }
   };
 }
+function applyResolveConfig(vueRule, jsRule) {
+  const fullySpecified = jsRule.resolve.get("fullySpecified");
+  const aliases = jsRule.resolve.alias.entries();
+  if (aliases) {
+    vueRule.resolve.alias.merge(aliases);
+  }
+  if (fullySpecified !== void 0) {
+    vueRule.resolve.fullySpecified(fullySpecified);
+  }
+}
 export {
+  PLUGIN_VUE2_NAME,
   pluginVue2
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/plugin-vue2",
-  "version": "0.0.0-next-20240514150515",
+  "version": "0.0.0-next-20240708070719",
   "description": "Vue 2 plugin of Rsbuild",
   "homepage": "https://rsbuild.dev",
   "repository": {
@@ -24,17 +24,16 @@
   ],
   "dependencies": {
     "vue-loader": "^15.11.1",
-    "webpack": "^5.91.0",
-    "@rsbuild/shared": "0.0.0-next-20240514150515"
+    "webpack": "^5.92.1"
   },
   "devDependencies": {
-    "typescript": "^5.4.2",
-    "webpack": "^5.91.0",
-    "@rsbuild/core": "0.0.0-next-20240514150515",
-    "@scripts/test-helper": "0.0.0-next-20240514150515"
+    "typescript": "^5.5.2",
+    "webpack": "^5.92.1",
+    "@rsbuild/core": "0.0.0-next-20240708070719",
+    "@scripts/test-helper": "0.0.0-next-20240708070719"
   },
   "peerDependencies": {
-    "@rsbuild/core": "0.0.0-next-20240514150515"
+    "@rsbuild/core": "0.0.0-next-20240708070719"
   },
   "publishConfig": {
     "access": "public",