@rsbuild/plugin-vue2 1.0.0 → 1.0.1-beta.1

package/README.md

@@ -4,7 +4,7 @@
 
 # Rsbuild
 
-Unleash the power of Rspack with the out-of-the-box build tool.
+The Rspack-based build tool. It's fast, out-of-the-box and extensible.
 
 ## Documentation
 

package/dist/VueLoader15PitchFixPlugin.d.ts

@@ -0,0 +1,8 @@
+import type { Rspack } from '@rsbuild/core';
+/**
+ * this plugin is a quick fix for issue https://github.com/web-infra-dev/rsbuild/issues/2093
+ */
+export declare class VueLoader15PitchFixPlugin implements Rspack.RspackPluginInstance {
+    readonly name = "VueLoader15PitchFixPlugin";
+    apply(compiler: Rspack.Compiler): void;
+}

package/dist/index.cjs

@@ -0,0 +1,190 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return 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_vue_loader = require("vue-loader");
+
+// src/VueLoader15PitchFixPlugin.ts
+var VueLoader15PitchFixPlugin = class {
+  constructor() {
+    __publicField(this, "name", "VueLoader15PitchFixPlugin");
+  }
+  apply(compiler) {
+    const { NormalModule } = compiler.webpack;
+    compiler.hooks.compilation.tap(this.name, (compilation) => {
+      const isExpCssOn = compilation.compiler.options?.experiments?.css;
+      if (!isExpCssOn)
+        return;
+      NormalModule.getCompilationHooks(compilation).loader.tap(
+        this.name,
+        (loaderContext) => {
+          if (
+            // the related issue only happens for <style>
+            /[?&]type=style/.test(loaderContext.resourceQuery) && // the fix should be applied before `pitch` phase completed.
+            // once `pitch` phase completed, vue-loader will remove its pitcher loader.
+            /[\\/]vue-loader[\\/]lib[\\/]loaders[\\/]pitcher/.test(
+              loaderContext.loaders?.[0]?.path || ""
+            )
+          ) {
+            const seen = /* @__PURE__ */ new Set();
+            const loaders = [];
+            for (const loader of loaderContext.loaders || []) {
+              const identifier = typeof loader === "string" ? loader : loader.path + loader.query;
+              if (!seen.has(identifier)) {
+                seen.add(identifier);
+                loaders.push(loader);
+              }
+            }
+            loaderContext.loaders = loaders;
+          }
+        }
+      );
+    });
+  }
+};
+
+// src/splitChunks.ts
+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, { environment }) => {
+    const { config } = environment;
+    if (config.performance.chunkSplit.strategy !== "split-by-experience") {
+      return;
+    }
+    const currentConfig = chain.optimization.splitChunks.values();
+    if (!isPlainObject(currentConfig)) {
+      return;
+    }
+    const extraGroups = {};
+    if (options.router) {
+      extraGroups.vue = {
+        name: "lib-vue",
+        test: /node_modules[\\/](?:vue|vue-loader)[\\/]/,
+        priority: 0
+      };
+    }
+    if (options.router) {
+      extraGroups.router = {
+        name: "lib-router",
+        test: /node_modules[\\/]vue-router[\\/]/,
+        priority: 0
+      };
+    }
+    if (!Object.keys(extraGroups).length) {
+      return;
+    }
+    chain.optimization.splitChunks({
+      ...currentConfig,
+      cacheGroups: {
+        ...currentConfig.cacheGroups,
+        ...extraGroups
+      }
+    });
+  });
+};
+
+// src/index.ts
+var PLUGIN_VUE2_NAME = "rsbuild:vue2";
+function pluginVue2(options = {}) {
+  return {
+    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 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("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,9 +1,27 @@
-import { RsbuildPlugin } from '@rsbuild/core';
-import { VueLoaderOptions } from 'vue-loader';
-
-type PluginVueOptions = {
+import type { RsbuildPlugin } from '@rsbuild/core';
+import { type VueLoaderOptions } from 'vue-loader';
+export type SplitVueChunkOptions = {
+    /**
+     * Whether to enable split chunking for Vue-related dependencies (e.g., vue, vue-loader).
+     * @default true
+     */
+    vue?: boolean;
+    /**
+     * Whether to enable split chunking for vue-router.
+     * @default true
+     */
+    router?: boolean;
+};
+export type PluginVueOptions = {
+    /**
+     * Options passed to `vue-loader`.
+     * @see https://vue-loader.vuejs.org/
+     */
     vueLoaderOptions?: VueLoaderOptions;
+    /**
+     * This option is used to control the split chunks behavior.
+     */
+    splitChunks?: SplitVueChunkOptions;
 };
-declare function pluginVue2(options?: PluginVueOptions): RsbuildPlugin;
-
-export { PluginVueOptions, pluginVue2 };
+export declare const PLUGIN_VUE2_NAME = "rsbuild:vue2";
+export declare function pluginVue2(options?: PluginVueOptions): RsbuildPlugin;

package/dist/index.js

@@ -1,63 +1,170 @@
-"use strict";
-var __create = Object.create;
+import { createRequire } from 'module';
+var require = createRequire(import.meta['url']);
+
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+
+// ../../node_modules/.pnpm/@modern-js+module-tools@2.55.0_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 { VueLoaderPlugin } from "vue-loader";
+
+// src/VueLoader15PitchFixPlugin.ts
+var VueLoader15PitchFixPlugin = class {
+  constructor() {
+    __publicField(this, "name", "VueLoader15PitchFixPlugin");
+  }
+  apply(compiler) {
+    const { NormalModule } = compiler.webpack;
+    compiler.hooks.compilation.tap(this.name, (compilation) => {
+      const isExpCssOn = compilation.compiler.options?.experiments?.css;
+      if (!isExpCssOn)
+        return;
+      NormalModule.getCompilationHooks(compilation).loader.tap(
+        this.name,
+        (loaderContext) => {
+          if (
+            // the related issue only happens for <style>
+            /[?&]type=style/.test(loaderContext.resourceQuery) && // the fix should be applied before `pitch` phase completed.
+            // once `pitch` phase completed, vue-loader will remove its pitcher loader.
+            /[\\/]vue-loader[\\/]lib[\\/]loaders[\\/]pitcher/.test(
+              loaderContext.loaders?.[0]?.path || ""
+            )
+          ) {
+            const seen = /* @__PURE__ */ new Set();
+            const loaders = [];
+            for (const loader of loaderContext.loaders || []) {
+              const identifier = typeof loader === "string" ? loader : loader.path + loader.query;
+              if (!seen.has(identifier)) {
+                seen.add(identifier);
+                loaders.push(loader);
+              }
+            }
+            loaderContext.loaders = loaders;
+          }
+        }
+      );
+    });
   }
-  return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/splitChunks.ts
+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, { environment }) => {
+    const { config } = environment;
+    if (config.performance.chunkSplit.strategy !== "split-by-experience") {
+      return;
+    }
+    const currentConfig = chain.optimization.splitChunks.values();
+    if (!isPlainObject(currentConfig)) {
+      return;
+    }
+    const extraGroups = {};
+    if (options.router) {
+      extraGroups.vue = {
+        name: "lib-vue",
+        test: /node_modules[\\/](?:vue|vue-loader)[\\/]/,
+        priority: 0
+      };
+    }
+    if (options.router) {
+      extraGroups.router = {
+        name: "lib-router",
+        test: /node_modules[\\/]vue-router[\\/]/,
+        priority: 0
+      };
+    }
+    if (!Object.keys(extraGroups).length) {
+      return;
+    }
+    chain.optimization.splitChunks({
+      ...currentConfig,
+      cacheGroups: {
+        ...currentConfig.cacheGroups,
+        ...extraGroups
+      }
+    });
+  });
+};
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  pluginVue2: () => pluginVue2
-});
-module.exports = __toCommonJS(src_exports);
-var import_shared = require("@rsbuild/shared");
-var import_vue_loader = require("vue-loader");
+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 }) => {
-        var _a;
         chain.resolve.extensions.add(".vue");
-        const vueLoaderOptions = (0, import_shared.deepmerge)(
-          {
-            compilerOptions: {
-              preserveWhitespace: false
-            },
-            experimentalInlineMatchResource: true
-          },
-          (_a = options.vueLoaderOptions) != null ? _a : {}
-        );
-        chain.module.rule(CHAIN_ID.RULE.VUE).test(/\.vue$/).use(CHAIN_ID.USE.VUE).loader(require.resolve("vue-loader")).options(vueLoaderOptions);
-        chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(import_vue_loader.VueLoaderPlugin);
+        if (!chain.resolve.alias.get("vue$")) {
+          chain.resolve.alias.set("vue$", "vue/dist/vue.runtime.esm.js");
+        }
+        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("vue-loader-15-pitch-fix").use(VueLoader15PitchFixPlugin);
       });
+      applySplitChunksRule(api, options.splitChunks);
     }
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+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/dist/splitChunks.d.ts

@@ -0,0 +1,3 @@
+import type { RsbuildPluginAPI } from '@rsbuild/core';
+import type { SplitVueChunkOptions } from '.';
+export declare const applySplitChunksRule: (api: RsbuildPluginAPI, options?: SplitVueChunkOptions) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/plugin-vue2",
-  "version": "1.0.0",
+  "version": "1.0.1-beta.1",
   "description": "Vue 2 plugin of Rsbuild",
   "homepage": "https://rsbuild.dev",
   "repository": {
@@ -9,31 +9,31 @@
     "directory": "packages/plugin-vue2"
   },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "default": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "dependencies": {
     "vue-loader": "^15.11.1",
-    "webpack": "^5.89.0",
-    "@rsbuild/shared": "1.0.0"
+    "webpack": "^5.93.0"
   },
   "devDependencies": {
-    "typescript": "^5.3.0",
-    "webpack": "^5.89.0",
-    "@rsbuild/core": "1.0.0",
-    "@rsbuild/test-helper": "1.0.0"
+    "typescript": "^5.5.2",
+    "webpack": "^5.93.0",
+    "@rsbuild/core": "1.0.1-beta.1",
+    "@scripts/test-helper": "1.0.1-beta.1"
   },
   "peerDependencies": {
-    "@rsbuild/core": "^1.0.0"
+    "@rsbuild/core": "^1.0.1-beta.0"
   },
   "publishConfig": {
     "access": "public",

package/dist/index.mjs

@@ -1,43 +0,0 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// ../../node_modules/.pnpm/@modern-js+module-tools@2.40.0_typescript@5.3.2/node_modules/@modern-js/module-tools/shims/esm.js
-import { fileURLToPath } from "url";
-import path from "path";
-
-// ../../scripts/require_shims.js
-import { createRequire } from "module";
-global.require = createRequire(import.meta.url);
-
-// src/index.ts
-import { deepmerge } from "@rsbuild/shared";
-import { VueLoaderPlugin } from "vue-loader";
-function pluginVue2(options = {}) {
-  return {
-    name: "rsbuild:vue2",
-    setup(api) {
-      api.modifyBundlerChain((chain, { CHAIN_ID }) => {
-        chain.resolve.extensions.add(".vue");
-        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);
-        chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(VueLoaderPlugin);
-      });
-    }
-  };
-}
-export {
-  pluginVue2
-};