@rsbuild/plugin-svgr 1.0.3 → 1.0.5

package/dist/index.cjs

@@ -1,175 +1,216 @@
 "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 __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);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  PLUGIN_SVGR_NAME: () => PLUGIN_SVGR_NAME,
-  pluginSvgr: () => pluginSvgr
+// The require scope
+var __webpack_require__ = {};
+/************************************************************************/ // webpack/runtime/compat_get_default_export
+(()=>{
+    // getDefaultExport function for compatibility with non-ESM modules
+    __webpack_require__.n = function(module1) {
+        var getter = module1 && module1.__esModule ? function() {
+            return module1['default'];
+        } : function() {
+            return module1;
+        };
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+// 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_SVGR_NAME: ()=>/* binding */ PLUGIN_SVGR_NAME,
+    pluginSvgr: ()=>/* binding */ pluginSvgr
 });
-module.exports = __toCommonJS(src_exports);
-var import_node_path = __toESM(require("path"));
-var import_plugin_react = require("@rsbuild/plugin-react");
-var import_deepmerge = __toESM(require("deepmerge"));
-var SVG_REGEX = /\.svg$/;
-var getSvgoDefaultConfig = () => ({
-  plugins: [
-    {
-      name: "preset-default",
-      params: {
-        overrides: {
-          // viewBox is required to resize SVGs with CSS.
-          // @see https://github.com/svg/svgo/issues/1128
-          removeViewBox: false
-        }
-      }
-    },
-    "prefixIds"
-  ]
-});
-var dedupeSvgoPlugins = (config) => {
-  if (!config.plugins) {
-    return config;
-  }
-  let mergedPlugins = [];
-  for (const plugin of config.plugins) {
-    if (typeof plugin === "string") {
-      const exist = mergedPlugins.find(
-        (item) => item === plugin || typeof item === "object" && item.name === plugin
-      );
-      if (!exist) {
-        mergedPlugins.push(plugin);
-      }
-      continue;
-    }
-    const strIndex = mergedPlugins.findIndex(
-      (item) => typeof item === "string" && item === plugin.name
-    );
-    if (strIndex !== -1) {
-      mergedPlugins[strIndex] = plugin;
-      continue;
-    }
-    let isMerged = false;
-    mergedPlugins = mergedPlugins.map((item) => {
-      if (typeof item === "object" && item.name === plugin.name) {
-        isMerged = true;
-        return (0, import_deepmerge.default)(item, plugin);
-      }
-      return item;
+const external_node_path_namespaceObject = require("node:path");
+var external_node_path_default = /*#__PURE__*/ __webpack_require__.n(external_node_path_namespaceObject);
+const external_node_url_namespaceObject = require("node:url");
+const plugin_react_namespaceObject = require("@rsbuild/plugin-react");
+const external_deepmerge_namespaceObject = require("deepmerge");
+var external_deepmerge_default = /*#__PURE__*/ __webpack_require__.n(external_deepmerge_namespaceObject);
+const src_dirname = external_node_path_default().dirname((0, external_node_url_namespaceObject.fileURLToPath)(/*#__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 SVG_REGEX = /\.svg$/;
+const getSvgoDefaultConfig = ()=>({
+        plugins: [
+            {
+                name: 'preset-default',
+                params: {
+                    overrides: {
+                        // viewBox is required to resize SVGs with CSS.
+                        // @see https://github.com/svg/svgo/issues/1128
+                        removeViewBox: false
+                    }
+                }
+            },
+            'prefixIds'
+        ]
     });
-    if (!isMerged) {
-      mergedPlugins.push(plugin);
-    }
-  }
-  config.plugins = mergedPlugins;
-  return config;
-};
-var PLUGIN_SVGR_NAME = "rsbuild:svgr";
-var pluginSvgr = (options = {}) => ({
-  name: PLUGIN_SVGR_NAME,
-  pre: [import_plugin_react.PLUGIN_REACT_NAME],
-  setup(api) {
-    api.modifyBundlerChain(async (chain, { CHAIN_ID, environment }) => {
-      const { config } = environment;
-      const { dataUriLimit } = config.output;
-      const maxSize = typeof dataUriLimit === "number" ? dataUriLimit : dataUriLimit.svg;
-      let generatorOptions = {};
-      if (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);
-      }
-      const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX);
-      const svgrOptions = (0, import_deepmerge.default)(
-        {
-          svgo: true,
-          svgoConfig: getSvgoDefaultConfig()
-        },
-        options.svgrOptions || {}
-      );
-      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(import_node_path.default.resolve(__dirname, "./loader.cjs")).options({
-        ...svgrOptions,
-        exportType: "default"
-      }).end();
-      const { mixedImport = false } = options;
-      if (mixedImport || svgrOptions.exportType) {
-        const { exportType = mixedImport ? "named" : void 0 } = svgrOptions;
-        const issuerInclude = [
-          /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
-          /\.mdx$/
-        ];
-        const issuer = options.excludeImporter ? { and: [issuerInclude, { not: options.excludeImporter }] } : issuerInclude;
-        const svgRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG);
-        if (options.exclude) {
-          svgRule.exclude.add(options.exclude);
-        }
-        svgRule.type("javascript/auto").set("issuer", issuer).use(CHAIN_ID.USE.SVGR).loader(import_node_path.default.resolve(__dirname, "./loader.cjs")).options({
-          ...svgrOptions,
-          exportType
-        }).end();
-        if (mixedImport && exportType === "named") {
-          svgRule.use(CHAIN_ID.USE.URL).loader(import_node_path.default.join(__dirname, "../compiled", "url-loader/index.js")).options({
-            limit: maxSize,
-            name: generatorOptions?.filename
-          });
-        }
-      }
-      rule.oneOf(CHAIN_ID.ONE_OF.SVG_ASSET).type("asset").parser({
-        // Inline SVG if size < maxSize
-        dataUrlCondition: {
-          maxSize
-        }
-      }).set("generator", generatorOptions);
-      const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
-      [CHAIN_ID.USE.SWC, CHAIN_ID.USE.BABEL].some((jsUseId) => {
-        const use = jsRule.uses.get(jsUseId);
-        if (!use) {
-          return false;
+/**
+ * Dedupe SVGO plugins config.
+ *
+ * @example
+ * Input:
+ *   {
+ *     plugins: [
+ *       { name: 'preset-default', params: { foo: true }],
+ *       { name: 'preset-default', params: { bar: true }],
+ *     ]
+ *   }
+ * Output:
+ *   {
+ *     plugins: [
+ *       { name: 'preset-default', params: { foo: true, bar: true }],
+ *     ]
+ *   }
+ */ const dedupeSvgoPlugins = (config)=>{
+    if (!config.plugins) return config;
+    let mergedPlugins = [];
+    for (const plugin of config.plugins){
+        if ('string' == typeof plugin) {
+            const exist = mergedPlugins.find((item)=>item === plugin || 'object' == typeof item && item.name === plugin);
+            if (!exist) mergedPlugins.push(plugin);
+            continue;
         }
-        for (const oneOfId of [
-          CHAIN_ID.ONE_OF.SVG,
-          CHAIN_ID.ONE_OF.SVG_REACT
-        ]) {
-          if (!rule.oneOfs.has(oneOfId)) {
+        const strIndex = mergedPlugins.findIndex((item)=>'string' == typeof item && item === plugin.name);
+        if (-1 !== strIndex) {
+            mergedPlugins[strIndex] = plugin;
             continue;
-          }
-          rule.oneOf(oneOfId).use(jsUseId).before(CHAIN_ID.USE.SVGR).loader(use.get("loader")).options(use.get("options"));
         }
-        return true;
-      });
+        let isMerged = false;
+        mergedPlugins = mergedPlugins.map((item)=>{
+            if ('object' == typeof item && item.name === plugin.name) {
+                isMerged = true;
+                return external_deepmerge_default()(item, plugin);
+            }
+            return item;
+        });
+        if (!isMerged) mergedPlugins.push(plugin);
+    }
+    config.plugins = mergedPlugins;
+    return config;
+};
+const PLUGIN_SVGR_NAME = 'rsbuild:svgr';
+const pluginSvgr = (options = {})=>({
+        name: PLUGIN_SVGR_NAME,
+        pre: [
+            plugin_react_namespaceObject.PLUGIN_REACT_NAME
+        ],
+        setup (api) {
+            api.modifyBundlerChain(async (chain, { CHAIN_ID, environment })=>{
+                const { config } = environment;
+                const { dataUriLimit } = config.output;
+                const maxSize = 'number' == typeof dataUriLimit ? dataUriLimit : dataUriLimit.svg;
+                let generatorOptions = {};
+                if (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');
+                    // delete Rsbuild builtin SVG rules
+                    chain.module.rules.delete(CHAIN_ID.RULE.SVG);
+                }
+                const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX);
+                const svgrOptions = external_deepmerge_default()({
+                    svgo: true,
+                    svgoConfig: getSvgoDefaultConfig()
+                }, options.svgrOptions || {});
+                svgrOptions.svgoConfig = dedupeSvgoPlugins(svgrOptions.svgoConfig);
+                // force to url: "foo.svg?url",
+                rule.oneOf(CHAIN_ID.ONE_OF.SVG_URL).type('asset/resource').resourceQuery(/(__inline=false|url)/).set('generator', generatorOptions);
+                // force to inline: "foo.svg?inline"
+                rule.oneOf(CHAIN_ID.ONE_OF.SVG_INLINE).type('asset/inline').resourceQuery(/inline/);
+                // force to react component: "foo.svg?react"
+                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.cjs')).options({
+                    ...svgrOptions,
+                    exportType: 'default'
+                }).end();
+                // SVG in JS files
+                const { mixedImport = false } = options;
+                if (mixedImport || svgrOptions.exportType) {
+                    const { exportType = mixedImport ? 'named' : void 0 } = svgrOptions;
+                    const issuerInclude = [
+                        /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
+                        /\.mdx$/
+                    ];
+                    const issuer = options.excludeImporter ? {
+                        and: [
+                            issuerInclude,
+                            {
+                                not: options.excludeImporter
+                            }
+                        ]
+                    } : issuerInclude;
+                    const svgRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG);
+                    if (options.exclude) svgRule.exclude.add(options.exclude);
+                    svgRule.type('javascript/auto') // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
+                    .set('issuer', issuer).use(CHAIN_ID.USE.SVGR).loader(external_node_path_default().resolve(src_dirname, './loader.cjs')).options({
+                        ...svgrOptions,
+                        exportType
+                    }).end();
+                    /**
+         * For mixed import.
+         * @example import logoUrl, { ReactComponent } from './logo.svg';`
+         */ if (mixedImport && 'named' === exportType) svgRule.use(CHAIN_ID.USE.URL).loader(external_node_path_default().join(src_dirname, '../compiled', 'url-loader/index.js')).options({
+                        limit: maxSize,
+                        name: null == generatorOptions ? void 0 : generatorOptions.filename
+                    });
+                }
+                // SVG as assets
+                rule.oneOf(CHAIN_ID.ONE_OF.SVG_ASSET).type('asset').parser({
+                    // Inline SVG if size < maxSize
+                    dataUrlCondition: {
+                        maxSize
+                    }
+                }).set('generator', generatorOptions);
+                // apply current JS transform rule to SVGR rules
+                const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
+                [
+                    CHAIN_ID.USE.SWC,
+                    CHAIN_ID.USE.BABEL
+                ].some((jsUseId)=>{
+                    const use = jsRule.uses.get(jsUseId);
+                    if (!use) return false;
+                    for (const oneOfId of [
+                        CHAIN_ID.ONE_OF.SVG,
+                        CHAIN_ID.ONE_OF.SVG_REACT
+                    ]){
+                        if (!!rule.oneOfs.has(oneOfId)) rule.oneOf(oneOfId).use(jsUseId).before(CHAIN_ID.USE.SVGR).loader(use.get('loader')).options(use.get('options'));
+                    }
+                    return true;
+                });
+            });
+        }
     });
-  }
-});
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  PLUGIN_SVGR_NAME,
-  pluginSvgr
+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,150 +1,155 @@
-import { createRequire } from 'module';
-var require = createRequire(import.meta['url']);
-
-
-// ../../node_modules/.pnpm/@modern-js+module-tools@2.60.1_typescript@5.5.2/node_modules/@modern-js/module-tools/shims/esm.js
-import path from "path";
-import { fileURLToPath } from "url";
-var getFilename = () => fileURLToPath(import.meta.url);
-var getDirname = () => path.dirname(getFilename());
-var __dirname = /* @__PURE__ */ getDirname();
-
-// src/index.ts
-import path2 from "path";
-import { PLUGIN_REACT_NAME } from "@rsbuild/plugin-react";
-import deepmerge from "deepmerge";
-var SVG_REGEX = /\.svg$/;
-var getSvgoDefaultConfig = () => ({
-  plugins: [
-    {
-      name: "preset-default",
-      params: {
-        overrides: {
-          // viewBox is required to resize SVGs with CSS.
-          // @see https://github.com/svg/svgo/issues/1128
-          removeViewBox: false
-        }
-      }
-    },
-    "prefixIds"
-  ]
-});
-var dedupeSvgoPlugins = (config) => {
-  if (!config.plugins) {
-    return config;
-  }
-  let mergedPlugins = [];
-  for (const plugin of config.plugins) {
-    if (typeof plugin === "string") {
-      const exist = mergedPlugins.find(
-        (item) => item === plugin || typeof item === "object" && item.name === plugin
-      );
-      if (!exist) {
-        mergedPlugins.push(plugin);
-      }
-      continue;
-    }
-    const strIndex = mergedPlugins.findIndex(
-      (item) => typeof item === "string" && item === plugin.name
-    );
-    if (strIndex !== -1) {
-      mergedPlugins[strIndex] = plugin;
-      continue;
-    }
-    let isMerged = false;
-    mergedPlugins = mergedPlugins.map((item) => {
-      if (typeof item === "object" && item.name === plugin.name) {
-        isMerged = true;
-        return deepmerge(item, plugin);
-      }
-      return item;
+import * as __WEBPACK_EXTERNAL_MODULE_node_path__ from "node:path";
+import * as __WEBPACK_EXTERNAL_MODULE_node_url__ from "node:url";
+import * as __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_react__ from "@rsbuild/plugin-react";
+import * as __WEBPACK_EXTERNAL_MODULE_deepmerge__ from "deepmerge";
+const src_dirname = __WEBPACK_EXTERNAL_MODULE_node_path__["default"].dirname((0, __WEBPACK_EXTERNAL_MODULE_node_url__.fileURLToPath)(import.meta.url));
+const SVG_REGEX = /\.svg$/;
+const getSvgoDefaultConfig = ()=>({
+        plugins: [
+            {
+                name: 'preset-default',
+                params: {
+                    overrides: {
+                        // viewBox is required to resize SVGs with CSS.
+                        // @see https://github.com/svg/svgo/issues/1128
+                        removeViewBox: false
+                    }
+                }
+            },
+            'prefixIds'
+        ]
     });
-    if (!isMerged) {
-      mergedPlugins.push(plugin);
-    }
-  }
-  config.plugins = mergedPlugins;
-  return config;
-};
-var PLUGIN_SVGR_NAME = "rsbuild:svgr";
-var pluginSvgr = (options = {}) => ({
-  name: PLUGIN_SVGR_NAME,
-  pre: [PLUGIN_REACT_NAME],
-  setup(api) {
-    api.modifyBundlerChain(async (chain, { CHAIN_ID, environment }) => {
-      const { config } = environment;
-      const { dataUriLimit } = config.output;
-      const maxSize = typeof dataUriLimit === "number" ? dataUriLimit : dataUriLimit.svg;
-      let generatorOptions = {};
-      if (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);
-      }
-      const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX);
-      const svgrOptions = deepmerge(
-        {
-          svgo: true,
-          svgoConfig: getSvgoDefaultConfig()
-        },
-        options.svgrOptions || {}
-      );
-      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(path2.resolve(__dirname, "./loader.cjs")).options({
-        ...svgrOptions,
-        exportType: "default"
-      }).end();
-      const { mixedImport = false } = options;
-      if (mixedImport || svgrOptions.exportType) {
-        const { exportType = mixedImport ? "named" : void 0 } = svgrOptions;
-        const issuerInclude = [
-          /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
-          /\.mdx$/
-        ];
-        const issuer = options.excludeImporter ? { and: [issuerInclude, { not: options.excludeImporter }] } : issuerInclude;
-        const svgRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG);
-        if (options.exclude) {
-          svgRule.exclude.add(options.exclude);
-        }
-        svgRule.type("javascript/auto").set("issuer", issuer).use(CHAIN_ID.USE.SVGR).loader(path2.resolve(__dirname, "./loader.cjs")).options({
-          ...svgrOptions,
-          exportType
-        }).end();
-        if (mixedImport && exportType === "named") {
-          svgRule.use(CHAIN_ID.USE.URL).loader(path2.join(__dirname, "../compiled", "url-loader/index.js")).options({
-            limit: maxSize,
-            name: generatorOptions?.filename
-          });
-        }
-      }
-      rule.oneOf(CHAIN_ID.ONE_OF.SVG_ASSET).type("asset").parser({
-        // Inline SVG if size < maxSize
-        dataUrlCondition: {
-          maxSize
-        }
-      }).set("generator", generatorOptions);
-      const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
-      [CHAIN_ID.USE.SWC, CHAIN_ID.USE.BABEL].some((jsUseId) => {
-        const use = jsRule.uses.get(jsUseId);
-        if (!use) {
-          return false;
+/**
+ * Dedupe SVGO plugins config.
+ *
+ * @example
+ * Input:
+ *   {
+ *     plugins: [
+ *       { name: 'preset-default', params: { foo: true }],
+ *       { name: 'preset-default', params: { bar: true }],
+ *     ]
+ *   }
+ * Output:
+ *   {
+ *     plugins: [
+ *       { name: 'preset-default', params: { foo: true, bar: true }],
+ *     ]
+ *   }
+ */ const dedupeSvgoPlugins = (config)=>{
+    if (!config.plugins) return config;
+    let mergedPlugins = [];
+    for (const plugin of config.plugins){
+        if ('string' == typeof plugin) {
+            const exist = mergedPlugins.find((item)=>item === plugin || 'object' == typeof item && item.name === plugin);
+            if (!exist) mergedPlugins.push(plugin);
+            continue;
         }
-        for (const oneOfId of [
-          CHAIN_ID.ONE_OF.SVG,
-          CHAIN_ID.ONE_OF.SVG_REACT
-        ]) {
-          if (!rule.oneOfs.has(oneOfId)) {
+        const strIndex = mergedPlugins.findIndex((item)=>'string' == typeof item && item === plugin.name);
+        if (-1 !== strIndex) {
+            mergedPlugins[strIndex] = plugin;
             continue;
-          }
-          rule.oneOf(oneOfId).use(jsUseId).before(CHAIN_ID.USE.SVGR).loader(use.get("loader")).options(use.get("options"));
         }
-        return true;
-      });
-    });
-  }
-});
-export {
-  PLUGIN_SVGR_NAME,
-  pluginSvgr
+        let isMerged = false;
+        mergedPlugins = mergedPlugins.map((item)=>{
+            if ('object' == typeof item && item.name === plugin.name) {
+                isMerged = true;
+                return (0, __WEBPACK_EXTERNAL_MODULE_deepmerge__["default"])(item, plugin);
+            }
+            return item;
+        });
+        if (!isMerged) mergedPlugins.push(plugin);
+    }
+    config.plugins = mergedPlugins;
+    return config;
 };
+const PLUGIN_SVGR_NAME = 'rsbuild:svgr';
+const pluginSvgr = (options = {})=>({
+        name: PLUGIN_SVGR_NAME,
+        pre: [
+            __WEBPACK_EXTERNAL_MODULE__rsbuild_plugin_react__.PLUGIN_REACT_NAME
+        ],
+        setup (api) {
+            api.modifyBundlerChain(async (chain, { CHAIN_ID, environment })=>{
+                const { config } = environment;
+                const { dataUriLimit } = config.output;
+                const maxSize = 'number' == typeof dataUriLimit ? dataUriLimit : dataUriLimit.svg;
+                let generatorOptions = {};
+                if (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');
+                    // delete Rsbuild builtin SVG rules
+                    chain.module.rules.delete(CHAIN_ID.RULE.SVG);
+                }
+                const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(SVG_REGEX);
+                const svgrOptions = (0, __WEBPACK_EXTERNAL_MODULE_deepmerge__["default"])({
+                    svgo: true,
+                    svgoConfig: getSvgoDefaultConfig()
+                }, options.svgrOptions || {});
+                svgrOptions.svgoConfig = dedupeSvgoPlugins(svgrOptions.svgoConfig);
+                // force to url: "foo.svg?url",
+                rule.oneOf(CHAIN_ID.ONE_OF.SVG_URL).type('asset/resource').resourceQuery(/(__inline=false|url)/).set('generator', generatorOptions);
+                // force to inline: "foo.svg?inline"
+                rule.oneOf(CHAIN_ID.ONE_OF.SVG_INLINE).type('asset/inline').resourceQuery(/inline/);
+                // force to react component: "foo.svg?react"
+                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({
+                    ...svgrOptions,
+                    exportType: 'default'
+                }).end();
+                // SVG in JS files
+                const { mixedImport = false } = options;
+                if (mixedImport || svgrOptions.exportType) {
+                    const { exportType = mixedImport ? 'named' : void 0 } = svgrOptions;
+                    const issuerInclude = [
+                        /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
+                        /\.mdx$/
+                    ];
+                    const issuer = options.excludeImporter ? {
+                        and: [
+                            issuerInclude,
+                            {
+                                not: options.excludeImporter
+                            }
+                        ]
+                    } : issuerInclude;
+                    const svgRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG);
+                    if (options.exclude) svgRule.exclude.add(options.exclude);
+                    svgRule.type('javascript/auto') // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
+                    .set('issuer', issuer).use(CHAIN_ID.USE.SVGR).loader(__WEBPACK_EXTERNAL_MODULE_node_path__["default"].resolve(src_dirname, './loader.cjs')).options({
+                        ...svgrOptions,
+                        exportType
+                    }).end();
+                    /**
+         * For mixed import.
+         * @example import logoUrl, { ReactComponent } from './logo.svg';`
+         */ 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({
+                        limit: maxSize,
+                        name: null == generatorOptions ? void 0 : generatorOptions.filename
+                    });
+                }
+                // SVG as assets
+                rule.oneOf(CHAIN_ID.ONE_OF.SVG_ASSET).type('asset').parser({
+                    // Inline SVG if size < maxSize
+                    dataUrlCondition: {
+                        maxSize
+                    }
+                }).set('generator', generatorOptions);
+                // apply current JS transform rule to SVGR rules
+                const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
+                [
+                    CHAIN_ID.USE.SWC,
+                    CHAIN_ID.USE.BABEL
+                ].some((jsUseId)=>{
+                    const use = jsRule.uses.get(jsUseId);
+                    if (!use) return false;
+                    for (const oneOfId of [
+                        CHAIN_ID.ONE_OF.SVG,
+                        CHAIN_ID.ONE_OF.SVG_REACT
+                    ]){
+                        if (!!rule.oneOfs.has(oneOfId)) rule.oneOf(oneOfId).use(jsUseId).before(CHAIN_ID.USE.SVGR).loader(use.get('loader')).options(use.get('options'));
+                    }
+                    return true;
+                });
+            });
+        }
+    });
+export { PLUGIN_SVGR_NAME, pluginSvgr };

package/dist/loader.cjs

@@ -1,80 +1,108 @@
 "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 __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);
-
-// src/loader.ts
-var loader_exports = {};
-__export(loader_exports, {
-  default: () => loader_default
+// The require scope
+var __webpack_require__ = {};
+/************************************************************************/ // webpack/runtime/compat_get_default_export
+(()=>{
+    // getDefaultExport function for compatibility with non-ESM modules
+    __webpack_require__.n = function(module) {
+        var getter = module && module.__esModule ? function() {
+            return module['default'];
+        } : function() {
+            return module;
+        };
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+// 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__, {
+    default: ()=>/* binding */ loader
 });
-module.exports = __toCommonJS(loader_exports);
-var import_node_path = require("path");
-var import_node_util = require("util");
-var import_core = require("@svgr/core");
-var import_plugin_jsx = __toESM(require("@svgr/plugin-jsx"));
-var import_plugin_svgo = __toESM(require("@svgr/plugin-svgo"));
-var transformSvg = (0, import_node_util.callbackify)(
-  async (contents, config, state) => (0, import_core.transform)(contents, config, state)
-);
+const external_node_path_namespaceObject = require("node:path");
+const external_node_util_namespaceObject = require("node:util");
+const core_namespaceObject = require("@svgr/core");
+const plugin_jsx_namespaceObject = require("@svgr/plugin-jsx");
+var plugin_jsx_default = /*#__PURE__*/ __webpack_require__.n(plugin_jsx_namespaceObject);
+const plugin_svgo_namespaceObject = require("@svgr/plugin-svgo");
+var plugin_svgo_default = /*#__PURE__*/ __webpack_require__.n(plugin_svgo_namespaceObject);
+/**
+ * Copyright (c) 2017, Smooth Code
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * modified from https://github.com/gregberge/svgr/blob/7595d378b73d4826a4cead165b3f32386b07315b/packages/webpack/src/index.ts
+ */ const transformSvg = (0, external_node_util_namespaceObject.callbackify)(async (contents, config, state)=>(0, core_namespaceObject.transform)(contents, config, state));
 function svgrLoader(contents) {
-  this?.cacheable();
-  const callback = this.async();
-  const options = this.getOptions();
-  const previousExport = (() => {
-    if (contents.startsWith("export "))
-      return contents;
-    const exportMatches = contents.match(/^module.exports\s*=\s*(.*)/);
-    return exportMatches ? `export default ${exportMatches[1]}` : null;
-  })();
-  const state = {
-    caller: {
-      name: "@rsbuild/plugin-svgr",
-      previousExport,
-      defaultPlugins: [import_plugin_svgo.default, import_plugin_jsx.default]
-    },
-    filePath: (0, import_node_path.normalize)(this.resourcePath)
-  };
-  if (!previousExport) {
-    transformSvg(contents, options, state, callback);
-  } else {
-    this.fs.readFile(this.resourcePath, (err, result) => {
-      if (err) {
-        callback(err);
-        return;
-      }
-      transformSvg(String(result), options, state, (err2, content) => {
-        if (err2) {
-          callback(err2);
-          return;
+    var _this;
+    null === (_this = this) || void 0 === _this || _this.cacheable();
+    const callback = this.async();
+    const options = this.getOptions();
+    const previousExport = (()=>{
+        if (contents.startsWith('export ')) return contents;
+        const exportMatches = contents.match(/^module.exports\s*=\s*(.*)/);
+        return exportMatches ? `export default ${exportMatches[1]}` : null;
+    })();
+    const state = {
+        caller: {
+            name: '@rsbuild/plugin-svgr',
+            previousExport,
+            defaultPlugins: [
+                plugin_svgo_default(),
+                plugin_jsx_default()
+            ]
+        },
+        filePath: (0, external_node_path_namespaceObject.normalize)(this.resourcePath)
+    };
+    if (previousExport) this.fs.readFile(this.resourcePath, (err, result)=>{
+        if (err) {
+            callback(err);
+            return;
         }
-        callback(null, content);
-      });
+        transformSvg(String(result), options, state, (err, content)=>{
+            if (err) {
+                callback(err);
+                return;
+            }
+            callback(null, content);
+        });
     });
-  }
+    else transformSvg(contents, options, state, callback);
 }
-var loader_default = svgrLoader;
+/* ESM default export */ const loader = svgrLoader;
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/plugin-svgr",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "svgr plugin for Rsbuild",
   "repository": {
     "type": "git",
@@ -11,17 +11,16 @@
   "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",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
-    "compiled",
-    "dist-types"
+    "compiled"
   ],
   "dependencies": {
     "@svgr/core": "8.1.0",
@@ -29,20 +28,20 @@
     "@svgr/plugin-svgo": "8.1.0",
     "deepmerge": "^4.3.1",
     "loader-utils": "^2.0.4",
-    "@rsbuild/plugin-react": "1.0.3"
+    "@rsbuild/plugin-react": "1.0.6"
   },
   "devDependencies": {
     "@types/node": "18.x",
     "file-loader": "6.2.0",
     "prebundle": "1.2.2",
     "svgo": "^3.3.2",
-    "typescript": "^5.5.2",
+    "typescript": "^5.6.3",
     "url-loader": "4.1.1",
-    "@rsbuild/core": "1.0.8",
+    "@rsbuild/core": "1.0.19",
     "@scripts/test-helper": "1.0.1"
   },
   "peerDependencies": {
-    "@rsbuild/core": "1.x || ^1.0.1-rc.0"
+    "@rsbuild/core": "1.x"
   },
   "publishConfig": {
     "access": "public",
@@ -50,8 +49,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "modern build",
-    "dev": "modern build --watch",
+    "build": "rslib build",
+    "dev": "rslib build --watch",
     "prebundle": "prebundle"
   }
 }

package/dist-types/package.json

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