vite-plugin-svgr 2.3.0 → 3.0.0

package/README.md

@@ -8,18 +8,18 @@ Vite plugin to transform SVGs into React components. Uses [svgr](https://github.
 
 ```js
 // vite.config.js
-import svgr from 'vite-plugin-svgr'
+import svgr from "vite-plugin-svgr";
 
 export default {
   // ...
   plugins: [svgr()],
-}
+};
 ```
 
 Then SVG files can be imported as React components, just like [create-react-app](https://create-react-app.dev/docs/adding-images-fonts-and-files#adding-svgs) does:
 
 ```js
-import { ReactComponent as Logo } from './logo.svg'
+import { ReactComponent as Logo } from "./logo.svg";
 ```
 
 If you are using TypeScript, there is also a declaration helper for better type inference:
@@ -33,7 +33,7 @@ If you are using TypeScript, there is also a declaration helper for better type
 ```js
 svgr({
   // Set it to `true` to export React component as default.
-  // Notice that it will overrides the default behavior of Vite.
+  // Notice that it will override the default behavior of Vite.
   exportAsDefault: false,
 
   // svgr options: https://react-svgr.com/docs/options/
@@ -47,11 +47,11 @@ svgr({
   },
 
   //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should include. By default all svg files will be included.
-  include: '**/*.svg',
+  include: "**/*.svg",
 
   //  A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
-  exclude: '',
-})
+  exclude: "",
+});
 ```
 
 ## License

package/client.d.ts

@@ -1,10 +1,10 @@
 // https://github.com/facebook/create-react-app/blob/0ee4765c39f820e5f4820abf4bf2e47b3324da7f/packages/react-scripts/lib/react-app.d.ts#L47-L56
 // https://github.com/pd4d10/vite-plugin-svgr/pull/56 for preact compatiblility
 
-declare module '*.svg' {
-  import * as React from 'react'
+declare module "*.svg" {
+  import * as React from "react";
 
   export const ReactComponent: React.FunctionComponent<
-    React.ComponentProps<'svg'> & { title?: string }
-  >
+    React.ComponentProps<"svg"> & { title?: string }
+  >;
 }

package/dist/index.d.ts

@@ -1,23 +1,18 @@
-import type { Config } from '@svgr/core';
-import { FilterPattern } from '@rollup/pluginutils';
-import type { Plugin as Plugin_2 } from 'vite';
-import { transformWithEsbuild } from 'vite';
-
-declare function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, include, exclude, }?: ViteSvgrOptions): Plugin_2;
-export default viteSvgr;
-
-export declare interface ViteSvgrOptions {
-    /**
-     * Export React component as default. Notice that it will overrides
-     * the default behavior of Vite, which exports the URL as default
-     *
-     * @default false
-     */
-    exportAsDefault?: boolean;
-    svgrOptions?: Config;
-    esbuildOptions?: Parameters<typeof transformWithEsbuild>[2];
-    exclude?: FilterPattern;
-    include?: FilterPattern;
-}
-
-export { }
+import { FilterPattern } from "@rollup/pluginutils";
+import type { Config } from "@svgr/core";
+import type { Plugin } from "vite";
+import { transformWithEsbuild } from "vite";
+export interface ViteSvgrOptions {
+    /**
+     * Export React component as default. Notice that it will overrides
+     * the default behavior of Vite, which exports the URL as default
+     *
+     * @default false
+     */
+    exportAsDefault?: boolean;
+    svgrOptions?: Config;
+    esbuildOptions?: Parameters<typeof transformWithEsbuild>[2];
+    exclude?: FilterPattern;
+    include?: FilterPattern;
+}
+export default function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, include, exclude, }?: ViteSvgrOptions): Plugin;

package/dist/index.js

@@ -1,58 +1,29 @@
-"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 __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(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-const pluginutils = require("@rollup/pluginutils");
-const fs = require("fs");
-const vite = require("vite");
-function viteSvgr({
-  exportAsDefault,
-  svgrOptions,
-  esbuildOptions,
-  include = "**/*.svg",
-  exclude
-} = {}) {
-  const filter = pluginutils.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.replace(/\?.*$/, ""),
-          "utf8"
-        );
-        const componentCode = await transform(svgCode, svgrOptions, {
-          filePath: id,
-          caller: {
-            previousExport: exportAsDefault ? null : code
-          }
-        });
-        const res = await vite.transformWithEsbuild(componentCode, id, {
-          loader: "jsx",
-          ...esbuildOptions
-        });
-        return {
-          code: res.code,
-          map: null
-        };
-      }
-    }
-  };
+import { createFilter } from "@rollup/pluginutils";
+import fs from "fs";
+import { transformWithEsbuild } from "vite";
+export default 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.replace(/\?.*$/, ""), "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, // TODO:
+                };
+            }
+        },
+    };
 }
-module.exports = viteSvgr;

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "vite-plugin-svgr",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "Vite plugin to transform SVGs into React components",
+  "type": "module",
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./client.d.ts"
     }
   },
   "scripts": {
-    "dev": "tsdv watch",
-    "build": "tsdv build",
+    "dev": "tsc --watch",
+    "build": "tsc",
     "prepare": "npm run build"
   },
   "repository": "pd4d10/vite-plugin-svgr",
@@ -29,17 +31,16 @@
   "author": "Rongjian Zhang",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^18.11.12",
-    "tsdv": "^0.8.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.0"
+    "@types/node": "^18.16.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.2"
   },
   "peerDependencies": {
     "vite": "^2.6.0 || 3 || 4"
   },
   "dependencies": {
     "@rollup/pluginutils": "^5.0.2",
-    "@svgr/core": "^6.5.1"
+    "@svgr/core": "^7.0.0"
   },
-  "packageManager": "pnpm@7.14.2"
+  "packageManager": "pnpm@8.4.0"
 }

package/dist/index.mjs

@@ -1,41 +0,0 @@
-import { createFilter } from "@rollup/pluginutils";
-import fs from "fs";
-import { transformWithEsbuild } from "vite";
-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.replace(/\?.*$/, ""),
-          "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
-};