@rsbuild/plugin-svgr 0.4.13 → 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 +40 -26
  2. package/dist/index.mjs +41 -28
  3. package/package.json +6 -6
package/dist/index.js CHANGED
@@ -60,34 +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
66
  const { dataUriLimit } = config.output;
68
- const maxSize = typeof dataUriLimit === "number" ? dataUriLimit : dataUriLimit[assetType];
67
+ const maxSize = typeof dataUriLimit === "number" ? dataUriLimit : dataUriLimit.svg;
69
68
  chain.module.rules.delete(CHAIN_ID.RULE.SVG);
70
69
  const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(import_shared.SVG_REGEX);
71
- (0, import_shared.chainStaticAssetRule)({
72
- rule,
73
- maxSize,
74
- filename: import_node_path.default.posix.join(distDir, filename),
75
- assetType,
76
- issuer: {
77
- // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
78
- not: [import_shared.SCRIPT_REGEX]
79
- }
80
- });
81
- const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
82
- const svgrRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG).type("javascript/auto");
83
- [CHAIN_ID.USE.SWC, CHAIN_ID.USE.BABEL].some((id) => {
84
- const use = jsRule.uses.get(id);
85
- if (use) {
86
- svgrRule.use(id).loader(use.get("loader")).options(use.get("options"));
87
- return true;
88
- }
89
- return false;
90
- });
91
70
  const svgrOptions = (0, import_shared.deepmerge)(
92
71
  {
93
72
  svgo: true,
@@ -95,13 +74,48 @@ var pluginSvgr = (options = {}) => ({
95
74
  },
96
75
  options.svgrOptions || {}
97
76
  );
98
- svgrRule.use(CHAIN_ID.USE.SVGR).loader(import_node_path.default.resolve(__dirname, "./loader")).options(svgrOptions).end().when(
99
- 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",
100
101
  (c) => c.use(CHAIN_ID.USE.URL).loader(import_node_path.default.join(__dirname, "../compiled", "url-loader")).options({
101
102
  limit: maxSize,
102
103
  name: outputName
103
104
  })
104
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
+ });
105
119
  });
106
120
  }
107
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,34 +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
49
  const { dataUriLimit } = config.output;
52
- const maxSize = typeof dataUriLimit === "number" ? dataUriLimit : dataUriLimit[assetType];
50
+ const maxSize = typeof dataUriLimit === "number" ? dataUriLimit : dataUriLimit.svg;
53
51
  chain.module.rules.delete(CHAIN_ID.RULE.SVG);
54
52
  const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX);
55
- chainStaticAssetRule({
56
- rule,
57
- maxSize,
58
- filename: path2.posix.join(distDir, filename),
59
- assetType,
60
- issuer: {
61
- // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
62
- not: [SCRIPT_REGEX]
63
- }
64
- });
65
- const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
66
- const svgrRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG).type("javascript/auto");
67
- [CHAIN_ID.USE.SWC, CHAIN_ID.USE.BABEL].some((id) => {
68
- const use = jsRule.uses.get(id);
69
- if (use) {
70
- svgrRule.use(id).loader(use.get("loader")).options(use.get("options"));
71
- return true;
72
- }
73
- return false;
74
- });
75
53
  const svgrOptions = deepmerge(
76
54
  {
77
55
  svgo: true,
@@ -79,13 +57,48 @@ var pluginSvgr = (options = {}) => ({
79
57
  },
80
58
  options.svgrOptions || {}
81
59
  );
82
- svgrRule.use(CHAIN_ID.USE.SVGR).loader(path2.resolve(__dirname, "./loader")).options(svgrOptions).end().when(
83
- 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",
84
84
  (c) => c.use(CHAIN_ID.USE.URL).loader(path2.join(__dirname, "../compiled", "url-loader")).options({
85
85
  limit: maxSize,
86
86
  name: outputName
87
87
  })
88
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
+ });
89
102
  });
90
103
  }
91
104
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rsbuild/plugin-svgr",
3
- "version": "0.4.13",
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.13",
30
- "@rsbuild/plugin-react": "0.4.13"
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
34
  "typescript": "^5.4.2",
35
- "@rsbuild/core": "0.4.13",
36
- "@scripts/test-helper": "0.4.13"
35
+ "@rsbuild/core": "0.4.14",
36
+ "@scripts/test-helper": "0.4.14"
37
37
  },
38
38
  "peerDependencies": {
39
- "@rsbuild/core": "^0.4.13"
39
+ "@rsbuild/core": "^0.4.14"
40
40
  },
41
41
  "publishConfig": {
42
42
  "access": "public",