react-inlinesvg - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

lib/index.js

@@ -1,2 +0,2 @@
-var InlineSVGError, PropTypes, React, Status, configurationError, createError, createXHR, delay, httpError, isSupportedEnvironment, me, once, span, supportsInlineSVG, unsupportedBrowserError, urllite,
+var InlineSVGError, PropTypes, React, Status, configurationError, createError, delay, getComponentID, http, httpplease, ieXDomain, isSupportedEnvironment, me, once, span, supportsInlineSVG, uniquifyIDs, unsupportedBrowserError,
   __slice = [].slice,
@@ -10,4 +10,6 @@ __hasProp = {}.hasOwnProperty,
 
-urllite = require('urllite/lib/core');
+httpplease = require('httpplease');
 
+ieXDomain = require('httpplease/lib/plugins/oldiexdomain');
+
 PropTypes = React.PropTypes;
@@ -17,2 +19,4 @@
 
+http = httpplease.use(ieXDomain);
+
 Status = {
@@ -38,3 +42,4 @@ PENDING: 'pending',
     onError: PropTypes.func,
-    supportTest: PropTypes.func
+    supportTest: PropTypes.func,
+    uniquifyIDs: PropTypes.bool
   },
@@ -44,3 +49,4 @@ getDefaultProps: function() {
       wrapper: span,
-      supportTest: isSupportedEnvironment
+      supportTest: isSupportedEnvironment,
+      uniquifyIDs: true
     };
@@ -79,3 +85,4 @@ },
     var status;
-    status = !error.isSupportedBrowser ? Status.UNSUPPORTED : Status.FAILED;
+    console.log(error);
+    status = error.isUnsupportedBrowserError ? Status.UNSUPPORTED : Status.FAILED;
     return this.setState({
@@ -90,3 +97,6 @@ status: status
   },
-  handleResponse: function(txt) {
+  handleLoad: function(err, res) {
+    if (err) {
+      return this.fail(err);
+    }
     if (!this.isMounted()) {
@@ -96,3 +106,3 @@ return;
     return this.setState({
-      loadedText: txt,
+      loadedText: res.text,
       status: Status.LOADED
@@ -107,42 +117,3 @@ }, (function(_this) {
   load: function() {
-    var done, xhr;
-    xhr = createXHR(this.props.src);
-    done = once(delay((function(_this) {
-      return function(err) {
-        xhr.onload = xhr.onerror = xhr.onreadystatechange = xhr.ontimeout = xhr.onprogress = null;
-        if (err) {
-          return _this.fail(err);
-        } else {
-          return _this.handleResponse(xhr.responseText);
-        }
-      };
-    })(this)));
-    xhr.onreadystatechange = (function(_this) {
-      return function() {
-        if (xhr.readyState === 4) {
-          switch (xhr.status.toString().slice(0, 1)) {
-            case '2':
-              return done();
-            case '4':
-              return done(httpError('Client Error', xhr.status));
-            case '5':
-              return done(httpError('Server Error', xhr.status));
-            default:
-              return done(httpError('HTTP Error', xhr.status));
-          }
-        }
-      };
-    })(this);
-    xhr.onload = function() {
-      return done();
-    };
-    xhr.onerror = function() {
-      return done(httpError('Internal XHR Error', xhr.status || 0));
-    };
-    xhr.ontimeout = function() {};
-    xhr.onprogress = function() {};
-    xhr.open('GET', this.props.src.replace(/[^%]+/g, function(s) {
-      return encodeURI(s);
-    }));
-    return xhr.send();
+    return http.get(this.props.src, this.handleLoad);
   },
@@ -161,6 +132,13 @@ getClassName: function() {
       dangerouslySetInnerHTML: this.state.loadedText ? {
-        __html: this.state.loadedText
+        __html: this.processSVG(this.state.loadedText)
       } : void 0
     }, this.renderContents());
   },
+  processSVG: function(svgText) {
+    if (this.props.uniquifyIDs) {
+      return uniquifyIDs(svgText, getComponentID(this));
+    } else {
+      return svgText;
+    }
+  },
   renderContents: function() {
@@ -189,27 +167,2 @@ switch (this.state.status) {
 
-createXHR = function(src) {
-  var XDR, XHR, a, b, xhr;
-  if (typeof window === "undefined" || window === null) {
-    return null;
-  }
-  if (XHR = window.XMLHttpRequest) {
-    xhr = new XHR;
-    if ('withCredentials' in xhr) {
-      return xhr;
-    }
-  }
-  if (XDR = window.XDomainRequest) {
-    a = urllite(src);
-    b = urllite(window.location.href);
-    if (!a.host) {
-      return xhr;
-    }
-    if (a.protocol === b.protocol && a.host === b.host && a.port === b.port) {
-      return xhr;
-    }
-    return new XDR;
-  }
-  return xhr;
-};
-
 delay = function(fn) {
@@ -230,2 +183,35 @@ return function() {
 
+uniquifyIDs = (function() {
+  var idPattern, mkAttributePattern;
+  mkAttributePattern = function(attr) {
+    return "(?:(?:\\s|\\:)" + attr + ")";
+  };
+  idPattern = RegExp("(?:(" + (mkAttributePattern('id')) + ")=\"([^\"]+)\")|(?:(" + (mkAttributePattern('href')) + "|" + (mkAttributePattern('role')) + "|" + (mkAttributePattern('arcrole')) + ")=\"\\#([^\"]+)\")|(?:=\"url\\(\\#([^\\)]+)\\)\")", "g");
+  return function(svgText, svgID) {
+    var uniquifyID;
+    uniquifyID = function(id) {
+      return "" + id + "___" + svgID;
+    };
+    return svgText.replace(idPattern, function(m, p1, p2, p3, p4, p5) {
+      if (p2) {
+        return "" + p1 + "=\"" + (uniquifyID(p2)) + "\"";
+      } else if (p3) {
+        return "=\"url(#" + (uniquifyID(p3)) + ")\"";
+      } else if (p5) {
+        return "" + p4 + "=\"#" + (uniquifyID(p4)) + "\"";
+      }
+    });
+  };
+})();
+
+getComponentID = (function() {
+  var clean;
+  clean = function(str) {
+    return str.toString().replace(/[^a-zA-Z0-9]/g, '_');
+  };
+  return function(component) {
+    return "" + (clean(component._rootNodeID)) + "__" + (clean(component._mountDepth));
+  };
+})();
+
 InlineSVGError = (function(_super) {
@@ -236,4 +222,2 @@ __extends(InlineSVGError, _super);
 
-  InlineSVGError.prototype.isHttpError = false;
-
   InlineSVGError.prototype.isSupportedBrowser = true;
@@ -243,2 +227,4 @@
 
+  InlineSVGError.prototype.isUnsupportedBrowserError = false;
+
   function InlineSVGError(message) {
@@ -263,9 +249,2 @@ this.message = message;
 
-httpError = function(message, statusCode) {
-  return createError(message, {
-    isHttpError: true,
-    statusCode: statusCode
-  });
-};
-
 unsupportedBrowserError = function(message) {
@@ -276,3 +255,4 @@ if (message == null) {
   return createError(message, {
-    isSupportedBrowser: false
+    isSupportedBrowser: false,
+    isUnsupportedBrowserError: true
   });
@@ -279,0 +259,0 @@ };

package.json

 {
   "name": "react-inlinesvg",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "An SVG loader for React",
@@ -11,3 +11,3 @@ "main": "./lib/index.js",
     "once": "~1.3.0",
-    "urllite": "~0.4.1"
+    "httpplease": "~0.5.3"
   },
@@ -14,0 +14,0 @@ "devDependencies": {

README.md

@@ -93,2 +93,10 @@ react-inlinesvg
 
+Browser Support
+---------------
+
+Any browsers that support inlining SVGs and XHR will work. The component goes
+out of its way to handle IE9's weird XHR support so, IE9 and up get your SVG;
+lesser browsers get the fallback.
+
+
 CORS
@@ -95,0 +103,0 @@ ----

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 2 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

116

increased by7.41%

Worsened metrics

Total package byte prevSize

13951

decreased by-0.21%

Lines of code

228

decreased by-8.8%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedhttpplease@~0.5.3

• + Addedhttpplease@0.5.3(transitive)

• + Addedxmlhttprequest@1.6.0(transitive)

• + Addedxtend@3.0.0(transitive)

• - Removedurllite@~0.4.1