vite-plugin-svgr 4.5.0 → 5.0.0

package/README.md

@@ -55,6 +55,11 @@ svgr({
     // ...
   },
 
+  // oxc options, used by rolldown / vite 8+
+  oxcOptions: {
+    // ...
+  },
+
   // A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include.
   include: "**/*.svg?react",
 

package/dist/index.cjs

@@ -38,44 +38,50 @@ var __importDefault = (this && this.__importDefault) || function (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 core_1 = require("@svgr/core");
+const plugin_jsx_1 = __importDefault(require("@svgr/plugin-jsx"));
+const node_fs_1 = __importDefault(require("node:fs"));
+function vitePluginSvgr({ svgrOptions, esbuildOptions, oxcOptions, include = "**/*.svg?react", exclude, } = {}) {
     const filter = (0, pluginutils_1.createFilter)(include, exclude);
     const postfixRE = /[?#].*$/s;
     return {
         name: "vite-plugin-svgr",
         enforce: "pre", // to override `vite:asset`'s behavior
         async load(id) {
-            if (filter(id)) {
-                const { transform } = await Promise.resolve().then(() => __importStar(require("@svgr/core")));
-                const { default: jsx } = await Promise.resolve().then(() => __importStar(require("@svgr/plugin-jsx")));
-                const filePath = id.replace(postfixRE, "");
-                const svgCode = await fs_1.default.promises.readFile(filePath, "utf8");
-                const componentCode = await transform(svgCode, svgrOptions, {
-                    filePath,
-                    caller: {
-                        defaultPlugins: [jsx],
-                    },
-                });
-                const res = await transformWith(componentCode, id, useOxc ? {
-                    // @ts-ignore - "lang" is required for transformWithOxc
+            if (!filter(id)) {
+                return;
+            }
+            const filePath = id.replace(postfixRE, "");
+            const svgCode = await node_fs_1.default.promises.readFile(filePath, "utf8");
+            const componentCode = await (0, core_1.transform)(svgCode, svgrOptions, {
+                filePath,
+                caller: {
+                    defaultPlugins: [plugin_jsx_1.default],
+                },
+            });
+            const meta = this?.meta;
+            if (meta?.rolldownVersion != null) {
+                /* c8 ignore next */
+                const { transformWithOxc } = await Promise.resolve().then(() => __importStar(require("vite")));
+                const res = await transformWithOxc(componentCode, id, {
                     lang: "jsx",
-                    ...esbuildOptions,
-                } : {
-                    loader: "jsx",
-                    ...esbuildOptions,
+                    ...oxcOptions,
                 });
                 return {
                     code: res.code,
                     map: null, // TODO:
                 };
             }
+            /* c8 ignore next */
+            const { transformWithEsbuild } = await Promise.resolve().then(() => __importStar(require("vite")));
+            const res = await transformWithEsbuild(componentCode, id, {
+                loader: "jsx",
+                ...esbuildOptions,
+            });
+            return {
+                code: res.code,
+                map: null, // TODO:
+            };
         },
     };
 }

package/dist/index.d.ts

@@ -1,11 +1,11 @@
-import { FilterPattern } from "@rollup/pluginutils";
-import type { Config } from "@svgr/core";
-import type { Plugin } from "vite";
-import { transformWithEsbuild } from "vite";
+import { type FilterPattern } from "@rollup/pluginutils";
+import { type Config } from "@svgr/core";
+import type { EsbuildTransformOptions, Plugin, TransformOptions as OxcTransformOptions } from "vite";
 export interface VitePluginSvgrOptions {
     svgrOptions?: Config;
-    esbuildOptions?: Parameters<typeof transformWithEsbuild>[2];
+    esbuildOptions?: EsbuildTransformOptions;
+    oxcOptions?: OxcTransformOptions;
     exclude?: FilterPattern;
     include?: FilterPattern;
 }
-export default function vitePluginSvgr({ svgrOptions, esbuildOptions, include, exclude, }?: VitePluginSvgrOptions): Plugin;
+export default function vitePluginSvgr({ svgrOptions, esbuildOptions, oxcOptions, include, exclude, }?: VitePluginSvgrOptions): Plugin;

package/dist/index.js

@@ -1,42 +1,48 @@
 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, } = {}) {
+import { transform as svgrTransform } from "@svgr/core";
+import jsx from "@svgr/plugin-jsx";
+import fs from "node:fs";
+export default function vitePluginSvgr({ svgrOptions, esbuildOptions, oxcOptions, include = "**/*.svg?react", exclude, } = {}) {
     const filter = createFilter(include, exclude);
     const postfixRE = /[?#].*$/s;
     return {
         name: "vite-plugin-svgr",
         enforce: "pre", // to override `vite:asset`'s behavior
         async load(id) {
-            if (filter(id)) {
-                const { transform } = await import("@svgr/core");
-                const { default: jsx } = await import("@svgr/plugin-jsx");
-                const filePath = id.replace(postfixRE, "");
-                const svgCode = await fs.promises.readFile(filePath, "utf8");
-                const componentCode = await transform(svgCode, svgrOptions, {
-                    filePath,
-                    caller: {
-                        defaultPlugins: [jsx],
-                    },
-                });
-                const res = await transformWith(componentCode, id, useOxc ? {
-                    // @ts-ignore - "lang" is required for transformWithOxc
+            if (!filter(id)) {
+                return;
+            }
+            const filePath = id.replace(postfixRE, "");
+            const svgCode = await fs.promises.readFile(filePath, "utf8");
+            const componentCode = await svgrTransform(svgCode, svgrOptions, {
+                filePath,
+                caller: {
+                    defaultPlugins: [jsx],
+                },
+            });
+            const meta = this?.meta;
+            if (meta?.rolldownVersion != null) {
+                /* c8 ignore next */
+                const { transformWithOxc } = await import("vite");
+                const res = await transformWithOxc(componentCode, id, {
                     lang: "jsx",
-                    ...esbuildOptions,
-                } : {
-                    loader: "jsx",
-                    ...esbuildOptions,
+                    ...oxcOptions,
                 });
                 return {
                     code: res.code,
                     map: null, // TODO:
                 };
             }
+            /* c8 ignore next */
+            const { transformWithEsbuild } = await import("vite");
+            const res = await transformWithEsbuild(componentCode, id, {
+                loader: "jsx",
+                ...esbuildOptions,
+            });
+            return {
+                code: res.code,
+                map: null, // TODO:
+            };
         },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-svgr",
-  "version": "4.5.0",
+  "version": "5.0.0",
   "description": "Vite plugin to transform SVGs into React components",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,8 +8,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     },
     "./client": {
       "types": "./client.d.ts"
@@ -17,8 +16,12 @@
   },
   "scripts": {
     "dev": "tsc --watch",
-    "build": "tsc --module commonjs && mv dist/index.js dist/index.cjs && tsc",
-    "prepare": "npm run build"
+    "build": "tsc -p tsconfig.json",
+    "prepare": "npm run build",
+    "test": "node --import tsx --test test/**/*.test.ts",
+    "test:e2e": "node --import tsx --test test/process.test.ts",
+    "test:coverage": "c8 node --import tsx --test test/**/*.test.ts",
+    "test:compat": "node scripts/test-vite-compat.js"
   },
   "repository": "pd4d10/vite-plugin-svgr",
   "files": [
@@ -34,15 +37,44 @@
   "license": "MIT",
   "devDependencies": {
     "@types/node": "^24.3.0",
-    "typescript": "^5.9.2"
+    "c8": "^10.1.3",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.2",
+    "vite": "^8.0.3",
+    "vite3": "npm:vite@3.2.11",
+    "vite4": "npm:vite@4.5.14",
+    "vite5": "npm:vite@5.4.21",
+    "vite6": "npm:vite@6.4.1",
+    "vite7": "npm:vite@7.3.1",
+    "vite8": "npm:vite@8.0.3"
   },
   "peerDependencies": {
-    "vite": ">=2.6.0"
+    "vite": ">=3.0.0"
   },
   "dependencies": {
     "@rollup/pluginutils": "^5.2.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0"
   },
-  "packageManager": "pnpm@10.15.0+sha256.84c19e788d7d7ee248e4a6b7152f8ebba0f4fe7380a5f443ca17d76c030052d2"
+  "packageManager": "pnpm@10.15.0+sha256.84c19e788d7d7ee248e4a6b7152f8ebba0f4fe7380a5f443ca17d76c030052d2",
+  "c8": {
+    "all": true,
+    "include": [
+      "src/**/*.ts"
+    ],
+    "exclude": [
+      "dist/**",
+      "codemods/**",
+      "test/**"
+    ],
+    "reporter": [
+      "text",
+      "lcov"
+    ],
+    "check-coverage": true,
+    "branches": 100,
+    "functions": 100,
+    "lines": 100,
+    "statements": 100
+  }
 }