react-inlinesvg - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

lib/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -18,6 +20,2 @@
 
-var _once = require('once');
-
-var _once2 = _interopRequireDefault(_once);
-
 var _httpplease = require('httpplease');
@@ -31,2 +29,4 @@
 
+var _utils = require('./utils');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -53,150 +53,34 @@
 
-var createGetOrUseCacheForUrl = function createGetOrUseCacheForUrl(url, callback) {
-  if (loadedIcons[url]) {
-    var params = loadedIcons[url];
+var InlineSVG = function (_React$PureComponent) {
+  _inherits(InlineSVG, _React$PureComponent);
 
-    setTimeout(function () {
-      return callback(params[0], params[1]);
-    }, 0);
-  }
+  function InlineSVG(props) {
+    _classCallCheck(this, InlineSVG);
 
-  if (!getRequestsByUrl[url]) {
-    getRequestsByUrl[url] = [];
+    var _this = _possibleConstructorReturn(this, (InlineSVG.__proto__ || Object.getPrototypeOf(InlineSVG)).call(this, props));
 
-    http.get(url, function (err, res) {
-      getRequestsByUrl[url].forEach(function (cb) {
-        loadedIcons[url] = [err, res];
-        cb(err, res);
-      });
-    });
-  }
+    _this.handleLoad = function (err, res) {
+      var isCached = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
-  getRequestsByUrl[url].push(callback);
-};
+      if (err) {
+        _this.fail(err);
+        return;
+      }
 
-var supportsInlineSVG = (0, _once2.default)(function () {
-  if (!document) {
-    return false;
-  }
-
-  var div = document.createElement('div');
-  div.innerHTML = '<svg />';
-  return div.firstChild && div.firstChild.namespaceURI === 'http://www.w3.org/2000/svg';
-});
-
-var isSupportedEnvironment = (0, _once2.default)(function () {
-  return ((typeof window !== 'undefined' && window !== null ? window.XMLHttpRequest : false) || (typeof window !== 'undefined' && window !== null ? window.XDomainRequest : false)) && supportsInlineSVG();
-});
-
-var uniquifyIDs = function () {
-  var mkAttributePattern = function mkAttributePattern(attr) {
-    return '(?:(?:\\s|\\:)' + attr + ')';
-  };
-
-  var idPattern = new RegExp('(?:(' + mkAttributePattern('id') + ')="([^"]+)")|(?:(' + mkAttributePattern('href') + '|' + mkAttributePattern('role') + '|' + mkAttributePattern('arcrole') + ')="\\#([^"]+)")|(?:="url\\(\\#([^\\)]+)\\)")', 'g');
-
-  return function (svgText, svgID) {
-    var uniquifyID = function uniquifyID(id) {
-      return id + '___' + svgID;
+      if (_this.isActive) {
+        _this.setState({
+          loadedText: res.text,
+          status: Status.LOADED
+        }, function () {
+          _this.props.onLoad(_this.props.src, isCached);
+        });
+      }
     };
 
-    return svgText.replace(idPattern, function (m, p1, p2, p3, p4, p5) {
-      //eslint-disable-line consistent-return
-      if (p2) {
-        return p1 + '="' + uniquifyID(p2) + '"';
-      } else if (p4) {
-        return p3 + '="#' + uniquifyID(p4) + '"';
-      } else if (p5) {
-        return '="url(#' + uniquifyID(p5) + ')"';
-      }
-    });
-  };
-}();
-
-var getHash = function getHash(str) {
-  var chr = void 0;
-  var hash = 0;
-  var i = void 0;
-  var j = void 0;
-  var ref = void 0;
-
-  if (!str) {
-    return hash;
-  }
-
-  for (i = j = 0, ref = str.length; ref >= 0 ? j < ref : j > ref; i = ref >= 0 ? ++j : --j) {
-    chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash &= hash;
-  }
-
-  return hash;
-};
-
-var InlineSVGError = function (_Error) {
-  _inherits(InlineSVGError, _Error);
-
-  function InlineSVGError(message) {
-    var _ret;
-
-    _classCallCheck(this, InlineSVGError);
-
-    var _this = _possibleConstructorReturn(this, (InlineSVGError.__proto__ || Object.getPrototypeOf(InlineSVGError)).call(this));
-
-    _this.name = 'InlineSVGError';
-    _this.isSupportedBrowser = true;
-    _this.isConfigurationError = false;
-    _this.isUnsupportedBrowserError = false;
-    _this.message = message;
-
-    return _ret = _this, _possibleConstructorReturn(_this, _ret);
-  }
-
-  return InlineSVGError;
-}(Error);
-
-var createError = function createError(message, attrs) {
-  var err = new InlineSVGError(message);
-
-  Object.keys(attrs).forEach(function (k) {
-    err[k] = attrs[k];
-  });
-
-  return err;
-};
-
-var unsupportedBrowserError = function unsupportedBrowserError(message) {
-  var newMessage = message;
-
-  if (newMessage === null) {
-    newMessage = 'Unsupported Browser';
-  }
-
-  return createError(newMessage, {
-    isSupportedBrowser: false,
-    isUnsupportedBrowserError: true
-  });
-};
-
-var configurationError = function configurationError(message) {
-  return createError(message, {
-    isConfigurationError: true
-  });
-};
-
-var InlineSVG = function (_React$PureComponent) {
-  _inherits(InlineSVG, _React$PureComponent);
-
-  function InlineSVG(props) {
-    _classCallCheck(this, InlineSVG);
-
-    var _this2 = _possibleConstructorReturn(this, (InlineSVG.__proto__ || Object.getPrototypeOf(InlineSVG)).call(this, props));
-
-    _this2.state = {
+    _this.state = {
       status: Status.PENDING
     };
 
-    _this2.handleLoad = _this2.handleLoad.bind(_this2);
-    _this2.isActive = false;
-    return _this2;
+    _this.isActive = false;
+    return _this;
   }
@@ -212,2 +96,3 @@
     value: function componentDidMount() {
+      /* istanbul ignore else */
       if (this.state.status === Status.PENDING) {
@@ -218,6 +103,6 @@ if (this.props.supportTest()) {
           } else {
-            this.fail(configurationError('Missing source'));
+            this.fail((0, _utils.configurationError)('Missing source'));
           }
         } else {
-          this.fail(unsupportedBrowserError());
+          this.fail((0, _utils.unsupportedBrowserError)());
         }
@@ -227,2 +112,13 @@ }
   }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.src !== this.props.src) {
+        if (this.props.src) {
+          this.startLoad();
+        } else {
+          this.fail((0, _utils.configurationError)('Missing source'));
+        }
+      }
+    }
+  }, {
     key: 'componentWillUnmount',
@@ -233,13 +129,33 @@ value: function componentWillUnmount() {
   }, {
-    key: 'fail',
-    value: function fail(error) {
-      var _this3 = this;
+    key: 'getFile',
+    value: function getFile(callback) {
+      var _props = this.props,
+          cacheGetRequests = _props.cacheGetRequests,
+          src = _props.src;
 
-      var status = error.isUnsupportedBrowserError ? Status.UNSUPPORTED : Status.FAILED;
 
-      if (this.isActive) {
-        this.setState({ status: status }, function () {
-          if (typeof _this3.props.onError === 'function') {
-            _this3.props.onError(error);
-          }
+      if (cacheGetRequests) {
+        if (loadedIcons[src]) {
+          var _loadedIcons$src = _slicedToArray(loadedIcons[src], 2),
+              err = _loadedIcons$src[0],
+              res = _loadedIcons$src[1];
+
+          setTimeout(function () {
+            return callback(err, res, true);
+          }, 0);
+        }
+
+        if (!getRequestsByUrl[src]) {
+          getRequestsByUrl[src] = [callback];
+
+          http.get(src, function (err, res) {
+            getRequestsByUrl[src].forEach(function (cb) {
+              loadedIcons[src] = [err, res];
+              cb(err, res);
+            });
+          });
+        }
+      } else {
+        http.get(src, function (err, res) {
+          callback(err, res);
         });
@@ -249,17 +165,14 @@ }
   }, {
-    key: 'handleLoad',
-    value: function handleLoad(err, res) {
-      var _this4 = this;
+    key: 'fail',
+    value: function fail(error) {
+      var _this2 = this;
 
-      if (err) {
-        this.fail(err);
-        return;
-      }
+      var status = error.isUnsupportedBrowserError ? Status.UNSUPPORTED : Status.FAILED;
 
+      /* istanbul ignore else */
       if (this.isActive) {
-        this.setState({
-          loadedText: res.text,
-          status: Status.LOADED
-        }, function () {
-          return typeof _this4.props.onLoad === 'function' ? _this4.props.onLoad() : null;
+        this.setState({ status: status }, function () {
+          if (typeof _this2.props.onError === 'function') {
+            _this2.props.onError(error);
+          }
         });
@@ -271,2 +184,3 @@ }
     value: function startLoad() {
+      /* istanbul ignore else */
       if (this.isActive) {
@@ -282,2 +196,3 @@ this.setState({
       var match = this.props.src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+
       if (match) {
@@ -288,7 +203,4 @@ return this.handleLoad(null, {
       }
-      if (this.props.cacheGetRequests) {
-        return createGetOrUseCacheForUrl(this.props.src, this.handleLoad);
-      }
 
-      return http.get(this.props.src, this.handleLoad);
+      return this.getFile(this.handleLoad);
     }
@@ -309,4 +221,9 @@ }, {
     value: function processSVG(svgText) {
-      if (this.props.uniquifyIDs) {
-        return uniquifyIDs(svgText, getHash(this.props.src));
+      var _props2 = this.props,
+          uniquifyIDs = _props2.uniquifyIDs,
+          uniqueHash = _props2.uniqueHash;
+
+
+      if (uniquifyIDs) {
+        return (0, _utils.uniquifySVGIDs)(svgText, uniqueHash);
       }
@@ -330,9 +247,18 @@
     value: function render() {
+      var content = void 0;
+      var html = void 0;
+
+      if (this.state.loadedText) {
+        html = {
+          __html: this.processSVG(this.state.loadedText)
+        };
+      } else {
+        content = this.renderContents();
+      }
+
       return this.props.wrapper({
         style: this.props.style,
         className: this.getClassName(),
-        dangerouslySetInnerHTML: this.state.loadedText ? {
-          __html: this.processSVG(this.state.loadedText)
-        } : undefined
-      }, this.renderContents());
+        dangerouslySetInnerHTML: html
+      }, content);
     }
@@ -350,6 +276,7 @@ }]);
   onLoad: _propTypes2.default.func,
-  preloader: _propTypes2.default.func,
+  preloader: _propTypes2.default.node,
   src: _propTypes2.default.string.isRequired,
   style: _propTypes2.default.object,
   supportTest: _propTypes2.default.func,
+  uniqueHash: _propTypes2.default.string,
   uniquifyIDs: _propTypes2.default.bool,
@@ -359,8 +286,10 @@ wrapper: _propTypes2.default.func
 InlineSVG.defaultProps = {
-  wrapper: _react2.default.createFactory('span'),
-  supportTest: isSupportedEnvironment,
+  cacheGetRequests: false,
+  onLoad: function onLoad() {},
+  supportTest: _utils.isSupportedEnvironment,
   uniquifyIDs: true,
-  cacheGetRequests: false
+  uniqueHash: (0, _utils.randomString)(),
+  wrapper: _react2.default.createFactory('span')
 };
 exports.default = InlineSVG;
 module.exports = exports['default'];

package.json

 {
   "name": "react-inlinesvg",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "An SVG loader for React",
@@ -10,8 +10,14 @@ "repository": {
   "keywords": [
+    "react",
     "react-component",
-    "react",
-    "svg",
-    "component"
+    "component",
+    "svg"
   ],
   "author": "Matthew Dapena-Tretter <[e-mail]>",
+  "contributors": [
+    {
+      "name": "Gil Barbara",
+      "email": "[e-mail]"
+    }
+  ],
   "license": "MIT",
@@ -22,48 +28,56 @@ "bugs": {
   "main": "./lib/index.js",
+  "peerDependencies": {
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0",
+    "prop-types": "^15.0.0"
+  },
   "dependencies": {
-    "httpplease": "^0.16",
-    "once": "^1.4"
+    "httpplease": "^0.16.4",
+    "once": "^1.4.0"
   },
   "devDependencies": {
-    "babel-core": "^6.25.0",
-    "babel-eslint": "^7.2.3",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.1",
+    "babel-jest": "^21.2.0",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-rewire": "1.1.0",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
-    "babel-register": "^6.24",
-    "babelify": "^7.3",
-    "browserify": "^14.4",
-    "browserify-shim": "^3.8",
-    "cors": "^2.8",
-    "enzyme": "^2.9",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^15.0.2",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.1.0",
-    "expect": "^1.20.2",
-    "gulp": "^3.9",
-    "gulp-babel": "^6.1",
-    "gulp-bump": "^2.7",
-    "gulp-connect": "^5.0",
-    "gulp-load-plugins": "^1.5",
-    "gulp-rename": "^1.2",
-    "gulp-util": "^3.0",
-    "jsdom": "^11.1.0",
-    "mocha": "^3.4",
-    "prop-types": "^15.5.10",
-    "react": "^15.6",
-    "react-addons-test-utils": "^15.6",
-    "vinyl-source-stream": "^1.1"
+    "babel-register": "^6.26.0",
+    "babelify": "^8.0.0",
+    "browserify": "^14.5.0",
+    "browserify-shim": "^3.8.14",
+    "cors": "^2.8.4",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.2",
+    "eslint": "^4.10.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^7.0.0",
+    "gulp-bump": "^2.8.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-connect": "^5.0.0",
+    "gulp-load-plugins": "^1.5.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-util": "^3.0.8",
+    "jest-cli": "^21.2.1",
+    "jest-enzyme": "^4.0.1",
+    "jsdom": "^11.3.0",
+    "react": "^16.0.0",
+    "react-addons-test-utils": "^15.6.2",
+    "react-dom": "^16.0.0",
+    "react-test-renderer": "^16.0.0",
+    "vinyl-source-stream": "^1.1.0"
   },
-  "peerDependencies": {
-    "react": "^0.14 || ^15.0",
-    "prop-types": "^15.5"
-  },
   "scripts": {
     "build": "gulp build",
-    "test": "gulp test-server & mocha --compilers js:babel-register; kill %1",
+    "serve": "gulp test-server",
+    "test": "npm run serve & jest --config config/jest.config.js --bail --coverage; kill %1",
+    "test:watch": "jest --config config/jest.config.js --watch",
     "lint": "eslint -c ./.eslintrc $(find src -name '*.js')",
+    "precommit": "npm run lint && npm test",
     "prepublish": "npm run build"
@@ -70,0 +84,0 @@ },

README.md

@@ -1,3 +0,3 @@
-react-inlinesvg
-===============
+# react-inlinesvg
+
 <a href="https://www.npmjs.com/package/react-inlinesvg" target="_blank">![](https://badge.fury.io/js/react-inlinesvg.svg)</a>
@@ -37,12 +37,18 @@
 Usage
------
+----
 
-```
-var Isvg = require('react-inlinesvg');
+```jsx
+import SVG  from 'react-inlinesvg';
 
-<Isvg src="/path/to/myfile.svg">
+<SVG
+    src="/path/to/myfile.svg"
+    preload={<Loader />}
+    onLoad: src => {
+        myOnLoadHandler(src);
+    }
+>
   Here's some optional content for browsers that don't support XHR or inline
   SVGs. You can use other React components here too. Here, I'll show you.
   <img src="/path/to/myfile.png" />
-</Isvg>
+</SVG>
 ```
@@ -52,79 +58,55 @@
 Props
------
+----
 
-<table>
-  <tr>
-    <th>Name</th>
-    <th>Type</th>
-    <th>Description</th>
-  </tr>
-  <tr>
-    <td><code>src</code></td>
-    <td>string</td>
-    <td>
-      The URL of the SVG file you want to load.
-    </td>
-  </tr>
-  <tr>
-    <td><code>wrapper</code></td>
-    <td>function</td>
-    <td>
-      A React class or other function that returns a component instance to be
-      used as the wrapper component. Defaults to <code>React.DOM.span</code>.
-    </td>
-  </tr>
-  <tr>
-    <td><code>preloader</code></td>
-    <td>function</td>
-    <td>
-      A React class or other function that returns a component instance to be
-      shown while the SVG is loaded.
-    </td>
-  </tr>
-  <tr>
-    <td><code>onLoad</code></td>
-    <td>function</td>
-    <td>
-      A callback to be invoked upon successful load.
-    </td>
-  </tr>
-  <tr>
-    <td><code>onError</code></td>
-    <td>function</td>
-    <td>
-      A callback to be invoked if loading the SVG fails. This will receive a
-      single argument: an instance of <code>InlineSVGError</code>, which has
-      the following properties:
+**src** `string`  
+The SVG file you want to load. It can be an `url` or a string (base64 or encoded)
 
-      <ul>
-        <li><code>isHttpError</code></li>
-        <li><code>isSupportedBrowser</code></li>
-        <li><code>isConfigurationError</code></li>
-        <li><code>statusCode</code> (present only if <code>isHttpError</code> is true)</li>
-      </ul>
-    </td>
-  </tr>
-  <tr>
-    <td><code>uniquifyIDs</code></td>
-    <td>boolean</td>
-    <td>
-      A boolean that tells Isvg to create unique IDs for each icon by hashing it. Default is <code>true</code> but you can alter the behaviour by setting the boolean to <code>false</code>.
+**wrapper** `function`  
+A React class or a function that returns a component instance to be used as the wrapper component. Defaults to `React.createFactory('span')`
 
-      <code>&lt;Isvg uniquifyIDs={false}&gt;&lt;/Isvg&gt;</code>
-    </td>
-  </tr>
-  <tr>
-    <td><code>cacheGetRequests</code></td>
-    <td>boolean</td>
-    <td>
-      A boolean that tells Isvg to only request svgs once. Default is <code>false</code> but you can alter the behaviour by setting the boolean to <code>true</code>.
+**preloader** `node`  
+A component to be shown while the SVG is loading.
 
-      <code>&lt;Isvg cacheGetRequests={true}&gt;&lt;/Isvg&gt;</code>
-    </td>
-  </tr>
-</table>
+**cacheGetRequests** `boolean`  
+A boolean to only request SVGs once. Default is `false`.  
 
+**uniquifyIDs** `boolean`  
+A boolean that create unique IDs for each icon by hashing it. Default is `true`.  
 
+**uniqueHash** `string`  
+A string to use with `uniquifyIDs`. Default to a random 8 characters string `[A-Za-z0-9]`
+
+**onLoad** `function`  
+A callback to be invoked upon successful load.  
+This will receive 2 arguments: the `src` prop and a `isCached` boolean 
+
+**onError** `function`  
+A callback to be invoked if loading the SVG fails.  
+This will receive a single argument:
+
+- a xhr `RequestError` with:
+
+```js
+{
+    ...,
+    isHttpError: bool,
+    status: number
+}
+``` 
+
+- or an `InlineSVGError`, which has the following properties:
+
+```js
+{
+    name: 'InlineSVGError',
+    isSupportedBrowser: bool,
+    isConfigurationError: bool,
+    isUnsupportedBrowserError: bool,
+    message: string
+}
+```
+
+
 Browser Support
----------------
+----
 
@@ -142,3 +124,3 @@ 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;
 XSS Warning
------------
+----
 
@@ -145,0 +127,0 @@ This component places the loaded file into your DOM, so you need to be careful

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance 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

Total package byte prevSize

174681

increased by788.15%

Number of package files

31

increased by416.67%

Lines of code

872

increased by168.31%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

36

increased by12.5%

Number of lines in readme file

133

decreased by-11.92%

Number of medium supply chain risk alerts

3

increased by50%

Dependency changes

• + Addedreact@16.14.0(transitive)

• + Addedreact-dom@16.14.0(transitive)

• + Addedscheduler@0.19.1(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedhttpplease@^0.16.4

• Updatedonce@^1.4.0