react-inlinesvg 4.2.0 → 4.3.0

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);
 }

package/src/types.ts

@@ -2,26 +2,92 @@ import { ReactNode, Ref, SVGProps } from 'react';
 
 import { STATUS } from './config';
 
+/**
+ * Called when loading the SVG fails.
+ */
 export type ErrorCallback = (error: Error | FetchError) => void;
+
+/**
+ * Called when the SVG loads successfully.
+ */
 export type LoadCallback = (src: string, isCached: boolean) => void;
-export type PlainObject<T = unknown> = Record<string, T>;
+
+/**
+ * Pre-processes the SVG string before parsing.
+ * Must return a string.
+ */
 export type PreProcessorCallback = (code: string) => string;
 
 export type Props = Simplify<
   Omit<SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> & {
+    /**
+     * A URL to prepend to url() references inside the SVG when using `uniquifyIDs`.
+     * Only required if your page uses an HTML `<base>` tag.
+     */
     baseURL?: string;
+    /**
+     * Cache remote SVGs in memory.
+     *
+     * When used with the CacheProvider, requests are also persisted in the browser cache.
+     * @default true
+     */
     cacheRequests?: boolean;
+    /**
+     * Fallback content rendered on fetch error or unsupported browser.
+     */
     children?: ReactNode;
+    /**
+     * A description for the SVG.
+     * Overrides an existing `<desc>` tag.
+     */
     description?: string;
+    /**
+     * Custom options for the fetch request.
+     */
     fetchOptions?: RequestInit;
+    /**
+     * A ref to the rendered SVG element.
+     * Not available on initial render — use `onLoad` instead.
+     */
     innerRef?: Ref<SVGElement | null>;
+    /**
+     * A component shown while the SVG is loading.
+     */
     loader?: ReactNode;
+    /**
+     * Called when loading the SVG fails.
+     * Receives an `Error` or `FetchError`.
+     */
     onError?: ErrorCallback;
+    /**
+     * Called when the SVG loads successfully.
+     * Receives the `src` and an `isCached` flag.
+     */
     onLoad?: LoadCallback;
+    /**
+     * A function to pre-process the SVG string before parsing.
+     * Must return a string.
+     */
     preProcessor?: PreProcessorCallback;
+    /**
+     * The SVG to load.
+     * Accepts a URL or path, a data URI (base64 or URL-encoded), or a raw SVG string.
+     */
     src: string;
+    /**
+     * A title for the SVG. Overrides an existing `<title>` tag.
+     * Pass `null` to remove it.
+     */
     title?: string | null;
+    /**
+     * A string to use with `uniquifyIDs`.
+     * @default random 8-character alphanumeric string
+     */
     uniqueHash?: string;
+    /**
+     * Create unique IDs for each icon.
+     * @default false
+     */
     uniquifyIDs?: boolean;
   }
 >;

package/src/global.d.ts

@@ -1,6 +0,0 @@
-export declare global {
-  interface Window {
-    REACT_INLINESVG_CACHE_NAME?: string;
-    REACT_INLINESVG_PERSISTENT_CACHE?: boolean;
-  }
-}