react-inlinesvg 4.2.0 → 4.3.0

package/dist/provider.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/modules/helpers.ts","../src/provider.tsx"],"sourcesContent":["import type { PlainObject } from '../types';\n\nfunction randomCharacter(character: string) {\n  return character[Math.floor(Math.random() * character.length)];\n}\n\nexport function canUseDOM(): boolean {\n  return !!(typeof window !== 'undefined' && window.document?.createElement);\n}\n\nexport function isSupportedEnvironment(): boolean {\n  return supportsInlineSVG() && typeof window !== 'undefined' && window !== null;\n}\n\n/**\n *  Remove properties from an object\n */\nexport function omit<T extends PlainObject, K extends keyof T>(\n  input: T,\n  ...filter: K[]\n): Omit<T, K> {\n  const output: any = {};\n\n  for (const key in input) {\n    if ({}.hasOwnProperty.call(input, key)) {\n      if (!filter.includes(key as unknown as K)) {\n        output[key] = input[key];\n      }\n    }\n  }\n\n  return output as Omit<T, K>;\n}\n\nexport function randomString(length: number): string {\n  const letters = 'abcdefghijklmnopqrstuvwxyz';\n  const numbers = '1234567890';\n  const charset = `${letters}${letters.toUpperCase()}${numbers}`;\n\n  let R = '';\n\n  for (let index = 0; index < length; index++) {\n    R += randomCharacter(charset);\n  }\n\n  return R;\n}\n\nexport async function request(url: string, options?: RequestInit) {\n  const response = await fetch(url, options);\n  const contentType = response.headers.get('content-type');\n  const [fileType] = (contentType ?? '').split(/ ?; ?/);\n\n  if (response.status > 299) {\n    throw new Error('Not found');\n  }\n\n  if (!['image/svg+xml', 'text/plain'].some(d => fileType.includes(d))) {\n    throw new Error(`Content type isn't valid: ${fileType}`);\n  }\n\n  return response.text();\n}\n\nexport function sleep(seconds = 1) {\n  return new Promise(resolve => {\n    setTimeout(resolve, seconds * 1000);\n  });\n}\n\nexport function supportsInlineSVG(): boolean {\n  /* c8 ignore next 3 */\n  if (!document) {\n    return false;\n  }\n\n  const div = document.createElement('div');\n\n  div.innerHTML = '<svg />';\n  const svg = div.firstChild as SVGSVGElement;\n\n  return !!svg && svg.namespaceURI === 'http://www.w3.org/2000/svg';\n}\n","import { ReactNode } from 'react';\n\nimport { canUseDOM } from './modules/helpers';\n\ninterface Props {\n  children: ReactNode;\n  name?: string;\n}\n\nexport default function CacheProvider({ children, name }: Props) {\n  if (canUseDOM()) {\n    window.REACT_INLINESVG_CACHE_NAME = name;\n    window.REACT_INLINESVG_PERSISTENT_CACHE = true;\n  }\n\n  return children;\n}\n"],"mappings":";;;AAMO,SAAS,YAAqB;AACnC,SAAO,CAAC,EAAE,OAAO,WAAW,eAAe,OAAO,UAAU;AAC9D;;;ACCe,SAAR,cAA+B,EAAE,UAAU,KAAK,GAAU;AAC/D,MAAI,UAAU,GAAG;AACf,WAAO,6BAA6B;AACpC,WAAO,mCAAmC;AAAA,EAC5C;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../src/provider.tsx","../src/config.ts","../src/modules/helpers.ts","../src/modules/cache.ts"],"sourcesContent":["import React, { createContext, ReactNode, useContext, useState } from 'react';\n\nimport CacheStore from './modules/cache';\n\nconst CacheContext = createContext<CacheStore | null>(null);\n\ninterface Props {\n  children: ReactNode;\n  name?: string;\n}\n\nexport default function CacheProvider({ children, name }: Props) {\n  const [store] = useState(() => new CacheStore({ name, persistent: true }));\n\n  return <CacheContext.Provider value={store}>{children}</CacheContext.Provider>;\n}\n\nexport function useCacheStore(): CacheStore | null {\n  return useContext(CacheContext);\n}\n","export const CACHE_NAME = 'react-inlinesvg';\nexport const CACHE_MAX_RETRIES = 10;\n\nexport const STATUS = {\n  IDLE: 'idle',\n  LOADING: 'loading',\n  LOADED: 'loaded',\n  FAILED: 'failed',\n  READY: 'ready',\n  UNSUPPORTED: 'unsupported',\n} as const;\n","function randomCharacter(character: string) {\n  return character[Math.floor(Math.random() * character.length)];\n}\n\nexport function canUseDOM(): boolean {\n  return !!(typeof window !== 'undefined' && window.document?.createElement);\n}\n\nexport function isSupportedEnvironment(): boolean {\n  return supportsInlineSVG() && typeof window !== 'undefined' && window !== null;\n}\n\n/**\n *  Remove properties from an object\n */\nexport function omit<T extends Record<string, unknown>, K extends keyof T>(\n  input: T,\n  ...filter: K[]\n): Omit<T, K> {\n  const output: any = {};\n\n  for (const key in input) {\n    if ({}.hasOwnProperty.call(input, key)) {\n      if (!filter.includes(key as unknown as K)) {\n        output[key] = input[key];\n      }\n    }\n  }\n\n  return output as Omit<T, K>;\n}\n\nexport function randomString(length: number): string {\n  const letters = 'abcdefghijklmnopqrstuvwxyz';\n  const numbers = '1234567890';\n  const charset = `${letters}${letters.toUpperCase()}${numbers}`;\n\n  let R = '';\n\n  for (let index = 0; index < length; index++) {\n    R += randomCharacter(charset);\n  }\n\n  return R;\n}\n\nexport async function request(url: string, options?: RequestInit) {\n  const response = await fetch(url, options);\n  const contentType = response.headers.get('content-type');\n  const [fileType] = (contentType ?? '').split(/ ?; ?/);\n\n  if (response.status > 299) {\n    throw new Error('Not found');\n  }\n\n  if (!['image/svg+xml', 'text/plain'].some(d => fileType.includes(d))) {\n    throw new Error(`Content type isn't valid: ${fileType}`);\n  }\n\n  return response.text();\n}\n\nexport function supportsInlineSVG(): boolean {\n  /* c8 ignore next 3 */\n  if (!document) {\n    return false;\n  }\n\n  const div = document.createElement('div');\n\n  div.innerHTML = '<svg />';\n  const svg = div.firstChild as SVGSVGElement;\n\n  return !!svg && svg.namespaceURI === 'http://www.w3.org/2000/svg';\n}\n","import { CACHE_MAX_RETRIES, CACHE_NAME, STATUS } from '../config';\nimport { StorageItem } from '../types';\n\nimport { canUseDOM, request } from './helpers';\n\nexport interface CacheStoreOptions {\n  name?: string;\n  persistent?: boolean;\n}\n\nexport default class CacheStore {\n  private cacheApi: Cache | undefined;\n  private readonly cacheStore: Map<string, StorageItem>;\n  private readonly subscribers: Array<() => void> = [];\n  public isReady = false;\n\n  constructor(options: CacheStoreOptions = {}) {\n    const { name = CACHE_NAME, persistent = false } = options;\n\n    this.cacheStore = new Map<string, StorageItem>();\n\n    const usePersistentCache = persistent && canUseDOM() && 'caches' in window;\n\n    if (usePersistentCache) {\n      // eslint-disable-next-line promise/catch-or-return\n      caches\n        .open(name)\n        .then(cache => {\n          this.cacheApi = cache;\n        })\n        .catch(error => {\n          // eslint-disable-next-line no-console\n          console.error(`Failed to open cache: ${error.message}`);\n          this.cacheApi = undefined;\n        })\n        .finally(() => {\n          this.isReady = true;\n          // Copy to avoid mutation issues\n          const callbacks = [...this.subscribers];\n\n          // Clear array efficiently\n          this.subscribers.length = 0;\n\n          callbacks.forEach(callback => {\n            try {\n              callback();\n            } catch (error: any) {\n              // eslint-disable-next-line no-console\n              console.error(`Error in CacheStore subscriber callback: ${error.message}`);\n            }\n          });\n        });\n    } else {\n      this.isReady = true;\n    }\n  }\n\n  public onReady(callback: () => void): () => void {\n    if (this.isReady) {\n      callback();\n\n      return () => {};\n    }\n\n    this.subscribers.push(callback);\n\n    return () => {\n      const index = this.subscribers.indexOf(callback);\n\n      if (index >= 0) {\n        this.subscribers.splice(index, 1);\n      }\n    };\n  }\n\n  private waitForReady(): Promise<void> {\n    if (this.isReady) {\n      return Promise.resolve();\n    }\n\n    return new Promise(resolve => {\n      this.onReady(resolve);\n    });\n  }\n\n  public async get(url: string, fetchOptions?: RequestInit) {\n    await this.fetchAndCache(url, fetchOptions);\n\n    return this.cacheStore.get(url)?.content ?? '';\n  }\n\n  public getContent(url: string): string {\n    return this.cacheStore.get(url)?.content ?? '';\n  }\n\n  public set(url: string, data: StorageItem) {\n    this.cacheStore.set(url, data);\n  }\n\n  public isCached(url: string) {\n    return this.cacheStore.get(url)?.status === STATUS.LOADED;\n  }\n\n  private async fetchAndCache(url: string, fetchOptions?: RequestInit) {\n    if (!this.isReady) {\n      await this.waitForReady();\n    }\n\n    const cache = this.cacheStore.get(url);\n\n    if (cache?.status === STATUS.LOADED) {\n      return;\n    }\n\n    if (cache?.status === STATUS.LOADING) {\n      await this.handleLoading(url, fetchOptions?.signal || undefined, async () => {\n        this.cacheStore.set(url, { content: '', status: STATUS.IDLE });\n        await this.fetchAndCache(url, fetchOptions);\n      });\n\n      return;\n    }\n\n    this.cacheStore.set(url, { content: '', status: STATUS.LOADING });\n\n    try {\n      const content = this.cacheApi\n        ? await this.fetchFromPersistentCache(url, fetchOptions)\n        : await request(url, fetchOptions);\n\n      this.cacheStore.set(url, { content, status: STATUS.LOADED });\n    } catch (error: any) {\n      this.cacheStore.set(url, { content: '', status: STATUS.FAILED });\n      throw error;\n    }\n  }\n\n  private async fetchFromPersistentCache(url: string, fetchOptions?: RequestInit): Promise<string> {\n    const data = await this.cacheApi?.match(url);\n\n    if (data) {\n      return data.text();\n    }\n\n    await this.cacheApi?.add(new Request(url, fetchOptions));\n\n    const response = await this.cacheApi?.match(url);\n\n    return (await response?.text()) ?? '';\n  }\n\n  private async handleLoading(\n    url: string,\n    signal: AbortSignal | undefined,\n    callback: () => Promise<void>,\n  ) {\n    for (let retryCount = 0; retryCount < CACHE_MAX_RETRIES; retryCount++) {\n      if (signal?.aborted) {\n        throw signal.reason instanceof Error\n          ? signal.reason\n          : new DOMException('The operation was aborted.', 'AbortError');\n      }\n\n      if (this.cacheStore.get(url)?.status !== STATUS.LOADING) {\n        return;\n      }\n\n      await sleep(0.1);\n    }\n\n    await callback();\n  }\n\n  public keys(): Array<string> {\n    return [...this.cacheStore.keys()];\n  }\n\n  public data(): Array<Record<string, StorageItem>> {\n    return [...this.cacheStore.entries()].map(([key, value]) => ({ [key]: value }));\n  }\n\n  public async delete(url: string) {\n    if (this.cacheApi) {\n      await this.cacheApi.delete(url);\n    }\n\n    this.cacheStore.delete(url);\n  }\n\n  public async clear() {\n    if (this.cacheApi) {\n      const keys = await this.cacheApi.keys();\n\n      await Promise.allSettled(keys.map(key => this.cacheApi!.delete(key)));\n    }\n\n    this.cacheStore.clear();\n  }\n}\n\nfunction sleep(seconds = 1) {\n  return new Promise(resolve => {\n    setTimeout(resolve, seconds * 1000);\n  });\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-inlinesvg",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "An SVG loader for React",
   "author": "Gil Barbara <gilbarbara@gmail.com>",
   "contributors": [
@@ -54,35 +54,37 @@
     "react-from-dom": "^0.7.5"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.17.3",
-    "@gilbarbara/eslint-config": "^0.8.4",
+    "@arethetypeswrong/cli": "^0.18.2",
+    "@gilbarbara/eslint-config": "^1.1.0",
     "@gilbarbara/prettier-config": "^1.0.0",
-    "@gilbarbara/tsconfig": "^0.2.3",
-    "@size-limit/preset-small-lib": "^11.1.6",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@types/node": "^22.13.4",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.0.6",
+    "@gilbarbara/tsconfig": "^1.0.0",
+    "@size-limit/preset-small-lib": "^12.0.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.2",
     "browser-cache-mock": "^0.1.7",
-    "del-cli": "^6.0.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
     "fix-tsup-cjs": "^1.2.0",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
-    "jest-extended": "^4.0.2",
-    "jsdom": "^26.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "jest-extended": "^7.0.0",
+    "jsdom": "^29.0.1",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "repo-tools": "^0.3.1",
-    "size-limit": "^11.1.6",
-    "start-server-and-test": "^2.0.10",
+    "size-limit": "^12.0.1",
+    "start-server-and-test": "^3.0.0",
     "ts-node": "^10.9.2",
-    "tsup": "^8.3.6",
-    "typescript": "^5.7.3",
-    "vitest": "^3.0.6",
-    "vitest-fetch-mock": "^0.4.3"
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.2",
+    "vitest-fetch-mock": "^0.4.5"
   },
   "scripts": {
     "build": "pnpm run clean && tsup && fix-tsup-cjs",
@@ -117,24 +119,6 @@
     "sourcemap": true,
     "splitting": false
   },
-  "eslintConfig": {
-    "extends": [
-      "@gilbarbara/eslint-config"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "test/**/*.ts?(x)"
-        ],
-        "rules": {
-          "@typescript-eslint/ban-ts-comment": "off",
-          "no-console": "off",
-          "testing-library/no-container": "off",
-          "testing-library/no-node-access": "off"
-        }
-      }
-    ]
-  },
   "prettier": "@gilbarbara/prettier-config",
   "size-limit": [
     {

package/src/index.tsx

@@ -1,275 +1,45 @@
-import React, {
-  cloneElement,
-  isValidElement,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
-} from 'react';
-import convert from 'react-from-dom';
+import { cloneElement, ReactElement, SVGProps } from 'react';
 
 import { STATUS } from './config';
 import CacheStore from './modules/cache';
-import { canUseDOM, isSupportedEnvironment, omit, randomString, request } from './modules/helpers';
-import { usePrevious } from './modules/hooks';
-import { getNode } from './modules/utils';
-import { FetchError, Props, State, Status } from './types';
+import { canUseDOM, omit } from './modules/helpers';
+import useInlineSVG from './modules/useInlineSVG';
+import { useCacheStore } from './provider';
+import { Props, Status } from './types';
 
-// eslint-disable-next-line import/no-mutable-exports
-export let cacheStore: CacheStore;
+export const cacheStore = new CacheStore();
 
-function ReactInlineSVG(props: Props) {
-  const {
-    cacheRequests = true,
-    children = null,
-    description,
-    fetchOptions,
-    innerRef,
-    loader = null,
-    onError,
-    onLoad,
-    src,
-    title,
-    uniqueHash,
-  } = props;
-  const [state, setState] = useReducer(
-    (previousState: State, nextState: Partial<State>) => ({
-      ...previousState,
-      ...nextState,
-    }),
-    {
-      content: '',
-      element: null,
-
-      isCached: cacheRequests && cacheStore.isCached(props.src),
-      status: STATUS.IDLE,
-    },
-  );
-  const { content, element, isCached, status } = state;
-  const previousProps = usePrevious(props);
-  const previousState = usePrevious(state);
-
-  const hash = useRef(uniqueHash ?? randomString(8));
-  const isActive = useRef(false);
-  const isInitialized = useRef(false);
-
-  const handleError = useCallback(
-    (error: Error | FetchError) => {
-      if (isActive.current) {
-        setState({
-          status:
-            error.message === 'Browser does not support SVG' ? STATUS.UNSUPPORTED : STATUS.FAILED,
-        });
-
-        onError?.(error);
-      }
-    },
-    [onError],
-  );
-
-  const handleLoad = useCallback((loadedContent: string, hasCache = false) => {
-    if (isActive.current) {
-      setState({
-        content: loadedContent,
-        isCached: hasCache,
-        status: STATUS.LOADED,
-      });
-    }
-  }, []);
-
-  const fetchContent = useCallback(async () => {
-    const responseContent: string = await request(src, fetchOptions);
-
-    handleLoad(responseContent);
-  }, [fetchOptions, handleLoad, src]);
-
-  const getElement = useCallback(() => {
-    try {
-      const node = getNode({ ...props, handleError, hash: hash.current, content }) as Node;
-      const convertedElement = convert(node);
-
-      if (!convertedElement || !isValidElement(convertedElement)) {
-        throw new Error('Could not convert the src to a React element');
-      }
-
-      setState({
-        element: convertedElement,
-        status: STATUS.READY,
-      });
-    } catch (error: any) {
-      handleError(error);
-    }
-  }, [content, handleError, props]);
-
-  const getContent = useCallback(async () => {
-    const dataURI = /^data:image\/svg[^,]*?(;base64)?,(.*)/u.exec(src);
-    let inlineSrc;
-
-    if (dataURI) {
-      inlineSrc = dataURI[1] ? window.atob(dataURI[2]) : decodeURIComponent(dataURI[2]);
-    } else if (src.includes('<svg')) {
-      inlineSrc = src;
-    }
-
-    if (inlineSrc) {
-      handleLoad(inlineSrc);
-
-      return;
-    }
-
-    try {
-      if (cacheRequests) {
-        const cachedContent = await cacheStore.get(src, fetchOptions);
-
-        handleLoad(cachedContent, true);
-      } else {
-        await fetchContent();
-      }
-    } catch (error: any) {
-      handleError(error);
-    }
-  }, [cacheRequests, fetchContent, fetchOptions, handleError, handleLoad, src]);
-
-  const load = useCallback(async () => {
-    if (isActive.current) {
-      setState({
-        content: '',
-        element: null,
-        isCached: false,
-        status: STATUS.LOADING,
-      });
-    }
-  }, []);
-
-  // Run on mount
-  useEffect(
-    () => {
-      isActive.current = true;
-
-      if (!canUseDOM() || isInitialized.current) {
-        return undefined;
-      }
-
-      try {
-        if (status === STATUS.IDLE) {
-          if (!isSupportedEnvironment()) {
-            throw new Error('Browser does not support SVG');
-          }
-
-          if (!src) {
-            throw new Error('Missing src');
-          }
-
-          load();
-        }
-      } catch (error: any) {
-        handleError(error);
-      }
-
-      isInitialized.current = true;
-
-      return () => {
-        isActive.current = false;
-      };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
-
-  // Handles `src` changes
-  useEffect(() => {
-    if (!canUseDOM() || !previousProps) {
-      return;
-    }
-
-    if (previousProps.src !== src) {
-      if (!src) {
-        handleError(new Error('Missing src'));
-
-        return;
-      }
-
-      load();
-    }
-  }, [handleError, load, previousProps, src]);
-
-  // Handles content loading
-  useEffect(() => {
-    if (status === STATUS.LOADED) {
-      getElement();
-    }
-  }, [status, getElement]);
-
-  // Handles `title` and `description` changes
-  useEffect(() => {
-    if (!canUseDOM() || !previousProps || previousProps.src !== src) {
-      return;
-    }
-
-    if (previousProps.title !== title || previousProps.description !== description) {
-      getElement();
-    }
-  }, [description, getElement, previousProps, src, title]);
-
-  // handle state
-  useEffect(() => {
-    if (!previousState) {
-      return;
-    }
-
-    switch (status) {
-      case STATUS.LOADING: {
-        if (previousState.status !== STATUS.LOADING) {
-          getContent();
-        }
-
-        break;
-      }
-      case STATUS.LOADED: {
-        if (previousState.status !== STATUS.LOADED) {
-          getElement();
-        }
-
-        break;
-      }
-      case STATUS.READY: {
-        if (previousState.status !== STATUS.READY) {
-          onLoad?.(src, isCached);
-        }
-
-        break;
-      }
-    }
-  }, [getContent, getElement, isCached, onLoad, previousState, src, status]);
+export default function InlineSVG(props: Props) {
+  const { children = null, innerRef, loader = null } = props;
+  const contextStore = useCacheStore();
+  const store = contextStore ?? cacheStore;
 
-  const elementProps = omit(
-    props,
-    'baseURL',
-    'cacheRequests',
-    'children',
-    'description',
-    'fetchOptions',
-    'innerRef',
-    'loader',
-    'onError',
-    'onLoad',
-    'preProcessor',
-    'src',
-    'title',
-    'uniqueHash',
-    'uniquifyIDs',
-  );
+  const { element, status } = useInlineSVG(props, store);
 
   if (!canUseDOM()) {
     return loader;
   }
 
   if (element) {
-    return cloneElement(element as ReactElement, {
+    return cloneElement(element as ReactElement<SVGProps<SVGElement>>, {
       ref: innerRef,
-      ...elementProps,
+      ...omit(
+        props,
+        'baseURL',
+        'cacheRequests',
+        'children',
+        'description',
+        'fetchOptions',
+        'innerRef',
+        'loader',
+        'onError',
+        'onLoad',
+        'preProcessor',
+        'src',
+        'title',
+        'uniqueHash',
+        'uniquifyIDs',
+      ),
     });
   }
 
@@ -280,29 +50,4 @@ function ReactInlineSVG(props: Props) {
   return loader;
 }
 
-export default function InlineSVG(props: Props) {
-  if (!cacheStore) {
-    cacheStore = new CacheStore();
-  }
-
-  const { loader } = props;
-  const [isReady, setReady] = useState(cacheStore.isReady);
-
-  useEffect(() => {
-    if (isReady) {
-      return;
-    }
-
-    cacheStore.onReady(() => {
-      setReady(true);
-    });
-  }, [isReady]);
-
-  if (!isReady) {
-    return loader;
-  }
-
-  return <ReactInlineSVG {...props} />;
-}
-
 export * from './types';

package/src/modules/cache.ts

@@ -1,7 +1,12 @@
 import { CACHE_MAX_RETRIES, CACHE_NAME, STATUS } from '../config';
 import { StorageItem } from '../types';
 
-import { canUseDOM, request, sleep } from './helpers';
+import { canUseDOM, request } from './helpers';
+
+export interface CacheStoreOptions {
+  name?: string;
+  persistent?: boolean;
+}
 
 export default class CacheStore {
   private cacheApi: Cache | undefined;
@@ -9,20 +14,17 @@ export default class CacheStore {
   private readonly subscribers: Array<() => void> = [];
   public isReady = false;
 
-  constructor() {
+  constructor(options: CacheStoreOptions = {}) {
+    const { name = CACHE_NAME, persistent = false } = options;
+
     this.cacheStore = new Map<string, StorageItem>();
 
-    let cacheName = CACHE_NAME;
-    let usePersistentCache = false;
-
-    if (canUseDOM()) {
-      cacheName = window.REACT_INLINESVG_CACHE_NAME ?? CACHE_NAME;
-      usePersistentCache = !!window.REACT_INLINESVG_PERSISTENT_CACHE && 'caches' in window;
-    }
+    const usePersistentCache = persistent && canUseDOM() && 'caches' in window;
 
     if (usePersistentCache) {
+      // eslint-disable-next-line promise/catch-or-return
       caches
-        .open(cacheName)
+        .open(name)
         .then(cache => {
           this.cacheApi = cache;
         })
@@ -53,22 +55,44 @@ export default class CacheStore {
     }
   }
 
-  public onReady(callback: () => void) {
+  public onReady(callback: () => void): () => void {
     if (this.isReady) {
       callback();
-    } else {
-      this.subscribers.push(callback);
+
+      return () => {};
+    }
+
+    this.subscribers.push(callback);
+
+    return () => {
+      const index = this.subscribers.indexOf(callback);
+
+      if (index >= 0) {
+        this.subscribers.splice(index, 1);
+      }
+    };
+  }
+
+  private waitForReady(): Promise<void> {
+    if (this.isReady) {
+      return Promise.resolve();
     }
+
+    return new Promise(resolve => {
+      this.onReady(resolve);
+    });
   }
 
   public async get(url: string, fetchOptions?: RequestInit) {
-    await (this.cacheApi
-      ? this.fetchAndAddToPersistentCache(url, fetchOptions)
-      : this.fetchAndAddToInternalCache(url, fetchOptions));
+    await this.fetchAndCache(url, fetchOptions);
 
     return this.cacheStore.get(url)?.content ?? '';
   }
 
+  public getContent(url: string): string {
+    return this.cacheStore.get(url)?.content ?? '';
+  }
+
   public set(url: string, data: StorageItem) {
     this.cacheStore.set(url, data);
   }
@@ -77,33 +101,11 @@ export default class CacheStore {
     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;
+  private async fetchAndCache(url: string, fetchOptions?: RequestInit) {
+    if (!this.isReady) {
+      await this.waitForReady();
     }
 
-    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) {
@@ -111,9 +113,9 @@ export default class CacheStore {
     }
 
     if (cache?.status === STATUS.LOADING) {
-      await this.handleLoading(url, async () => {
+      await this.handleLoading(url, fetchOptions?.signal || undefined, async () => {
         this.cacheStore.set(url, { content: '', status: STATUS.IDLE });
-        await this.fetchAndAddToPersistentCache(url, fetchOptions);
+        await this.fetchAndCache(url, fetchOptions);
       });
 
       return;
@@ -121,21 +123,10 @@ export default class CacheStore {
 
     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()) ?? '';
+      const content = this.cacheApi
+        ? await this.fetchFromPersistentCache(url, fetchOptions)
+        : await request(url, fetchOptions);
 
       this.cacheStore.set(url, { content, status: STATUS.LOADED });
     } catch (error: any) {
@@ -144,13 +135,36 @@ export default class CacheStore {
     }
   }
 
-  private async handleLoading(url: string, callback: () => Promise<void>) {
+  private async fetchFromPersistentCache(url: string, fetchOptions?: RequestInit): Promise<string> {
+    const data = await this.cacheApi?.match(url);
+
+    if (data) {
+      return data.text();
+    }
+
+    await this.cacheApi?.add(new Request(url, fetchOptions));
+
+    const response = await this.cacheApi?.match(url);
+
+    return (await response?.text()) ?? '';
+  }
+
+  private async handleLoading(
+    url: string,
+    signal: AbortSignal | undefined,
+    callback: () => Promise<void>,
+  ) {
     for (let retryCount = 0; retryCount < CACHE_MAX_RETRIES; retryCount++) {
+      if (signal?.aborted) {
+        throw signal.reason instanceof Error
+          ? signal.reason
+          : new DOMException('The operation was aborted.', 'AbortError');
+      }
+
       if (this.cacheStore.get(url)?.status !== STATUS.LOADING) {
         return;
       }
 
-      // eslint-disable-next-line no-await-in-loop
       await sleep(0.1);
     }
 
@@ -183,3 +197,9 @@ export default class CacheStore {
     this.cacheStore.clear();
   }
 }
+
+function sleep(seconds = 1) {
+  return new Promise(resolve => {
+    setTimeout(resolve, seconds * 1000);
+  });
+}