@tanem/svg-injector 11.0.0 → 11.1.0

package/dist/svg-injector.umd.development.js

@@ -18,7 +18,7 @@
   OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
   PERFORMANCE OF THIS SOFTWARE.
   ***************************************************************************** */
-  /* global Reflect, Promise, SuppressedError, Symbol */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
   function __spreadArray(to, from, pack) {
@@ -42,151 +42,241 @@
     return sourceSvg.cloneNode(true);
   };
 
+  var contentType = {};
+
   /*!
    * content-type
    * Copyright(c) 2015 Douglas Christopher Wilson
    * MIT Licensed
    */
 
-  /**
-   * RegExp to match *( ";" parameter ) in RFC 7231 sec 3.1.1.1
-   *
-   * parameter     = token "=" ( token / quoted-string )
-   * token         = 1*tchar
-   * tchar         = "!" / "#" / "$" / "%" / "&" / "'" / "*"
-   *               / "+" / "-" / "." / "^" / "_" / "`" / "|" / "~"
-   *               / DIGIT / ALPHA
-   *               ; any VCHAR, except delimiters
-   * quoted-string = DQUOTE *( qdtext / quoted-pair ) DQUOTE
-   * qdtext        = HTAB / SP / %x21 / %x23-5B / %x5D-7E / obs-text
-   * obs-text      = %x80-FF
-   * quoted-pair   = "\" ( HTAB / SP / VCHAR / obs-text )
-   */
-  var PARAM_REGEXP = /; *([!#$%&'*+.^_`|~0-9A-Za-z-]+) *= *("(?:[\u000b\u0020\u0021\u0023-\u005b\u005d-\u007e\u0080-\u00ff]|\\[\u000b\u0020-\u00ff])*"|[!#$%&'*+.^_`|~0-9A-Za-z-]+) */g; // eslint-disable-line no-control-regex
-
-  /**
-   * RegExp to match quoted-pair in RFC 7230 sec 3.2.6
-   *
-   * quoted-pair = "\" ( HTAB / SP / VCHAR / obs-text )
-   * obs-text    = %x80-FF
-   */
-  var QESC_REGEXP = /\\([\u000b\u0020-\u00ff])/g; // eslint-disable-line no-control-regex
-
-  /**
-   * RegExp to match type in RFC 7231 sec 3.1.1.1
-   *
-   * media-type = type "/" subtype
-   * type       = token
-   * subtype    = token
-   */
-  var TYPE_REGEXP = /^[!#$%&'*+.^_`|~0-9A-Za-z-]+\/[!#$%&'*+.^_`|~0-9A-Za-z-]+$/;
-  var parse_1 = parse;
-
-  /**
-   * Parse media type to object.
-   *
-   * @param {string|object} string
-   * @return {Object}
-   * @public
-   */
-
-  function parse (string) {
-    if (!string) {
-      throw new TypeError('argument string is required')
-    }
-
-    // support req/res-like objects as argument
-    var header = typeof string === 'object'
-      ? getcontenttype(string)
-      : string;
-
-    if (typeof header !== 'string') {
-      throw new TypeError('argument string is required to be a string')
-    }
-
-    var index = header.indexOf(';');
-    var type = index !== -1
-      ? header.slice(0, index).trim()
-      : header.trim();
-
-    if (!TYPE_REGEXP.test(type)) {
-      throw new TypeError('invalid media type')
-    }
-
-    var obj = new ContentType(type.toLowerCase());
-
-    // parse parameters
-    if (index !== -1) {
-      var key;
-      var match;
-      var value;
-
-      PARAM_REGEXP.lastIndex = index;
-
-      while ((match = PARAM_REGEXP.exec(header))) {
-        if (match.index !== index) {
-          throw new TypeError('invalid parameter format')
-        }
-
-        index += match[0].length;
-        key = match[1].toLowerCase();
-        value = match[2];
-
-        if (value.charCodeAt(0) === 0x22 /* " */) {
-          // remove quotes
-          value = value.slice(1, -1);
-
-          // remove escapes
-          if (value.indexOf('\\') !== -1) {
-            value = value.replace(QESC_REGEXP, '$1');
-          }
-        }
-
-        obj.parameters[key] = value;
-      }
-
-      if (index !== header.length) {
-        throw new TypeError('invalid parameter format')
-      }
-    }
-
-    return obj
-  }
-
-  /**
-   * Get content-type from req/res objects.
-   *
-   * @param {object}
-   * @return {Object}
-   * @private
-   */
-
-  function getcontenttype (obj) {
-    var header;
-
-    if (typeof obj.getHeader === 'function') {
-      // res-like
-      header = obj.getHeader('content-type');
-    } else if (typeof obj.headers === 'object') {
-      // req-like
-      header = obj.headers && obj.headers['content-type'];
-    }
-
-    if (typeof header !== 'string') {
-      throw new TypeError('content-type header is missing from object')
-    }
-
-    return header
+  var hasRequiredContentType;
+
+  function requireContentType () {
+  	if (hasRequiredContentType) return contentType;
+  	hasRequiredContentType = 1;
+
+  	/**
+  	 * RegExp to match *( ";" parameter ) in RFC 7231 sec 3.1.1.1
+  	 *
+  	 * parameter     = token "=" ( token / quoted-string )
+  	 * token         = 1*tchar
+  	 * tchar         = "!" / "#" / "$" / "%" / "&" / "'" / "*"
+  	 *               / "+" / "-" / "." / "^" / "_" / "`" / "|" / "~"
+  	 *               / DIGIT / ALPHA
+  	 *               ; any VCHAR, except delimiters
+  	 * quoted-string = DQUOTE *( qdtext / quoted-pair ) DQUOTE
+  	 * qdtext        = HTAB / SP / %x21 / %x23-5B / %x5D-7E / obs-text
+  	 * obs-text      = %x80-FF
+  	 * quoted-pair   = "\" ( HTAB / SP / VCHAR / obs-text )
+  	 */
+  	var PARAM_REGEXP = /; *([!#$%&'*+.^_`|~0-9A-Za-z-]+) *= *("(?:[\u000b\u0020\u0021\u0023-\u005b\u005d-\u007e\u0080-\u00ff]|\\[\u000b\u0020-\u00ff])*"|[!#$%&'*+.^_`|~0-9A-Za-z-]+) */g; // eslint-disable-line no-control-regex
+  	var TEXT_REGEXP = /^[\u000b\u0020-\u007e\u0080-\u00ff]+$/; // eslint-disable-line no-control-regex
+  	var TOKEN_REGEXP = /^[!#$%&'*+.^_`|~0-9A-Za-z-]+$/;
+
+  	/**
+  	 * RegExp to match quoted-pair in RFC 7230 sec 3.2.6
+  	 *
+  	 * quoted-pair = "\" ( HTAB / SP / VCHAR / obs-text )
+  	 * obs-text    = %x80-FF
+  	 */
+  	var QESC_REGEXP = /\\([\u000b\u0020-\u00ff])/g; // eslint-disable-line no-control-regex
+
+  	/**
+  	 * RegExp to match chars that must be quoted-pair in RFC 7230 sec 3.2.6
+  	 */
+  	var QUOTE_REGEXP = /([\\"])/g;
+
+  	/**
+  	 * RegExp to match type in RFC 7231 sec 3.1.1.1
+  	 *
+  	 * media-type = type "/" subtype
+  	 * type       = token
+  	 * subtype    = token
+  	 */
+  	var TYPE_REGEXP = /^[!#$%&'*+.^_`|~0-9A-Za-z-]+\/[!#$%&'*+.^_`|~0-9A-Za-z-]+$/;
+
+  	/**
+  	 * Module exports.
+  	 * @public
+  	 */
+
+  	contentType.format = format;
+  	contentType.parse = parse;
+
+  	/**
+  	 * Format object to media type.
+  	 *
+  	 * @param {object} obj
+  	 * @return {string}
+  	 * @public
+  	 */
+
+  	function format (obj) {
+  	  if (!obj || typeof obj !== 'object') {
+  	    throw new TypeError('argument obj is required')
+  	  }
+
+  	  var parameters = obj.parameters;
+  	  var type = obj.type;
+
+  	  if (!type || !TYPE_REGEXP.test(type)) {
+  	    throw new TypeError('invalid type')
+  	  }
+
+  	  var string = type;
+
+  	  // append parameters
+  	  if (parameters && typeof parameters === 'object') {
+  	    var param;
+  	    var params = Object.keys(parameters).sort();
+
+  	    for (var i = 0; i < params.length; i++) {
+  	      param = params[i];
+
+  	      if (!TOKEN_REGEXP.test(param)) {
+  	        throw new TypeError('invalid parameter name')
+  	      }
+
+  	      string += '; ' + param + '=' + qstring(parameters[param]);
+  	    }
+  	  }
+
+  	  return string
+  	}
+
+  	/**
+  	 * Parse media type to object.
+  	 *
+  	 * @param {string|object} string
+  	 * @return {Object}
+  	 * @public
+  	 */
+
+  	function parse (string) {
+  	  if (!string) {
+  	    throw new TypeError('argument string is required')
+  	  }
+
+  	  // support req/res-like objects as argument
+  	  var header = typeof string === 'object'
+  	    ? getcontenttype(string)
+  	    : string;
+
+  	  if (typeof header !== 'string') {
+  	    throw new TypeError('argument string is required to be a string')
+  	  }
+
+  	  var index = header.indexOf(';');
+  	  var type = index !== -1
+  	    ? header.slice(0, index).trim()
+  	    : header.trim();
+
+  	  if (!TYPE_REGEXP.test(type)) {
+  	    throw new TypeError('invalid media type')
+  	  }
+
+  	  var obj = new ContentType(type.toLowerCase());
+
+  	  // parse parameters
+  	  if (index !== -1) {
+  	    var key;
+  	    var match;
+  	    var value;
+
+  	    PARAM_REGEXP.lastIndex = index;
+
+  	    while ((match = PARAM_REGEXP.exec(header))) {
+  	      if (match.index !== index) {
+  	        throw new TypeError('invalid parameter format')
+  	      }
+
+  	      index += match[0].length;
+  	      key = match[1].toLowerCase();
+  	      value = match[2];
+
+  	      if (value.charCodeAt(0) === 0x22 /* " */) {
+  	        // remove quotes
+  	        value = value.slice(1, -1);
+
+  	        // remove escapes
+  	        if (value.indexOf('\\') !== -1) {
+  	          value = value.replace(QESC_REGEXP, '$1');
+  	        }
+  	      }
+
+  	      obj.parameters[key] = value;
+  	    }
+
+  	    if (index !== header.length) {
+  	      throw new TypeError('invalid parameter format')
+  	    }
+  	  }
+
+  	  return obj
+  	}
+
+  	/**
+  	 * Get content-type from req/res objects.
+  	 *
+  	 * @param {object}
+  	 * @return {Object}
+  	 * @private
+  	 */
+
+  	function getcontenttype (obj) {
+  	  var header;
+
+  	  if (typeof obj.getHeader === 'function') {
+  	    // res-like
+  	    header = obj.getHeader('content-type');
+  	  } else if (typeof obj.headers === 'object') {
+  	    // req-like
+  	    header = obj.headers && obj.headers['content-type'];
+  	  }
+
+  	  if (typeof header !== 'string') {
+  	    throw new TypeError('content-type header is missing from object')
+  	  }
+
+  	  return header
+  	}
+
+  	/**
+  	 * Quote a string if necessary.
+  	 *
+  	 * @param {string} val
+  	 * @return {string}
+  	 * @private
+  	 */
+
+  	function qstring (val) {
+  	  var str = String(val);
+
+  	  // no need to quote tokens
+  	  if (TOKEN_REGEXP.test(str)) {
+  	    return str
+  	  }
+
+  	  if (str.length > 0 && !TEXT_REGEXP.test(str)) {
+  	    throw new TypeError('invalid parameter value')
+  	  }
+
+  	  return '"' + str.replace(QUOTE_REGEXP, '\\$1') + '"'
+  	}
+
+  	/**
+  	 * Class to represent a content type.
+  	 * @private
+  	 */
+  	function ContentType (type) {
+  	  this.parameters = Object.create(null);
+  	  this.type = type;
+  	}
+  	return contentType;
   }
 
-  /**
-   * Class to represent a content type.
-   * @private
-   */
-  function ContentType (type) {
-    this.parameters = Object.create(null);
-    this.type = type;
-  }
+  var contentTypeExports = requireContentType();
 
   var isLocal = function () {
     return window.location.protocol === 'file:';
@@ -201,7 +291,7 @@
           if (!contentType) {
             throw new Error('Content type not found');
           }
-          var type = parse_1(contentType).type;
+          var type = contentTypeExports.parse(contentType).type;
           if (!(type === 'image/svg+xml' || type === 'text/plain')) {
             throw new Error("Invalid content type: ".concat(type));
           }
@@ -235,28 +325,36 @@
 
   var requestQueue = {};
   var queueRequest = function (url, callback) {
-    requestQueue[url] = requestQueue[url] || [];
+    var _a;
+    (_a = requestQueue[url]) !== null && _a !== void 0 ? _a : requestQueue[url] = [];
     requestQueue[url].push(callback);
   };
   var processRequestQueue = function (url) {
+    var callbacks = requestQueue[url];
+    if (!callbacks) {
+      return;
+    }
     var _loop_1 = function (i, len) {
       setTimeout(function () {
         if (Array.isArray(requestQueue[url])) {
           var cacheValue = cache.get(url);
-          var callback = requestQueue[url][i];
+          var callback = callbacks[i];
+          if (!callback) {
+            return;
+          }
           if (cacheValue instanceof SVGSVGElement) {
             callback(null, cloneSvg(cacheValue));
           }
           if (cacheValue instanceof Error) {
             callback(cacheValue);
           }
-          if (i === requestQueue[url].length - 1) {
+          if (i === callbacks.length - 1) {
             delete requestQueue[url];
           }
         }
       }, 0);
     };
-    for (var i = 0, len = requestQueue[url].length; i < len; i++) {
+    for (var i = 0, len = callbacks.length; i < len; i++) {
       _loop_1(i);
     }
   };
@@ -307,7 +405,8 @@
   var svgNamespace = 'http://www.w3.org/2000/svg';
   var xlinkNamespace = 'http://www.w3.org/1999/xlink';
   var injectElement = function (el, evalScripts, renumerateIRIElements, cacheRequests, httpRequestWithCredentials, beforeEach, callback) {
-    var elUrl = el.getAttribute('data-src') || el.getAttribute('src');
+    var _a;
+    var elUrl = (_a = el.getAttribute('data-src')) !== null && _a !== void 0 ? _a : el.getAttribute('src');
     if (!elUrl) {
       callback(new Error('Invalid data-src or src attribute'));
       return;
@@ -321,6 +420,7 @@
     el.setAttribute('src', '');
     var loadSvg = cacheRequests ? loadSvgCached : loadSvgUncached;
     loadSvg(elUrl, httpRequestWithCredentials, function (error, svg) {
+      var _a, _b;
       if (!svg) {
         injectedElements.splice(injectedElements.indexOf(el), 1);
         el = null;
@@ -343,7 +443,7 @@
       if (elHeight) {
         svg.setAttribute('height', elHeight);
       }
-      var mergedClasses = Array.from(new Set(__spreadArray(__spreadArray(__spreadArray([], (svg.getAttribute('class') || '').split(' '), true), ['injected-svg'], false), (el.getAttribute('class') || '').split(' '), true))).join(' ').trim();
+      var mergedClasses = Array.from(new Set(__spreadArray(__spreadArray(__spreadArray([], ((_a = svg.getAttribute('class')) !== null && _a !== void 0 ? _a : '').split(' '), true), ['injected-svg'], false), ((_b = el.getAttribute('class')) !== null && _b !== void 0 ? _b : '').split(' '), true))).join(' ').trim();
       svg.setAttribute('class', mergedClasses);
       var elStyle = el.getAttribute('style');
       if (elStyle) {
@@ -371,46 +471,102 @@
           pattern: ['fill', 'stroke'],
           radialGradient: ['fill', 'stroke']
         };
+        var replaceIriReferences_1 = function (value, iriIdMap) {
+          return value.replace(/url\((['"]?)\s*#([^\s'"\)]+)\s*\1\)/g, function (match, _quote, iriId) {
+            var newId = iriIdMap[iriId];
+            return newId ? "url(#".concat(newId, ")") : match;
+          });
+        };
+        var replaceHrefReference = function (value, iriIdMap) {
+          if (!value.startsWith('#')) {
+            return value;
+          }
+          var iriId = value.slice(1);
+          var newId = iriIdMap[iriId];
+          return newId ? '#' + newId : value;
+        };
         var element_1;
         var elements_1;
         var properties_1;
         var currentId_1;
         var newId_1;
+        var renumeratedElements_1 = [];
+        var iriIdMap_1 = {};
         Object.keys(iriElementsAndProperties_1).forEach(function (key) {
           element_1 = key;
-          properties_1 = iriElementsAndProperties_1[key];
           elements_1 = svg.querySelectorAll(element_1 + '[id]');
-          var _loop_1 = function (a, elementsLen) {
-            currentId_1 = elements_1[a].id;
+          for (var a = 0, elementsLen = elements_1.length; a < elementsLen; a++) {
+            var currentElement = elements_1[a];
+            currentId_1 = currentElement.id;
             newId_1 = currentId_1 + '-' + uniqueId();
-            var referencingElements;
-            Array.prototype.forEach.call(properties_1, function (property) {
-              referencingElements = svg.querySelectorAll('[' + property + '*="' + currentId_1 + '"]');
-              for (var b = 0, referencingElementLen = referencingElements.length; b < referencingElementLen; b++) {
-                var attrValue = referencingElements[b].getAttribute(property);
-                if (attrValue && !attrValue.match(new RegExp('url\\("?#' + currentId_1 + '"?\\)'))) {
-                  continue;
-                }
-                referencingElements[b].setAttribute(property, 'url(#' + newId_1 + ')');
-              }
+            iriIdMap_1[currentId_1] = newId_1;
+            renumeratedElements_1.push({
+              element: currentElement,
+              currentId: currentId_1,
+              newId: newId_1
             });
-            var allLinks = svg.querySelectorAll('[*|href]');
-            var links = [];
-            for (var c = 0, allLinksLen = allLinks.length; c < allLinksLen; c++) {
-              var href = allLinks[c].getAttributeNS(xlinkNamespace, 'href');
-              if (href && href.toString() === '#' + elements_1[a].id) {
-                links.push(allLinks[c]);
+          }
+        });
+        Object.keys(iriElementsAndProperties_1).forEach(function (key) {
+          properties_1 = iriElementsAndProperties_1[key];
+          var referencingElements;
+          Array.prototype.forEach.call(properties_1, function (property) {
+            referencingElements = svg.querySelectorAll('[' + property + ']');
+            for (var b = 0, referencingElementLen = referencingElements.length; b < referencingElementLen; b++) {
+              var referencingElement = referencingElements[b];
+              var attrValue = referencingElement.getAttribute(property);
+              if (attrValue) {
+                var nextValue = replaceIriReferences_1(attrValue, iriIdMap_1);
+                if (nextValue !== attrValue) {
+                  referencingElement.setAttribute(property, nextValue);
+                }
               }
             }
-            for (var d = 0, linksLen = links.length; d < linksLen; d++) {
-              links[d].setAttributeNS(xlinkNamespace, 'href', '#' + newId_1);
+          });
+        });
+        var allLinks = svg.querySelectorAll('*');
+        for (var c = 0, allLinksLen = allLinks.length; c < allLinksLen; c++) {
+          var link = allLinks[c];
+          var href = link.getAttribute('href');
+          if (href) {
+            var nextHref = replaceHrefReference(href, iriIdMap_1);
+            if (nextHref !== href) {
+              link.setAttribute('href', nextHref);
             }
-            elements_1[a].id = newId_1;
-          };
-          for (var a = 0, elementsLen = elements_1.length; a < elementsLen; a++) {
-            _loop_1(a);
           }
-        });
+          var xlinkHref = link.getAttributeNS(xlinkNamespace, 'href');
+          if (xlinkHref) {
+            var nextXlinkHref = replaceHrefReference(xlinkHref, iriIdMap_1);
+            if (nextXlinkHref !== xlinkHref) {
+              link.setAttributeNS(xlinkNamespace, 'href', nextXlinkHref);
+            }
+          }
+        }
+        var styleElements = svg.querySelectorAll('[style]');
+        for (var d = 0, styleElementsLen = styleElements.length; d < styleElementsLen; d++) {
+          var styleElement = styleElements[d];
+          var styleValue = styleElement.getAttribute('style');
+          if (styleValue) {
+            var nextStyleValue = replaceIriReferences_1(styleValue, iriIdMap_1);
+            if (nextStyleValue !== styleValue) {
+              styleElement.setAttribute('style', nextStyleValue);
+            }
+          }
+        }
+        var styleTagElements = svg.querySelectorAll('style');
+        for (var e = 0, styleTagElementsLen = styleTagElements.length; e < styleTagElementsLen; e++) {
+          var styleTagElement = styleTagElements[e];
+          var textContent = styleTagElement.textContent;
+          if (textContent) {
+            var nextTextContent = replaceIriReferences_1(textContent, iriIdMap_1);
+            if (nextTextContent !== textContent) {
+              styleTagElement.textContent = nextTextContent;
+            }
+          }
+        }
+        for (var f = 0, renumeratedElementsLen = renumeratedElements_1.length; f < renumeratedElementsLen; f++) {
+          renumeratedElements_1[f].element.id = renumeratedElements_1[f].newId;
+        }
       }
       svg.removeAttribute('xmlns:a');
       var scripts = svg.querySelectorAll('script');
@@ -418,13 +574,14 @@
       var script;
       var scriptType;
       for (var i = 0, scriptsLen = scripts.length; i < scriptsLen; i++) {
-        scriptType = scripts[i].getAttribute('type');
+        var scriptElement = scripts[i];
+        scriptType = scriptElement.getAttribute('type');
         if (!scriptType || scriptType === 'application/ecmascript' || scriptType === 'application/javascript' || scriptType === 'text/javascript') {
-          script = scripts[i].innerText || scripts[i].textContent;
+          script = scriptElement.innerText || scriptElement.textContent;
           if (script) {
             scriptsToEval.push(script);
           }
-          svg.removeChild(scripts[i]);
+          svg.removeChild(scriptElement);
         }
       }
       if (scriptsToEval.length > 0 && (evalScripts === 'always' || evalScripts === 'once' && !ranScripts[elUrl])) {
@@ -478,7 +635,11 @@
     if (elements && 'length' in elements) {
       var elementsLoaded_1 = 0;
       for (var i = 0, j = elements.length; i < j; i++) {
-        injectElement(elements[i], evalScripts, renumerateIRIElements, cacheRequests, httpRequestWithCredentials, beforeEach, function (error, svg) {
+        var element = elements[i];
+        if (!element) {
+          continue;
+        }
+        injectElement(element, evalScripts, renumerateIRIElements, cacheRequests, httpRequestWithCredentials, beforeEach, function (error, svg) {
           afterEach(error, svg);
           if (elements && 'length' in elements && elements.length === ++elementsLoaded_1) {
             afterAll(elementsLoaded_1);