@rsbuild/plugin-vue 1.0.0 → 1.0.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +1 -1
  2. package/dist/index.cjs +138 -0
  3. package/dist/index.d.ts +25 -7
  4. package/dist/index.js +96 -53
  5. package/dist/splitChunks.d.ts +3 -0
  6. package/package.json +13 -12
  7. package/dist/index.mjs +0 -54
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  # Rsbuild
6
6
 
7
- Unleash the power of Rspack with the out-of-the-box build tool.
7
+ The Rspack-based build tool. It's fast, out-of-the-box and extensible.
8
8
 
9
9
  ## Documentation
10
10
 
package/dist/index.cjs ADDED
@@ -0,0 +1,138 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // src/index.ts
31
+ var src_exports = {};
32
+ __export(src_exports, {
33
+ PLUGIN_VUE_NAME: () => PLUGIN_VUE_NAME,
34
+ pluginVue: () => pluginVue
35
+ });
36
+ module.exports = __toCommonJS(src_exports);
37
+ var import_vue_loader = require("vue-loader");
38
+
39
+ // src/splitChunks.ts
40
+ var isPlainObject = (obj) => obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
41
+ var applySplitChunksRule = (api, options = {
42
+ vue: true,
43
+ router: true
44
+ }) => {
45
+ api.modifyBundlerChain((chain, { environment }) => {
46
+ const { config } = environment;
47
+ if (config.performance.chunkSplit.strategy !== "split-by-experience") {
48
+ return;
49
+ }
50
+ const currentConfig = chain.optimization.splitChunks.values();
51
+ if (!isPlainObject(currentConfig)) {
52
+ return;
53
+ }
54
+ const extraGroups = {};
55
+ if (options.vue) {
56
+ extraGroups.vue = {
57
+ name: "lib-vue",
58
+ test: /node_modules[\\/](?:vue|vue-loader|@vue[\\/]shared|@vue[\\/]reactivity|@vue[\\/]runtime-dom|@vue[\\/]runtime-core)[\\/]/,
59
+ priority: 0
60
+ };
61
+ }
62
+ if (options.router) {
63
+ extraGroups.router = {
64
+ name: "lib-router",
65
+ test: /node_modules[\\/]vue-router[\\/]/,
66
+ priority: 0
67
+ };
68
+ }
69
+ if (!Object.keys(extraGroups).length) {
70
+ return;
71
+ }
72
+ chain.optimization.splitChunks({
73
+ ...currentConfig,
74
+ cacheGroups: {
75
+ ...currentConfig.cacheGroups,
76
+ ...extraGroups
77
+ }
78
+ });
79
+ });
80
+ };
81
+
82
+ // src/index.ts
83
+ var PLUGIN_VUE_NAME = "rsbuild:vue";
84
+ function pluginVue(options = {}) {
85
+ return {
86
+ name: PLUGIN_VUE_NAME,
87
+ setup(api) {
88
+ const VUE_REGEXP = /\.vue$/;
89
+ const CSS_MODULES_REGEX = /\.modules?\.\w+$/i;
90
+ api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
91
+ const extraConfig = {
92
+ source: {
93
+ define: {
94
+ // https://link.vuejs.org/feature-flags
95
+ __VUE_OPTIONS_API__: true,
96
+ __VUE_PROD_DEVTOOLS__: false,
97
+ __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
98
+ }
99
+ }
100
+ };
101
+ const merged = mergeRsbuildConfig(extraConfig, config);
102
+ merged.output ||= {};
103
+ merged.output.cssModules ||= {};
104
+ if (merged.output.cssModules.auto === true) {
105
+ merged.output.cssModules.auto = (path, query) => {
106
+ if (VUE_REGEXP.test(path)) {
107
+ return query.includes("type=style") && query.includes("module=true");
108
+ }
109
+ return CSS_MODULES_REGEX.test(path);
110
+ };
111
+ }
112
+ return merged;
113
+ });
114
+ api.modifyBundlerChain(async (chain, { CHAIN_ID }) => {
115
+ chain.resolve.extensions.add(".vue");
116
+ const userLoaderOptions = options.vueLoaderOptions ?? {};
117
+ const compilerOptions = {
118
+ preserveWhitespace: false,
119
+ ...userLoaderOptions.compilerOptions
120
+ };
121
+ const vueLoaderOptions = {
122
+ experimentalInlineMatchResource: true,
123
+ ...userLoaderOptions,
124
+ compilerOptions
125
+ };
126
+ chain.module.rule(CHAIN_ID.RULE.VUE).test(VUE_REGEXP).use(CHAIN_ID.USE.VUE).loader(require.resolve("vue-loader")).options(vueLoaderOptions);
127
+ chain.module.rule(CHAIN_ID.RULE.CSS).test(/\.(?:css|postcss|pcss)$/);
128
+ chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(import_vue_loader.VueLoaderPlugin);
129
+ });
130
+ applySplitChunksRule(api, options.splitChunks);
131
+ }
132
+ };
133
+ }
134
+ // Annotate the CommonJS export names for ESM import in node:
135
+ 0 && (module.exports = {
136
+ PLUGIN_VUE_NAME,
137
+ pluginVue
138
+ });
package/dist/index.d.ts CHANGED
@@ -1,9 +1,27 @@
1
- import { RsbuildPlugin } from '@rsbuild/core';
2
- import { VueLoaderOptions } from 'vue-loader';
3
-
4
- type PluginVueOptions = {
1
+ import type { RsbuildPlugin } from '@rsbuild/core';
2
+ import { type VueLoaderOptions } from 'vue-loader';
3
+ export type SplitVueChunkOptions = {
4
+ /**
5
+ * Whether to enable split chunking for Vue-related dependencies (e.g., vue, vue-loader).
6
+ * @default true
7
+ */
8
+ vue?: boolean;
9
+ /**
10
+ * Whether to enable split chunking for vue-router.
11
+ * @default true
12
+ */
13
+ router?: boolean;
14
+ };
15
+ export type PluginVueOptions = {
16
+ /**
17
+ * Options passed to `vue-loader`.
18
+ * @see https://vue-loader.vuejs.org/
19
+ */
5
20
  vueLoaderOptions?: VueLoaderOptions;
21
+ /**
22
+ * This option is used to control the split chunks behavior.
23
+ */
24
+ splitChunks?: SplitVueChunkOptions;
6
25
  };
7
- declare function pluginVue(options?: PluginVueOptions): RsbuildPlugin;
8
-
9
- export { PluginVueOptions, pluginVue };
26
+ export declare const PLUGIN_VUE_NAME = "rsbuild:vue";
27
+ export declare function pluginVue(options?: PluginVueOptions): RsbuildPlugin;
package/dist/index.js CHANGED
@@ -1,74 +1,117 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
1
+ import { createRequire } from 'module';
2
+ var require = createRequire(import.meta['url']);
3
+
4
+ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
5
+ get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
6
+ }) : x)(function(x) {
7
+ if (typeof require !== "undefined")
8
+ return require.apply(this, arguments);
9
+ throw Error('Dynamic require of "' + x + '" is not supported');
10
+ });
11
+
12
+ // ../../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
13
+ import { fileURLToPath } from "url";
14
+ import path from "path";
15
+
16
+ // src/index.ts
17
+ import { VueLoaderPlugin } from "vue-loader";
18
+
19
+ // src/splitChunks.ts
20
+ var isPlainObject = (obj) => obj !== null && typeof obj === "object" && Object.prototype.toString.call(obj) === "[object Object]";
21
+ var applySplitChunksRule = (api, options = {
22
+ vue: true,
23
+ router: true
24
+ }) => {
25
+ api.modifyBundlerChain((chain, { environment }) => {
26
+ const { config } = environment;
27
+ if (config.performance.chunkSplit.strategy !== "split-by-experience") {
28
+ return;
29
+ }
30
+ const currentConfig = chain.optimization.splitChunks.values();
31
+ if (!isPlainObject(currentConfig)) {
32
+ return;
33
+ }
34
+ const extraGroups = {};
35
+ if (options.vue) {
36
+ extraGroups.vue = {
37
+ name: "lib-vue",
38
+ test: /node_modules[\\/](?:vue|vue-loader|@vue[\\/]shared|@vue[\\/]reactivity|@vue[\\/]runtime-dom|@vue[\\/]runtime-core)[\\/]/,
39
+ priority: 0
40
+ };
41
+ }
42
+ if (options.router) {
43
+ extraGroups.router = {
44
+ name: "lib-router",
45
+ test: /node_modules[\\/]vue-router[\\/]/,
46
+ priority: 0
47
+ };
48
+ }
49
+ if (!Object.keys(extraGroups).length) {
50
+ return;
51
+ }
52
+ chain.optimization.splitChunks({
53
+ ...currentConfig,
54
+ cacheGroups: {
55
+ ...currentConfig.cacheGroups,
56
+ ...extraGroups
57
+ }
58
+ });
59
+ });
19
60
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
61
 
30
62
  // src/index.ts
31
- var src_exports = {};
32
- __export(src_exports, {
33
- pluginVue: () => pluginVue
34
- });
35
- module.exports = __toCommonJS(src_exports);
36
- var import_shared = require("@rsbuild/shared");
37
- var import_vue_loader = require("vue-loader");
63
+ var PLUGIN_VUE_NAME = "rsbuild:vue";
38
64
  function pluginVue(options = {}) {
39
65
  return {
40
- name: "rsbuild:vue",
66
+ name: PLUGIN_VUE_NAME,
41
67
  setup(api) {
68
+ const VUE_REGEXP = /\.vue$/;
69
+ const CSS_MODULES_REGEX = /\.modules?\.\w+$/i;
42
70
  api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
43
- return mergeRsbuildConfig(config, {
71
+ const extraConfig = {
44
72
  source: {
45
73
  define: {
46
74
  // https://link.vuejs.org/feature-flags
47
75
  __VUE_OPTIONS_API__: true,
48
- __VUE_PROD_DEVTOOLS__: false
76
+ __VUE_PROD_DEVTOOLS__: false,
77
+ __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
49
78
  }
50
79
  }
51
- });
80
+ };
81
+ const merged = mergeRsbuildConfig(extraConfig, config);
82
+ merged.output ||= {};
83
+ merged.output.cssModules ||= {};
84
+ if (merged.output.cssModules.auto === true) {
85
+ merged.output.cssModules.auto = (path2, query) => {
86
+ if (VUE_REGEXP.test(path2)) {
87
+ return query.includes("type=style") && query.includes("module=true");
88
+ }
89
+ return CSS_MODULES_REGEX.test(path2);
90
+ };
91
+ }
92
+ return merged;
52
93
  });
53
94
  api.modifyBundlerChain(async (chain, { CHAIN_ID }) => {
54
- var _a;
55
95
  chain.resolve.extensions.add(".vue");
56
- const vueLoaderOptions = (0, import_shared.deepmerge)(
57
- {
58
- compilerOptions: {
59
- preserveWhitespace: false
60
- },
61
- experimentalInlineMatchResource: true
62
- },
63
- (_a = options.vueLoaderOptions) != null ? _a : {}
64
- );
65
- chain.module.rule(CHAIN_ID.RULE.VUE).test(/\.vue$/).use(CHAIN_ID.USE.VUE).loader(require.resolve("vue-loader")).options(vueLoaderOptions);
66
- chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(import_vue_loader.VueLoaderPlugin);
96
+ const userLoaderOptions = options.vueLoaderOptions ?? {};
97
+ const compilerOptions = {
98
+ preserveWhitespace: false,
99
+ ...userLoaderOptions.compilerOptions
100
+ };
101
+ const vueLoaderOptions = {
102
+ experimentalInlineMatchResource: true,
103
+ ...userLoaderOptions,
104
+ compilerOptions
105
+ };
106
+ chain.module.rule(CHAIN_ID.RULE.VUE).test(VUE_REGEXP).use(CHAIN_ID.USE.VUE).loader(__require.resolve("vue-loader")).options(vueLoaderOptions);
107
+ chain.module.rule(CHAIN_ID.RULE.CSS).test(/\.(?:css|postcss|pcss)$/);
108
+ chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(VueLoaderPlugin);
67
109
  });
110
+ applySplitChunksRule(api, options.splitChunks);
68
111
  }
69
112
  };
70
113
  }
71
- // Annotate the CommonJS export names for ESM import in node:
72
- 0 && (module.exports = {
114
+ export {
115
+ PLUGIN_VUE_NAME,
73
116
  pluginVue
74
- });
117
+ };
package/dist/splitChunks.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { RsbuildPluginAPI } from '@rsbuild/core';
2
+ import type { SplitVueChunkOptions } from '.';
3
+ export declare const applySplitChunksRule: (api: RsbuildPluginAPI, options?: SplitVueChunkOptions) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-vue",
3
- "version": "1.0.0",
3
+ "version": "1.0.1-beta.0",
4
4
  "description": "Vue 3 plugin of Rsbuild",
5
5
  "homepage": "https://rsbuild.dev",
6
6
  "repository": {
@@ -9,31 +9,32 @@
9
9
  "directory": "packages/plugin-vue"
10
10
  },
11
11
  "license": "MIT",
12
+ "type": "module",
12
13
  "exports": {
13
14
  ".": {
14
15
  "types": "./dist/index.d.ts",
15
- "import": "./dist/index.mjs",
16
- "default": "./dist/index.js"
16
+ "import": "./dist/index.js",
17
+ "require": "./dist/index.cjs"
17
18
  }
18
19
  },
19
- "main": "./dist/index.js",
20
+ "main": "./dist/index.cjs",
20
21
  "types": "./dist/index.d.ts",
21
22
  "files": [
22
23
  "dist"
23
24
  ],
24
25
  "dependencies": {
25
- "vue-loader": "^17.2.2",
26
- "webpack": "^5.89.0",
27
- "@rsbuild/shared": "1.0.0"
26
+ "vue-loader": "^17.4.0",
27
+ "webpack": "^5.93.0"
28
28
  },
29
29
  "devDependencies": {
30
- "typescript": "^5.3.0",
31
- "webpack": "^5.89.0",
32
- "@rsbuild/test-helper": "1.0.0",
33
- "@rsbuild/core": "1.0.0"
30
+ "typescript": "^5.5.2",
31
+ "vue": "^3.4.19",
32
+ "webpack": "^5.93.0",
33
+ "@rsbuild/core": "1.0.1-beta.0",
34
+ "@scripts/test-helper": "1.0.1-beta.0"
34
35
  },
35
36
  "peerDependencies": {
36
- "@rsbuild/core": "^1.0.0"
37
+ "@rsbuild/core": "^1.0.1-beta.0"
37
38
  },
38
39
  "publishConfig": {
39
40
  "access": "public",
package/dist/index.mjs DELETED
@@ -1,54 +0,0 @@
1
- var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
2
- get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
3
- }) : x)(function(x) {
4
- if (typeof require !== "undefined")
5
- return require.apply(this, arguments);
6
- throw Error('Dynamic require of "' + x + '" is not supported');
7
- });
8
-
9
- // ../../node_modules/.pnpm/@modern-js+module-tools@2.40.0_typescript@5.3.2/node_modules/@modern-js/module-tools/shims/esm.js
10
- import { fileURLToPath } from "url";
11
- import path from "path";
12
-
13
- // ../../scripts/require_shims.js
14
- import { createRequire } from "module";
15
- global.require = createRequire(import.meta.url);
16
-
17
- // src/index.ts
18
- import { deepmerge } from "@rsbuild/shared";
19
- import { VueLoaderPlugin } from "vue-loader";
20
- function pluginVue(options = {}) {
21
- return {
22
- name: "rsbuild:vue",
23
- setup(api) {
24
- api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
25
- return mergeRsbuildConfig(config, {
26
- source: {
27
- define: {
28
- // https://link.vuejs.org/feature-flags
29
- __VUE_OPTIONS_API__: true,
30
- __VUE_PROD_DEVTOOLS__: false
31
- }
32
- }
33
- });
34
- });
35
- api.modifyBundlerChain(async (chain, { CHAIN_ID }) => {
36
- chain.resolve.extensions.add(".vue");
37
- const vueLoaderOptions = deepmerge(
38
- {
39
- compilerOptions: {
40
- preserveWhitespace: false
41
- },
42
- experimentalInlineMatchResource: true
43
- },
44
- options.vueLoaderOptions ?? {}
45
- );
46
- chain.module.rule(CHAIN_ID.RULE.VUE).test(/\.vue$/).use(CHAIN_ID.USE.VUE).loader(__require.resolve("vue-loader")).options(vueLoaderOptions);
47
- chain.plugin(CHAIN_ID.PLUGIN.VUE_LOADER_PLUGIN).use(VueLoaderPlugin);
48
- });
49
- }
50
- };
51
- }
52
- export {
53
- pluginVue
54
- };