react-inlinesvg 3.0.1 → 3.0.3

package/src/index.tsx

@@ -2,14 +2,14 @@ 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 { FetchError, Props, State, Status, StorageItem } from './types';
 
 export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
 
 export default class InlineSVG extends React.PureComponent<Props, State> {
-  private isInitialized = false;
-  private isActive = false;
   private readonly hash: string;
+  private isActive = false;
+  private isInitialized = false;
 
   public static defaultProps = {
     cacheRequests: true,
@@ -23,7 +23,7 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
       content: '',
       element: null,
       hasCache: !!props.cacheRequests && !!cacheStore[props.src],
-      status: STATUS.PENDING,
+      status: STATUS.IDLE,
     };
 
     this.hash = props.uniqueHash || randomString(8);
@@ -41,7 +41,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');
@@ -91,6 +91,24 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     this.isActive = false;
   }
 
+  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;
 
@@ -111,23 +129,25 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
           originalDesc.parentNode.removeChild(originalDesc);
         }
 
-        const descElement = document.createElement('desc');
+        const descElement = document.createElementNS('http://www.w3.org/2000/svg', 'desc');
 
         descElement.innerHTML = description;
         svg.prepend(descElement);
       }
 
-      if (title) {
+      if (typeof title !== 'undefined') {
         const originalTitle = svg.querySelector('title');
 
         if (originalTitle && originalTitle.parentNode) {
           originalTitle.parentNode.removeChild(originalTitle);
         }
 
-        const titleElement = document.createElement('title');
+        if (title) {
+          const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
 
-        titleElement.innerHTML = title;
-        svg.prepend(titleElement);
+          titleElement.innerHTML = title;
+          svg.prepend(titleElement);
+        }
       }
 
       return svg;
@@ -136,37 +156,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) => {
-    /* istanbul ignore else */
-    if (this.isActive) {
-      this.setState(
-        {
-          content,
-          status: STATUS.LOADED,
-        },
-        this.getElement,
-      );
-    }
-  };
-
   private handleError = (error: Error | FetchError) => {
     const { onError } = this.props;
     const status =
@@ -183,69 +172,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,
+          hasCache,
+          status: STATUS.LOADED,
+        },
+        this.getElement,
+      );
     }
   };
 
@@ -256,6 +193,7 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
         {
           content: '',
           element: null,
+          hasCache: false,
           status: STATUS.LOADING,
         },
         () => {
@@ -263,12 +201,12 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
           const cache = cacheRequests && cacheStore[src];
 
           if (cache && cache.status === STATUS.LOADED) {
-            this.handleLoad(cache.content);
+            this.handleLoad(cache.content, true);
 
             return;
           }
 
-          const dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+          const dataURI = src.match(/^data:image\/svg[^,]*?(;base64)?,(.*)/u);
           let inlineSrc;
 
           if (dataURI) {
@@ -289,6 +227,76 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     }
   }
 
+  private processSVG() {
+    const { content } = this.state;
+    const { preProcessor } = this.props;
+
+    if (preProcessor) {
+      return preProcessor(content);
+    }
+
+    return content;
+  }
+
+  private request = async () => {
+    const { cacheRequests, fetchOptions, src } = this.props;
+
+    if (cacheRequests) {
+      cacheStore[src] = { content: '', status: STATUS.LOADING };
+    }
+
+    try {
+      const response = await fetch(src, fetchOptions);
+      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}`);
+      }
+
+      const content: string = await response.text();
+      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: any) {
+      this.handleError(error);
+
+      /* istanbul ignore else */
+      if (cacheRequests) {
+        const cache = cacheStore[src];
+
+        /* istanbul ignore else */
+        if (cache) {
+          delete cacheStore[src];
+        }
+      }
+    }
+  };
+
   private updateSVGAttributes(node: SVGSVGElement): SVGSVGElement {
     const { baseURL = '', uniquifyIDs } = this.props;
     const replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole'];
@@ -300,7 +308,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;
@@ -332,17 +340,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;
@@ -372,7 +369,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;
     }
 

package/src/types.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 
+import { STATUS } from './helpers';
+
 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'> {
@@ -17,7 +19,7 @@ export interface Props extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onEr
   onLoad?: LoadCallback;
   preProcessor?: PreProcessorCallback;
   src: string;
-  title?: string;
+  title?: string | null;
   uniqueHash?: string;
   uniquifyIDs?: boolean;
 }
@@ -26,7 +28,7 @@ export interface State {
   content: string;
   element: React.ReactNode;
   hasCache: boolean;
-  status: string;
+  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;
 }