@rsbuild/plugin-vue2 1.0.1-beta.9 → 1.0.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+Copyright (c) 2024 Rspack Contrib
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,19 +1,125 @@
-<p align="center">
-  <a href="https://rsbuild.dev" target="blank"><img src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427" alt="Rsbuild Logo" /></a>
+# @rsbuild/plugin-vue2
+
+Provides support for Vue 2 SFC (Single File Components). The plugin internally integrates [vue-loader](https://vue-loader.vuejs.org/) v15.
+
+> @rsbuild/plugin-vue2 only supports Vue >= 2.7.0.
+
+<p>
+  <a href="https://npmjs.com/package/@rsbuild/plugin-vue2">
+   <img src="https://img.shields.io/npm/v/@rsbuild/plugin-vue2?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  </a>
+  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
 </p>
 
-# Rsbuild
+## Usage
+
+Install:
+
+```bash
+npm add @rsbuild/plugin-vue2 -D
+```
+
+Add plugin to your `rsbuild.config.ts`:
+
+```ts
+// rsbuild.config.ts
+import { pluginVue2 } from "@rsbuild/plugin-vue2";
+
+export default {
+  plugins: [pluginVue2()],
+};
+```
+
+After registering the plugin, you can import `*.vue` files in your code.
+
+## Options
+
+If you need to customize the compilation behavior of Vue, you can use the following configs.
+
+### vueLoaderOptions
+
+Options passed to `vue-loader`, please refer to the [vue-loader documentation](https://vue-loader.vuejs.org/) for detailed usage.
+
+- **Type:** `VueLoaderOptions`
+- **Default:**
+
+```js
+const defaultOptions = {
+  compilerOptions: {
+    whitespace: "condense",
+  },
+  experimentalInlineMatchResource: true,
+};
+```
+
+- **Example:**
+
+```ts
+pluginVue2({
+  vueLoaderOptions: {
+    hotReload: false,
+  },
+});
+```
+
+> The Vue 2 plugin is using the `vue-loader` v15. Please be aware that there may be configuration differences between v15 and the latest version.
+
+### splitChunks
+
+When [chunkSplit.strategy](/config/performance/chunk-split) set to `split-by-experience`, Rsbuild will automatically split `vue` and `router` related packages into separate chunks by default:
+
+- `lib-vue.js`: includes vue, vue-loader.
+- `lib-router.js`: includes vue-router.
+
+This option is used to control this behavior and determine whether the `vue` and `router` related packages need to be split into separate chunks.
+
+- **Type:**
+
+```ts
+type SplitVueChunkOptions = {
+  vue?: boolean;
+  router?: boolean;
+};
+```
+
+- **Default:**
+
+```ts
+const defaultOptions = {
+  vue: true,
+  router: true,
+};
+```
+
+- **Example:**
+
+```ts
+pluginVue({
+  splitChunks: {
+    vue: false,
+    router: false,
+  },
+});
+```
+
+## FAQ
 
-The Rspack-based build tool. It's fast, out-of-the-box and extensible.
+### /deep/ selector causes compilation error
 
-## Documentation
+`/deep/` is a deprecated usage as of Vue v2.7. Since it is not a valid CSS syntax, CSS compilation tools like Lightning CSS will fail to compile it.
 
-https://rsbuild.dev/
+You can use `:deep()` instead. See [Vue - Deep Selectors](https://vuejs.org/api/sfc-css-features.html#deep-selectors) for more details.
 
-## Contributing
+```html
+<style scoped>
+  .a :deep(.b) {
+    /* ... */
+  }
+</style>
+```
 
-Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md).
+> You can also refer to [Vue - RFC 0023](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md) for more details.
 
 ## License
 
-Rsbuild is [MIT licensed](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).
+[MIT](./LICENSE).

package/dist/index.cjs

@@ -1,188 +1,180 @@
 "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
+// The require scope
+var __webpack_require__ = {};
+/************************************************************************/ // webpack/runtime/define_property_getters
+(()=>{
+    __webpack_require__.d = function(exports1, definition) {
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+// webpack/runtime/has_own_property
+(()=>{
+    __webpack_require__.o = function(obj, prop) {
+        return Object.prototype.hasOwnProperty.call(obj, prop);
+    };
+})();
+// webpack/runtime/make_namespace_object
+(()=>{
+    // define __esModule on exports
+    __webpack_require__.r = function(exports1) {
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+/************************************************************************/ var __webpack_exports__ = {};
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+    PLUGIN_VUE2_NAME: ()=>/* binding */ PLUGIN_VUE2_NAME,
+    pluginVue2: ()=>/* binding */ 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;
-          }
-        }
-      );
+const external_node_module_namespaceObject = require("node:module");
+const external_vue_loader_namespaceObject = require("vue-loader");
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
     });
-  }
-};
-
-// 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
-      };
+    else obj[key] = value;
+    return obj;
+}
+/**
+ * this plugin is a quick fix for issue https://github.com/web-infra-dev/rsbuild/issues/2093
+ */ class VueLoader15PitchFixPlugin {
+    apply(compiler) {
+        const { NormalModule } = compiler.webpack;
+        compiler.hooks.compilation.tap(this.name, (compilation)=>{
+            var _compilation_compiler_options_experiments, _compilation_compiler_options;
+            const isExpCssOn = null === (_compilation_compiler_options = compilation.compiler.options) || void 0 === _compilation_compiler_options ? void 0 : null === (_compilation_compiler_options_experiments = _compilation_compiler_options.experiments) || void 0 === _compilation_compiler_options_experiments ? void 0 : _compilation_compiler_options_experiments.css;
+            // the related issue only happens when experiments.css is on
+            if (!isExpCssOn) return;
+            NormalModule.getCompilationHooks(compilation).loader.tap(this.name, (loaderContext)=>{
+                var _loaderContext_loaders_, _loaderContext_loaders;
+                if (/[?&]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((null === (_loaderContext_loaders = loaderContext.loaders) || void 0 === _loaderContext_loaders ? void 0 : null === (_loaderContext_loaders_ = _loaderContext_loaders[0]) || void 0 === _loaderContext_loaders_ ? void 0 : _loaderContext_loaders_.path) || '')) {
+                    const seen = new Set();
+                    const loaders = [];
+                    // deduplicate loaders
+                    for (const loader of loaderContext.loaders || []){
+                        const identifier = 'string' == typeof loader ? loader : loader.path + loader.query;
+                        if (!seen.has(identifier)) {
+                            seen.add(identifier);
+                            loaders.push(loader);
+                        }
+                    }
+                    loaderContext.loaders = loaders;
+                }
+            });
+        });
     }
-    if (!Object.keys(extraGroups).length) {
-      return;
+    constructor(){
+        _define_property(this, "name", 'VueLoader15PitchFixPlugin');
     }
-    chain.optimization.splitChunks({
-      ...currentConfig,
-      cacheGroups: {
-        ...currentConfig.cacheGroups,
-        ...extraGroups
-      }
+}
+const isPlainObject = (obj)=>null !== obj && 'object' == typeof obj && '[object Object]' === Object.prototype.toString.call(obj);
+const applySplitChunksRule = (api, options = {
+    vue: true,
+    router: true
+})=>{
+    api.modifyBundlerChain((chain, { environment })=>{
+        const { config } = environment;
+        if ('split-by-experience' !== config.performance.chunkSplit.strategy) 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";
+const src_require = (0, external_node_module_namespaceObject.createRequire)(/*#__PURE__*/ function() {
+    return 'undefined' == typeof document ? new (module.require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
+}());
+const 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.modifyEnvironmentConfig((config) => {
-        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 {
+        name: PLUGIN_VUE2_NAME,
+        setup (api) {
+            const VUE_REGEXP = /\.vue$/;
+            const CSS_MODULES_REGEX = /\.modules?\.\w+$/i;
+            api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig })=>{
+                // Support `<style module>` in Vue SFC
+                if (true === config.output.cssModules.auto) 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);
+                };
+                const extraConfig = {
+                    source: {
+                        // should transpile all scripts from Vue SFC
+                        include: [
+                            /\.vue/
+                        ]
+                    }
+                };
+                return mergeEnvironmentConfig(config, extraConfig);
+            });
+            api.modifyBundlerChain((chain, { CHAIN_ID })=>{
+                chain.resolve.extensions.add('.vue');
+                // https://github.com/web-infra-dev/rsbuild/issues/1132
+                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(src_require.resolve('vue-loader')).options(vueLoaderOptions);
+                if (chain.module.rules.has(CHAIN_ID.RULE.JS)) applyResolveConfig(rule, chain.module.rule(CHAIN_ID.RULE.JS));
+                // Support for lang="postcss" and lang="pcss" in SFC
+                chain.module.rule(CHAIN_ID.RULE.CSS).test(/\.(?:css|postcss|pcss)$/);
+                chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(external_vue_loader_namespaceObject.VueLoaderPlugin);
+                // we could remove this once a new vue-loader@15 is released with https://github.com/vuejs/vue-loader/pull/2071 shipped
+                chain.plugin('vue-loader-15-pitch-fix').use(VueLoader15PitchFixPlugin);
+            });
+            applySplitChunksRule(api, options.splitChunks);
         }
-        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);
-  }
+    const fullySpecified = jsRule.resolve.get('fullySpecified');
+    const aliases = jsRule.resolve.alias.entries();
+    if (aliases) vueRule.resolve.alias.merge(aliases);
+    if (void 0 !== fullySpecified) vueRule.resolve.fullySpecified(fullySpecified);
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  PLUGIN_VUE2_NAME,
-  pluginVue2
+var __webpack_export_target__ = exports;
+for(var i in __webpack_exports__)__webpack_export_target__[i] = __webpack_exports__[i];
+if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+    value: true
 });

package/dist/index.js

@@ -1,168 +1,136 @@
-import { createRequire } from 'module';
-var require = createRequire(import.meta['url']);
-
-var __defProp = Object.defineProperty;
-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;
-};
-
-// ../../node_modules/.pnpm/@modern-js+module-tools@2.56.2_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;
-          }
-        }
-      );
+import * as __WEBPACK_EXTERNAL_MODULE_node_module__ from "node:module";
+import * as __WEBPACK_EXTERNAL_MODULE_vue_loader__ from "vue-loader";
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
     });
-  }
-};
-
-// 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
-      };
+    else obj[key] = value;
+    return obj;
+}
+/**
+ * this plugin is a quick fix for issue https://github.com/web-infra-dev/rsbuild/issues/2093
+ */ class VueLoader15PitchFixPlugin {
+    apply(compiler) {
+        const { NormalModule } = compiler.webpack;
+        compiler.hooks.compilation.tap(this.name, (compilation)=>{
+            var _compilation_compiler_options_experiments, _compilation_compiler_options;
+            const isExpCssOn = null === (_compilation_compiler_options = compilation.compiler.options) || void 0 === _compilation_compiler_options ? void 0 : null === (_compilation_compiler_options_experiments = _compilation_compiler_options.experiments) || void 0 === _compilation_compiler_options_experiments ? void 0 : _compilation_compiler_options_experiments.css;
+            // the related issue only happens when experiments.css is on
+            if (!isExpCssOn) return;
+            NormalModule.getCompilationHooks(compilation).loader.tap(this.name, (loaderContext)=>{
+                var _loaderContext_loaders_, _loaderContext_loaders;
+                if (/[?&]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((null === (_loaderContext_loaders = loaderContext.loaders) || void 0 === _loaderContext_loaders ? void 0 : null === (_loaderContext_loaders_ = _loaderContext_loaders[0]) || void 0 === _loaderContext_loaders_ ? void 0 : _loaderContext_loaders_.path) || '')) {
+                    const seen = new Set();
+                    const loaders = [];
+                    // deduplicate loaders
+                    for (const loader of loaderContext.loaders || []){
+                        const identifier = 'string' == typeof loader ? loader : loader.path + loader.query;
+                        if (!seen.has(identifier)) {
+                            seen.add(identifier);
+                            loaders.push(loader);
+                        }
+                    }
+                    loaderContext.loaders = loaders;
+                }
+            });
+        });
     }
-    if (!Object.keys(extraGroups).length) {
-      return;
+    constructor(){
+        _define_property(this, "name", 'VueLoader15PitchFixPlugin');
     }
-    chain.optimization.splitChunks({
-      ...currentConfig,
-      cacheGroups: {
-        ...currentConfig.cacheGroups,
-        ...extraGroups
-      }
+}
+const isPlainObject = (obj)=>null !== obj && 'object' == typeof obj && '[object Object]' === Object.prototype.toString.call(obj);
+const applySplitChunksRule = (api, options = {
+    vue: true,
+    router: true
+})=>{
+    api.modifyBundlerChain((chain, { environment })=>{
+        const { config } = environment;
+        if ('split-by-experience' !== config.performance.chunkSplit.strategy) 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";
+const src_require = (0, __WEBPACK_EXTERNAL_MODULE_node_module__.createRequire)(import.meta.url);
+const 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.modifyEnvironmentConfig((config) => {
-        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 {
+        name: PLUGIN_VUE2_NAME,
+        setup (api) {
+            const VUE_REGEXP = /\.vue$/;
+            const CSS_MODULES_REGEX = /\.modules?\.\w+$/i;
+            api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig })=>{
+                // Support `<style module>` in Vue SFC
+                if (true === config.output.cssModules.auto) 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);
+                };
+                const extraConfig = {
+                    source: {
+                        // should transpile all scripts from Vue SFC
+                        include: [
+                            /\.vue/
+                        ]
+                    }
+                };
+                return mergeEnvironmentConfig(config, extraConfig);
+            });
+            api.modifyBundlerChain((chain, { CHAIN_ID })=>{
+                chain.resolve.extensions.add('.vue');
+                // https://github.com/web-infra-dev/rsbuild/issues/1132
+                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(src_require.resolve('vue-loader')).options(vueLoaderOptions);
+                if (chain.module.rules.has(CHAIN_ID.RULE.JS)) applyResolveConfig(rule, chain.module.rule(CHAIN_ID.RULE.JS));
+                // Support for lang="postcss" and lang="pcss" in SFC
+                chain.module.rule(CHAIN_ID.RULE.CSS).test(/\.(?:css|postcss|pcss)$/);
+                chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(__WEBPACK_EXTERNAL_MODULE_vue_loader__.VueLoaderPlugin);
+                // we could remove this once a new vue-loader@15 is released with https://github.com/vuejs/vue-loader/pull/2071 shipped
+                chain.plugin('vue-loader-15-pitch-fix').use(VueLoader15PitchFixPlugin);
+            });
+            applySplitChunksRule(api, options.splitChunks);
         }
-        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(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);
-  }
+    const fullySpecified = jsRule.resolve.get('fullySpecified');
+    const aliases = jsRule.resolve.alias.entries();
+    if (aliases) vueRule.resolve.alias.merge(aliases);
+    if (void 0 !== fullySpecified) vueRule.resolve.fullySpecified(fullySpecified);
 }
-export {
-  PLUGIN_VUE2_NAME,
-  pluginVue2
-};
+export { PLUGIN_VUE2_NAME, pluginVue2 };

package/{dist-types → dist}/splitChunks.d.ts

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

package/package.json

@@ -1,48 +1,69 @@
 {
   "name": "@rsbuild/plugin-vue2",
-  "version": "1.0.1-beta.9",
-  "description": "Vue 2 plugin of Rsbuild",
-  "homepage": "https://rsbuild.dev",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/web-infra-dev/rsbuild",
-    "directory": "packages/plugin-vue2"
-  },
+  "version": "1.0.2",
+  "repository": "https://github.com/rspack-contrib/rsbuild-plugin-vue2",
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist-types/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
-  "main": "./dist/index.cjs",
-  "types": "./dist-types/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "dist-types"
+    "dist"
   ],
+  "scripts": {
+  	"build": "rslib build",
+		"dev": "rslib build --watch",
+    "lint": "biome check .",
+    "lint:write": "biome check . --write",
+    "prepare": "simple-git-hooks && npm run build",
+    "test": "playwright test",
+    "bump": "npx bumpp"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx nano-staged"
+  },
+  "nano-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "biome check --write --no-errors-on-unmatched"
+    ]
+  },
   "dependencies": {
     "vue-loader": "^15.11.1",
-    "webpack": "^5.93.0"
+    "webpack": "^5.96.1"
   },
   "devDependencies": {
-    "typescript": "^5.5.2",
-    "webpack": "^5.93.0",
-    "@rsbuild/core": "1.0.1-beta.9",
-    "@scripts/test-helper": "1.0.1-beta.9"
+    "@biomejs/biome": "^1.9.4",
+    "@playwright/test": "^1.48.2",
+    "@rsbuild/core": "^1.1.0",
+    "@rsbuild/plugin-less": "1.1.0",
+    "@rslib/core": "^0.0.18",
+    "@types/node": "^20.17.6",
+    "nano-staged": "^0.8.0",
+    "playwright": "^1.48.2",
+    "simple-git-hooks": "^2.11.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
+    "vue": "^2.7.16"
   },
   "peerDependencies": {
-    "@rsbuild/core": "^1.0.1-beta.9"
+    "@rsbuild/core": "1.x"
   },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    }
+  },
+  "packageManager": "pnpm@9.12.3",
   "publishConfig": {
     "access": "public",
-    "provenance": true,
-    "registry": "https://registry.npmjs.org/"
-  },
-  "scripts": {
-    "build": "modern build",
-    "dev": "modern build --watch"
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
   }
-}
+}

package/dist-types/package.json

@@ -1 +0,0 @@
-{"//":"This file is for making TypeScript work with moduleResolution node16+.","version":"1.0.0"}