@rsbuild/plugin-svgr 1.0.4 → 1.0.6
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.
- package/compiled/file-loader/index.js +8 -8
- package/compiled/url-loader/index.js +8 -8
- package/dist/index.cjs +62 -148
- package/dist/index.js +29 -94
- package/dist/loader.mjs +49 -0
- package/package.json +8 -7
- package/dist/loader.cjs +0 -108
package/dist/index.cjs
CHANGED
|
@@ -1,216 +1,130 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
2
|
+
let __rslib_import_meta_url__ = 'undefined' == typeof document ? new (require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
|
|
3
3
|
var __webpack_require__ = {};
|
|
4
|
-
|
|
5
|
-
(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
return module['default'];
|
|
10
|
-
} : function() {
|
|
11
|
-
return module;
|
|
12
|
-
};
|
|
13
|
-
__webpack_require__.d(getter, {
|
|
14
|
-
a: getter
|
|
15
|
-
});
|
|
16
|
-
return getter;
|
|
4
|
+
__webpack_require__.n = function(module) {
|
|
5
|
+
var getter = module && module.__esModule ? function() {
|
|
6
|
+
return module.default;
|
|
7
|
+
} : function() {
|
|
8
|
+
return module;
|
|
17
9
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
})
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
value: 'Module'
|
|
40
|
-
});
|
|
41
|
-
Object.defineProperty(exports1, '__esModule', {
|
|
42
|
-
value: true
|
|
43
|
-
});
|
|
44
|
-
};
|
|
45
|
-
})();
|
|
46
|
-
/************************************************************************/ var __webpack_exports__ = {};
|
|
47
|
-
// ESM COMPAT FLAG
|
|
48
|
-
__webpack_require__.r(__webpack_exports__);
|
|
49
|
-
// EXPORTS
|
|
50
|
-
__webpack_require__.d(__webpack_exports__, {
|
|
51
|
-
PLUGIN_SVGR_NAME: ()=>/* binding */ PLUGIN_SVGR_NAME,
|
|
52
|
-
pluginSvgr: ()=>/* binding */ pluginSvgr
|
|
10
|
+
return __webpack_require__.d(getter, {
|
|
11
|
+
a: getter
|
|
12
|
+
}), getter;
|
|
13
|
+
}, __webpack_require__.d = function(exports1, definition) {
|
|
14
|
+
for(var key in definition)__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key) && Object.defineProperty(exports1, key, {
|
|
15
|
+
enumerable: !0,
|
|
16
|
+
get: definition[key]
|
|
17
|
+
});
|
|
18
|
+
}, __webpack_require__.o = function(obj, prop) {
|
|
19
|
+
return Object.prototype.hasOwnProperty.call(obj, prop);
|
|
20
|
+
}, __webpack_require__.r = function(exports1) {
|
|
21
|
+
'undefined' != typeof Symbol && Symbol.toStringTag && Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
22
|
+
value: 'Module'
|
|
23
|
+
}), Object.defineProperty(exports1, '__esModule', {
|
|
24
|
+
value: !0
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
var __webpack_exports__ = {};
|
|
28
|
+
__webpack_require__.r(__webpack_exports__), __webpack_require__.d(__webpack_exports__, {
|
|
29
|
+
PLUGIN_SVGR_NAME: ()=>PLUGIN_SVGR_NAME,
|
|
30
|
+
pluginSvgr: ()=>pluginSvgr
|
|
53
31
|
});
|
|
54
|
-
|
|
55
|
-
var external_node_path_default =
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
const SVG_REGEX = /\.svg$/;
|
|
60
|
-
const getSvgoDefaultConfig = ()=>({
|
|
32
|
+
let external_node_path_namespaceObject = require("node:path");
|
|
33
|
+
var external_node_path_default = __webpack_require__.n(external_node_path_namespaceObject);
|
|
34
|
+
let external_node_url_namespaceObject = require("node:url"), plugin_react_namespaceObject = require("@rsbuild/plugin-react"), external_deepmerge_namespaceObject = require("deepmerge");
|
|
35
|
+
var external_deepmerge_default = __webpack_require__.n(external_deepmerge_namespaceObject);
|
|
36
|
+
let src_dirname = external_node_path_default().dirname((0, external_node_url_namespaceObject.fileURLToPath)(__rslib_import_meta_url__)), SVG_REGEX = /\.svg$/, getSvgoDefaultConfig = ()=>({
|
|
61
37
|
plugins: [
|
|
62
38
|
{
|
|
63
39
|
name: 'preset-default',
|
|
64
40
|
params: {
|
|
65
41
|
overrides: {
|
|
66
|
-
|
|
67
|
-
// @see https://github.com/svg/svgo/issues/1128
|
|
68
|
-
removeViewBox: false
|
|
42
|
+
removeViewBox: !1
|
|
69
43
|
}
|
|
70
44
|
}
|
|
71
45
|
},
|
|
72
46
|
'prefixIds'
|
|
73
47
|
]
|
|
74
|
-
})
|
|
75
|
-
/**
|
|
76
|
-
* Dedupe SVGO plugins config.
|
|
77
|
-
*
|
|
78
|
-
* @example
|
|
79
|
-
* Input:
|
|
80
|
-
* {
|
|
81
|
-
* plugins: [
|
|
82
|
-
* { name: 'preset-default', params: { foo: true }],
|
|
83
|
-
* { name: 'preset-default', params: { bar: true }],
|
|
84
|
-
* ]
|
|
85
|
-
* }
|
|
86
|
-
* Output:
|
|
87
|
-
* {
|
|
88
|
-
* plugins: [
|
|
89
|
-
* { name: 'preset-default', params: { foo: true, bar: true }],
|
|
90
|
-
* ]
|
|
91
|
-
* }
|
|
92
|
-
*/ const dedupeSvgoPlugins = (config)=>{
|
|
48
|
+
}), dedupeSvgoPlugins = (config)=>{
|
|
93
49
|
if (!config.plugins) return config;
|
|
94
50
|
let mergedPlugins = [];
|
|
95
|
-
for (
|
|
51
|
+
for (let plugin of config.plugins){
|
|
96
52
|
if ('string' == typeof plugin) {
|
|
97
|
-
|
|
98
|
-
if (!exist) mergedPlugins.push(plugin);
|
|
53
|
+
!mergedPlugins.find((item)=>item === plugin || 'object' == typeof item && item.name === plugin) && mergedPlugins.push(plugin);
|
|
99
54
|
continue;
|
|
100
55
|
}
|
|
101
|
-
|
|
56
|
+
let strIndex = mergedPlugins.findIndex((item)=>'string' == typeof item && item === plugin.name);
|
|
102
57
|
if (-1 !== strIndex) {
|
|
103
58
|
mergedPlugins[strIndex] = plugin;
|
|
104
59
|
continue;
|
|
105
60
|
}
|
|
106
|
-
let isMerged =
|
|
107
|
-
mergedPlugins = mergedPlugins.map((item)=>
|
|
108
|
-
if ('object' == typeof item && item.name === plugin.name) {
|
|
109
|
-
isMerged = true;
|
|
110
|
-
return external_deepmerge_default()(item, plugin);
|
|
111
|
-
}
|
|
112
|
-
return item;
|
|
113
|
-
});
|
|
114
|
-
if (!isMerged) mergedPlugins.push(plugin);
|
|
61
|
+
let isMerged = !1;
|
|
62
|
+
mergedPlugins = mergedPlugins.map((item)=>'object' == typeof item && item.name === plugin.name ? (isMerged = !0, external_deepmerge_default()(item, plugin)) : item), !isMerged && mergedPlugins.push(plugin);
|
|
115
63
|
}
|
|
116
|
-
config.plugins = mergedPlugins;
|
|
117
|
-
|
|
118
|
-
};
|
|
119
|
-
const PLUGIN_SVGR_NAME = 'rsbuild:svgr';
|
|
120
|
-
const pluginSvgr = function() {
|
|
121
|
-
let options = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
|
|
122
|
-
return {
|
|
64
|
+
return config.plugins = mergedPlugins, config;
|
|
65
|
+
}, PLUGIN_SVGR_NAME = 'rsbuild:svgr', pluginSvgr = (options = {})=>({
|
|
123
66
|
name: PLUGIN_SVGR_NAME,
|
|
124
67
|
pre: [
|
|
125
68
|
plugin_react_namespaceObject.PLUGIN_REACT_NAME
|
|
126
69
|
],
|
|
127
70
|
setup (api) {
|
|
128
|
-
api.modifyBundlerChain(async (chain,
|
|
129
|
-
let {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
let generatorOptions = {};
|
|
134
|
-
if (chain.module.rules.has(CHAIN_ID.RULE.SVG)) {
|
|
135
|
-
generatorOptions = chain.module.rules.get(CHAIN_ID.RULE.SVG).oneOfs.get(CHAIN_ID.ONE_OF.SVG_URL).get('generator');
|
|
136
|
-
// delete Rsbuild builtin SVG rules
|
|
137
|
-
chain.module.rules.delete(CHAIN_ID.RULE.SVG);
|
|
138
|
-
}
|
|
139
|
-
const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX);
|
|
140
|
-
const svgrOptions = external_deepmerge_default()({
|
|
141
|
-
svgo: true,
|
|
71
|
+
api.modifyBundlerChain(async (chain, { CHAIN_ID, environment })=>{
|
|
72
|
+
let { config } = environment, { dataUriLimit } = config.output, maxSize = 'number' == typeof dataUriLimit ? dataUriLimit : dataUriLimit.svg, generatorOptions = {};
|
|
73
|
+
chain.module.rules.has(CHAIN_ID.RULE.SVG) && (generatorOptions = chain.module.rules.get(CHAIN_ID.RULE.SVG).oneOfs.get(CHAIN_ID.ONE_OF.SVG_URL).get('generator'), chain.module.rules.delete(CHAIN_ID.RULE.SVG));
|
|
74
|
+
let rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX), svgrOptions = external_deepmerge_default()({
|
|
75
|
+
svgo: !0,
|
|
142
76
|
svgoConfig: getSvgoDefaultConfig()
|
|
143
77
|
}, options.svgrOptions || {});
|
|
144
|
-
svgrOptions.svgoConfig = dedupeSvgoPlugins(svgrOptions.svgoConfig)
|
|
145
|
-
// force to url: "foo.svg?url",
|
|
146
|
-
rule.oneOf(CHAIN_ID.ONE_OF.SVG_URL).type('asset/resource').resourceQuery(/(__inline=false|url)/).set('generator', generatorOptions);
|
|
147
|
-
// force to inline: "foo.svg?inline"
|
|
148
|
-
rule.oneOf(CHAIN_ID.ONE_OF.SVG_INLINE).type('asset/inline').resourceQuery(/inline/);
|
|
149
|
-
// force to react component: "foo.svg?react"
|
|
150
|
-
rule.oneOf(CHAIN_ID.ONE_OF.SVG_REACT).type('javascript/auto').resourceQuery(options.query || /react/).use(CHAIN_ID.USE.SVGR).loader(external_node_path_default().resolve(__dirname, './loader.cjs')).options({
|
|
78
|
+
svgrOptions.svgoConfig = dedupeSvgoPlugins(svgrOptions.svgoConfig), rule.oneOf(CHAIN_ID.ONE_OF.SVG_URL).type('asset/resource').resourceQuery(/(__inline=false|url)/).set('generator', generatorOptions), rule.oneOf(CHAIN_ID.ONE_OF.SVG_INLINE).type('asset/inline').resourceQuery(/inline/), rule.oneOf(CHAIN_ID.ONE_OF.SVG_REACT).type('javascript/auto').resourceQuery(options.query || /react/).use(CHAIN_ID.USE.SVGR).loader(external_node_path_default().resolve(src_dirname, './loader.mjs')).options({
|
|
151
79
|
...svgrOptions,
|
|
152
80
|
exportType: 'default'
|
|
153
81
|
}).end();
|
|
154
|
-
|
|
155
|
-
const { mixedImport = false } = options;
|
|
82
|
+
let { mixedImport = !1 } = options;
|
|
156
83
|
if (mixedImport || svgrOptions.exportType) {
|
|
157
|
-
|
|
158
|
-
const issuerInclude = [
|
|
84
|
+
let { exportType = mixedImport ? 'named' : void 0 } = svgrOptions, issuerInclude = [
|
|
159
85
|
/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
|
|
160
86
|
/\.mdx$/
|
|
161
|
-
]
|
|
162
|
-
const issuer = options.excludeImporter ? {
|
|
87
|
+
], issuer = options.excludeImporter ? {
|
|
163
88
|
and: [
|
|
164
89
|
issuerInclude,
|
|
165
90
|
{
|
|
166
91
|
not: options.excludeImporter
|
|
167
92
|
}
|
|
168
93
|
]
|
|
169
|
-
} : issuerInclude;
|
|
170
|
-
|
|
171
|
-
if (options.exclude) svgRule.exclude.add(options.exclude);
|
|
172
|
-
svgRule.type('javascript/auto') // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
|
|
173
|
-
.set('issuer', issuer).use(CHAIN_ID.USE.SVGR).loader(external_node_path_default().resolve(__dirname, './loader.cjs')).options({
|
|
94
|
+
} : issuerInclude, svgRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG);
|
|
95
|
+
options.exclude && svgRule.exclude.add(options.exclude), svgRule.type('javascript/auto').set('issuer', issuer).use(CHAIN_ID.USE.SVGR).loader(external_node_path_default().resolve(src_dirname, './loader.mjs')).options({
|
|
174
96
|
...svgrOptions,
|
|
175
97
|
exportType
|
|
176
|
-
}).end()
|
|
177
|
-
/**
|
|
178
|
-
* For mixed import.
|
|
179
|
-
* @example import logoUrl, { ReactComponent } from './logo.svg';`
|
|
180
|
-
*/ if (mixedImport && 'named' === exportType) svgRule.use(CHAIN_ID.USE.URL).loader(external_node_path_default().join(__dirname, '../compiled', 'url-loader/index.js')).options({
|
|
98
|
+
}).end(), mixedImport && 'named' === exportType && svgRule.use(CHAIN_ID.USE.URL).loader(external_node_path_default().join(src_dirname, '../compiled', 'url-loader/index.js')).options({
|
|
181
99
|
limit: maxSize,
|
|
182
100
|
name: null == generatorOptions ? void 0 : generatorOptions.filename
|
|
183
101
|
});
|
|
184
102
|
}
|
|
185
|
-
// SVG as assets
|
|
186
103
|
rule.oneOf(CHAIN_ID.ONE_OF.SVG_ASSET).type('asset').parser({
|
|
187
|
-
// Inline SVG if size < maxSize
|
|
188
104
|
dataUrlCondition: {
|
|
189
105
|
maxSize
|
|
190
106
|
}
|
|
191
107
|
}).set('generator', generatorOptions);
|
|
192
|
-
|
|
193
|
-
const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
|
|
108
|
+
let jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
|
|
194
109
|
[
|
|
195
110
|
CHAIN_ID.USE.SWC,
|
|
196
111
|
CHAIN_ID.USE.BABEL
|
|
197
112
|
].some((jsUseId)=>{
|
|
198
|
-
|
|
199
|
-
if (!use) return
|
|
200
|
-
for (
|
|
113
|
+
let use = jsRule.uses.get(jsUseId);
|
|
114
|
+
if (!use) return !1;
|
|
115
|
+
for (let oneOfId of [
|
|
201
116
|
CHAIN_ID.ONE_OF.SVG,
|
|
202
117
|
CHAIN_ID.ONE_OF.SVG_REACT
|
|
203
118
|
]){
|
|
204
119
|
if (!!rule.oneOfs.has(oneOfId)) rule.oneOf(oneOfId).use(jsUseId).before(CHAIN_ID.USE.SVGR).loader(use.get('loader')).options(use.get('options'));
|
|
205
120
|
}
|
|
206
|
-
return
|
|
121
|
+
return !0;
|
|
207
122
|
});
|
|
208
123
|
});
|
|
209
124
|
}
|
|
210
|
-
};
|
|
211
|
-
};
|
|
125
|
+
});
|
|
212
126
|
var __webpack_export_target__ = exports;
|
|
213
|
-
for(var
|
|
214
|
-
|
|
215
|
-
value:
|
|
127
|
+
for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
|
|
128
|
+
__webpack_exports__.__esModule && Object.defineProperty(__webpack_export_target__, '__esModule', {
|
|
129
|
+
value: !0
|
|
216
130
|
});
|
package/dist/index.js
CHANGED
|
@@ -1,160 +1,95 @@
|
|
|
1
|
-
import { fileURLToPath as __webpack_fileURLToPath__ } from "url";
|
|
2
|
-
import { dirname as __webpack_dirname__ } from "path";
|
|
3
1
|
import * as __WEBPACK_EXTERNAL_MODULE_node_path__ from "node:path";
|
|
2
|
+
import * as __WEBPACK_EXTERNAL_MODULE_node_url__ from "node:url";
|
|
4
3
|
import * as __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_react__ from "@rsbuild/plugin-react";
|
|
5
4
|
import * as __WEBPACK_EXTERNAL_MODULE_deepmerge__ from "deepmerge";
|
|
6
|
-
|
|
7
|
-
const SVG_REGEX = /\.svg$/;
|
|
8
|
-
const getSvgoDefaultConfig = ()=>({
|
|
5
|
+
let src_dirname = __WEBPACK_EXTERNAL_MODULE_node_path__.default.dirname((0, __WEBPACK_EXTERNAL_MODULE_node_url__.fileURLToPath)(import.meta.url)), SVG_REGEX = /\.svg$/, getSvgoDefaultConfig = ()=>({
|
|
9
6
|
plugins: [
|
|
10
7
|
{
|
|
11
8
|
name: 'preset-default',
|
|
12
9
|
params: {
|
|
13
10
|
overrides: {
|
|
14
|
-
|
|
15
|
-
// @see https://github.com/svg/svgo/issues/1128
|
|
16
|
-
removeViewBox: false
|
|
11
|
+
removeViewBox: !1
|
|
17
12
|
}
|
|
18
13
|
}
|
|
19
14
|
},
|
|
20
15
|
'prefixIds'
|
|
21
16
|
]
|
|
22
|
-
})
|
|
23
|
-
/**
|
|
24
|
-
* Dedupe SVGO plugins config.
|
|
25
|
-
*
|
|
26
|
-
* @example
|
|
27
|
-
* Input:
|
|
28
|
-
* {
|
|
29
|
-
* plugins: [
|
|
30
|
-
* { name: 'preset-default', params: { foo: true }],
|
|
31
|
-
* { name: 'preset-default', params: { bar: true }],
|
|
32
|
-
* ]
|
|
33
|
-
* }
|
|
34
|
-
* Output:
|
|
35
|
-
* {
|
|
36
|
-
* plugins: [
|
|
37
|
-
* { name: 'preset-default', params: { foo: true, bar: true }],
|
|
38
|
-
* ]
|
|
39
|
-
* }
|
|
40
|
-
*/ const dedupeSvgoPlugins = (config)=>{
|
|
17
|
+
}), dedupeSvgoPlugins = (config)=>{
|
|
41
18
|
if (!config.plugins) return config;
|
|
42
19
|
let mergedPlugins = [];
|
|
43
|
-
for (
|
|
20
|
+
for (let plugin of config.plugins){
|
|
44
21
|
if ('string' == typeof plugin) {
|
|
45
|
-
|
|
46
|
-
if (!exist) mergedPlugins.push(plugin);
|
|
22
|
+
!mergedPlugins.find((item)=>item === plugin || 'object' == typeof item && item.name === plugin) && mergedPlugins.push(plugin);
|
|
47
23
|
continue;
|
|
48
24
|
}
|
|
49
|
-
|
|
25
|
+
let strIndex = mergedPlugins.findIndex((item)=>'string' == typeof item && item === plugin.name);
|
|
50
26
|
if (-1 !== strIndex) {
|
|
51
27
|
mergedPlugins[strIndex] = plugin;
|
|
52
28
|
continue;
|
|
53
29
|
}
|
|
54
|
-
let isMerged =
|
|
55
|
-
mergedPlugins = mergedPlugins.map((item)=>
|
|
56
|
-
if ('object' == typeof item && item.name === plugin.name) {
|
|
57
|
-
isMerged = true;
|
|
58
|
-
return (0, __WEBPACK_EXTERNAL_MODULE_deepmerge__["default"])(item, plugin);
|
|
59
|
-
}
|
|
60
|
-
return item;
|
|
61
|
-
});
|
|
62
|
-
if (!isMerged) mergedPlugins.push(plugin);
|
|
30
|
+
let isMerged = !1;
|
|
31
|
+
mergedPlugins = mergedPlugins.map((item)=>'object' == typeof item && item.name === plugin.name ? (isMerged = !0, (0, __WEBPACK_EXTERNAL_MODULE_deepmerge__.default)(item, plugin)) : item), !isMerged && mergedPlugins.push(plugin);
|
|
63
32
|
}
|
|
64
|
-
config.plugins = mergedPlugins;
|
|
65
|
-
|
|
66
|
-
};
|
|
67
|
-
const PLUGIN_SVGR_NAME = 'rsbuild:svgr';
|
|
68
|
-
const pluginSvgr = function() {
|
|
69
|
-
let options = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
|
|
70
|
-
return {
|
|
33
|
+
return config.plugins = mergedPlugins, config;
|
|
34
|
+
}, PLUGIN_SVGR_NAME = 'rsbuild:svgr', pluginSvgr = (options = {})=>({
|
|
71
35
|
name: PLUGIN_SVGR_NAME,
|
|
72
36
|
pre: [
|
|
73
37
|
__WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_react__.PLUGIN_REACT_NAME
|
|
74
38
|
],
|
|
75
39
|
setup (api) {
|
|
76
|
-
api.modifyBundlerChain(async (chain,
|
|
77
|
-
let {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
let generatorOptions = {};
|
|
82
|
-
if (chain.module.rules.has(CHAIN_ID.RULE.SVG)) {
|
|
83
|
-
generatorOptions = chain.module.rules.get(CHAIN_ID.RULE.SVG).oneOfs.get(CHAIN_ID.ONE_OF.SVG_URL).get('generator');
|
|
84
|
-
// delete Rsbuild builtin SVG rules
|
|
85
|
-
chain.module.rules.delete(CHAIN_ID.RULE.SVG);
|
|
86
|
-
}
|
|
87
|
-
const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX);
|
|
88
|
-
const svgrOptions = (0, __WEBPACK_EXTERNAL_MODULE_deepmerge__["default"])({
|
|
89
|
-
svgo: true,
|
|
40
|
+
api.modifyBundlerChain(async (chain, { CHAIN_ID, environment })=>{
|
|
41
|
+
let { config } = environment, { dataUriLimit } = config.output, maxSize = 'number' == typeof dataUriLimit ? dataUriLimit : dataUriLimit.svg, generatorOptions = {};
|
|
42
|
+
chain.module.rules.has(CHAIN_ID.RULE.SVG) && (generatorOptions = chain.module.rules.get(CHAIN_ID.RULE.SVG).oneOfs.get(CHAIN_ID.ONE_OF.SVG_URL).get('generator'), chain.module.rules.delete(CHAIN_ID.RULE.SVG));
|
|
43
|
+
let rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX), svgrOptions = (0, __WEBPACK_EXTERNAL_MODULE_deepmerge__.default)({
|
|
44
|
+
svgo: !0,
|
|
90
45
|
svgoConfig: getSvgoDefaultConfig()
|
|
91
46
|
}, options.svgrOptions || {});
|
|
92
|
-
svgrOptions.svgoConfig = dedupeSvgoPlugins(svgrOptions.svgoConfig)
|
|
93
|
-
// force to url: "foo.svg?url",
|
|
94
|
-
rule.oneOf(CHAIN_ID.ONE_OF.SVG_URL).type('asset/resource').resourceQuery(/(__inline=false|url)/).set('generator', generatorOptions);
|
|
95
|
-
// force to inline: "foo.svg?inline"
|
|
96
|
-
rule.oneOf(CHAIN_ID.ONE_OF.SVG_INLINE).type('asset/inline').resourceQuery(/inline/);
|
|
97
|
-
// force to react component: "foo.svg?react"
|
|
98
|
-
rule.oneOf(CHAIN_ID.ONE_OF.SVG_REACT).type('javascript/auto').resourceQuery(options.query || /react/).use(CHAIN_ID.USE.SVGR).loader(__WEBPACK_EXTERNAL_MODULE_node_path__["default"].resolve(src_dirname, './loader.cjs')).options({
|
|
47
|
+
svgrOptions.svgoConfig = dedupeSvgoPlugins(svgrOptions.svgoConfig), rule.oneOf(CHAIN_ID.ONE_OF.SVG_URL).type('asset/resource').resourceQuery(/(__inline=false|url)/).set('generator', generatorOptions), rule.oneOf(CHAIN_ID.ONE_OF.SVG_INLINE).type('asset/inline').resourceQuery(/inline/), rule.oneOf(CHAIN_ID.ONE_OF.SVG_REACT).type('javascript/auto').resourceQuery(options.query || /react/).use(CHAIN_ID.USE.SVGR).loader(__WEBPACK_EXTERNAL_MODULE_node_path__.default.resolve(src_dirname, './loader.mjs')).options({
|
|
99
48
|
...svgrOptions,
|
|
100
49
|
exportType: 'default'
|
|
101
50
|
}).end();
|
|
102
|
-
|
|
103
|
-
const { mixedImport = false } = options;
|
|
51
|
+
let { mixedImport = !1 } = options;
|
|
104
52
|
if (mixedImport || svgrOptions.exportType) {
|
|
105
|
-
|
|
106
|
-
const issuerInclude = [
|
|
53
|
+
let { exportType = mixedImport ? 'named' : void 0 } = svgrOptions, issuerInclude = [
|
|
107
54
|
/\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
|
|
108
55
|
/\.mdx$/
|
|
109
|
-
]
|
|
110
|
-
const issuer = options.excludeImporter ? {
|
|
56
|
+
], issuer = options.excludeImporter ? {
|
|
111
57
|
and: [
|
|
112
58
|
issuerInclude,
|
|
113
59
|
{
|
|
114
60
|
not: options.excludeImporter
|
|
115
61
|
}
|
|
116
62
|
]
|
|
117
|
-
} : issuerInclude;
|
|
118
|
-
|
|
119
|
-
if (options.exclude) svgRule.exclude.add(options.exclude);
|
|
120
|
-
svgRule.type('javascript/auto') // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
|
|
121
|
-
.set('issuer', issuer).use(CHAIN_ID.USE.SVGR).loader(__WEBPACK_EXTERNAL_MODULE_node_path__["default"].resolve(src_dirname, './loader.cjs')).options({
|
|
63
|
+
} : issuerInclude, svgRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG);
|
|
64
|
+
options.exclude && svgRule.exclude.add(options.exclude), svgRule.type('javascript/auto').set('issuer', issuer).use(CHAIN_ID.USE.SVGR).loader(__WEBPACK_EXTERNAL_MODULE_node_path__.default.resolve(src_dirname, './loader.mjs')).options({
|
|
122
65
|
...svgrOptions,
|
|
123
66
|
exportType
|
|
124
|
-
}).end()
|
|
125
|
-
/**
|
|
126
|
-
* For mixed import.
|
|
127
|
-
* @example import logoUrl, { ReactComponent } from './logo.svg';`
|
|
128
|
-
*/ if (mixedImport && 'named' === exportType) svgRule.use(CHAIN_ID.USE.URL).loader(__WEBPACK_EXTERNAL_MODULE_node_path__["default"].join(src_dirname, '../compiled', 'url-loader/index.js')).options({
|
|
67
|
+
}).end(), mixedImport && 'named' === exportType && svgRule.use(CHAIN_ID.USE.URL).loader(__WEBPACK_EXTERNAL_MODULE_node_path__.default.join(src_dirname, '../compiled', 'url-loader/index.js')).options({
|
|
129
68
|
limit: maxSize,
|
|
130
69
|
name: null == generatorOptions ? void 0 : generatorOptions.filename
|
|
131
70
|
});
|
|
132
71
|
}
|
|
133
|
-
// SVG as assets
|
|
134
72
|
rule.oneOf(CHAIN_ID.ONE_OF.SVG_ASSET).type('asset').parser({
|
|
135
|
-
// Inline SVG if size < maxSize
|
|
136
73
|
dataUrlCondition: {
|
|
137
74
|
maxSize
|
|
138
75
|
}
|
|
139
76
|
}).set('generator', generatorOptions);
|
|
140
|
-
|
|
141
|
-
const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
|
|
77
|
+
let jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
|
|
142
78
|
[
|
|
143
79
|
CHAIN_ID.USE.SWC,
|
|
144
80
|
CHAIN_ID.USE.BABEL
|
|
145
81
|
].some((jsUseId)=>{
|
|
146
|
-
|
|
147
|
-
if (!use) return
|
|
148
|
-
for (
|
|
82
|
+
let use = jsRule.uses.get(jsUseId);
|
|
83
|
+
if (!use) return !1;
|
|
84
|
+
for (let oneOfId of [
|
|
149
85
|
CHAIN_ID.ONE_OF.SVG,
|
|
150
86
|
CHAIN_ID.ONE_OF.SVG_REACT
|
|
151
87
|
]){
|
|
152
88
|
if (!!rule.oneOfs.has(oneOfId)) rule.oneOf(oneOfId).use(jsUseId).before(CHAIN_ID.USE.SVGR).loader(use.get('loader')).options(use.get('options'));
|
|
153
89
|
}
|
|
154
|
-
return
|
|
90
|
+
return !0;
|
|
155
91
|
});
|
|
156
92
|
});
|
|
157
93
|
}
|
|
158
|
-
};
|
|
159
|
-
};
|
|
94
|
+
});
|
|
160
95
|
export { PLUGIN_SVGR_NAME, pluginSvgr };
|
package/dist/loader.mjs
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE_node_path__ from "node:path";
|
|
2
|
+
import * as __WEBPACK_EXTERNAL_MODULE_node_util__ from "node:util";
|
|
3
|
+
import * as __WEBPACK_EXTERNAL_MODULE__svgr_core__ from "@svgr/core";
|
|
4
|
+
import * as __WEBPACK_EXTERNAL_MODULE__svgr_plugin_jsx__ from "@svgr/plugin-jsx";
|
|
5
|
+
import * as __WEBPACK_EXTERNAL_MODULE__svgr_plugin_svgo__ from "@svgr/plugin-svgo";
|
|
6
|
+
/**
|
|
7
|
+
* Copyright (c) 2017, Smooth Code
|
|
8
|
+
*
|
|
9
|
+
* This source code is licensed under the MIT license found in the
|
|
10
|
+
* LICENSE file in the root directory of this source tree.
|
|
11
|
+
* modified from https://github.com/gregberge/svgr/blob/7595d378b73d4826a4cead165b3f32386b07315b/packages/webpack/src/index.ts
|
|
12
|
+
*/ const transformSvg = (0, __WEBPACK_EXTERNAL_MODULE_node_util__.callbackify)(async (contents, config, state)=>(0, __WEBPACK_EXTERNAL_MODULE__svgr_core__.transform)(contents, config, state));
|
|
13
|
+
function svgrLoader(contents) {
|
|
14
|
+
this?.cacheable();
|
|
15
|
+
const callback = this.async();
|
|
16
|
+
const options = this.getOptions();
|
|
17
|
+
const previousExport = (()=>{
|
|
18
|
+
if (contents.startsWith('export ')) return contents;
|
|
19
|
+
const exportMatches = contents.match(/^module.exports\s*=\s*(.*)/);
|
|
20
|
+
return exportMatches ? `export default ${exportMatches[1]}` : null;
|
|
21
|
+
})();
|
|
22
|
+
const state = {
|
|
23
|
+
caller: {
|
|
24
|
+
name: '@rsbuild/plugin-svgr',
|
|
25
|
+
previousExport,
|
|
26
|
+
defaultPlugins: [
|
|
27
|
+
__WEBPACK_EXTERNAL_MODULE__svgr_plugin_svgo__["default"],
|
|
28
|
+
__WEBPACK_EXTERNAL_MODULE__svgr_plugin_jsx__["default"]
|
|
29
|
+
]
|
|
30
|
+
},
|
|
31
|
+
filePath: (0, __WEBPACK_EXTERNAL_MODULE_node_path__.normalize)(this.resourcePath)
|
|
32
|
+
};
|
|
33
|
+
if (previousExport) this.fs.readFile(this.resourcePath, (err, result)=>{
|
|
34
|
+
if (err) {
|
|
35
|
+
callback(err);
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
transformSvg(String(result), options, state, (err, content)=>{
|
|
39
|
+
if (err) {
|
|
40
|
+
callback(err);
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
callback(null, content);
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
else transformSvg(contents, options, state, callback);
|
|
47
|
+
}
|
|
48
|
+
/* ESM default export */ const loader_rslib_entry_ = svgrLoader;
|
|
49
|
+
export { loader_rslib_entry_ as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsbuild/plugin-svgr",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "svgr plugin for Rsbuild",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -28,20 +28,21 @@
|
|
|
28
28
|
"@svgr/plugin-svgo": "8.1.0",
|
|
29
29
|
"deepmerge": "^4.3.1",
|
|
30
30
|
"loader-utils": "^2.0.4",
|
|
31
|
-
"@rsbuild/plugin-react": "1.0
|
|
31
|
+
"@rsbuild/plugin-react": "1.1.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@
|
|
34
|
+
"@rslib/core": "0.1.3",
|
|
35
|
+
"@types/node": "^22.10.1",
|
|
35
36
|
"file-loader": "6.2.0",
|
|
36
|
-
"prebundle": "1.2.
|
|
37
|
+
"prebundle": "1.2.5",
|
|
37
38
|
"svgo": "^3.3.2",
|
|
38
|
-
"typescript": "^5.
|
|
39
|
+
"typescript": "^5.7.2",
|
|
39
40
|
"url-loader": "4.1.1",
|
|
40
|
-
"@rsbuild/core": "1.
|
|
41
|
+
"@rsbuild/core": "1.1.9",
|
|
41
42
|
"@scripts/test-helper": "1.0.1"
|
|
42
43
|
},
|
|
43
44
|
"peerDependencies": {
|
|
44
|
-
"@rsbuild/core": "1.x
|
|
45
|
+
"@rsbuild/core": "1.x"
|
|
45
46
|
},
|
|
46
47
|
"publishConfig": {
|
|
47
48
|
"access": "public",
|