react-inlinesvg 4.1.8 → 4.3.0

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,49 +14,82 @@ export default class CacheStore {
   private readonly subscribers: Array<() => void> = [];
   public isReady = false;
 
-  constructor() {
-    this.cacheStore = new Map<string, StorageItem>();
+  constructor(options: CacheStoreOptions = {}) {
+    const { name = CACHE_NAME, persistent = false } = options;
 
-    let cacheName = CACHE_NAME;
-    let usePersistentCache = false;
+    this.cacheStore = new Map<string, StorageItem>();
 
-    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;
         })
         .catch(error => {
           // eslint-disable-next-line no-console
           console.error(`Failed to open cache: ${error.message}`);
+          this.cacheApi = undefined;
         })
         .finally(() => {
           this.isReady = true;
-          this.subscribers.forEach(callback => callback());
+          // Copy to avoid mutation issues
+          const callbacks = [...this.subscribers];
+
+          // Clear array efficiently
+          this.subscribers.length = 0;
+
+          callbacks.forEach(callback => {
+            try {
+              callback();
+            } catch (error: any) {
+              // eslint-disable-next-line no-console
+              console.error(`Error in CacheStore subscriber callback: ${error.message}`);
+            }
+          });
         });
     } else {
       this.isReady = true;
     }
   }
 
-  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 ?? '';
   }
 
@@ -63,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;
-    }
-
-    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 fetchAndCache(url: string, fetchOptions?: RequestInit) {
+    if (!this.isReady) {
+      await this.waitForReady();
     }
-  }
 
-  private async fetchAndAddToPersistentCache(url: string, fetchOptions?: RequestInit) {
     const cache = this.cacheStore.get(url);
 
     if (cache?.status === STATUS.LOADED) {
@@ -97,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;
@@ -107,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) {
@@ -130,18 +135,40 @@ export default class CacheStore {
     }
   }
 
-  private async handleLoading(url: string, callback: () => Promise<void>) {
-    let retryCount = 0;
+  private async fetchFromPersistentCache(url: string, fetchOptions?: RequestInit): Promise<string> {
+    const data = await this.cacheApi?.match(url);
 
-    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 (data) {
+      return data.text();
     }
 
-    if (retryCount >= CACHE_MAX_RETRIES) {
-      await callback();
+    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;
+      }
+
+      await sleep(0.1);
     }
+
+    await callback();
   }
 
   public keys(): Array<string> {
@@ -164,12 +191,15 @@ export default class CacheStore {
     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);
-      }
+      await Promise.allSettled(keys.map(key => this.cacheApi!.delete(key)));
     }
 
     this.cacheStore.clear();
   }
 }
+
+function sleep(seconds = 1) {
+  return new Promise(resolve => {
+    setTimeout(resolve, seconds * 1000);
+  });
+}

package/src/modules/helpers.ts

@@ -1,5 +1,3 @@
-import type { PlainObject } from '../types';
-
 function randomCharacter(character: string) {
   return character[Math.floor(Math.random() * character.length)];
 }
@@ -15,7 +13,7 @@ export function isSupportedEnvironment(): boolean {
 /**
  *  Remove properties from an object
  */
-export function omit<T extends PlainObject, K extends keyof T>(
+export function omit<T extends Record<string, unknown>, K extends keyof T>(
   input: T,
   ...filter: K[]
 ): Omit<T, K> {
@@ -62,12 +60,6 @@ export async function request(url: string, options?: RequestInit) {
   return response.text();
 }
 
-export function sleep(seconds = 1) {
-  return new Promise(resolve => {
-    setTimeout(resolve, seconds * 1000);
-  });
-}
-
 export function supportsInlineSVG(): boolean {
   /* c8 ignore next 3 */
   if (!document) {

package/src/modules/hooks.tsx

@@ -1,4 +1,9 @@
-import { useEffect, useRef } from 'react';
+import { EffectCallback, useEffect, useRef } from 'react';
+
+export function useMount(effect: EffectCallback) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(effect, []);
+}
 
 export function usePrevious<T>(state: T): T | undefined {
   const ref = useRef<T>(undefined);

package/src/modules/useInlineSVG.ts

@@ -0,0 +1,272 @@
+import { isValidElement, useCallback, useEffect, useReducer, useRef } from 'react';
+import convert from 'react-from-dom';
+
+import { STATUS } from '../config';
+import type { FetchError, Props, State } from '../types';
+
+import type CacheStore from './cache';
+import { canUseDOM, isSupportedEnvironment, randomString, request } from './helpers';
+import { useMount, usePrevious } from './hooks';
+import { getNode } from './utils';
+
+export default function useInlineSVG(props: Props, cacheStore: CacheStore) {
+  const {
+    baseURL,
+    cacheRequests = true,
+    description,
+    fetchOptions,
+    onError,
+    onLoad,
+    preProcessor,
+    src,
+    title,
+    uniqueHash,
+    uniquifyIDs,
+  } = props;
+
+  const hash = useRef(uniqueHash ?? randomString(8));
+  const fetchOptionsRef = useRef(fetchOptions);
+  const onErrorRef = useRef(onError);
+  const onLoadRef = useRef(onLoad);
+  const preProcessorRef = useRef(preProcessor);
+
+  fetchOptionsRef.current = fetchOptions;
+  onErrorRef.current = onError;
+  onLoadRef.current = onLoad;
+  preProcessorRef.current = preProcessor;
+
+  const [state, setState] = useReducer(
+    (previousState: State, nextState: Partial<State>) => ({
+      ...previousState,
+      ...nextState,
+    }),
+    {
+      content: '',
+      element: null,
+      isCached: false,
+      status: STATUS.IDLE,
+    },
+    (initial): State => {
+      const cached = cacheRequests && cacheStore.isCached(src);
+
+      if (!cached) {
+        return initial;
+      }
+
+      const cachedContent = cacheStore.getContent(src);
+
+      try {
+        const node = getNode({
+          ...props,
+          handleError: () => {},
+          hash: hash.current,
+          content: cachedContent,
+        });
+
+        if (!node) {
+          return { ...initial, content: cachedContent, isCached: true, status: STATUS.LOADED };
+        }
+
+        const convertedElement = convert(node as Node);
+
+        if (convertedElement && isValidElement(convertedElement)) {
+          return {
+            content: cachedContent,
+            element: convertedElement,
+            isCached: true,
+            status: STATUS.READY,
+          };
+        }
+      } catch {
+        // Fall through to effect-driven flow
+      }
+
+      return {
+        ...initial,
+        content: cachedContent,
+        isCached: true,
+        status: STATUS.LOADED,
+      };
+    },
+  );
+  const { content, element, isCached, status } = state;
+  const previousProps = usePrevious(props);
+  const previousState = usePrevious(state);
+  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,
+      });
+
+      onErrorRef.current?.(error);
+    }
+  }, []);
+
+  const getElement = useCallback(() => {
+    try {
+      const node = getNode({
+        baseURL,
+        content,
+        description,
+        handleError,
+        hash: hash.current,
+        preProcessor: preProcessorRef.current,
+        src,
+        title,
+        uniquifyIDs,
+      }) 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);
+    }
+  }, [baseURL, content, description, handleError, src, title, uniquifyIDs]);
+
+  // Mount
+  useMount(() => {
+    isActive.current = true;
+
+    if (!canUseDOM() || isInitialized.current) {
+      return undefined;
+    }
+
+    try {
+      if (status === STATUS.READY) {
+        onLoadRef.current?.(src, isCached);
+      } else if (status === STATUS.IDLE) {
+        if (!isSupportedEnvironment()) {
+          throw new Error('Browser does not support SVG');
+        }
+
+        if (!src) {
+          throw new Error('Missing src');
+        }
+
+        setState({ content: '', element: null, isCached: false, status: STATUS.LOADING });
+      }
+    } catch (error: any) {
+      handleError(error);
+    }
+
+    isInitialized.current = true;
+
+    return () => {
+      isActive.current = false;
+    };
+  });
+
+  // Src changes
+  useEffect(() => {
+    if (!canUseDOM() || !previousProps) {
+      return;
+    }
+
+    if (previousProps.src !== src) {
+      if (!src) {
+        handleError(new Error('Missing src'));
+
+        return;
+      }
+
+      setState({ content: '', element: null, isCached: false, status: STATUS.LOADING });
+    }
+  }, [handleError, previousProps, src]);
+
+  // Fetch content when status is LOADING
+  useEffect(() => {
+    if (status !== STATUS.LOADING) {
+      return undefined;
+    }
+
+    const controller = new AbortController();
+    let active = true;
+
+    (async () => {
+      try {
+        const dataURI = /^data:image\/svg[^,]*?(;base64)?,(.*)/.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) {
+          if (active) {
+            setState({ content: inlineSrc, isCached: false, status: STATUS.LOADED });
+          }
+
+          return;
+        }
+
+        const fetchParameters = { ...fetchOptionsRef.current, signal: controller.signal };
+        let loadedContent: string;
+        let hasCache = false;
+
+        if (cacheRequests) {
+          hasCache = cacheStore.isCached(src);
+          loadedContent = await cacheStore.get(src, fetchParameters);
+        } else {
+          loadedContent = await request(src, fetchParameters);
+        }
+
+        if (active) {
+          setState({ content: loadedContent, isCached: hasCache, status: STATUS.LOADED });
+        }
+      } catch (error: any) {
+        if (active && error.name !== 'AbortError') {
+          handleError(error);
+        }
+      }
+    })();
+
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [cacheRequests, cacheStore, handleError, src, status]);
+
+  // LOADED -> READY
+  useEffect(() => {
+    if (status === STATUS.LOADED && content) {
+      getElement();
+    }
+  }, [content, getElement, status]);
+
+  // 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]);
+
+  // READY -> onLoad
+  useEffect(() => {
+    if (!previousState) {
+      return;
+    }
+
+    if (status === STATUS.READY && previousState.status !== STATUS.READY) {
+      onLoadRef.current?.(src, isCached);
+    }
+  }, [isCached, previousState, src, status]);
+
+  return { element, status };
+}

package/src/modules/utils.ts

@@ -11,6 +11,36 @@ interface UpdateSVGAttributesOptions extends Pick<Props, 'baseURL' | 'uniquifyID
   hash: string;
 }
 
+function uniquifyStyleIds(svgText: string, hash: string, baseURL: string): string {
+  const idMatches = svgText.matchAll(/\bid=(["'])([^"']+)\1/g);
+  const ids = [...new Set([...idMatches].map(m => m[2]))];
+
+  if (!ids.length) {
+    return svgText;
+  }
+
+  ids.sort((a, b) => b.length - a.length);
+
+  return svgText.replace(/<style[^>]*>([\S\s]*?)<\/style>/gi, (fullMatch, cssContent) => {
+    let modified = cssContent as string;
+
+    for (const id of ids) {
+      const escaped = id.replace(/[$()*+.?[\\\]^{|}]/g, '\\$&');
+
+      modified = modified.replace(
+        new RegExp(`url\\((['"]?)#${escaped}\\1\\)`, 'g'),
+        `url($1${baseURL}#${id}__${hash}$1)`,
+      );
+      modified = modified.replace(
+        new RegExp(`#${escaped}(?![a-zA-Z0-9_-])`, 'g'),
+        `#${id}__${hash}`,
+      );
+    }
+
+    return fullMatch.replace(cssContent, modified);
+  });
+}
+
 export function getNode(options: GetNodeOptions) {
   const {
     baseURL,
@@ -24,7 +54,12 @@ export function getNode(options: GetNodeOptions) {
   } = options;
 
   try {
-    const svgText = processSVG(content, preProcessor);
+    let svgText = processSVG(content, preProcessor);
+
+    if (uniquifyIDs) {
+      svgText = uniquifyStyleIds(svgText, hash, baseURL ?? '');
+    }
+
     const node = convert(svgText, { nodeOnly: true });
 
     if (!node || !(node instanceof SVGSVGElement)) {

package/src/provider.tsx

@@ -1,6 +1,8 @@
-import { ReactNode } from 'react';
+import React, { createContext, ReactNode, useContext, useState } from 'react';
 
-import { canUseDOM } from './modules/helpers';
+import CacheStore from './modules/cache';
+
+const CacheContext = createContext<CacheStore | null>(null);
 
 interface Props {
   children: ReactNode;
@@ -8,10 +10,11 @@ interface Props {
 }
 
 export default function CacheProvider({ children, name }: Props) {
-  if (canUseDOM()) {
-    window.REACT_INLINESVG_CACHE_NAME = name;
-    window.REACT_INLINESVG_PERSISTENT_CACHE = true;
-  }
+  const [store] = useState(() => new CacheStore({ name, persistent: true }));
+
+  return <CacheContext.Provider value={store}>{children}</CacheContext.Provider>;
+}
 
-  return children;
+export function useCacheStore(): CacheStore | null {
+  return useContext(CacheContext);
 }