react-inlinesvg 3.0.2 → 3.1.0-0

package/src/index.tsx

@@ -1,15 +1,18 @@
 import * as React from 'react';
 import convert from 'react-from-dom';
 
-import { canUseDOM, isSupportedEnvironment, omit, randomString, STATUS } from './helpers';
-import { FetchError, Props, State, StorageItem } from './types';
+import CacheStore from './cache';
+import { STATUS } from './config';
+import { canUseDOM, isSupportedEnvironment, omit, randomString, request } from './helpers';
+import { FetchError, Props, State, Status } from './types';
 
-export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
+// eslint-disable-next-line import/no-mutable-exports
+export let cacheStore: CacheStore;
 
-export default class InlineSVG extends React.PureComponent<Props, State> {
-  private isInitialized = false;
-  private isActive = false;
+class ReactInlineSVG extends React.PureComponent<Props, State> {
   private readonly hash: string;
+  private isActive = false;
+  private isInitialized = false;
 
   public static defaultProps = {
     cacheRequests: true,
@@ -22,8 +25,8 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     this.state = {
       content: '',
       element: null,
-      hasCache: !!props.cacheRequests && !!cacheStore[props.src],
-      status: STATUS.PENDING,
+      isCached: !!props.cacheRequests && cacheStore.isCached(props.src),
+      status: STATUS.IDLE,
     };
 
     this.hash = props.uniqueHash || randomString(8);
@@ -41,7 +44,7 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
 
     try {
       /* istanbul ignore else */
-      if (status === STATUS.PENDING) {
+      if (status === STATUS.IDLE) {
         /* istanbul ignore else */
         if (!isSupportedEnvironment()) {
           throw new Error('Browser does not support SVG');
@@ -66,13 +69,13 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
       return;
     }
 
-    const { hasCache, status } = this.state;
+    const { isCached, status } = this.state;
     const { onLoad, src } = this.props;
 
     if (previousState.status !== STATUS.READY && status === STATUS.READY) {
       /* istanbul ignore else */
       if (onLoad) {
-        onLoad(src, hasCache);
+        onLoad(src, isCached);
       }
     }
 
@@ -91,6 +94,32 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     this.isActive = false;
   }
 
+  private fetchContent = async () => {
+    const { fetchOptions, src } = this.props;
+
+    const content: string = await request(src, fetchOptions);
+
+    this.handleLoad(content);
+  };
+
+  private getElement() {
+    try {
+      const node = this.getNode() as Node;
+      const element = convert(node);
+
+      if (!element || !React.isValidElement(element)) {
+        throw new Error('Could not convert the src to a React element');
+      }
+
+      this.setState({
+        element,
+        status: STATUS.READY,
+      });
+    } catch (error: any) {
+      this.handleError(new Error(error.message));
+    }
+  }
+
   private getNode() {
     const { description, title } = this.props;
 
@@ -138,38 +167,6 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     }
   }
 
-  private getElement() {
-    try {
-      const node = this.getNode() as Node;
-      const element = convert(node);
-
-      if (!element || !React.isValidElement(element)) {
-        throw new Error('Could not convert the src to a React element');
-      }
-
-      this.setState({
-        element,
-        status: STATUS.READY,
-      });
-    } catch (error: any) {
-      this.handleError(new Error(error.message));
-    }
-  }
-
-  private handleLoad = (content: string, hasCache = false) => {
-    /* istanbul ignore else */
-    if (this.isActive) {
-      this.setState(
-        {
-          content,
-          hasCache,
-          status: STATUS.LOADED,
-        },
-        this.getElement,
-      );
-    }
-  };
-
   private handleError = (error: Error | FetchError) => {
     const { onError } = this.props;
     const status =
@@ -186,69 +183,17 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     }
   };
 
-  private request = () => {
-    const { cacheRequests, fetchOptions, src } = this.props;
-
-    try {
-      if (cacheRequests) {
-        cacheStore[src] = { content: '', status: STATUS.LOADING };
-      }
-
-      return fetch(src, fetchOptions)
-        .then(response => {
-          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();
-        })
-        .then(content => {
-          const { src: currentSrc } = this.props;
-
-          // the current src don't match the previous one, skipping...
-          if (src !== currentSrc) {
-            if (cacheStore[src].status === STATUS.LOADING) {
-              delete cacheStore[src];
-            }
-
-            return;
-          }
-
-          this.handleLoad(content);
-
-          /* istanbul ignore else */
-          if (cacheRequests) {
-            const cache = cacheStore[src];
-
-            /* istanbul ignore else */
-            if (cache) {
-              cache.content = content;
-              cache.status = STATUS.LOADED;
-            }
-          }
-        })
-        .catch(error => {
-          this.handleError(error);
-
-          /* istanbul ignore else */
-          if (cacheRequests) {
-            const cache = cacheStore[src];
-
-            /* istanbul ignore else */
-            if (cache) {
-              delete cacheStore[src];
-            }
-          }
-        });
-    } catch (error: any) {
-      return this.handleError(new Error(error.message));
+  private handleLoad = (content: string, hasCache = false) => {
+    /* istanbul ignore else */
+    if (this.isActive) {
+      this.setState(
+        {
+          content,
+          isCached: hasCache,
+          status: STATUS.LOADED,
+        },
+        this.getElement,
+      );
     }
   };
 
@@ -259,20 +204,13 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
         {
           content: '',
           element: null,
-          hasCache: false,
+          isCached: false,
           status: STATUS.LOADING,
         },
-        () => {
-          const { cacheRequests, src } = this.props;
-          const cache = cacheRequests && cacheStore[src];
-
-          if (cache && cache.status === STATUS.LOADED) {
-            this.handleLoad(cache.content, true);
-
-            return;
-          }
+        async () => {
+          const { cacheRequests, fetchOptions, src } = this.props;
 
-          const dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+          const dataURI = src.match(/^data:image\/svg[^,]*?(;base64)?,(.*)/u);
           let inlineSrc;
 
           if (dataURI) {
@@ -287,12 +225,33 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
             return;
           }
 
-          this.request();
+          try {
+            if (cacheRequests) {
+              const content = await cacheStore.get(src, fetchOptions);
+
+              this.handleLoad(content, true);
+            } else {
+              await this.fetchContent();
+            }
+          } catch (error: any) {
+            this.handleError(error);
+          }
         },
       );
     }
   }
 
+  private processSVG() {
+    const { content } = this.state;
+    const { preProcessor } = this.props;
+
+    if (preProcessor) {
+      return preProcessor(content);
+    }
+
+    return content;
+  }
+
   private updateSVGAttributes(node: SVGSVGElement): SVGSVGElement {
     const { baseURL = '', uniquifyIDs } = this.props;
     const replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole'];
@@ -304,7 +263,7 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
       return node;
     }
 
-    [...node.children].map(d => {
+    [...node.children].forEach(d => {
       if (d.attributes && d.attributes.length) {
         const attributes = Object.values(d.attributes).map(a => {
           const attribute = a;
@@ -336,17 +295,6 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     return node;
   }
 
-  private processSVG() {
-    const { content } = this.state;
-    const { preProcessor } = this.props;
-
-    if (preProcessor) {
-      return preProcessor(content);
-    }
-
-    return content;
-  }
-
   public render(): React.ReactNode {
     const { element, status } = this.state;
     const { children = null, innerRef, loader = null } = this.props;
@@ -376,7 +324,7 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
       return React.cloneElement(element as React.ReactElement, { ref: innerRef, ...elementProps });
     }
 
-    if ([STATUS.UNSUPPORTED, STATUS.FAILED].includes(status)) {
+    if (([STATUS.UNSUPPORTED, STATUS.FAILED] as Status[]).includes(status)) {
       return children;
     }
 
@@ -384,4 +332,27 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
   }
 }
 
+export default function InlineSVG(props: Props) {
+  if (!cacheStore) {
+    cacheStore = new CacheStore();
+  }
+
+  const { loader } = props;
+  const [isReady, setReady] = React.useState(cacheStore.isReady);
+
+  React.useEffect(() => {
+    if (!isReady) {
+      cacheStore.onReady(() => {
+        setReady(true);
+      });
+    }
+  }, [isReady]);
+
+  if (!isReady) {
+    return loader ?? null;
+  }
+
+  return <ReactInlineSVG {...props} />;
+}
+
 export * from './types';

package/src/provider.tsx

@@ -0,0 +1,23 @@
+import { ReactNode, useEffect } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+declare global {
+  interface Window {
+    REACT_INLINESVG_PERSISTENT_CACHE?: boolean;
+  }
+}
+
+export default function CacheProvider({ children }: Props) {
+  useEffect(() => {
+    window.REACT_INLINESVG_PERSISTENT_CACHE = true;
+
+    return () => {
+      delete window.REACT_INLINESVG_PERSISTENT_CACHE;
+    };
+  }, []);
+
+  return children;
+}

package/src/types.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 
+import { STATUS } from './config';
+
 export type ErrorCallback = (error: Error | FetchError) => void;
 export type LoadCallback = (src: string, isCached: boolean) => void;
-export type PlainObject<T = unknown> = Record<string | number | symbol, T>;
+export type PlainObject<T = unknown> = Record<string, T>;
 export type PreProcessorCallback = (code: string) => string;
 
 export interface Props extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> {
@@ -25,8 +27,8 @@ export interface Props extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onEr
 export interface State {
   content: string;
   element: React.ReactNode;
-  hasCache: boolean;
-  status: string;
+  isCached: boolean;
+  status: Status;
 }
 
 export interface FetchError extends Error {
@@ -36,7 +38,9 @@ export interface FetchError extends Error {
   type: string;
 }
 
+export type Status = (typeof STATUS)[keyof typeof STATUS];
+
 export interface StorageItem {
   content: string;
-  status: string;
+  status: Status;
 }

package/esm/helpers.d.ts

@@ -1,17 +0,0 @@
-import { PlainObject } from './types';
-export declare const STATUS: {
-    FAILED: string;
-    LOADED: string;
-    LOADING: string;
-    PENDING: string;
-    READY: string;
-    UNSUPPORTED: string;
-};
-export declare function canUseDOM(): boolean;
-export declare function isSupportedEnvironment(): boolean;
-export declare function supportsInlineSVG(): boolean;
-export declare function randomString(length: number): string;
-/**
- *  Remove properties from an object
- */
-export declare function omit<T extends PlainObject, K extends keyof T>(input: T, ...filter: K[]): Omit<T, K>;

package/esm/helpers.js

@@ -1,58 +0,0 @@
-import { canUseDOM as canUseDOMFlag } from 'exenv';
-export var STATUS = {
-    FAILED: 'failed',
-    LOADED: 'loaded',
-    LOADING: 'loading',
-    PENDING: 'pending',
-    READY: 'ready',
-    UNSUPPORTED: 'unsupported',
-};
-export function canUseDOM() {
-    return canUseDOMFlag;
-}
-export function isSupportedEnvironment() {
-    return supportsInlineSVG() && typeof window !== 'undefined' && window !== null;
-}
-export function supportsInlineSVG() {
-    /* istanbul ignore next */
-    if (!document) {
-        return false;
-    }
-    var div = document.createElement('div');
-    div.innerHTML = '<svg />';
-    var svg = div.firstChild;
-    return !!svg && svg.namespaceURI === 'http://www.w3.org/2000/svg';
-}
-function randomCharacter(character) {
-    return character[Math.floor(Math.random() * character.length)];
-}
-export function randomString(length) {
-    var letters = 'abcdefghijklmnopqrstuvwxyz';
-    var numbers = '1234567890';
-    var charset = "".concat(letters).concat(letters.toUpperCase()).concat(numbers);
-    var R = '';
-    for (var index = 0; index < length; index++) {
-        R += randomCharacter(charset);
-    }
-    return R;
-}
-/**
- *  Remove properties from an object
- */
-export function omit(input) {
-    var filter = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        filter[_i - 1] = arguments[_i];
-    }
-    var output = {};
-    for (var key in input) {
-        /* istanbul ignore else */
-        if ({}.hasOwnProperty.call(input, key)) {
-            if (!filter.includes(key)) {
-                output[key] = input[key];
-            }
-        }
-    }
-    return output;
-}
-//# sourceMappingURL=helpers.js.map

package/esm/helpers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,CAAC,IAAM,MAAM,GAAG;IACpB,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,aAAa;CAC3B,CAAC;AAEF,MAAM,UAAU,SAAS;IACvB,OAAO,aAAa,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,sBAAsB;IACpC,OAAO,iBAAiB,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,KAAK,IAAI,CAAC;AACjF,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,0BAA0B;IAC1B,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,KAAK,CAAC;KACd;IAED,IAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE1C,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC;IAC1B,IAAM,GAAG,GAAG,GAAG,CAAC,UAA2B,CAAC;IAE5C,OAAO,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,YAAY,KAAK,4BAA4B,CAAC;AACpE,CAAC;AAED,SAAS,eAAe,CAAC,SAAiB;IACxC,OAAO,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;AACjE,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,MAAc;IACzC,IAAM,OAAO,GAAG,4BAA4B,CAAC;IAC7C,IAAM,OAAO,GAAG,YAAY,CAAC;IAC7B,IAAM,OAAO,GAAG,UAAG,OAAO,SAAG,OAAO,CAAC,WAAW,EAAE,SAAG,OAAO,CAAE,CAAC;IAE/D,IAAI,CAAC,GAAG,EAAE,CAAC;IAEX,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,EAAE,EAAE;QAC3C,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,CAAC;KAC/B;IAED,OAAO,CAAC,CAAC;AACX,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,IAAI,CAClB,KAAQ;IACR,gBAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,+BAAc;;IAEd,IAAM,MAAM,GAAQ,EAAE,CAAC;IAEvB,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;QACvB,0BAA0B;QAC1B,IAAI,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE;YACtC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAmB,CAAC,EAAE;gBACzC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;aAC1B;SACF;KACF;IAED,OAAO,MAAoB,CAAC;AAC9B,CAAC"}

package/esm/index.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { Props, State, StorageItem } from './types';
-export declare const cacheStore: {
-    [key: string]: StorageItem;
-};
-export default class InlineSVG extends React.PureComponent<Props, State> {
-    private isInitialized;
-    private isActive;
-    private readonly hash;
-    static defaultProps: {
-        cacheRequests: boolean;
-        uniquifyIDs: boolean;
-    };
-    constructor(props: Props);
-    componentDidMount(): void;
-    componentDidUpdate(previousProps: Props, previousState: State): void;
-    componentWillUnmount(): void;
-    private getNode;
-    private getElement;
-    private handleLoad;
-    private handleError;
-    private request;
-    private load;
-    private updateSVGAttributes;
-    private processSVG;
-    render(): React.ReactNode;
-}
-export * from './types';