@rsbuild/plugin-svgr 0.2.10 → 0.2.11

package/dist/index.js

@@ -54,6 +54,7 @@ function getSvgoDefaultConfig() {
 }
 var pluginSvgr = (options = {}) => ({
   name: "rsbuild:svgr",
+  pre: ["rsbuild:babel", "uni-builder:babel", "rsbuild-webpack:swc"],
   setup(api) {
     api.modifyBundlerChain(async (chain, { isProd, CHAIN_ID }) => {
       const config = api.getNormalizedConfig();
@@ -79,7 +80,17 @@ var pluginSvgr = (options = {}) => ({
       rule.oneOf(CHAIN_ID.ONE_OF.SVG_URL).type("asset/resource").resourceQuery(/url/).set("generator", {
         filename: outputName
       });
-      rule.oneOf(CHAIN_ID.ONE_OF.SVG).type("javascript/auto").use(CHAIN_ID.USE.SVGR).loader(require.resolve("@svgr/webpack")).options({
+      const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
+      const svgrRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG).type("javascript/auto");
+      [CHAIN_ID.USE.SWC, CHAIN_ID.USE.BABEL].some((id) => {
+        const use = jsRule.uses.get(id);
+        if (use) {
+          svgrRule.use(id).loader(use.get("loader")).options(use.get("options"));
+          return true;
+        }
+        return false;
+      });
+      svgrRule.use(CHAIN_ID.USE.SVGR).loader(import_path.default.resolve(__dirname, "./loader")).options({
         svgo: true,
         svgoConfig: getSvgoDefaultConfig()
       }).end().when(

package/dist/index.mjs

@@ -9,6 +9,9 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // ../../node_modules/.pnpm/@modern-js+module-tools@2.43.0_typescript@5.3.2/node_modules/@modern-js/module-tools/shims/esm.js
 import { fileURLToPath } from "url";
 import path from "path";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
 
 // ../../scripts/requireShims.js
 import { createRequire } from "module";
@@ -21,7 +24,7 @@ import {
   TS_REGEX,
   SVG_REGEX,
   getDistPath,
-  getFilename,
+  getFilename as getFilename2,
   chainStaticAssetRule
 } from "@rsbuild/shared";
 function getSvgoDefaultConfig() {
@@ -43,13 +46,14 @@ function getSvgoDefaultConfig() {
 }
 var pluginSvgr = (options = {}) => ({
   name: "rsbuild:svgr",
+  pre: ["rsbuild:babel", "uni-builder:babel", "rsbuild-webpack:swc"],
   setup(api) {
     api.modifyBundlerChain(async (chain, { isProd, CHAIN_ID }) => {
       const config = api.getNormalizedConfig();
       const { svgDefaultExport = "url" } = options;
       const assetType = "svg";
       const distDir = getDistPath(config, assetType);
-      const filename = getFilename(config, assetType, isProd);
+      const filename = getFilename2(config, assetType, isProd);
       const outputName = path2.posix.join(distDir, filename);
       const maxSize = config.output.dataUriLimit[assetType];
       chain.module.rules.delete(CHAIN_ID.RULE.SVG);
@@ -68,7 +72,17 @@ var pluginSvgr = (options = {}) => ({
       rule.oneOf(CHAIN_ID.ONE_OF.SVG_URL).type("asset/resource").resourceQuery(/url/).set("generator", {
         filename: outputName
       });
-      rule.oneOf(CHAIN_ID.ONE_OF.SVG).type("javascript/auto").use(CHAIN_ID.USE.SVGR).loader(__require.resolve("@svgr/webpack")).options({
+      const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
+      const svgrRule = rule.oneOf(CHAIN_ID.ONE_OF.SVG).type("javascript/auto");
+      [CHAIN_ID.USE.SWC, CHAIN_ID.USE.BABEL].some((id) => {
+        const use = jsRule.uses.get(id);
+        if (use) {
+          svgrRule.use(id).loader(use.get("loader")).options(use.get("options"));
+          return true;
+        }
+        return false;
+      });
+      svgrRule.use(CHAIN_ID.USE.SVGR).loader(path2.resolve(__dirname, "./loader")).options({
         svgo: true,
         svgoConfig: getSvgoDefaultConfig()
       }).end().when(

package/dist/loader.d.ts

@@ -0,0 +1,14 @@
+import { Config } from '@svgr/core';
+import { Rspack } from '@rsbuild/core';
+
+/**
+ * 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
+ */
+
+declare function svgrLoader(this: Rspack.LoaderContext<Config>, contents: string): void;
+
+export { svgrLoader as default };

package/dist/loader.js

@@ -0,0 +1,80 @@
+"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
+});
+module.exports = __toCommonJS(loader_exports);
+var import_util = require("util");
+var import_core = require("@svgr/core");
+var import_path = require("path");
+var import_plugin_svgo = __toESM(require("@svgr/plugin-svgo"));
+var import_plugin_jsx = __toESM(require("@svgr/plugin-jsx"));
+var transformSvg = (0, import_util.callbackify)(
+  async (contents, config, state) => (0, import_core.transform)(contents, config, state)
+);
+function svgrLoader(contents) {
+  this.cacheable && 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_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;
+        }
+        callback(null, content);
+      });
+    });
+  }
+}
+var loader_default = svgrLoader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsbuild/plugin-svgr",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "svgr plugin for Rsbuild",
   "repository": {
     "type": "git",
@@ -22,15 +22,17 @@
     "dist"
   ],
   "dependencies": {
-    "@svgr/webpack": "8.0.1",
+    "@svgr/core": "8.1.0",
+    "@svgr/plugin-jsx": "8.1.0",
+    "@svgr/plugin-svgo": "8.1.0",
     "url-loader": "4.1.1",
-    "@rsbuild/shared": "0.2.10"
+    "@rsbuild/shared": "0.2.11"
   },
   "devDependencies": {
     "@types/node": "16.x",
     "typescript": "^5.3.0",
-    "@rsbuild/core": "0.2.10",
-    "@rsbuild/test-helper": "0.2.10"
+    "@rsbuild/core": "0.2.11",
+    "@rsbuild/test-helper": "0.2.11"
   },
   "publishConfig": {
     "access": "public",