react-inlinesvg - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0-0

package.json

 {
   "name": "react-inlinesvg",
-  "version": "3.0.3",
+  "version": "3.1.0-0",
   "description": "An SVG loader for React",
@@ -25,10 +25,19 @@ "author": "Gil Barbara <[e-mail]>",
   "homepage": "https://github.com/gilbarbara/react-inlinesvg#readme",
-  "main": "lib/index.js",
-  "module": "esm/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./provider": {
+      "import": "./dist/provider.mjs",
+      "default": "./dist/provider.js"
+    }
+  },
   "files": [
-    "esm",
-    "lib",
+    "dist",
     "src"
   ],
-  "types": "esm",
+  "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -48,2 +57,3 @@ "peerDependencies": {
     "@size-limit/preset-small-lib": "^8.2.6",
+    "@swc/core": "^1.3.74",
     "@testing-library/jest-dom": "^5.17.0",
@@ -58,2 +68,3 @@ "@testing-library/react": "^14.0.0",
     "@types/react-dom": "^18.2.7",
+    "browser-cache-mock": "^0.1.7",
     "cross-fetch": "^4.0.0",
@@ -76,11 +87,9 @@ "del-cli": "^5.0.0",
     "ts-node": "^10.9.1",
+    "tsup": "^7.2.0",
     "typescript": "^5.1.6"
   },
   "scripts": {
-    "build": "npm run clean && npm run build:cjs && npm run build:esm",
-    "build:cjs": "tsc",
-    "build:esm": "tsc -m es6 --outDir esm",
-    "clean": "del lib/* && del esm/*",
-    "watch:cjs": "npm run build:cjs -- -w",
-    "watch:esm": "npm run build:esm -- -w",
+    "build": "npm run clean && tsup",
+    "watch": "tsup --watch",
+    "clean": "del dist/*",
     "start": "http-server test/__fixtures__ -p 1337 --cors",
@@ -97,2 +106,15 @@ "test": "start-server-and-test start http://127.0.0.1:1337 test:coverage",
   },
+  "tsup": {
+    "dts": true,
+    "entry": [
+      "src/index.tsx",
+      "src/provider.tsx"
+    ],
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "sourcemap": true,
+    "splitting": false
+  },
   "eslintConfig": {
@@ -119,12 +141,12 @@ "extends": [
     {
-      "name": "lib",
-      "path": "./lib/index.js",
-      "limit": "9 kB"
+      "name": "commonjs",
+      "path": "./dist/index.js",
+      "limit": "11 KB"
     },
     {
       "name": "esm",
-      "path": "./esm/index.js",
-      "limit": "9 kB"
+      "path": "./dist/index.mjs",
+      "limit": "9 KB"
     }
   ]
 }

README.md

@@ -46,7 +46,7 @@ # react-inlinesvg
 **src** {string} - **required**.  
-The SVG file you want to load. It can be a require, URL or a string (base64 or url encoded).
-_If you are using create-react-app and your file resides in the `public` directory you can use the path directly without require._
+The SVG file you want to load. It can be a require, URL, or a string (base64 or URL encoded).
+_If you are using create-react-app and your file resides in the `public` directory, you can use the path directly without require._
 
 **baseURL** {string}  
-An URL to prefix each ID in case you are using the `<base>` tag and `uniquifyIDs`.
+An URL to prefix each ID in case you use the `<base>` tag and `uniquifyIDs`.
 
@@ -104,3 +104,3 @@ **children** {ReactNode}
 A callback to be invoked upon successful load.  
-This will receive 2 arguments: the `src` prop and a `hasCache` boolean
+This will receive 2 arguments: the `src` prop and an `isCached` boolean
 
@@ -131,3 +131,3 @@ **preProcessor** {function} ▶︎ `string`
   onError={(error) => console.log(error.message)}
-  onLoad={(src, hasCache) => console.log(src, hasCache)}
+  onLoad={(src, isCached) => console.log(src, isCached)}
   preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
@@ -144,4 +144,22 @@ src="https://cdn.svgporn.com/logos/react.svg"
 The internal cache is exported as `cacheStore` if you need to debug or pre-cache some files.  
+Since version 4.x, the `cacheStore` is an instance of the [Cache](src/cache.ts) class instead of a plain object.  
 ⚠️ Use it at your own risk.
 
+### Persistent cache
+
+Starting with version 4.x you can use browser's [cache](https://developer.mozilla.org/en-US/docs/Web/API/Cache) to store the SVGs persistently.  
+To set it up, you need to wrap your app with the provider:
+
+```typescript
+import { createRoot } from 'react-dom/client';
+import CacheProvider from 'react-inlinesvg/provider';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <CacheProvider>
+    <App />
+  </CacheProvider>
+);
+```
+
 ## Browser Support
@@ -155,8 +173,8 @@
 
-If you are loading remote SVGs, you'll need to make sure it has [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) support.
+If you are loading remote SVGs, you'll need to ensure it has [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) support.
 
-## Why you need this package?
+## Why do you need this package?
 
-One of the reasons SVGs are awesome is because you can style them with CSS.
-Unfortunately, this winds up not being too useful in practice because the style element has to be in the same document. This leaves you with three bad options:
+One of the reasons SVGs are awesome is that you can style them with CSS.
+Unfortunately, this is not useful in practice because the style element has to be in the same document. This leaves you with three bad options:
 
@@ -163,0 +181,0 @@ 1. Embed the CSS in the SVG document

src/helpers.ts

@@ -5,11 +5,2 @@ import { canUseDOM as canUseDOMFlag } from 'exenv';
 
-export const STATUS = {
-  IDLE: 'idle',
-  LOADING: 'loading',
-  LOADED: 'loaded',
-  FAILED: 'failed',
-  READY: 'ready',
-  UNSUPPORTED: 'unsupported',
-} as const;
-
 export function canUseDOM(): boolean {
@@ -23,2 +14,24 @@ return canUseDOMFlag;
 
+export async function request(url: string, options?: RequestInit) {
+  const response = await fetch(url, options);
+  const contentType = response.headers.get('content-type');
+  const [fileType] = (contentType || '').split(/ ?; ?/);
+
+  if (response.status > 299) {
+    throw new Error('Not found');
+  }
+
+  if (!['image/svg+xml', 'text/plain'].some(d => fileType.includes(d))) {
+    throw new Error(`Content type isn't valid: ${fileType}`);
+  }
+
+  return response.text();
+}
+
+export function sleep(seconds = 1) {
+  return new Promise(resolve => {
+    setTimeout(resolve, seconds * 1000);
+  });
+}
+
 export function supportsInlineSVG(): boolean {
@@ -25,0 +38,0 @@ /* istanbul ignore next */

src/types.ts

 import * as React from 'react';
 
-import { STATUS } from './helpers';
+import { STATUS } from './config';
 
@@ -30,3 +30,3 @@ export type ErrorCallback = (error: Error | FetchError) => void;
   element: React.ReactNode;
-  hasCache: boolean;
+  isCached: boolean;
   status: Status;
@@ -33,0 +33,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

158513

increased by64.23%

Lines of code

2492

increased by51.4%

Number of lines in readme file

201

increased by9.84%

Worsened metrics

Dev dependency count

35

increased by9.38%

Number of package files

21

decreased by-12.5%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes