react-inlinesvg 1.1.7 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-inlinesvg",
-  "version": "1.1.7",
+  "version": "2.1.0",
   "description": "An SVG loader for React",
   "author": "Gil Barbara <gilbarbara@gmail.com>",
   "contributors": [
@@ -18,83 +18,85 @@
   },
   "homepage": "https://github.com/gilbarbara/react-inlinesvg#readme",
   "main": "lib/index.js",
+  "module": "esm/index.js",
   "files": [
+    "esm",
     "lib",
     "src"
   ],
   "types": "lib/index.d.ts",
+  "sideEffects": true,
   "license": "MIT",
   "keywords": [
     "react",
     "svg"
   ],
   "peerDependencies": {
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0"
+    "react": "^16.8.0"
   },
   "dependencies": {
     "exenv": "^1.2.2",
-    "react-from-dom": "^0.2.3"
+    "react-from-dom": "^0.4.2"
   },
   "devDependencies": {
     "@gilbarbara/tsconfig": "^0.1.0",
-    "@size-limit/preset-small-lib": "^2.1.6",
-    "@types/enzyme": "^3.10.3",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@size-limit/preset-small-lib": "^4.5.7",
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/exenv": "^1.2.0",
-    "@types/fetch-mock": "^7.3.1",
-    "@types/jest": "^24.0.18",
-    "@types/node": "^12.7.7",
-    "@types/node-fetch": "^2.5.2",
-    "@types/react": "^16.9.3",
-    "@types/react-dom": "^16.9.1",
-    "cross-env": "^6.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "fetch-mock": "^7.3.9",
-    "http-server": "^0.11.1",
-    "husky": "^3.0.5",
-    "jest": "^24.9.0",
-    "jest-chain": "^1.1.2",
-    "jest-enzyme": "^7.1.1",
-    "jest-extended": "^0.11.2",
-    "jest-watch-typeahead": "^0.4.0",
-    "node-fetch": "^2.6.0",
-    "prettier": "^1.18.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "@types/fetch-mock": "^7.3.3",
+    "@types/jest": "^26.0.13",
+    "@types/node": "^14.6.4",
+    "@types/node-fetch": "^2.5.7",
+    "@types/react": "^16.9.49",
+    "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^4.0.1",
+    "@typescript-eslint/parser": "^4.0.1",
+    "del-cli": "^3.0.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.4",
+    "eslint": "^7.8.1",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.6",
+    "http-server": "^0.12.3",
+    "husky": "^4.2.5",
+    "jest": "^26.4.2",
+    "jest-chain": "^1.1.5",
+    "jest-enzyme": "^7.1.2",
+    "jest-extended": "^0.11.5",
+    "jest-fetch-mock": "^3.0.3",
+    "jest-watch-typeahead": "^0.6.1",
+    "node-fetch": "^2.6.1",
+    "prettier": "^2.1.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "repo-tools": "^0.2.0",
-    "rimraf": "^3.0.0",
-    "size-limit": "^2.1.6",
-    "start-server-and-test": "^1.10.0",
-    "styled-components": "^4.4.0",
-    "ts-jest": "^24.1.0",
-    "ts-node": "^8.4.1",
-    "tslint": "^5.20.0",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-react": "^4.1.0",
-    "typescript": "^3.6.3"
+    "size-limit": "^4.5.7",
+    "start-server-and-test": "^1.11.3",
+    "ts-jest": "^26.3.0",
+    "typescript": "^4.0.2"
   },
   "scripts": {
-    "build": "npm run clean && npm run build:ts",
-    "build:ts": "tsc",
-    "watch": "npm run build:ts -- -w",
-    "clean": "rimraf lib",
-    "start": "http-server -p 1337 --cors test/__fixtures__",
+    "build": "npm run clean && npm run build:cjs && npm run build:esm",
+    "build:cjs": "tsc",
+    "build:esm": "tsc -m es6 --outDir esm",
+    "clean": "del lib/* && del esm/*",
+    "watch:cjs": "npm run build:cjs -- -w",
+    "watch:esm": "npm run build:esm -- -w",
+    "start": "http-server test/__fixtures__ -p 1337 --cors",
     "test": "start-server-and-test start http://localhost:1337 test:coverage",
     "test:coverage": "jest --coverage --bail",
     "test:watch": "jest --watch --verbose",
-    "lint": "tslint 'src/**/*.ts?(x)' 'test/**/*.ts?(x)' 'tools/**/*.ts?(x)'",
+    "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 size",
-    "size": "npm run build && size-limit",
+    "validate": "npm run lint && npm run test && npm run build &&  npm run size",
+    "size": "size-limit",
     "prepublishOnly": "npm run validate"
   },
-  "browserslist": [
-    "> 0.2%",
-    "safari >= 9",
-    "ios >= 9"
-  ],
   "prettier": {
     "jsxBracketSameLine": false,
     "printWidth": 100,
@@ -104,12 +106,16 @@
   "size-limit": [
     {
       "path": "./lib/index.js",
-      "limit": "8 KB"
+      "limit": "8 kB"
+    },
+    {
+      "path": "./esm/index.js",
+      "limit": "8 kB"
     }
   ],
   "husky": {
     "hooks": {
-      "post-merge": "repo-tools istall-packages",
+      "post-merge": "repo-tools install-packages",
       "pre-commit": "repo-tools check-remote && npm run validate"
     }
   }

package/src/helpers.ts

@@ -1,8 +1,19 @@
 import { canUseDOM as canUseDOMFlag } from 'exenv';
 
-export const canUseDOM = () => canUseDOMFlag;
+export const STATUS = {
+  FAILED: 'failed',
+  LOADED: 'loaded',
+  LOADING: 'loading',
+  PENDING: 'pending',
+  READY: 'ready',
+  UNSUPPORTED: 'unsupported',
+};
+
+export function canUseDOM(): boolean {
+  return canUseDOMFlag;
+}
 
-export const supportsInlineSVG = () => {
+export function supportsInlineSVG(): boolean {
   /* istanbul ignore next */
   if (!document) {
     return false;
@@ -10,30 +21,14 @@ export const supportsInlineSVG = () => {
 
   const div = document.createElement('div');
   div.innerHTML = '<svg />';
-  return div.firstChild && div.firstChild.namespaceURI === 'http://www.w3.org/2000/svg';
-};
-
-// tslint:disable-next-line:no-shadowed-variable
-export class InlineSVGError extends Error {
-  public name: string;
-  public message: string;
-  public data?: object;
-
-  constructor(message: string, data?: object) {
-    super();
-
-    this.name = 'InlineSVGError';
-    this.message = message;
-    this.data = data;
-
-    return this;
-  }
+  return !!div.firstChild && div.firstChild.namespaceURI === 'http://www.w3.org/2000/svg';
 }
 
-export const isSupportedEnvironment = () =>
-  supportsInlineSVG() && typeof window !== 'undefined' && window !== null;
+export function isSupportedEnvironment(): boolean {
+  return supportsInlineSVG() && typeof window !== 'undefined' && window !== null;
+}
 
-export const randomString = (length: number) => {
+export function randomString(length: number): string {
   const letters = 'abcdefghijklmnopqrstuvwxyz';
   const numbers = '1234567890';
   const charset = `${letters}${letters.toUpperCase()}${numbers}`;
@@ -45,5 +40,6 @@ export const randomString = (length: number) => {
   for (let i = 0; i < length; i++) {
     R += randomCharacter(charset);
   }
+
   return R;
-};
+}

package/src/index.tsx

@@ -2,67 +2,13 @@ import * as React from 'react';
 
 import convert from 'react-from-dom';
 
-import { canUseDOM, InlineSVGError, isSupportedEnvironment, randomString } from './helpers';
-
-export interface IProps {
-  baseURL?: string;
-  cacheRequests?: boolean;
-  children?: React.ReactNode;
-  description?: string;
-  loader?: React.ReactNode;
-  innerRef?: React.Ref<HTMLElement>;
-  onError?: (error: InlineSVGError | IFetchError) => void;
-  onLoad?: (src: string, isCached: boolean) => void;
-  preProcessor?: (code: string) => string;
-  src: string;
-  title?: string;
-  uniqueHash?: string;
-  uniquifyIDs?: boolean;
-  [key: string]: any;
-}
-
-export interface IState {
-  content: string;
-  element: React.ReactNode;
-  hasCache: boolean;
-  status: string;
-}
-
-export interface IFetchError extends Error {
-  code: string;
-  errno: string;
-  message: string;
-  type: string;
-}
-
-export interface IStorageItem {
-  content: string;
-  queue: any[];
-  status: string;
-}
-
-export const STATUS = {
-  FAILED: 'failed',
-  LOADED: 'loaded',
-  LOADING: 'loading',
-  PENDING: 'pending',
-  READY: 'ready',
-  UNSUPPORTED: 'unsupported',
-};
-
-const cacheStore: { [key: string]: IStorageItem } = Object.create(null);
-
-export default class InlineSVG extends React.PureComponent<IProps, IState> {
-  public static defaultProps = {
-    cacheRequests: true,
-    uniquifyIDs: false,
-  };
+import { STATUS, canUseDOM, isSupportedEnvironment, randomString } from './helpers';
+import { FetchError, Props, State, StorageItem } from './types';
 
-  // tslint:disable-next-line:variable-name
-  private _isMounted = false;
-  private readonly hash: string;
+const cacheStore: { [key: string]: StorageItem } = Object.create(null);
 
-  constructor(props: IProps) {
+export default class InlineSVG extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -75,11 +21,18 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
     this.hash = props.uniqueHash || randomString(8);
   }
 
-  public componentDidMount() {
-    this._isMounted = true;
+  private isActive = false;
+  private readonly hash: string;
+
+  public static defaultProps = {
+    cacheRequests: true,
+    uniquifyIDs: false,
+  };
+
+  public componentDidMount(): void {
+    this.isActive = true;
 
     if (!canUseDOM()) {
-      this.handleError(new InlineSVGError('No DOM'));
       return;
     }
 
@@ -91,12 +44,12 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
       if (status === STATUS.PENDING) {
         /* istanbul ignore else */
         if (!isSupportedEnvironment()) {
-          throw new InlineSVGError('Browser does not support SVG');
+          throw new Error('Browser does not support SVG');
         }
 
         /* istanbul ignore else */
         if (!src) {
-          throw new InlineSVGError('Missing src');
+          throw new Error('Missing src');
         }
 
         this.load();
@@ -106,7 +59,7 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
     }
   }
 
-  public componentDidUpdate(prevProps: IProps, prevState: IState) {
+  public componentDidUpdate(prevProps: Props, prevState: State): void {
     if (!canUseDOM()) {
       return;
     }
@@ -123,7 +76,7 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
 
     if (prevProps.src !== src) {
       if (!src) {
-        this.handleError(new InlineSVGError('Missing src'));
+        this.handleError(new Error('Missing src'));
         return;
       }
 
@@ -131,8 +84,8 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
     }
   }
 
-  public componentWillUnmount() {
-    this._isMounted = false;
+  public componentWillUnmount(): void {
+    this.isActive = false;
   }
 
   private processSVG() {
@@ -157,20 +110,21 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
       return node;
     }
 
-    [...node.children].map(d => {
+    [...node.children].map((d) => {
       if (d.attributes && d.attributes.length) {
-        const attributes = Object.values(d.attributes);
-
-        attributes.forEach(a => {
-          const match = a.value.match(/^url\((#[^)]+)/);
+        const attributes = Object.values(d.attributes).map((a) => {
+          const attr = a;
+          const match = a.value.match(/url\((.*?)\)/);
 
           if (match && match[1]) {
-            a.value = `url(${baseURL}${match[1]}__${this.hash})`;
+            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);
+        replaceableAttributes.forEach((r) => {
+          const attribute = attributes.find((a) => a.name === r);
 
           if (attribute && !isDataValue(r, attribute.value)) {
             attribute.value = `${attribute.value}__${this.hash}`;
@@ -179,7 +133,7 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
       }
 
       if (d.children.length) {
-        d = this.updateSVGAttributes(d as SVGSVGElement);
+        return this.updateSVGAttributes(d as SVGSVGElement);
       }
 
       return d;
@@ -196,7 +150,7 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
       const node = convert(svgText, { nodeOnly: true });
 
       if (!node || !(node instanceof SVGSVGElement)) {
-        throw new InlineSVGError('Could not convert the src to a DOM Node');
+        throw new Error('Could not convert the src to a DOM Node');
       }
 
       const svg = this.updateSVGAttributes(node);
@@ -227,7 +181,7 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
 
       return svg;
     } catch (error) {
-      this.handleError(error);
+      return this.handleError(error);
     }
   }
 
@@ -237,7 +191,7 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
       const element = convert(node);
 
       if (!element || !React.isValidElement(element)) {
-        throw new InlineSVGError('Could not convert the src to a React element');
+        throw new Error('Could not convert the src to a React element');
       }
 
       this.setState({
@@ -245,13 +199,13 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
         status: STATUS.READY,
       });
     } catch (error) {
-      this.handleError(new InlineSVGError(error.message));
+      this.handleError(new Error(error.message));
     }
   }
 
   private load() {
     /* istanbul ignore else */
-    if (this._isMounted) {
+    if (this.isActive) {
       this.setState(
         {
           content: '',
@@ -265,7 +219,7 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
           if (cache) {
             /* istanbul ignore else */
             if (cache.status === STATUS.LOADING) {
-              cache.queue.push(this.handleLoad);
+              cache.queue.push(this.handleCacheQueue);
             } else if (cache.status === STATUS.LOADED) {
               this.handleLoad(cache.content);
             }
@@ -292,9 +246,19 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
     }
   }
 
+  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._isMounted) {
+    if (this.isActive) {
       this.setState(
         {
           content,
@@ -305,19 +269,13 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
     }
   };
 
-  private handleError = (error: InlineSVGError | IFetchError) => {
+  private handleError = (error: Error | FetchError) => {
     const { onError } = this.props;
     const status =
       error.message === 'Browser does not support SVG' ? STATUS.UNSUPPORTED : STATUS.FAILED;
 
     /* istanbul ignore else */
-    if (process.env.NODE_ENV !== 'production') {
-      // tslint:disable-next-line:no-console
-      console.error(error);
-    }
-
-    /* istanbul ignore else */
-    if (this._isMounted) {
+    if (this.isActive) {
       this.setState({ status }, () => {
         /* istanbul ignore else */
         if (typeof onError === 'function') {
@@ -336,21 +294,21 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
       }
 
       return fetch(src)
-        .then(response => {
+        .then((response) => {
           const contentType = response.headers.get('content-type');
           const [fileType] = (contentType || '').split(/ ?; ?/);
 
           if (response.status > 299) {
-            throw new InlineSVGError('Not Found');
+            throw new Error('Not found');
           }
 
-          if (!['image/svg+xml', 'text/plain'].some(d => fileType.indexOf(d) >= 0)) {
-            throw new InlineSVGError(`Content type isn't valid: ${fileType}`);
+          if (!['image/svg+xml', 'text/plain'].some((d) => fileType.indexOf(d) >= 0)) {
+            throw new Error(`Content type isn't valid: ${fileType}`);
           }
 
           return response.text();
         })
-        .then(content => {
+        .then((content) => {
           this.handleLoad(content);
 
           /* istanbul ignore else */
@@ -362,7 +320,7 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
               cache.content = content;
               cache.status = STATUS.LOADED;
 
-              cache.queue = cache.queue.filter((cb: (content: string) => void) => {
+              cache.queue = cache.queue.filter((cb) => {
                 cb(content);
 
                 return false;
@@ -370,23 +328,29 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
             }
           }
         })
-        .catch(error => {
+        .catch((error) => {
+          this.handleError(error);
+
           /* istanbul ignore else */
           if (cacheRequests) {
-            delete cacheStore[src];
+            const cache = cacheStore[src];
+
+            /* istanbul ignore else */
+            if (cache) {
+              cache.queue.forEach((cb: (content: string) => void) => {
+                cb(error);
+              });
+
+              delete cacheStore[src];
+            }
           }
-          this.handleError(error);
         });
     } catch (error) {
-      this.handleError(new InlineSVGError(error.message));
+      return this.handleError(new Error(error.message));
     }
   };
 
-  public render() {
-    if (!canUseDOM()) {
-      return null;
-    }
-
+  public render(): React.ReactNode {
     const { element, status } = this.state;
     const {
       baseURL,
@@ -405,6 +369,10 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
       ...rest
     } = this.props;
 
+    if (!canUseDOM()) {
+      return loader;
+    }
+
     if (element) {
       return React.cloneElement(element as React.ReactElement, { ref: innerRef, ...rest });
     }
@@ -416,3 +384,5 @@ export default class InlineSVG extends React.PureComponent<IProps, IState> {
     return loader;
   }
 }
+
+export * from './types';

package/src/types.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+type Callback = (...args: any[]) => void;
+
+export type ErrorCallback = (error: Error | FetchError) => void;
+export type LoadCallback = (src: string, isCached: boolean) => void;
+export type PreProcessorCallback = (code: string) => string;
+
+export interface Props extends Omit<React.HTMLProps<SVGElement>, 'onLoad' | 'onError'> {
+  baseURL?: string;
+  cacheRequests?: boolean;
+  children?: React.ReactNode;
+  description?: string;
+  innerRef?: React.Ref<HTMLElement>;
+  loader?: React.ReactNode;
+  onError?: ErrorCallback;
+  onLoad?: LoadCallback;
+  preProcessor?: PreProcessorCallback;
+  src: string;
+  title?: string;
+  uniqueHash?: string;
+  uniquifyIDs?: boolean;
+}
+
+export interface State {
+  content: string;
+  element: React.ReactNode;
+  hasCache: boolean;
+  status: string;
+}
+
+export interface FetchError extends Error {
+  code: string;
+  errno: string;
+  message: string;
+  type: string;
+}
+
+export interface StorageItem {
+  content: string;
+  queue: Callback[];
+  status: string;
+}