react-inlinesvg 3.0.2 → 3.1.0-0

package/dist/provider.js

@@ -0,0 +1,67 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = function(target, all) {
+    for(var name in all)__defProp(target, name, {
+        get: all[name],
+        enumerable: true
+    });
+};
+var __copyProps = function(to, from, except, desc) {
+    if (from && typeof from === "object" || typeof from === "function") {
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            var _loop = function() {
+                var key = _step.value;
+                if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+                    get: function() {
+                        return from[key];
+                    },
+                    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+                });
+            };
+            for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+    }
+    return to;
+};
+var __toCommonJS = function(mod) {
+    return __copyProps(__defProp({}, "__esModule", {
+        value: true
+    }), mod);
+};
+// src/provider.tsx
+var provider_exports = {};
+__export(provider_exports, {
+    default: function() {
+        return CacheProvider;
+    }
+});
+module.exports = __toCommonJS(provider_exports);
+var import_react = require("react");
+function CacheProvider(param) {
+    var children = param.children;
+    (0, import_react.useEffect)(function() {
+        window.REACT_INLINESVG_PERSISTENT_CACHE = true;
+        return function() {
+            delete window.REACT_INLINESVG_PERSISTENT_CACHE;
+        };
+    }, []);
+    return children;
+}
+//# sourceMappingURL=provider.js.map

package/dist/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AAYtB,SAAR,cAA+B,EAAE,SAAS,GAAU;AACzD,8BAAU,MAAM;AACd,WAAO,mCAAmC;AAE1C,WAAO,MAAM;AACX,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT","sourcesContent":["import { ReactNode, useEffect } from 'react';\n\ninterface Props {\n  children: ReactNode;\n}\n\ndeclare global {\n  interface Window {\n    REACT_INLINESVG_PERSISTENT_CACHE?: boolean;\n  }\n}\n\nexport default function CacheProvider({ children }: Props) {\n  useEffect(() => {\n    window.REACT_INLINESVG_PERSISTENT_CACHE = true;\n\n    return () => {\n      delete window.REACT_INLINESVG_PERSISTENT_CACHE;\n    };\n  }, []);\n\n  return children;\n}\n"]}

package/dist/provider.mjs

@@ -0,0 +1,15 @@
+// src/provider.tsx
+import { useEffect } from "react";
+function CacheProvider({ children }) {
+  useEffect(() => {
+    window.REACT_INLINESVG_PERSISTENT_CACHE = true;
+    return () => {
+      delete window.REACT_INLINESVG_PERSISTENT_CACHE;
+    };
+  }, []);
+  return children;
+}
+export {
+  CacheProvider as default
+};
+//# sourceMappingURL=provider.mjs.map

package/dist/provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx"],"sourcesContent":["import { ReactNode, useEffect } from 'react';\n\ninterface Props {\n  children: ReactNode;\n}\n\ndeclare global {\n  interface Window {\n    REACT_INLINESVG_PERSISTENT_CACHE?: boolean;\n  }\n}\n\nexport default function CacheProvider({ children }: Props) {\n  useEffect(() => {\n    window.REACT_INLINESVG_PERSISTENT_CACHE = true;\n\n    return () => {\n      delete window.REACT_INLINESVG_PERSISTENT_CACHE;\n    };\n  }, []);\n\n  return children;\n}\n"],"mappings":";AAAA,SAAoB,iBAAiB;AAYtB,SAAR,cAA+B,EAAE,SAAS,GAAU;AACzD,YAAU,MAAM;AACd,WAAO,mCAAmC;AAE1C,WAAO,MAAM;AACX,aAAO,OAAO;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-inlinesvg",
-  "version": "3.0.2",
+  "version": "3.1.0-0",
   "description": "An SVG loader for React",
   "author": "Gil Barbara <gilbarbara@gmail.com>",
   "contributors": [
@@ -22,14 +22,23 @@
     "url": "https://github.com/gilbarbara/react-inlinesvg/issues"
   },
   "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,
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -39,46 +48,46 @@
     "react-from-dom": "^0.6.2"
   },
   "devDependencies": {
-    "@gilbarbara/eslint-config": "^0.3.7",
-    "@gilbarbara/helpers": "^0.6.3",
-    "@gilbarbara/prettier-config": "^0.1.0",
+    "@gilbarbara/eslint-config": "^0.5.2",
+    "@gilbarbara/helpers": "^0.8.1",
+    "@gilbarbara/prettier-config": "^1.0.0",
     "@gilbarbara/tsconfig": "^0.1.1",
-    "@size-limit/preset-small-lib": "^8.2.4",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@size-limit/preset-small-lib": "^8.2.6",
+    "@swc/core": "^1.3.74",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@types/exenv": "^1.2.0",
     "@types/fetch-mock": "^7.3.5",
-    "@types/jest": "^29.4.0",
-    "@types/node": "^18.14.1",
-    "@types/node-fetch": "^2.6.2",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "cross-fetch": "^3.1.5",
+    "@types/jest": "^29.5.3",
+    "@types/node": "^20.4.8",
+    "@types/node-fetch": "^2.6.4",
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
+    "browser-cache-mock": "^0.1.7",
+    "cross-fetch": "^4.0.0",
     "del-cli": "^5.0.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.4.3",
-    "jest-environment-jsdom": "^29.4.3",
-    "jest-extended": "^3.2.4",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
+    "jest-extended": "^4.0.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^2.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "repo-tools": "^0.2.2",
-    "size-limit": "^8.2.4",
-    "start-server-and-test": "^1.15.4",
-    "ts-jest": "^29.0.5",
+    "size-limit": "^8.2.6",
+    "start-server-and-test": "^2.0.0",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5"
+    "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",
     "test": "start-server-and-test start http://127.0.0.1:1337 test:coverage",
     "test:coverage": "jest --coverage --bail",
@@ -90,6 +99,19 @@
     "prepublishOnly": "npm run validate",
     "prepare": "husky install"
   },
+  "tsup": {
+    "dts": true,
+    "entry": [
+      "src/index.tsx",
+      "src/provider.tsx"
+    ],
+    "format": [
+      "cjs",
+      "esm"
+    ],
+    "sourcemap": true,
+    "splitting": false
+  },
   "eslintConfig": {
     "extends": [
       "@gilbarbara/eslint-config"
@@ -111,14 +133,14 @@
   "prettier": "@gilbarbara/prettier-config",
   "size-limit": [
     {
-      "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"
     }
   ]
 }

package/src/cache.ts

@@ -0,0 +1,164 @@
+import { CACHE_MAX_RETRIES, CACHE_NAME, STATUS } from './config';
+import { request, sleep } from './helpers';
+import { StorageItem } from './types';
+
+export default class CacheStore {
+  private cacheApi: Cache | undefined;
+  private readonly cacheStore: Map<string, StorageItem>;
+  private readonly subscribers: Array<() => void> = [];
+  private readonly usePersistentCache: boolean;
+  public isReady = false;
+
+  constructor() {
+    this.cacheStore = new Map<string, StorageItem>();
+
+    this.usePersistentCache =
+      'REACT_INLINESVG_PERSISTENT_CACHE' in window && !!window.REACT_INLINESVG_PERSISTENT_CACHE;
+
+    if (this.usePersistentCache) {
+      caches.open(CACHE_NAME).then(cache => {
+        this.cacheApi = cache;
+        this.isReady = true;
+
+        this.subscribers.forEach(callback => callback());
+      });
+    } else {
+      this.isReady = true;
+    }
+  }
+
+  public onReady(callback: () => void) {
+    if (this.isReady) {
+      callback();
+    } else {
+      this.subscribers.push(callback);
+    }
+  }
+
+  public async get(url: string, fetchOptions?: RequestInit) {
+    await (this.usePersistentCache
+      ? this.fetchAndAddToPersistentCache(url, fetchOptions)
+      : this.fetchAndAddToInternalCache(url, fetchOptions));
+
+    return this.cacheStore.get(url)?.content ?? '';
+  }
+
+  public set(url: string, data: StorageItem) {
+    this.cacheStore.set(url, data);
+  }
+
+  public isCached(url: string) {
+    return this.cacheStore.get(url)?.status === STATUS.LOADED;
+  }
+
+  private async fetchAndAddToInternalCache(url: string, fetchOptions?: RequestInit) {
+    const cache = this.cacheStore.get(url);
+
+    if (cache?.status === STATUS.LOADING) {
+      await this.handleLoading(url, async () => {
+        this.cacheStore.set(url, { content: '', status: STATUS.IDLE });
+        await this.fetchAndAddToInternalCache(url, fetchOptions);
+      });
+
+      return;
+    }
+
+    if (!cache?.content) {
+      this.cacheStore.set(url, { content: '', status: STATUS.LOADING });
+
+      try {
+        const content = await request(url, fetchOptions);
+
+        this.cacheStore.set(url, { content, status: STATUS.LOADED });
+      } catch (error: any) {
+        this.cacheStore.set(url, { content: '', status: STATUS.FAILED });
+        throw error;
+      }
+    }
+  }
+
+  private async fetchAndAddToPersistentCache(url: string, fetchOptions?: RequestInit) {
+    const cache = this.cacheStore.get(url);
+
+    if (cache?.status === STATUS.LOADED) {
+      return;
+    }
+
+    if (cache?.status === STATUS.LOADING) {
+      await this.handleLoading(url, async () => {
+        this.cacheStore.set(url, { content: '', status: STATUS.IDLE });
+        await this.fetchAndAddToPersistentCache(url, fetchOptions);
+      });
+
+      return;
+    }
+
+    this.cacheStore.set(url, { content: '', status: STATUS.LOADING });
+
+    const data = await this.cacheApi?.match(url);
+
+    if (data) {
+      const content = await data.text();
+
+      this.cacheStore.set(url, { content, status: STATUS.LOADED });
+
+      return;
+    }
+
+    try {
+      await this.cacheApi?.add(new Request(url, fetchOptions));
+
+      const response = await this.cacheApi?.match(url);
+      const content = (await response?.text()) ?? '';
+
+      this.cacheStore.set(url, { content, status: STATUS.LOADED });
+    } catch (error: any) {
+      this.cacheStore.set(url, { content: '', status: STATUS.FAILED });
+      throw error;
+    }
+  }
+
+  private async handleLoading(url: string, callback: () => Promise<void>) {
+    let retryCount = 0;
+
+    // eslint-disable-next-line no-await-in-loop
+    while (this.cacheStore.get(url)?.status === STATUS.LOADING && retryCount < CACHE_MAX_RETRIES) {
+      // eslint-disable-next-line no-await-in-loop
+      await sleep(0.1);
+      retryCount += 1;
+    }
+
+    if (retryCount >= CACHE_MAX_RETRIES) {
+      await callback();
+    }
+  }
+
+  public keys(): Array<string> {
+    return [...this.cacheStore.keys()];
+  }
+
+  public data(): Array<Record<string, StorageItem>> {
+    return [...this.cacheStore.entries()].map(([key, value]) => ({ [key]: value }));
+  }
+
+  public async delete(url: string) {
+    if (this.cacheApi) {
+      await this.cacheApi.delete(url);
+    }
+
+    this.cacheStore.delete(url);
+  }
+
+  public async clear() {
+    if (this.cacheApi) {
+      const keys = await this.cacheApi.keys();
+
+      for (const key of keys) {
+        // eslint-disable-next-line no-await-in-loop
+        await this.cacheApi.delete(key);
+      }
+    }
+
+    this.cacheStore.clear();
+  }
+}

package/src/config.ts

@@ -0,0 +1,11 @@
+export const CACHE_NAME = 'react-inlinesvg';
+export const CACHE_MAX_RETRIES = 10;
+
+export const STATUS = {
+  IDLE: 'idle',
+  LOADING: 'loading',
+  LOADED: 'loaded',
+  FAILED: 'failed',
+  READY: 'ready',
+  UNSUPPORTED: 'unsupported',
+} as const;

package/src/helpers.ts

@@ -1,15 +1,6 @@
 import { canUseDOM as canUseDOMFlag } from 'exenv';
 
-import { PlainObject } from './types';
-
-export const STATUS = {
-  FAILED: 'failed',
-  LOADED: 'loaded',
-  LOADING: 'loading',
-  PENDING: 'pending',
-  READY: 'ready',
-  UNSUPPORTED: 'unsupported',
-};
+import type { PlainObject } from './types';
 
 export function canUseDOM(): boolean {
   return canUseDOMFlag;
@@ -19,6 +10,28 @@ export function isSupportedEnvironment(): boolean {
   return supportsInlineSVG() && typeof window !== 'undefined' && window !== null;
 }
 
+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 {
   /* istanbul ignore next */
   if (!document) {