@rsbuild/plugin-svgr 0.4.12 → 0.4.14

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 (3) hide show
  1. package/dist/index.js +42 -27
  2. package/dist/index.mjs +43 -29
  3. package/package.json +7 -7
package/dist/index.js CHANGED
@@ -60,33 +60,13 @@ var pluginSvgr = (options = {}) => ({
60
60
  api.modifyBundlerChain(async (chain, { isProd, CHAIN_ID }) => {
61
61
  const config = api.getNormalizedConfig();
62
62
  const { svgDefaultExport = "url" } = options;
63
- const assetType = "svg";
64
- const distDir = (0, import_shared.getDistPath)(config, assetType);
65
- const filename = (0, import_shared.getFilename)(config, assetType, isProd);
63
+ const distDir = (0, import_shared.getDistPath)(config, "svg");
64
+ const filename = (0, import_shared.getFilename)(config, "svg", isProd);
66
65
  const outputName = import_node_path.default.posix.join(distDir, filename);
67
- const maxSize = config.output.dataUriLimit[assetType];
66
+ const { dataUriLimit } = config.output;
67
+ const maxSize = typeof dataUriLimit === "number" ? dataUriLimit : dataUriLimit.svg;
68
68
  chain.module.rules.delete(CHAIN_ID.RULE.SVG);
69
69
  const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(import_shared.SVG_REGEX);
70
- (0, import_shared.chainStaticAssetRule)({
71
- rule,
72
- maxSize,
73
- filename: import_node_path.default.posix.join(distDir, filename),
74
- assetType,
75
- issuer: {
76
- // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
77
- not: [import_shared.SCRIPT_REGEX]
78
- }
79
- });
80
- const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
81
- const svgrRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG).type("javascript/auto");
82
- [CHAIN_ID.USE.SWC, CHAIN_ID.USE.BABEL].some((id) => {
83
- const use = jsRule.uses.get(id);
84
- if (use) {
85
- svgrRule.use(id).loader(use.get("loader")).options(use.get("options"));
86
- return true;
87
- }
88
- return false;
89
- });
90
70
  const svgrOptions = (0, import_shared.deepmerge)(
91
71
  {
92
72
  svgo: true,
@@ -94,13 +74,48 @@ var pluginSvgr = (options = {}) => ({
94
74
  },
95
75
  options.svgrOptions || {}
96
76
  );
97
- svgrRule.use(CHAIN_ID.USE.SVGR).loader(import_node_path.default.resolve(__dirname, "./loader")).options(svgrOptions).end().when(
98
- svgDefaultExport === "url",
77
+ rule.oneOf(CHAIN_ID.ONE_OF.SVG_URL).type("asset/resource").resourceQuery(/(__inline=false|url)/).set("generator", {
78
+ filename: outputName
79
+ });
80
+ rule.oneOf(CHAIN_ID.ONE_OF.SVG_INLINE).type("asset/inline").resourceQuery(/inline/);
81
+ rule.oneOf(CHAIN_ID.ONE_OF.SVG_REACT).type("javascript/auto").resourceQuery(/react/).use(CHAIN_ID.USE.SVGR).loader(import_node_path.default.resolve(__dirname, "./loader")).options({
82
+ ...svgrOptions,
83
+ exportType: "default"
84
+ }).end();
85
+ rule.oneOf(CHAIN_ID.ONE_OF.SVG_ASSET).type("asset").parser({
86
+ dataUrlCondition: {
87
+ maxSize
88
+ }
89
+ }).set("generator", {
90
+ filename: outputName
91
+ }).set("issuer", {
92
+ // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
93
+ not: [import_shared.SCRIPT_REGEX]
94
+ });
95
+ const exportType = svgDefaultExport === "url" ? "named" : "default";
96
+ rule.oneOf(CHAIN_ID.ONE_OF.SVG).type("javascript/auto").use(CHAIN_ID.USE.SVGR).loader(import_node_path.default.resolve(__dirname, "./loader")).options({
97
+ ...svgrOptions,
98
+ exportType
99
+ }).end().when(
100
+ exportType === "named",
99
101
  (c) => c.use(CHAIN_ID.USE.URL).loader(import_node_path.default.join(__dirname, "../compiled", "url-loader")).options({
100
- limit: config.output.dataUriLimit.svg,
102
+ limit: maxSize,
101
103
  name: outputName
102
104
  })
103
105
  );
106
+ const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
107
+ [CHAIN_ID.USE.SWC, CHAIN_ID.USE.BABEL].some((jsUseId) => {
108
+ const use = jsRule.uses.get(jsUseId);
109
+ if (use) {
110
+ [CHAIN_ID.ONE_OF.SVG, CHAIN_ID.ONE_OF.SVG_REACT].forEach(
111
+ (oneOfId) => {
112
+ rule.oneOf(oneOfId).use(jsUseId).before(CHAIN_ID.USE.SVGR).loader(use.get("loader")).options(use.get("options"));
113
+ }
114
+ );
115
+ return true;
116
+ }
117
+ return false;
118
+ });
104
119
  });
105
120
  }
106
121
  });
package/dist/index.mjs CHANGED
@@ -16,8 +16,7 @@ import {
16
16
  deepmerge,
17
17
  getDistPath,
18
18
  getFilename as getFilename2,
19
- SCRIPT_REGEX,
20
- chainStaticAssetRule
19
+ SCRIPT_REGEX
21
20
  } from "@rsbuild/shared";
22
21
  import { PLUGIN_REACT_NAME } from "@rsbuild/plugin-react";
23
22
  function getSvgoDefaultConfig() {
@@ -44,33 +43,13 @@ var pluginSvgr = (options = {}) => ({
44
43
  api.modifyBundlerChain(async (chain, { isProd, CHAIN_ID }) => {
45
44
  const config = api.getNormalizedConfig();
46
45
  const { svgDefaultExport = "url" } = options;
47
- const assetType = "svg";
48
- const distDir = getDistPath(config, assetType);
49
- const filename = getFilename2(config, assetType, isProd);
46
+ const distDir = getDistPath(config, "svg");
47
+ const filename = getFilename2(config, "svg", isProd);
50
48
  const outputName = path2.posix.join(distDir, filename);
51
- const maxSize = config.output.dataUriLimit[assetType];
49
+ const { dataUriLimit } = config.output;
50
+ const maxSize = typeof dataUriLimit === "number" ? dataUriLimit : dataUriLimit.svg;
52
51
  chain.module.rules.delete(CHAIN_ID.RULE.SVG);
53
52
  const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX);
54
- chainStaticAssetRule({
55
- rule,
56
- maxSize,
57
- filename: path2.posix.join(distDir, filename),
58
- assetType,
59
- issuer: {
60
- // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
61
- not: [SCRIPT_REGEX]
62
- }
63
- });
64
- const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
65
- const svgrRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG).type("javascript/auto");
66
- [CHAIN_ID.USE.SWC, CHAIN_ID.USE.BABEL].some((id) => {
67
- const use = jsRule.uses.get(id);
68
- if (use) {
69
- svgrRule.use(id).loader(use.get("loader")).options(use.get("options"));
70
- return true;
71
- }
72
- return false;
73
- });
74
53
  const svgrOptions = deepmerge(
75
54
  {
76
55
  svgo: true,
@@ -78,13 +57,48 @@ var pluginSvgr = (options = {}) => ({
78
57
  },
79
58
  options.svgrOptions || {}
80
59
  );
81
- svgrRule.use(CHAIN_ID.USE.SVGR).loader(path2.resolve(__dirname, "./loader")).options(svgrOptions).end().when(
82
- svgDefaultExport === "url",
60
+ rule.oneOf(CHAIN_ID.ONE_OF.SVG_URL).type("asset/resource").resourceQuery(/(__inline=false|url)/).set("generator", {
61
+ filename: outputName
62
+ });
63
+ rule.oneOf(CHAIN_ID.ONE_OF.SVG_INLINE).type("asset/inline").resourceQuery(/inline/);
64
+ rule.oneOf(CHAIN_ID.ONE_OF.SVG_REACT).type("javascript/auto").resourceQuery(/react/).use(CHAIN_ID.USE.SVGR).loader(path2.resolve(__dirname, "./loader")).options({
65
+ ...svgrOptions,
66
+ exportType: "default"
67
+ }).end();
68
+ rule.oneOf(CHAIN_ID.ONE_OF.SVG_ASSET).type("asset").parser({
69
+ dataUrlCondition: {
70
+ maxSize
71
+ }
72
+ }).set("generator", {
73
+ filename: outputName
74
+ }).set("issuer", {
75
+ // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
76
+ not: [SCRIPT_REGEX]
77
+ });
78
+ const exportType = svgDefaultExport === "url" ? "named" : "default";
79
+ rule.oneOf(CHAIN_ID.ONE_OF.SVG).type("javascript/auto").use(CHAIN_ID.USE.SVGR).loader(path2.resolve(__dirname, "./loader")).options({
80
+ ...svgrOptions,
81
+ exportType
82
+ }).end().when(
83
+ exportType === "named",
83
84
  (c) => c.use(CHAIN_ID.USE.URL).loader(path2.join(__dirname, "../compiled", "url-loader")).options({
84
- limit: config.output.dataUriLimit.svg,
85
+ limit: maxSize,
85
86
  name: outputName
86
87
  })
87
88
  );
89
+ const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
90
+ [CHAIN_ID.USE.SWC, CHAIN_ID.USE.BABEL].some((jsUseId) => {
91
+ const use = jsRule.uses.get(jsUseId);
92
+ if (use) {
93
+ [CHAIN_ID.ONE_OF.SVG, CHAIN_ID.ONE_OF.SVG_REACT].forEach(
94
+ (oneOfId) => {
95
+ rule.oneOf(oneOfId).use(jsUseId).before(CHAIN_ID.USE.SVGR).loader(use.get("loader")).options(use.get("options"));
96
+ }
97
+ );
98
+ return true;
99
+ }
100
+ return false;
101
+ });
88
102
  });
89
103
  }
90
104
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-svgr",
3
- "version": "0.4.12",
3
+ "version": "0.4.14",
4
4
  "description": "svgr plugin for Rsbuild",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,17 +26,17 @@
26
26
  "@svgr/core": "8.1.0",
27
27
  "@svgr/plugin-jsx": "8.1.0",
28
28
  "@svgr/plugin-svgo": "8.1.0",
29
- "@rsbuild/shared": "0.4.12",
30
- "@rsbuild/plugin-react": "0.4.12"
29
+ "@rsbuild/shared": "0.4.14",
30
+ "@rsbuild/plugin-react": "0.4.14"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@types/node": "16.x",
34
- "typescript": "^5.3.0",
35
- "@rsbuild/core": "0.4.12",
36
- "@scripts/test-helper": "0.4.12"
34
+ "typescript": "^5.4.2",
35
+ "@rsbuild/core": "0.4.14",
36
+ "@scripts/test-helper": "0.4.14"
37
37
  },
38
38
  "peerDependencies": {
39
- "@rsbuild/core": "^0.4.12"
39
+ "@rsbuild/core": "^0.4.14"
40
40
  },
41
41
  "publishConfig": {
42
42
  "access": "public",