react-inlinesvg 2.2.2 → 3.0.1

package/esm/index.js

@@ -6,6 +6,8 @@ var __extends = (this && this.__extends) || (function () {
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -38,102 +40,132 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spread = (this && this.__spread) || function () {
-    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-    return ar;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import * as React from 'react';
 import convert from 'react-from-dom';
-import { STATUS, canUseDOM, isSupportedEnvironment, randomString, removeProperties, } from './helpers';
-var cacheStore = Object.create(null);
+import { canUseDOM, isSupportedEnvironment, omit, randomString, STATUS } from './helpers';
+export var cacheStore = Object.create(null);
 var InlineSVG = /** @class */ (function (_super) {
     __extends(InlineSVG, _super);
     function InlineSVG(props) {
         var _this = _super.call(this, props) || this;
-        _this.isActive = false;
-        _this.handleCacheQueue = function (content) {
-            /* istanbul ignore else */
-            if (typeof content === 'string') {
-                _this.handleLoad(content);
-                return;
-            }
-            _this.handleError(content);
-        };
-        _this.handleLoad = function (content) {
-            /* istanbul ignore else */
-            if (_this.isActive) {
-                _this.setState({
-                    content: content,
-                    status: STATUS.LOADED,
-                }, _this.getElement);
-            }
-        };
-        _this.handleError = function (error) {
-            var onError = _this.props.onError;
-            var status = error.message === 'Browser does not support SVG' ? STATUS.UNSUPPORTED : STATUS.FAILED;
-            /* istanbul ignore else */
-            if (_this.isActive) {
-                _this.setState({ status: status }, function () {
-                    /* istanbul ignore else */
-                    if (typeof onError === 'function') {
-                        onError(error);
-                    }
-                });
+        Object.defineProperty(_this, "isInitialized", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(_this, "isActive", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(_this, "hash", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(_this, "handleLoad", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: function (content) {
+                /* istanbul ignore else */
+                if (_this.isActive) {
+                    _this.setState({
+                        content: content,
+                        status: STATUS.LOADED,
+                    }, _this.getElement);
+                }
             }
-        };
-        _this.request = function () {
-            var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src;
-            try {
-                if (cacheRequests) {
-                    cacheStore[src] = { content: '', status: STATUS.LOADING, queue: [] };
+        });
+        Object.defineProperty(_this, "handleError", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: function (error) {
+                var onError = _this.props.onError;
+                var status = error.message === 'Browser does not support SVG' ? STATUS.UNSUPPORTED : STATUS.FAILED;
+                /* istanbul ignore else */
+                if (_this.isActive) {
+                    _this.setState({ status: status }, function () {
+                        /* istanbul ignore else */
+                        if (typeof onError === 'function') {
+                            onError(error);
+                        }
+                    });
                 }
-                return fetch(src)
-                    .then(function (response) {
-                    var contentType = response.headers.get('content-type');
-                    var _a = __read((contentType || '').split(/ ?; ?/), 1), fileType = _a[0];
-                    if (response.status > 299) {
-                        throw new Error('Not found');
-                    }
-                    if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType.indexOf(d) >= 0; })) {
-                        throw new Error("Content type isn't valid: " + fileType);
-                    }
-                    return response.text();
-                })
-                    .then(function (content) {
-                    _this.handleLoad(content);
-                    /* istanbul ignore else */
+            }
+        });
+        Object.defineProperty(_this, "request", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: function () {
+                var _a = _this.props, cacheRequests = _a.cacheRequests, fetchOptions = _a.fetchOptions, src = _a.src;
+                try {
                     if (cacheRequests) {
-                        var cache = cacheStore[src];
+                        cacheStore[src] = { content: '', status: STATUS.LOADING };
+                    }
+                    return fetch(src, fetchOptions)
+                        .then(function (response) {
+                        var contentType = response.headers.get('content-type');
+                        var _a = __read((contentType || '').split(/ ?; ?/), 1), fileType = _a[0];
+                        if (response.status > 299) {
+                            throw new Error('Not found');
+                        }
+                        if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType.includes(d); })) {
+                            throw new Error("Content type isn't valid: ".concat(fileType));
+                        }
+                        return response.text();
+                    })
+                        .then(function (content) {
+                        var currentSrc = _this.props.src;
+                        // 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 (cache) {
-                            cache.content = content;
-                            cache.status = STATUS.LOADED;
-                            cache.queue = cache.queue.filter(function (cb) {
-                                cb(content);
-                                return false;
-                            });
+                        if (cacheRequests) {
+                            var cache = cacheStore[src];
+                            /* istanbul ignore else */
+                            if (cache) {
+                                cache.content = content;
+                                cache.status = STATUS.LOADED;
+                            }
                         }
-                    }
-                })
-                    .catch(function (error) {
-                    _this.handleError(error);
-                    /* istanbul ignore else */
-                    if (cacheRequests) {
-                        var cache = cacheStore[src];
+                    })
+                        .catch(function (error) {
+                        _this.handleError(error);
                         /* istanbul ignore else */
-                        if (cache) {
-                            cache.queue.forEach(function (cb) {
-                                cb(error);
-                            });
-                            delete cacheStore[src];
+                        if (cacheRequests) {
+                            var cache = cacheStore[src];
+                            /* istanbul ignore else */
+                            if (cache) {
+                                delete cacheStore[src];
+                            }
                         }
-                    }
-                });
-            }
-            catch (error) {
-                return _this.handleError(new Error(error.message));
+                    });
+                }
+                catch (error) {
+                    return _this.handleError(new Error(error.message));
+                }
             }
-        };
+        });
         _this.state = {
             content: '',
             element: null,
@@ -143,202 +175,247 @@ var InlineSVG = /** @class */ (function (_super) {
         _this.hash = props.uniqueHash || randomString(8);
         return _this;
     }
-    InlineSVG.prototype.componentDidMount = function () {
-        this.isActive = true;
-        if (!canUseDOM()) {
-            return;
-        }
-        var status = this.state.status;
-        var src = this.props.src;
-        try {
-            /* istanbul ignore else */
-            if (status === STATUS.PENDING) {
-                /* istanbul ignore else */
-                if (!isSupportedEnvironment()) {
-                    throw new Error('Browser does not support SVG');
-                }
+    Object.defineProperty(InlineSVG.prototype, "componentDidMount", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            this.isActive = true;
+            if (!canUseDOM() || this.isInitialized) {
+                return;
+            }
+            var status = this.state.status;
+            var src = this.props.src;
+            try {
                 /* istanbul ignore else */
-                if (!src) {
-                    throw new Error('Missing src');
+                if (status === STATUS.PENDING) {
+                    /* istanbul ignore else */
+                    if (!isSupportedEnvironment()) {
+                        throw new Error('Browser does not support SVG');
+                    }
+                    /* istanbul ignore else */
+                    if (!src) {
+                        throw new Error('Missing src');
+                    }
+                    this.load();
                 }
-                this.load();
             }
-        }
-        catch (error) {
-            this.handleError(error);
-        }
-    };
-    InlineSVG.prototype.componentDidUpdate = function (prevProps, prevState) {
-        if (!canUseDOM()) {
-            return;
-        }
-        var _a = this.state, hasCache = _a.hasCache, status = _a.status;
-        var _b = this.props, onLoad = _b.onLoad, src = _b.src;
-        if (prevState.status !== STATUS.READY && status === STATUS.READY) {
-            /* istanbul ignore else */
-            if (onLoad) {
-                onLoad(src, hasCache);
+            catch (error) {
+                this.handleError(error);
             }
+            this.isInitialized = true;
         }
-        if (prevProps.src !== src) {
-            if (!src) {
-                this.handleError(new Error('Missing src'));
+    });
+    Object.defineProperty(InlineSVG.prototype, "componentDidUpdate", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (previousProps, previousState) {
+            if (!canUseDOM()) {
                 return;
             }
-            this.load();
-        }
-    };
-    InlineSVG.prototype.componentWillUnmount = function () {
-        this.isActive = false;
-    };
-    InlineSVG.prototype.processSVG = function () {
-        var content = this.state.content;
-        var preProcessor = this.props.preProcessor;
-        if (preProcessor) {
-            return preProcessor(content);
+            var _a = this.state, hasCache = _a.hasCache, status = _a.status;
+            var _b = this.props, onLoad = _b.onLoad, src = _b.src;
+            if (previousState.status !== STATUS.READY && status === STATUS.READY) {
+                /* istanbul ignore else */
+                if (onLoad) {
+                    onLoad(src, hasCache);
+                }
+            }
+            if (previousProps.src !== src) {
+                if (!src) {
+                    this.handleError(new Error('Missing src'));
+                    return;
+                }
+                this.load();
+            }
         }
-        return content;
-    };
-    InlineSVG.prototype.updateSVGAttributes = function (node) {
-        var _this = this;
-        var _a = this.props, _b = _a.baseURL, baseURL = _b === void 0 ? '' : _b, uniquifyIDs = _a.uniquifyIDs;
-        var replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole'];
-        var linkAttributes = ['href', 'xlink:href'];
-        var isDataValue = function (name, value) {
-            return linkAttributes.indexOf(name) >= 0 && (value ? value.indexOf('#') < 0 : false);
-        };
-        if (!uniquifyIDs) {
-            return node;
+    });
+    Object.defineProperty(InlineSVG.prototype, "componentWillUnmount", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            this.isActive = false;
         }
-        __spread(node.children).map(function (d) {
-            if (d.attributes && d.attributes.length) {
-                var attributes_1 = Object.values(d.attributes).map(function (a) {
-                    var attr = a;
-                    var match = a.value.match(/url\((.*?)\)/);
-                    if (match && match[1]) {
-                        attr.value = a.value.replace(match[0], "url(" + baseURL + match[1] + "__" + _this.hash + ")");
+    });
+    Object.defineProperty(InlineSVG.prototype, "getNode", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var _a = this.props, description = _a.description, title = _a.title;
+            try {
+                var svgText = this.processSVG();
+                var node = convert(svgText, { nodeOnly: true });
+                if (!node || !(node instanceof SVGSVGElement)) {
+                    throw new Error('Could not convert the src to a DOM Node');
+                }
+                var svg = this.updateSVGAttributes(node);
+                if (description) {
+                    var originalDesc = svg.querySelector('desc');
+                    if (originalDesc && originalDesc.parentNode) {
+                        originalDesc.parentNode.removeChild(originalDesc);
                     }
-                    return attr;
-                });
-                replaceableAttributes.forEach(function (r) {
-                    var attribute = attributes_1.find(function (a) { return a.name === r; });
-                    if (attribute && !isDataValue(r, attribute.value)) {
-                        attribute.value = attribute.value + "__" + _this.hash;
+                    var descElement = document.createElement('desc');
+                    descElement.innerHTML = description;
+                    svg.prepend(descElement);
+                }
+                if (title) {
+                    var originalTitle = svg.querySelector('title');
+                    if (originalTitle && originalTitle.parentNode) {
+                        originalTitle.parentNode.removeChild(originalTitle);
                     }
-                });
-            }
-            if (d.children.length) {
-                return _this.updateSVGAttributes(d);
-            }
-            return d;
-        });
-        return node;
-    };
-    InlineSVG.prototype.getNode = function () {
-        var _a = this.props, description = _a.description, title = _a.title;
-        try {
-            var svgText = this.processSVG();
-            var node = convert(svgText, { nodeOnly: true });
-            if (!node || !(node instanceof SVGSVGElement)) {
-                throw new Error('Could not convert the src to a DOM Node');
-            }
-            var svg = this.updateSVGAttributes(node);
-            if (description) {
-                var originalDesc = svg.querySelector('desc');
-                if (originalDesc && originalDesc.parentNode) {
-                    originalDesc.parentNode.removeChild(originalDesc);
+                    var titleElement = document.createElement('title');
+                    titleElement.innerHTML = title;
+                    svg.prepend(titleElement);
                 }
-                var descElement = document.createElement('desc');
-                descElement.innerHTML = description;
-                svg.prepend(descElement);
+                return svg;
             }
-            if (title) {
-                var originalTitle = svg.querySelector('title');
-                if (originalTitle && originalTitle.parentNode) {
-                    originalTitle.parentNode.removeChild(originalTitle);
-                }
-                var titleElement = document.createElement('title');
-                titleElement.innerHTML = title;
-                svg.prepend(titleElement);
+            catch (error) {
+                return this.handleError(error);
             }
-            return svg;
-        }
-        catch (error) {
-            return this.handleError(error);
         }
-    };
-    InlineSVG.prototype.getElement = function () {
-        try {
-            var node = this.getNode();
-            var element = convert(node);
-            if (!element || !React.isValidElement(element)) {
-                throw new Error('Could not convert the src to a React element');
+    });
+    Object.defineProperty(InlineSVG.prototype, "getElement", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            try {
+                var node = this.getNode();
+                var element = convert(node);
+                if (!element || !React.isValidElement(element)) {
+                    throw new Error('Could not convert the src to a React element');
+                }
+                this.setState({
+                    element: element,
+                    status: STATUS.READY,
+                });
+            }
+            catch (error) {
+                this.handleError(new Error(error.message));
             }
-            this.setState({
-                element: element,
-                status: STATUS.READY,
-            });
-        }
-        catch (error) {
-            this.handleError(new Error(error.message));
         }
-    };
-    InlineSVG.prototype.load = function () {
-        var _this = this;
-        /* istanbul ignore else */
-        if (this.isActive) {
-            this.setState({
-                content: '',
-                element: null,
-                status: STATUS.LOADING,
-            }, function () {
-                var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src;
-                var 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) {
+    });
+    Object.defineProperty(InlineSVG.prototype, "load", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var _this = this;
+            /* istanbul ignore else */
+            if (this.isActive) {
+                this.setState({
+                    content: '',
+                    element: null,
+                    status: STATUS.LOADING,
+                }, function () {
+                    var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src;
+                    var cache = cacheRequests && cacheStore[src];
+                    if (cache && cache.status === STATUS.LOADED) {
                         _this.handleLoad(cache.content);
+                        return;
                     }
-                    return;
-                }
-                var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
-                var inlineSrc;
-                if (dataURI) {
-                    inlineSrc = dataURI[1] ? atob(dataURI[2]) : decodeURIComponent(dataURI[2]);
-                }
-                else if (src.indexOf('<svg') >= 0) {
-                    inlineSrc = src;
+                    var dataURI = src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+                    var 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();
+                });
+            }
+        }
+    });
+    Object.defineProperty(InlineSVG.prototype, "updateSVGAttributes", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (node) {
+            var _this = this;
+            var _a = this.props, _b = _a.baseURL, baseURL = _b === void 0 ? '' : _b, uniquifyIDs = _a.uniquifyIDs;
+            var replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole'];
+            var linkAttributes = ['href', 'xlink:href'];
+            var isDataValue = function (name, value) {
+                return linkAttributes.includes(name) && (value ? !value.includes('#') : false);
+            };
+            if (!uniquifyIDs) {
+                return node;
+            }
+            __spreadArray([], __read(node.children), false).map(function (d) {
+                if (d.attributes && d.attributes.length) {
+                    var attributes_1 = Object.values(d.attributes).map(function (a) {
+                        var attribute = a;
+                        var match = a.value.match(/url\((.*?)\)/);
+                        if (match && match[1]) {
+                            attribute.value = a.value.replace(match[0], "url(".concat(baseURL).concat(match[1], "__").concat(_this.hash, ")"));
+                        }
+                        return attribute;
+                    });
+                    replaceableAttributes.forEach(function (r) {
+                        var attribute = attributes_1.find(function (a) { return a.name === r; });
+                        if (attribute && !isDataValue(r, attribute.value)) {
+                            attribute.value = "".concat(attribute.value, "__").concat(_this.hash);
+                        }
+                    });
                 }
-                if (inlineSrc) {
-                    _this.handleLoad(inlineSrc);
-                    return;
+                if (d.children.length) {
+                    return _this.updateSVGAttributes(d);
                 }
-                _this.request();
+                return d;
             });
+            return node;
         }
-    };
-    InlineSVG.prototype.render = function () {
-        var _a = this.state, element = _a.element, status = _a.status;
-        var _b = this.props, _c = _b.children, children = _c === void 0 ? null : _c, innerRef = _b.innerRef, _d = _b.loader, loader = _d === void 0 ? null : _d;
-        var elementProps = removeProperties(this.props, 'baseURL', 'cacheRequests', 'children', 'description', 'innerRef', 'loader', 'onError', 'onLoad', 'preProcessor', 'src', 'title', 'uniqueHash', 'uniquifyIDs');
-        if (!canUseDOM()) {
-            return loader;
+    });
+    Object.defineProperty(InlineSVG.prototype, "processSVG", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var content = this.state.content;
+            var preProcessor = this.props.preProcessor;
+            if (preProcessor) {
+                return preProcessor(content);
+            }
+            return content;
         }
-        if (element) {
-            return React.cloneElement(element, __assign({ ref: innerRef }, elementProps));
+    });
+    Object.defineProperty(InlineSVG.prototype, "render", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            var _a = this.state, element = _a.element, status = _a.status;
+            var _b = this.props, _c = _b.children, children = _c === void 0 ? null : _c, innerRef = _b.innerRef, _d = _b.loader, loader = _d === void 0 ? null : _d;
+            var 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, __assign({ ref: innerRef }, elementProps));
+            }
+            if ([STATUS.UNSUPPORTED, STATUS.FAILED].includes(status)) {
+                return children;
+            }
+            return loader;
         }
-        if ([STATUS.UNSUPPORTED, STATUS.FAILED].indexOf(status) > -1) {
-            return children;
+    });
+    Object.defineProperty(InlineSVG, "defaultProps", {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value: {
+            cacheRequests: true,
+            uniquifyIDs: false,
         }
-        return loader;
-    };
-    InlineSVG.defaultProps = {
-        cacheRequests: true,
-        uniquifyIDs: false,
-    };
+    });
     return InlineSVG;
 }(React.PureComponent));
 export default InlineSVG;