react-inlinesvg 4.0.6 → 4.1.0

package/src/index.tsx

@@ -1,331 +1,256 @@
-import * as React from 'react';
+import {
+  cloneElement,
+  isValidElement,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
 import convert from 'react-from-dom';
 
-import CacheStore from './cache';
 import { STATUS } from './config';
-import { canUseDOM, isSupportedEnvironment, omit, randomString, request } from './helpers';
+import CacheStore from './modules/cache';
+import { canUseDOM, isSupportedEnvironment, omit, randomString, request } from './modules/helpers';
+import { usePrevious } from './modules/hooks';
+import { getNode } from './modules/utils';
 import { FetchError, Props, State, Status } from './types';
 
 // eslint-disable-next-line import/no-mutable-exports
 export let cacheStore: CacheStore;
 
-class ReactInlineSVG extends React.PureComponent<Props, State> {
-  private readonly hash: string;
-  private isActive = false;
-  private isInitialized = false;
-
-  public static defaultProps = {
-    cacheRequests: true,
-    uniquifyIDs: false,
-  };
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
+function ReactInlineSVG(props: Props) {
+  const {
+    cacheRequests = true,
+    children = null,
+    description,
+    fetchOptions,
+    innerRef,
+    loader = null,
+    onError,
+    onLoad,
+    src,
+    title,
+    uniqueHash,
+  } = props;
+  const [state, setState] = useReducer(
+    (previousState: State, nextState: Partial<State>) => ({
+      ...previousState,
+      ...nextState,
+    }),
+    {
       content: '',
       element: null,
-      isCached: !!props.cacheRequests && cacheStore.isCached(props.src),
-      status: STATUS.IDLE,
-    };
-
-    this.hash = props.uniqueHash ?? randomString(8);
-  }
-
-  public componentDidMount(): void {
-    this.isActive = true;
-
-    if (!canUseDOM() || this.isInitialized) {
-      return;
-    }
-
-    const { status } = this.state;
-    const { src } = this.props;
-
-    try {
-      if (status === STATUS.IDLE) {
-        if (!isSupportedEnvironment()) {
-          throw new Error('Browser does not support SVG');
-        }
-
-        if (!src) {
-          throw new Error('Missing src');
-        }
-
-        this.load();
-      }
-    } catch (error: any) {
-      this.handleError(error);
-    }
-
-    this.isInitialized = true;
-  }
-
-  public componentDidUpdate(previousProps: Props, previousState: State): void {
-    if (!canUseDOM()) {
-      return;
-    }
-
-    const { isCached, status } = this.state;
-    const { description, onLoad, src, title } = this.props;
 
-    if (previousState.status !== STATUS.READY && status === STATUS.READY) {
-      if (onLoad) {
-        onLoad(src, isCached);
-      }
-    }
-
-    if (previousProps.src !== src) {
-      if (!src) {
-        this.handleError(new Error('Missing src'));
+      isCached: cacheRequests && cacheStore.isCached(props.src),
+      status: STATUS.IDLE,
+    },
+  );
+  const { content, element, isCached, status } = state;
+  const previousProps = usePrevious(props);
+  const previousState = usePrevious(state);
+
+  const hash = useRef(uniqueHash ?? randomString(8));
+  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,
+        });
 
-        return;
+        onError?.(error);
       }
-
-      this.load();
-    }
-
-    if (previousProps.title !== title || previousProps.description !== description) {
-      this.getElement();
+    },
+    [onError],
+  );
+
+  const handleLoad = useCallback((loadedContent: string, hasCache = false) => {
+    if (isActive.current) {
+      setState({
+        content: loadedContent,
+        isCached: hasCache,
+        status: STATUS.LOADED,
+      });
     }
-  }
-
-  public componentWillUnmount(): void {
-    this.isActive = false;
-  }
-
-  private fetchContent = async () => {
-    const { fetchOptions, src } = this.props;
+  }, []);
 
-    const content: string = await request(src, fetchOptions);
+  const fetchContent = useCallback(async () => {
+    const responseContent: string = await request(src, fetchOptions);
 
-    this.handleLoad(content);
-  };
+    handleLoad(responseContent);
+  }, [fetchOptions, handleLoad, src]);
 
-  private getElement() {
+  const getElement = useCallback(() => {
     try {
-      const node = this.getNode() as Node;
-      const element = convert(node);
+      const node = getNode({ ...props, handleError, hash: hash.current, content }) as Node;
+      const convertedElement = convert(node);
 
-      if (!element || !React.isValidElement(element)) {
+      if (!convertedElement || !isValidElement(convertedElement)) {
         throw new Error('Could not convert the src to a React element');
       }
 
-      this.setState({
-        element,
+      setState({
+        element: convertedElement,
         status: STATUS.READY,
       });
     } catch (error: any) {
-      this.handleError(new Error(error.message));
+      handleError(new Error(error.message));
     }
-  }
-
-  private getNode() {
-    const { description, title } = this.props;
-
-    try {
-      const svgText = this.processSVG();
-      const node = convert(svgText, { nodeOnly: true });
-
-      if (!node || !(node instanceof SVGSVGElement)) {
-        throw new Error('Could not convert the src to a DOM Node');
-      }
-
-      const svg = this.updateSVGAttributes(node);
-
-      if (description) {
-        const originalDesc = svg.querySelector('desc');
-
-        if (originalDesc?.parentNode) {
-          originalDesc.parentNode.removeChild(originalDesc);
-        }
+  }, [content, handleError, props]);
 
-        const descElement = document.createElementNS('http://www.w3.org/2000/svg', 'desc');
+  const getContent = useCallback(async () => {
+    const dataURI = /^data:image\/svg[^,]*?(;base64)?,(.*)/u.exec(src);
+    let inlineSrc;
 
-        descElement.innerHTML = description;
-        svg.prepend(descElement);
-      }
+    if (dataURI) {
+      inlineSrc = dataURI[1] ? window.atob(dataURI[2]) : decodeURIComponent(dataURI[2]);
+    } else if (src.includes('<svg')) {
+      inlineSrc = src;
+    }
 
-      if (typeof title !== 'undefined') {
-        const originalTitle = svg.querySelector('title');
+    if (inlineSrc) {
+      handleLoad(inlineSrc);
 
-        if (originalTitle?.parentNode) {
-          originalTitle.parentNode.removeChild(originalTitle);
-        }
+      return;
+    }
 
-        if (title) {
-          const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+    try {
+      if (cacheRequests) {
+        const cachedContent = await cacheStore.get(src, fetchOptions);
 
-          titleElement.innerHTML = title;
-          svg.prepend(titleElement);
-        }
+        handleLoad(cachedContent, true);
+      } else {
+        await fetchContent();
       }
-
-      return svg;
     } catch (error: any) {
-      return this.handleError(error);
+      handleError(error);
     }
-  }
-
-  private handleError = (error: Error | FetchError) => {
-    const { onError } = this.props;
-    const status =
-      error.message === 'Browser does not support SVG' ? STATUS.UNSUPPORTED : STATUS.FAILED;
-
-    if (this.isActive) {
-      this.setState({ status }, () => {
-        if (typeof onError === 'function') {
-          onError(error);
-        }
+  }, [cacheRequests, fetchContent, fetchOptions, handleError, handleLoad, src]);
+
+  const load = useCallback(async () => {
+    if (isActive.current) {
+      setState({
+        content: '',
+        element: null,
+        isCached: false,
+        status: STATUS.LOADING,
       });
     }
-  };
-
-  private handleLoad = (content: string, hasCache = false) => {
-    if (this.isActive) {
-      this.setState(
-        {
-          content,
-          isCached: hasCache,
-          status: STATUS.LOADED,
-        },
-        this.getElement,
-      );
-    }
-  };
-
-  private load() {
-    if (this.isActive) {
-      this.setState(
-        {
-          content: '',
-          element: null,
-          isCached: false,
-          status: STATUS.LOADING,
-        },
-        async () => {
-          const { cacheRequests, fetchOptions, src } = this.props;
-
-          const dataURI = /^data:image\/svg[^,]*?(;base64)?,(.*)/u.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) {
-            this.handleLoad(inlineSrc);
+  }, []);
 
-            return;
-          }
+  // Run on mount
+  useEffect(
+    () => {
+      isActive.current = true;
 
-          try {
-            if (cacheRequests) {
-              const content = await cacheStore.get(src, fetchOptions);
+      if (!canUseDOM() || isInitialized.current) {
+        return () => undefined;
+      }
 
-              this.handleLoad(content, true);
-            } else {
-              await this.fetchContent();
-            }
-          } catch (error: any) {
-            this.handleError(error);
+      try {
+        if (status === STATUS.IDLE) {
+          if (!isSupportedEnvironment()) {
+            throw new Error('Browser does not support SVG');
           }
-        },
-      );
-    }
-  }
 
-  private processSVG() {
-    const { content } = this.state;
-    const { preProcessor } = this.props;
+          if (!src) {
+            throw new Error('Missing src');
+          }
 
-    if (preProcessor) {
-      return preProcessor(content);
-    }
+          load();
+        }
+      } catch (error: any) {
+        handleError(error);
+      }
 
-    return content;
-  }
+      isInitialized.current = true;
 
-  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);
+      return () => {
+        isActive.current = false;
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
-    if (!uniquifyIDs) {
-      return node;
+  // Handle prop changes
+  useEffect(() => {
+    if (!canUseDOM()) {
+      return;
     }
 
-    [...node.children].forEach(d => {
-      if (d.attributes?.length) {
-        const attributes = Object.values(d.attributes).map(a => {
-          const attribute = a;
-          const match = /url\((.*?)\)/.exec(a.value);
-
-          if (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 (!previousProps) {
+      return;
+    }
 
-          if (attribute && !isDataValue(r, attribute.value)) {
-            attribute.value = `${attribute.value}__${this.hash}`;
-          }
-        });
-      }
+    if (previousProps.src !== src) {
+      if (!src) {
+        handleError(new Error('Missing src'));
 
-      if (d.children.length) {
-        return this.updateSVGAttributes(d as SVGSVGElement);
+        return;
       }
 
-      return d;
-    });
-
-    return node;
-  }
-
-  public render(): React.ReactNode {
-    const { element, status } = this.state;
-    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',
-    );
+      load();
+    } else if (previousProps.title !== title || previousProps.description !== description) {
+      getElement();
+    }
+  }, [description, getElement, handleError, load, previousProps, src, title]);
 
-    if (!canUseDOM()) {
-      return loader;
+  // handle state
+  useEffect(() => {
+    if (!previousState) {
+      return;
     }
 
-    if (element) {
-      return React.cloneElement(element as React.ReactElement, { ref: innerRef, ...elementProps });
+    if (previousState.status !== STATUS.LOADING && status === STATUS.LOADING) {
+      getContent();
     }
 
-    if (([STATUS.UNSUPPORTED, STATUS.FAILED] as Status[]).includes(status)) {
-      return children;
+    if (previousState.status !== STATUS.LOADED && status === STATUS.LOADED) {
+      getElement();
     }
 
+    if (previousState.status !== STATUS.READY && status === STATUS.READY) {
+      onLoad?.(src, isCached);
+    }
+  }, [getContent, getElement, isCached, onLoad, previousState, src, status]);
+
+  const elementProps = omit(
+    props,
+    'baseURL',
+    'cacheRequests',
+    'children',
+    'description',
+    'fetchOptions',
+    'innerRef',
+    'loader',
+    'onError',
+    'onLoad',
+    'preProcessor',
+    'src',
+    'title',
+    'uniqueHash',
+    'uniquifyIDs',
+  );
+
+  if (!canUseDOM()) {
     return loader;
   }
+
+  if (element) {
+    return cloneElement(element as ReactElement, { ref: innerRef, ...elementProps });
+  }
+
+  if (([STATUS.UNSUPPORTED, STATUS.FAILED] as Status[]).includes(status)) {
+    return children;
+  }
+
+  return loader;
 }
 
 export default function InlineSVG(props: Props) {
@@ -334,10 +259,10 @@ export default function InlineSVG(props: Props) {
   }
 
   const { loader } = props;
-  const hasCallback = React.useRef(false);
-  const [isReady, setReady] = React.useState(cacheStore.isReady);
+  const hasCallback = useRef(false);
+  const [isReady, setReady] = useState(cacheStore.isReady);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!hasCallback.current) {
       cacheStore.onReady(() => {
         setReady(true);

package/src/{cache.ts → modules/cache.ts}

@@ -1,6 +1,7 @@
-import { CACHE_MAX_RETRIES, CACHE_NAME, STATUS } from './config';
 import { canUseDOM, request, sleep } from './helpers';
-import { StorageItem } from './types';
+
+import { CACHE_MAX_RETRIES, CACHE_NAME, STATUS } from '../config';
+import { StorageItem } from '../types';
 
 export default class CacheStore {
   private cacheApi: Cache | undefined;

package/src/{helpers.ts → modules/helpers.ts}

@@ -1,4 +1,4 @@
-import type { PlainObject } from './types';
+import type { PlainObject } from '../types';
 
 export function canUseDOM(): boolean {
   return !!(typeof window !== 'undefined' && window.document && window.document.createElement);

package/src/modules/hooks.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(state: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = state;
+  });
+
+  return ref.current;
+}

package/src/modules/utils.ts

@@ -0,0 +1,122 @@
+import convert from 'react-from-dom';
+
+import { Props, State } from '../types';
+
+interface GetNodeOptions extends Props, Pick<State, 'content'> {
+  handleError: (error: Error) => void;
+  hash: string;
+}
+
+interface UpdateSVGAttributesOptions extends Pick<Props, 'baseURL' | 'uniquifyIDs'> {
+  hash: string;
+}
+
+export function getNode(options: GetNodeOptions) {
+  const {
+    baseURL,
+    content,
+    description,
+    handleError,
+    hash,
+    preProcessor,
+    title,
+    uniquifyIDs = false,
+  } = options;
+
+  try {
+    const svgText = processSVG(content, preProcessor);
+    const node = convert(svgText, { nodeOnly: true });
+
+    if (!node || !(node instanceof SVGSVGElement)) {
+      throw new Error('Could not convert the src to a DOM Node');
+    }
+
+    const svg = updateSVGAttributes(node, { baseURL, hash, uniquifyIDs });
+
+    if (description) {
+      const originalDesc = svg.querySelector('desc');
+
+      if (originalDesc?.parentNode) {
+        originalDesc.parentNode.removeChild(originalDesc);
+      }
+
+      const descElement = document.createElementNS('http://www.w3.org/2000/svg', 'desc');
+
+      descElement.innerHTML = description;
+      svg.prepend(descElement);
+    }
+
+    if (typeof title !== 'undefined') {
+      const originalTitle = svg.querySelector('title');
+
+      if (originalTitle?.parentNode) {
+        originalTitle.parentNode.removeChild(originalTitle);
+      }
+
+      if (title) {
+        const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+
+        titleElement.innerHTML = title;
+        svg.prepend(titleElement);
+      }
+    }
+
+    return svg;
+  } catch (error: any) {
+    return handleError(error);
+  }
+}
+
+export function processSVG(content: string, preProcessor?: Props['preProcessor']) {
+  if (preProcessor) {
+    return preProcessor(content);
+  }
+
+  return content;
+}
+
+export function updateSVGAttributes(
+  node: SVGSVGElement,
+  options: UpdateSVGAttributesOptions,
+): SVGSVGElement {
+  const { baseURL = '', hash, uniquifyIDs } = options;
+  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].forEach(d => {
+    if (d.attributes?.length) {
+      const attributes = Object.values(d.attributes).map(a => {
+        const attribute = a;
+        const match = /url\((.*?)\)/.exec(a.value);
+
+        if (match?.[1]) {
+          attribute.value = a.value.replace(match[0], `url(${baseURL}${match[1]}__${hash})`);
+        }
+
+        return attribute;
+      });
+
+      replaceableAttributes.forEach(r => {
+        const attribute = attributes.find(a => a.name === r);
+
+        if (attribute && !isDataValue(r, attribute.value)) {
+          attribute.value = `${attribute.value}__${hash}`;
+        }
+      });
+    }
+
+    if (d.children.length) {
+      return updateSVGAttributes(d as SVGSVGElement, options);
+    }
+
+    return d;
+  });
+
+  return node;
+}