vite-plugin-svgr 1.0.1 → 2.1.0

package/README.md

@@ -8,18 +8,11 @@ Vite plugin to transform SVGs into React components. Uses [svgr](https://github.
 
 ```js
 // vite.config.js
-import svgrPlugin from 'vite-plugin-svgr'
+import svgr from 'vite-plugin-svgr'
 
 export default {
   // ...
-  plugins: [
-    svgrPlugin({
-      svgrOptions: {
-        icon: true,
-        // ...svgr options (https://react-svgr.com/docs/options/)
-      },
-    }),
-  ],
+  plugins: [svgr()],
 }
 ```
 
@@ -29,16 +22,30 @@ Then SVG files can be imported as React components, just like [create-react-app]
 import { ReactComponent as Logo } from './logo.svg'
 ```
 
-If you are using TypeScript, `vite-plugin-svgr/client` can be added to `tsconfig.json`:
+If you are using TypeScript, there is also a declaration helper for better type inference:
 
-```json
-{
-  // ...
-  "compilerOptions": {
+```ts
+/// <reference types="vite-plugin-svgr/client" />
+```
+
+### Options
+
+```js
+svgr({
+  // Set it to `true` to export React component as default.
+  // Notice that it will overrides the default behavior of Vite.
+  exportAsDefault: false,
+
+  // svgr options: https://react-svgr.com/docs/options/
+  svgrOptions: {
     // ...
-    "types": ["vite-plugin-svgr/client"]
-  }
-}
+  },
+
+  // esbuild options, to transform jsx to js
+  esbuildOptions: {
+    // ...
+  },
+})
 ```
 
 ## License

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import type { Config } from '@svgr/core';
+import { transformWithEsbuild } from 'vite';
+import type { Plugin } 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];
+}
+export default function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, }?: ViteSvgrOptions): Plugin;

package/{lib → dist}/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -21,21 +25,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
 const fs_1 = __importDefault(require("fs"));
 const vite_1 = require("vite");
-module.exports = function svgrPlugin({ svgrOptions, esbuildOptions, } = {}) {
+function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, } = {}) {
     return {
-        name: 'vite:svgr',
+        name: 'vite-plugin-svgr',
         async transform(code, id) {
             if (id.endsWith('.svg')) {
-                const { transform: convert } = await Promise.resolve().then(() => __importStar(require('@svgr/core')));
+                const { transform } = await Promise.resolve().then(() => __importStar(require('@svgr/core')));
                 const svgCode = await fs_1.default.promises.readFile(id, 'utf8');
-                const componentCode = await convert(svgCode, svgrOptions, {
-                    componentName: 'ReactComponent',
-                }).then((res) => {
-                    return res.replace('export default ReactComponent', `export { ReactComponent }`);
+                const componentCode = await transform(svgCode, svgrOptions, {
+                    filePath: id,
+                    caller: {
+                        previousExport: exportAsDefault ? null : code,
+                    },
                 });
-                const res = await (0, vite_1.transformWithEsbuild)(componentCode + '\n' + code, id, Object.assign({ loader: 'jsx' }, esbuildOptions));
+                const res = await (0, vite_1.transformWithEsbuild)(componentCode, id, Object.assign({ loader: 'jsx' }, esbuildOptions));
                 return {
                     code: res.code,
                     map: null, // TODO:
@@ -43,4 +49,5 @@ module.exports = function svgrPlugin({ svgrOptions, esbuildOptions, } = {}) {
             }
         },
     };
-};
+}
+exports.default = viteSvgr;

package/dist/index.mjs

@@ -0,0 +1,24 @@
+import fs from 'fs';
+import { transformWithEsbuild } from 'vite';
+export default function viteSvgr({ exportAsDefault, svgrOptions, esbuildOptions, } = {}) {
+    return {
+        name: 'vite-plugin-svgr',
+        async transform(code, id) {
+            if (id.endsWith('.svg')) {
+                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, Object.assign({ loader: 'jsx' }, esbuildOptions));
+                return {
+                    code: res.code,
+                    map: null, // TODO:
+                };
+            }
+        },
+    };
+}

package/package.json

@@ -1,11 +1,25 @@
 {
   "name": "vite-plugin-svgr",
-  "version": "1.0.1",
+  "version": "2.1.0",
   "description": "Vite plugin to transform SVGs into React components",
-  "main": "lib/index.js",
+  "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"
+    }
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc && tsc --module esnext --outDir temp && mv temp/index.js dist/index.mjs && rm -rf temp",
+    "prepare": "rm -rf lib && npm run build"
+  },
   "repository": "pd4d10/vite-plugin-svgr",
   "files": [
-    "lib",
+    "dist",
     "client.d.ts"
   ],
   "keywords": [
@@ -15,20 +29,14 @@
   "author": "Rongjian Zhang",
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^17.0.8",
-    "typescript": "^4.5.4",
-    "vite": "^2.7.10"
+    "@types/node": "^17.0.30",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.6"
   },
   "peerDependencies": {
     "vite": "^2.6.0"
   },
   "dependencies": {
-    "@svgr/core": "^6.2.0"
-  },
-  "scripts": {
-    "dev": "tsc --watch",
-    "build": "tsc",
-    "prepublish": "npm run build"
-  },
-  "readme": "# vite-plugin-svgr\n\n[![npm](https://img.shields.io/npm/v/vite-plugin-svgr.svg)](https://www.npmjs.com/package/vite-plugin-svgr)\n\nVite plugin to transform SVGs into React components. Uses [svgr](https://github.com/gregberge/svgr) under the hood.\n\n## Usage\n\n```js\n// vite.config.js\nimport svgrPlugin from 'vite-plugin-svgr'\n\nexport default {\n  // ...\n  plugins: [\n    svgrPlugin({\n      svgrOptions: {\n        icon: true,\n        // ...svgr options (https://react-svgr.com/docs/options/)\n      },\n    }),\n  ],\n}\n```\n\nThen 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:\n\n```js\nimport { ReactComponent as Logo } from './logo.svg'\n```\n\nIf you are using TypeScript, `vite-plugin-svgr/client` can be added to `tsconfig.json`:\n\n```json\n{\n  // ...\n  \"compilerOptions\": {\n    // ...\n    \"types\": [\"vite-plugin-svgr/client\"]\n  }\n}\n```\n\n## License\n\nMIT\n"
-}
+    "@svgr/core": "^6.2.1"
+  }
+}

package/lib/index.d.ts

@@ -1,9 +0,0 @@
-import type { Config } from '@svgr/core';
-import { transformWithEsbuild } from 'vite';
-import type { Plugin } from 'vite';
-declare type Options = {
-    svgrOptions?: Config;
-    esbuildOptions?: Parameters<typeof transformWithEsbuild>[2];
-};
-declare const _default: ({ svgrOptions, esbuildOptions, }?: Options) => Plugin;
-export = _default;