react-inlinesvg 4.2.0 → 4.3.0

package/dist/index.mjs

@@ -4,16 +4,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/index.tsx
-import React, {
-  cloneElement,
-  isValidElement,
-  useCallback,
-  useEffect as useEffect2,
-  useReducer,
-  useRef as useRef2,
-  useState
-} from "react";
-import convert2 from "react-from-dom";
+import { cloneElement } from "react";
 
 // src/config.ts
 var CACHE_NAME = "react-inlinesvg";
@@ -70,11 +61,6 @@ async function request(url, options) {
   }
   return response.text();
 }
-function sleep(seconds = 1) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, seconds * 1e3);
-  });
-}
 function supportsInlineSVG() {
   if (!document) {
     return false;
@@ -87,20 +73,16 @@ function supportsInlineSVG() {
 
 // src/modules/cache.ts
 var CacheStore = class {
-  constructor() {
+  constructor(options = {}) {
     __publicField(this, "cacheApi");
     __publicField(this, "cacheStore");
     __publicField(this, "subscribers", []);
     __publicField(this, "isReady", false);
+    const { name = CACHE_NAME, persistent = false } = options;
     this.cacheStore = /* @__PURE__ */ new Map();
-    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) {
-      caches.open(cacheName).then((cache) => {
+      caches.open(name).then((cache) => {
         this.cacheApi = cache;
       }).catch((error) => {
         console.error(`Failed to open cache: ${error.message}`);
@@ -124,12 +106,30 @@ var CacheStore = class {
   onReady(callback) {
     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);
+      }
+    };
+  }
+  waitForReady() {
+    if (this.isReady) {
+      return Promise.resolve();
     }
+    return new Promise((resolve) => {
+      this.onReady(resolve);
+    });
   }
   async get(url, fetchOptions) {
-    await (this.cacheApi ? this.fetchAndAddToPersistentCache(url, fetchOptions) : this.fetchAndAddToInternalCache(url, fetchOptions));
+    await this.fetchAndCache(url, fetchOptions);
+    return this.cacheStore.get(url)?.content ?? "";
+  }
+  getContent(url) {
     return this.cacheStore.get(url)?.content ?? "";
   }
   set(url, data) {
@@ -138,57 +138,44 @@ var CacheStore = class {
   isCached(url) {
     return this.cacheStore.get(url)?.status === STATUS.LOADED;
   }
-  async fetchAndAddToInternalCache(url, fetchOptions) {
-    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;
+  async fetchAndCache(url, fetchOptions) {
+    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) {
-        this.cacheStore.set(url, { content: "", status: STATUS.FAILED });
-        throw error;
-      }
-    }
-  }
-  async fetchAndAddToPersistentCache(url, fetchOptions) {
     const cache = this.cacheStore.get(url);
     if (cache?.status === STATUS.LOADED) {
       return;
     }
     if (cache?.status === STATUS.LOADING) {
-      await this.handleLoading(url, async () => {
+      await this.handleLoading(url, fetchOptions?.signal || void 0, async () => {
         this.cacheStore.set(url, { content: "", status: STATUS.IDLE });
-        await this.fetchAndAddToPersistentCache(url, fetchOptions);
+        await this.fetchAndCache(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() ?? "";
+      const content = this.cacheApi ? await this.fetchFromPersistentCache(url, fetchOptions) : await request(url, fetchOptions);
       this.cacheStore.set(url, { content, status: STATUS.LOADED });
     } catch (error) {
       this.cacheStore.set(url, { content: "", status: STATUS.FAILED });
       throw error;
     }
   }
-  async handleLoading(url, callback) {
+  async fetchFromPersistentCache(url, fetchOptions) {
+    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() ?? "";
+  }
+  async handleLoading(url, signal, callback) {
     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;
       }
@@ -216,9 +203,21 @@ var CacheStore = class {
     this.cacheStore.clear();
   }
 };
+function sleep(seconds = 1) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, seconds * 1e3);
+  });
+}
+
+// src/modules/useInlineSVG.ts
+import { isValidElement, useCallback, useEffect as useEffect2, useReducer, useRef as useRef2 } from "react";
+import convert2 from "react-from-dom";
 
 // src/modules/hooks.tsx
 import { useEffect, useRef } from "react";
+function useMount(effect) {
+  useEffect(effect, []);
+}
 function usePrevious(state) {
   const ref = useRef(void 0);
   useEffect(() => {
@@ -229,6 +228,29 @@ function usePrevious(state) {
 
 // src/modules/utils.ts
 import convert from "react-from-dom";
+function uniquifyStyleIds(svgText, hash, baseURL) {
+  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;
+    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);
+  });
+}
 function getNode(options) {
   const {
     baseURL,
@@ -241,7 +263,10 @@ function getNode(options) {
     uniquifyIDs = false
   } = 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)) {
       throw new Error("Could not convert the src to a DOM Node");
@@ -311,22 +336,30 @@ function updateSVGAttributes(node, options) {
   return node;
 }
 
-// src/index.tsx
-var cacheStore;
-function ReactInlineSVG(props) {
+// src/modules/useInlineSVG.ts
+function useInlineSVG(props, cacheStore2) {
   const {
+    baseURL,
     cacheRequests = true,
-    children = null,
     description,
     fetchOptions,
-    innerRef,
-    loader = null,
     onError,
     onLoad,
+    preProcessor,
     src,
     title,
-    uniqueHash
+    uniqueHash,
+    uniquifyIDs
   } = props;
+  const hash = useRef2(uniqueHash ?? randomString(8));
+  const fetchOptionsRef = useRef2(fetchOptions);
+  const onErrorRef = useRef2(onError);
+  const onLoadRef = useRef2(onLoad);
+  const preProcessorRef = useRef2(preProcessor);
+  fetchOptionsRef.current = fetchOptions;
+  onErrorRef.current = onError;
+  onLoadRef.current = onLoad;
+  preProcessorRef.current = preProcessor;
   const [state, setState] = useReducer(
     (previousState2, nextState) => ({
       ...previousState2,
@@ -335,43 +368,71 @@ function ReactInlineSVG(props) {
     {
       content: "",
       element: null,
-      isCached: cacheRequests && cacheStore.isCached(props.src),
+      isCached: false,
       status: STATUS.IDLE
+    },
+    (initial) => {
+      const cached = cacheRequests && cacheStore2.isCached(src);
+      if (!cached) {
+        return initial;
+      }
+      const cachedContent = cacheStore2.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 = convert2(node);
+        if (convertedElement && isValidElement(convertedElement)) {
+          return {
+            content: cachedContent,
+            element: convertedElement,
+            isCached: true,
+            status: STATUS.READY
+          };
+        }
+      } catch {
+      }
+      return {
+        ...initial,
+        content: cachedContent,
+        isCached: true,
+        status: STATUS.LOADED
+      };
     }
   );
   const { content, element, isCached, status } = state;
   const previousProps = usePrevious(props);
   const previousState = usePrevious(state);
-  const hash = useRef2(uniqueHash ?? randomString(8));
   const isActive = useRef2(false);
   const isInitialized = useRef2(false);
-  const handleError = useCallback(
-    (error) => {
-      if (isActive.current) {
-        setState({
-          status: error.message === "Browser does not support SVG" ? STATUS.UNSUPPORTED : STATUS.FAILED
-        });
-        onError?.(error);
-      }
-    },
-    [onError]
-  );
-  const handleLoad = useCallback((loadedContent, hasCache = false) => {
+  const handleError = useCallback((error) => {
     if (isActive.current) {
       setState({
-        content: loadedContent,
-        isCached: hasCache,
-        status: STATUS.LOADED
+        status: error.message === "Browser does not support SVG" ? STATUS.UNSUPPORTED : STATUS.FAILED
       });
+      onErrorRef.current?.(error);
     }
   }, []);
-  const fetchContent = useCallback(async () => {
-    const responseContent = await request(src, fetchOptions);
-    handleLoad(responseContent);
-  }, [fetchOptions, handleLoad, src]);
   const getElement = useCallback(() => {
     try {
-      const node = getNode({ ...props, handleError, hash: hash.current, content });
+      const node = getNode({
+        baseURL,
+        content,
+        description,
+        handleError,
+        hash: hash.current,
+        preProcessor: preProcessorRef.current,
+        src,
+        title,
+        uniquifyIDs
+      });
       const convertedElement = convert2(node);
       if (!convertedElement || !isValidElement(convertedElement)) {
         throw new Error("Could not convert the src to a React element");
@@ -383,67 +444,32 @@ function ReactInlineSVG(props) {
     } catch (error) {
       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;
+  }, [baseURL, content, description, handleError, src, title, uniquifyIDs]);
+  useMount(() => {
+    isActive.current = true;
+    if (!canUseDOM() || isInitialized.current) {
+      return void 0;
     }
     try {
-      if (cacheRequests) {
-        const cachedContent = await cacheStore.get(src, fetchOptions);
-        handleLoad(cachedContent, true);
-      } else {
-        await fetchContent();
+      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) {
       handleError(error);
     }
-  }, [cacheRequests, fetchContent, fetchOptions, handleError, handleLoad, src]);
-  const load = useCallback(async () => {
-    if (isActive.current) {
-      setState({
-        content: "",
-        element: null,
-        isCached: false,
-        status: STATUS.LOADING
-      });
-    }
-  }, []);
-  useEffect2(
-    () => {
-      isActive.current = true;
-      if (!canUseDOM() || isInitialized.current) {
-        return void 0;
-      }
-      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) {
-        handleError(error);
-      }
-      isInitialized.current = true;
-      return () => {
-        isActive.current = false;
-      };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
+    isInitialized.current = true;
+    return () => {
+      isActive.current = false;
+    };
+  });
   useEffect2(() => {
     if (!canUseDOM() || !previousProps) {
       return;
@@ -453,14 +479,58 @@ function ReactInlineSVG(props) {
         handleError(new Error("Missing src"));
         return;
       }
-      load();
+      setState({ content: "", element: null, isCached: false, status: STATUS.LOADING });
     }
-  }, [handleError, load, previousProps, src]);
+  }, [handleError, previousProps, src]);
   useEffect2(() => {
-    if (status === STATUS.LOADED) {
+    if (status !== STATUS.LOADING) {
+      return void 0;
+    }
+    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;
+        let hasCache = false;
+        if (cacheRequests) {
+          hasCache = cacheStore2.isCached(src);
+          loadedContent = await cacheStore2.get(src, fetchParameters);
+        } else {
+          loadedContent = await request(src, fetchParameters);
+        }
+        if (active) {
+          setState({ content: loadedContent, isCached: hasCache, status: STATUS.LOADED });
+        }
+      } catch (error) {
+        if (active && error.name !== "AbortError") {
+          handleError(error);
+        }
+      }
+    })();
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [cacheRequests, cacheStore2, handleError, src, status]);
+  useEffect2(() => {
+    if (status === STATUS.LOADED && content) {
       getElement();
     }
-  }, [status, getElement]);
+  }, [content, getElement, status]);
   useEffect2(() => {
     if (!canUseDOM() || !previousProps || previousProps.src !== src) {
       return;
@@ -473,51 +543,50 @@ function ReactInlineSVG(props) {
     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;
-      }
+    if (status === STATUS.READY && previousState.status !== STATUS.READY) {
+      onLoadRef.current?.(src, isCached);
     }
-  }, [getContent, getElement, isCached, onLoad, previousState, src, status]);
-  const elementProps = omit(
-    props,
-    "baseURL",
-    "cacheRequests",
-    "children",
-    "description",
-    "fetchOptions",
-    "innerRef",
-    "loader",
-    "onError",
-    "onLoad",
-    "preProcessor",
-    "src",
-    "title",
-    "uniqueHash",
-    "uniquifyIDs"
-  );
+  }, [isCached, previousState, src, status]);
+  return { element, status };
+}
+
+// src/provider.tsx
+import React, { createContext, useContext, useState } from "react";
+var CacheContext = createContext(null);
+function useCacheStore() {
+  return useContext(CacheContext);
+}
+
+// src/index.tsx
+var cacheStore = new CacheStore();
+function InlineSVG(props) {
+  const { children = null, innerRef, loader = null } = props;
+  const contextStore = useCacheStore();
+  const store = contextStore ?? cacheStore;
+  const { element, status } = useInlineSVG(props, store);
   if (!canUseDOM()) {
     return loader;
   }
   if (element) {
     return cloneElement(element, {
       ref: innerRef,
-      ...elementProps
+      ...omit(
+        props,
+        "baseURL",
+        "cacheRequests",
+        "children",
+        "description",
+        "fetchOptions",
+        "innerRef",
+        "loader",
+        "onError",
+        "onLoad",
+        "preProcessor",
+        "src",
+        "title",
+        "uniqueHash",
+        "uniquifyIDs"
+      )
     });
   }
   if ([STATUS.UNSUPPORTED, STATUS.FAILED].includes(status)) {
@@ -525,25 +594,6 @@ function ReactInlineSVG(props) {
   }
   return loader;
 }
-function InlineSVG(props) {
-  if (!cacheStore) {
-    cacheStore = new CacheStore();
-  }
-  const { loader } = props;
-  const [isReady, setReady] = useState(cacheStore.isReady);
-  useEffect2(() => {
-    if (isReady) {
-      return;
-    }
-    cacheStore.onReady(() => {
-      setReady(true);
-    });
-  }, [isReady]);
-  if (!isReady) {
-    return loader;
-  }
-  return /* @__PURE__ */ React.createElement(ReactInlineSVG, { ...props });
-}
 export {
   cacheStore,
   InlineSVG as default