react-inlinesvg 2.2.1 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-inlinesvg",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "description": "An SVG loader for React",
   "author": "Gil Barbara <gilbarbara@gmail.com>",
   "contributors": [
@@ -30,57 +30,47 @@
     "src"
   ],
   "types": "esm",
-  "sideEffects": true,
+  "sideEffects": false,
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
     "exenv": "^1.2.2",
-    "react-from-dom": "^0.5.0"
+    "react-from-dom": "^0.6.2"
   },
   "devDependencies": {
+    "@gilbarbara/eslint-config": "^0.2.1",
+    "@gilbarbara/helpers": "^0.5.1",
+    "@gilbarbara/prettier-config": "^0.1.0",
     "@gilbarbara/tsconfig": "^0.1.0",
-    "@size-limit/preset-small-lib": "^4.9.1",
-    "@types/enzyme": "^3.10.8",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.0.1",
     "@types/exenv": "^1.2.0",
-    "@types/fetch-mock": "^7.3.3",
-    "@types/jest": "^26.0.18",
-    "@types/node": "^14.14.12",
-    "@types/node-fetch": "^2.5.7",
-    "@types/react": "^16.14.2",
-    "@types/react-dom": "^16.9.10",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
-    "@typescript-eslint/parser": "^4.9.1",
+    "@types/fetch-mock": "^7.3.5",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.24",
+    "@types/node-fetch": "^2.6.1",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
+    "cross-fetch": "^3.1.5",
     "del-cli": "^3.0.1",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "eslint": "^7.15.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^7.0.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.2.0",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "http-server": "^0.12.3",
-    "husky": "^4.3.5",
-    "jest": "^26.6.3",
+    "http-server": "^14.1.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
     "jest-chain": "^1.1.5",
-    "jest-enzyme": "^7.1.2",
-    "jest-extended": "^0.11.5",
+    "jest-extended": "^2.0.0",
     "jest-fetch-mock": "^3.0.3",
-    "jest-serializer-html": "^7.0.0",
-    "jest-watch-typeahead": "^0.6.1",
-    "node-fetch": "^2.6.1",
-    "prettier": "^2.2.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "repo-tools": "^0.2.0",
-    "size-limit": "^4.9.1",
-    "start-server-and-test": "^1.11.6",
-    "ts-jest": "^26.4.4",
-    "typescript": "^4.1.2"
+    "jest-serializer-html": "^7.1.0",
+    "jest-watch-typeahead": "^1.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "repo-tools": "^0.2.2",
+    "size-limit": "^7.0.8",
+    "start-server-and-test": "^1.14.0",
+    "ts-jest": "^27.1.4",
+    "ts-node": "^10.7.0",
+    "typescript": "^4.6.3"
   },
   "scripts": {
     "build": "npm run clean && npm run build:cjs && npm run build:esm",
@@ -95,30 +85,40 @@
     "test:watch": "jest --watchAll --verbose",
     "lint": "eslint --ext .ts,.tsx src test",
     "format": "prettier \"**/*.{js,jsx,json,yml,yaml,css,less,scss,ts,tsx,md,graphql,mdx}\" --write",
-    "validate": "npm run lint && npm run test && npm run build &&  npm run size",
+    "validate": "npm run lint && npm run test && npm run build && npm run size",
     "size": "size-limit",
-    "prepublishOnly": "npm run validate"
+    "prepublishOnly": "npm run validate",
+    "prepare": "husky install"
   },
-  "prettier": {
-    "jsxBracketSameLine": false,
-    "printWidth": 100,
-    "singleQuote": true,
-    "trailingComma": "all"
+  "eslintConfig": {
+    "extends": [
+      "@gilbarbara/eslint-config"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "test/**/*.ts?(x)"
+        ],
+        "rules": {
+          "@typescript-eslint/ban-ts-comment": "off",
+          "no-console": "off",
+          "testing-library/no-container": "off",
+          "testing-library/no-node-access": "off"
+        }
+      }
+    ]
   },
+  "prettier": "@gilbarbara/prettier-config",
   "size-limit": [
     {
+      "name": "lib",
       "path": "./lib/index.js",
-      "limit": "8 kB"
+      "limit": "9 kB"
     },
     {
+      "name": "esm",
       "path": "./esm/index.js",
-      "limit": "8 kB"
+      "limit": "9 kB"
     }
-  ],
-  "husky": {
-    "hooks": {
-      "post-merge": "repo-tools install-packages",
-      "pre-commit": "repo-tools check-remote && npm run validate"
-    }
-  }
+  ]
 }

package/src/helpers.ts

@@ -1,5 +1,7 @@
 import { canUseDOM as canUseDOMFlag } from 'exenv';
 
+import { PlainObject } from './types';
+
 export const STATUS = {
   FAILED: 'failed',
   LOADED: 'loaded',
@@ -13,6 +15,10 @@ export function canUseDOM(): boolean {
   return canUseDOMFlag;
 }
 
+export function isSupportedEnvironment(): boolean {
+  return supportsInlineSVG() && typeof window !== 'undefined' && window !== null;
+}
+
 export function supportsInlineSVG(): boolean {
   /* istanbul ignore next */
   if (!document) {
@@ -20,12 +26,15 @@ export function supportsInlineSVG(): boolean {
   }
 
   const div = document.createElement('div');
+
   div.innerHTML = '<svg />';
-  return !!div.firstChild && div.firstChild.namespaceURI === 'http://www.w3.org/2000/svg';
+  const svg = div.firstChild as SVGSVGElement;
+
+  return !!svg && svg.namespaceURI === 'http://www.w3.org/2000/svg';
 }
 
-export function isSupportedEnvironment(): boolean {
-  return supportsInlineSVG() && typeof window !== 'undefined' && window !== null;
+function randomCharacter(character: string) {
+  return character[Math.floor(Math.random() * character.length)];
 }
 
 export function randomString(length: number): string {
@@ -33,13 +42,32 @@ export function randomString(length: number): string {
   const numbers = '1234567890';
   const charset = `${letters}${letters.toUpperCase()}${numbers}`;
 
-  const randomCharacter = (character: string) =>
-    character[Math.floor(Math.random() * character.length)];
-
   let R = '';
-  for (let i = 0; i < length; i++) {
+
+  for (let index = 0; index < length; index++) {
     R += randomCharacter(charset);
   }
 
   return R;
 }
+
+/**
+ *  Remove properties from an object
+ */
+export function omit<T extends PlainObject, K extends keyof T>(
+  input: T,
+  ...filter: K[]
+): Omit<T, K> {
+  const output: any = {};
+
+  for (const key in input) {
+    /* istanbul ignore else */
+    if ({}.hasOwnProperty.call(input, key)) {
+      if (!filter.includes(key as unknown as K)) {
+        output[key] = input[key];
+      }
+    }
+  }
+
+  return output as Omit<T, K>;
+}

package/src/index.tsx

@@ -1,13 +1,20 @@
 import * as React from 'react';
-
 import convert from 'react-from-dom';
 
-import { STATUS, canUseDOM, isSupportedEnvironment, randomString } from './helpers';
+import { canUseDOM, isSupportedEnvironment, omit, randomString, STATUS } from './helpers';
 import { FetchError, Props, State, StorageItem } from './types';
 
-const cacheStore: { [key: string]: StorageItem } = Object.create(null);
+export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
 
 export default class InlineSVG extends React.PureComponent<Props, State> {
+  private isActive = false;
+  private readonly hash: string;
+
+  public static defaultProps = {
+    cacheRequests: true,
+    uniquifyIDs: false,
+  };
+
   constructor(props: Props) {
     super(props);
 
@@ -21,14 +28,6 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     this.hash = props.uniqueHash || randomString(8);
   }
 
-  private isActive = false;
-  private readonly hash: string;
-
-  public static defaultProps = {
-    cacheRequests: true,
-    uniquifyIDs: false,
-  };
-
   public componentDidMount(): void {
     this.isActive = true;
 
@@ -54,12 +53,12 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
 
         this.load();
       }
-    } catch (error) {
+    } catch (error: any) {
       this.handleError(error);
     }
   }
 
-  public componentDidUpdate(prevProps: Props, prevState: State): void {
+  public componentDidUpdate(previousProps: Props, previousState: State): void {
     if (!canUseDOM()) {
       return;
     }
@@ -67,16 +66,17 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     const { hasCache, status } = this.state;
     const { onLoad, src } = this.props;
 
-    if (prevState.status !== STATUS.READY && status === STATUS.READY) {
+    if (previousState.status !== STATUS.READY && status === STATUS.READY) {
       /* istanbul ignore else */
       if (onLoad) {
         onLoad(src, hasCache);
       }
     }
 
-    if (prevProps.src !== src) {
+    if (previousProps.src !== src) {
       if (!src) {
         this.handleError(new Error('Missing src'));
+
         return;
       }
 
@@ -88,60 +88,6 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
     this.isActive = false;
   }
 
-  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'];
-    const linkAttributes = ['href', 'xlink:href'];
-    const isDataValue = (name: string, value: string) =>
-      linkAttributes.indexOf(name) >= 0 && (value ? value.indexOf('#') < 0 : false);
-
-    if (!uniquifyIDs) {
-      return node;
-    }
-
-    [...node.children].map((d) => {
-      if (d.attributes && d.attributes.length) {
-        const attributes = Object.values(d.attributes).map((a) => {
-          const attr = a;
-          const match = a.value.match(/url\((.*?)\)/);
-
-          if (match && match[1]) {
-            attr.value = a.value.replace(match[0], `url(${baseURL}${match[1]}__${this.hash})`);
-          }
-
-          return attr;
-        });
-
-        replaceableAttributes.forEach((r) => {
-          const attribute = attributes.find((a) => a.name === r);
-
-          if (attribute && !isDataValue(r, attribute.value)) {
-            attribute.value = `${attribute.value}__${this.hash}`;
-          }
-        });
-      }
-
-      if (d.children.length) {
-        return this.updateSVGAttributes(d as SVGSVGElement);
-      }
-
-      return d;
-    });
-
-    return node;
-  }
-
   private getNode() {
     const { description, title } = this.props;
 
@@ -163,6 +109,7 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
         }
 
         const descElement = document.createElement('desc');
+
         descElement.innerHTML = description;
         svg.prepend(descElement);
       }
@@ -175,12 +122,13 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
         }
 
         const titleElement = document.createElement('title');
+
         titleElement.innerHTML = title;
         svg.prepend(titleElement);
       }
 
       return svg;
-    } catch (error) {
+    } catch (error: any) {
       return this.handleError(error);
     }
   }
@@ -198,64 +146,11 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
         element,
         status: STATUS.READY,
       });
-    } catch (error) {
+    } catch (error: any) {
       this.handleError(new Error(error.message));
     }
   }
 
-  private load() {
-    /* istanbul ignore else */
-    if (this.isActive) {
-      this.setState(
-        {
-          content: '',
-          element: null,
-          status: STATUS.LOADING,
-        },
-        () => {
-          const { cacheRequests, src } = this.props;
-          const cache = cacheRequests && cacheStore[src];
-
-          if (cache) {
-            /* istanbul ignore else */
-            if (cache.status === STATUS.LOADING) {
-              cache.queue.push(this.handleCacheQueue);
-            } else if (cache.status === STATUS.LOADED) {
-              this.handleLoad(cache.content);
-            }
-            return;
-          }
-
-          const dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
-          let inlineSrc;
-
-          if (dataURI) {
-            inlineSrc = dataURI[1] ? atob(dataURI[2]) : decodeURIComponent(dataURI[2]);
-          } else if (src.indexOf('<svg') >= 0) {
-            inlineSrc = src;
-          }
-
-          if (inlineSrc) {
-            this.handleLoad(inlineSrc);
-            return;
-          }
-
-          this.request();
-        },
-      );
-    }
-  }
-
-  private handleCacheQueue = (content: string | Error) => {
-    /* istanbul ignore else */
-    if (typeof content === 'string') {
-      this.handleLoad(content);
-      return;
-    }
-
-    this.handleError(content);
-  };
-
   private handleLoad = (content: string) => {
     /* istanbul ignore else */
     if (this.isActive) {
@@ -286,15 +181,15 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
   };
 
   private request = () => {
-    const { cacheRequests, src } = this.props;
+    const { cacheRequests, fetchOptions, src } = this.props;
 
     try {
       if (cacheRequests) {
-        cacheStore[src] = { content: '', status: STATUS.LOADING, queue: [] };
+        cacheStore[src] = { content: '', status: STATUS.LOADING };
       }
 
-      return fetch(src)
-        .then((response) => {
+      return fetch(src, fetchOptions)
+        .then(response => {
           const contentType = response.headers.get('content-type');
           const [fileType] = (contentType || '').split(/ ?; ?/);
 
@@ -302,13 +197,24 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
             throw new Error('Not found');
           }
 
-          if (!['image/svg+xml', 'text/plain'].some((d) => fileType.indexOf(d) >= 0)) {
+          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) => {
+        .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 */
@@ -319,16 +225,10 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
             if (cache) {
               cache.content = content;
               cache.status = STATUS.LOADED;
-
-              cache.queue = cache.queue.filter((cb) => {
-                cb(content);
-
-                return false;
-              });
             }
           }
         })
-        .catch((error) => {
+        .catch(error => {
           this.handleError(error);
 
           /* istanbul ignore else */
@@ -337,47 +237,139 @@ export default class InlineSVG extends React.PureComponent<Props, State> {
 
             /* istanbul ignore else */
             if (cache) {
-              cache.queue.forEach((cb: (content: string) => void) => {
-                cb(error);
-              });
-
               delete cacheStore[src];
             }
           }
         });
-    } catch (error) {
+    } catch (error: any) {
       return this.handleError(new Error(error.message));
     }
   };
 
+  private load() {
+    /* istanbul ignore else */
+    if (this.isActive) {
+      this.setState(
+        {
+          content: '',
+          element: null,
+          status: STATUS.LOADING,
+        },
+        () => {
+          const { cacheRequests, src } = this.props;
+          const cache = cacheRequests && cacheStore[src];
+
+          if (cache && cache.status === STATUS.LOADED) {
+            this.handleLoad(cache.content);
+
+            return;
+          }
+
+          const dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+          let inlineSrc;
+
+          if (dataURI) {
+            inlineSrc = dataURI[1] ? window.atob(dataURI[2]) : decodeURIComponent(dataURI[2]);
+          } else if (src.includes('<svg')) {
+            inlineSrc = src;
+          }
+
+          if (inlineSrc) {
+            this.handleLoad(inlineSrc);
+
+            return;
+          }
+
+          this.request();
+        },
+      );
+    }
+  }
+
+  private updateSVGAttributes(node: SVGSVGElement): SVGSVGElement {
+    const { baseURL = '', uniquifyIDs } = this.props;
+    const replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole'];
+    const linkAttributes = ['href', 'xlink:href'];
+    const isDataValue = (name: string, value: string) =>
+      linkAttributes.includes(name) && (value ? !value.includes('#') : false);
+
+    if (!uniquifyIDs) {
+      return node;
+    }
+
+    [...node.children].map(d => {
+      if (d.attributes && d.attributes.length) {
+        const attributes = Object.values(d.attributes).map(a => {
+          const attribute = a;
+          const match = a.value.match(/url\((.*?)\)/);
+
+          if (match && match[1]) {
+            attribute.value = a.value.replace(match[0], `url(${baseURL}${match[1]}__${this.hash})`);
+          }
+
+          return attribute;
+        });
+
+        replaceableAttributes.forEach(r => {
+          const attribute = attributes.find(a => a.name === r);
+
+          if (attribute && !isDataValue(r, attribute.value)) {
+            attribute.value = `${attribute.value}__${this.hash}`;
+          }
+        });
+      }
+
+      if (d.children.length) {
+        return this.updateSVGAttributes(d as SVGSVGElement);
+      }
+
+      return d;
+    });
+
+    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 {
-      baseURL,
-      cacheRequests,
-      children = null,
-      description,
-      innerRef,
-      loader = null,
-      onError,
-      onLoad,
-      preProcessor,
-      src,
-      title,
-      uniqueHash,
-      uniquifyIDs,
-      ...rest
-    } = this.props;
+    const { children = null, innerRef, loader = null } = this.props;
+    const elementProps = omit(
+      this.props,
+      'baseURL',
+      'cacheRequests',
+      'children',
+      'description',
+      'fetchOptions',
+      'innerRef',
+      'loader',
+      'onError',
+      'onLoad',
+      'preProcessor',
+      'src',
+      'title',
+      'uniqueHash',
+      'uniquifyIDs',
+    );
 
     if (!canUseDOM()) {
       return loader;
     }
 
     if (element) {
-      return React.cloneElement(element as React.ReactElement, { ref: innerRef, ...rest });
+      return React.cloneElement(element as React.ReactElement, { ref: innerRef, ...elementProps });
     }
 
-    if ([STATUS.UNSUPPORTED, STATUS.FAILED].indexOf(status) > -1) {
+    if ([STATUS.UNSUPPORTED, STATUS.FAILED].includes(status)) {
       return children;
     }