vite-plugin-svgr 4.2.0 → 4.5.0

package/README.md

@@ -35,7 +35,7 @@ Then SVG files can be imported as React components:
 import Logo from "./logo.svg?react";
 ```
 
-If you are using TypeScript, there is also a declaration helper for better type inference:
+If you are using TypeScript, there is also a declaration helper for better type inference. Add the following to `vite-env.d.ts`:
 
 ```ts
 /// <reference types="vite-plugin-svgr/client" />

package/client.d.ts

@@ -5,7 +5,7 @@ declare module "*.svg?react" {
   import * as React from "react";
 
   const ReactComponent: React.FunctionComponent<
-    React.ComponentProps<"svg"> & { title?: string }
+    React.ComponentProps<"svg"> & { title?: string, titleId?: string, desc?: string, descId?: string }
   >;
 
   export default ReactComponent;

package/codemods/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "codemods",
+  "version": "0.0.0",
+  "type": "commonjs",
+  "exports": {
+    "./package.json": "./package.json"
+  }
+}

package/codemods/readme.md

@@ -0,0 +1,31 @@
+# Codemod
+
+## V4
+
+convert named export to default
+
+If you want to run it against `.js` or `.jsx` files, please use the command below:
+
+```
+npx jscodeshift@latest ./path/to/src/ \
+  --extensions=js,jsx \
+  --transform=./node_modules/vite-plugin-svgr/codemods/src/v4/default-export/default-export.js
+```
+
+If you want to run it against `.ts` or `.tsx` files, please use the command below:
+
+```
+npx jscodeshift@latest ./path/to/src/ \
+  --extensions=ts,tsx \
+  --parser=tsx \
+  --transform=./node_modules/vite-plugin-svgr/codemods/src/v4/default-export/default-export.js
+```
+
+**Note:** Applying the codemod might break your code formatting, so please don't forget to run `prettier` and/or `eslint` after you've applied the codemod!
+
+Above codemod will convert as imports as bellow
+
+```diff
+- import { ReactComponent as NoticeModeIconActive2 } from 'assets/icon.svg';
++ import NoticeModeIconActive2 from 'assets/icon.svg?react';
+```

package/codemods/src/v4/default-export/default-export.js

@@ -0,0 +1,33 @@
+module.exports = function (file, api) {
+  const jscodeshift = api.jscodeshift;
+  const root = jscodeshift(file.source);
+
+  root.find(jscodeshift.ImportDeclaration).forEach((path) => {
+    const importPath = path.node.source.value;
+
+    if (importPath.endsWith(".svg")) {
+      const hasDefaultSpecifier = path.node.specifiers.some((specifier) =>
+        jscodeshift.ImportDefaultSpecifier.check(specifier),
+      );
+
+      // Skip transformation if there is a default import specifier
+      if (!hasDefaultSpecifier) {
+        const updatedImportPath = `${importPath}?react`;
+
+        path.node.specifiers.forEach((specifier) => {
+          if (jscodeshift.ImportSpecifier.check(specifier)) {
+            // Convert named import to default import
+            const newSpecifier = jscodeshift.importDefaultSpecifier(
+              jscodeshift.identifier(specifier.local.name),
+            );
+            specifier.type = "ImportDefaultSpecifier";
+            specifier.local = newSpecifier.local;
+          }
+        });
+
+        path.node.source = jscodeshift.literal(updatedImportPath);
+      }
+    }
+  });
+  return root.toSource();
+};

package/dist/index.cjs

@@ -15,26 +15,42 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = vitePluginSvgr;
 const pluginutils_1 = require("@rollup/pluginutils");
 const fs_1 = __importDefault(require("fs"));
 const vite_1 = require("vite");
+const viteModule = __importStar(require("vite"));
+// @ts-ignore - check if transformWithOxc is available, i.e. rolldown-vite is installed and aliased
+let useOxc = viteModule.transformWithOxc != null;
+// @ts-ignore - assign transformer function
+let transformWith = useOxc ? viteModule.transformWithOxc : vite_1.transformWithEsbuild;
 function vitePluginSvgr({ svgrOptions, esbuildOptions, include = "**/*.svg?react", exclude, } = {}) {
     const filter = (0, pluginutils_1.createFilter)(include, exclude);
     const postfixRE = /[?#].*$/s;
     return {
         name: "vite-plugin-svgr",
-        enforce: "pre",
+        enforce: "pre", // to override `vite:asset`'s behavior
         async load(id) {
             if (filter(id)) {
                 const { transform } = await Promise.resolve().then(() => __importStar(require("@svgr/core")));
@@ -47,7 +63,11 @@ function vitePluginSvgr({ svgrOptions, esbuildOptions, include = "**/*.svg?react
                         defaultPlugins: [jsx],
                     },
                 });
-                const res = await (0, vite_1.transformWithEsbuild)(componentCode, id, {
+                const res = await transformWith(componentCode, id, useOxc ? {
+                    // @ts-ignore - "lang" is required for transformWithOxc
+                    lang: "jsx",
+                    ...esbuildOptions,
+                } : {
                     loader: "jsx",
                     ...esbuildOptions,
                 });
@@ -59,4 +79,3 @@ function vitePluginSvgr({ svgrOptions, esbuildOptions, include = "**/*.svg?react
         },
     };
 }
-exports.default = vitePluginSvgr;

package/dist/index.js

@@ -1,12 +1,17 @@
 import { createFilter } from "@rollup/pluginutils";
 import fs from "fs";
 import { transformWithEsbuild } from "vite";
+import * as viteModule from "vite";
+// @ts-ignore - check if transformWithOxc is available, i.e. rolldown-vite is installed and aliased
+let useOxc = viteModule.transformWithOxc != null;
+// @ts-ignore - assign transformer function
+let transformWith = useOxc ? viteModule.transformWithOxc : transformWithEsbuild;
 export default function vitePluginSvgr({ svgrOptions, esbuildOptions, include = "**/*.svg?react", exclude, } = {}) {
     const filter = createFilter(include, exclude);
     const postfixRE = /[?#].*$/s;
     return {
         name: "vite-plugin-svgr",
-        enforce: "pre",
+        enforce: "pre", // to override `vite:asset`'s behavior
         async load(id) {
             if (filter(id)) {
                 const { transform } = await import("@svgr/core");
@@ -19,7 +24,11 @@ export default function vitePluginSvgr({ svgrOptions, esbuildOptions, include =
                         defaultPlugins: [jsx],
                     },
                 });
-                const res = await transformWithEsbuild(componentCode, id, {
+                const res = await transformWith(componentCode, id, useOxc ? {
+                    // @ts-ignore - "lang" is required for transformWithOxc
+                    lang: "jsx",
+                    ...esbuildOptions,
+                } : {
                     loader: "jsx",
                     ...esbuildOptions,
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-svgr",
-  "version": "4.2.0",
+  "version": "4.5.0",
   "description": "Vite plugin to transform SVGs into React components",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,8 @@
   "repository": "pd4d10/vite-plugin-svgr",
   "files": [
     "dist",
-    "client.d.ts"
+    "client.d.ts",
+    "codemods"
   ],
   "keywords": [
     "vite",
@@ -32,16 +33,16 @@
   "author": "Rongjian Zhang",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^20.9.1",
-    "typescript": "^5.2.2"
+    "@types/node": "^24.3.0",
+    "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "vite": "^2.6.0 || 3 || 4 || 5"
+    "vite": ">=2.6.0"
   },
   "dependencies": {
-    "@rollup/pluginutils": "^5.0.5",
+    "@rollup/pluginutils": "^5.2.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0"
   },
-  "packageManager": "pnpm@8.7.6"
+  "packageManager": "pnpm@10.15.0+sha256.84c19e788d7d7ee248e4a6b7152f8ebba0f4fe7380a5f443ca17d76c030052d2"
 }

package/dist/index.mjs

@@ -1,38 +0,0 @@
-import fs from "fs";
-import { transformWithEsbuild } from "vite";
-import { createFilter } from "@rollup/pluginutils";
-function viteSvgr({
-  exportAsDefault,
-  svgrOptions,
-  esbuildOptions,
-  include = "**/*.svg",
-  exclude
-} = {}) {
-  const filter = createFilter(include, exclude);
-  return {
-    name: "vite-plugin-svgr",
-    async transform(code, id) {
-      if (filter(id)) {
-        const { transform } = await import("@svgr/core");
-        const svgCode = await fs.promises.readFile(id, "utf8");
-        const componentCode = await transform(svgCode, svgrOptions, {
-          filePath: id,
-          caller: {
-            previousExport: exportAsDefault ? null : code
-          }
-        });
-        const res = await transformWithEsbuild(componentCode, id, {
-          loader: "jsx",
-          ...esbuildOptions
-        });
-        return {
-          code: res.code,
-          map: null
-        };
-      }
-    }
-  };
-}
-export {
-  viteSvgr as default
-};