react-inlinesvg 0.7.1 → 0.7.5

package/README.md

@@ -1,7 +1,8 @@
 # react-inlinesvg
 
-[![NPM version](https://badge.fury.io/js/react-inlinesvg.svg)](https://badge.fury.io/js/react-inlinesvg.svg) 
+[![NPM version](https://badge.fury.io/js/react-inlinesvg.svg)](https://www.npmjs.com/package/react-inlinesvg) 
 [![build status](https://travis-ci.org/gilbarbara/react-inlinesvg.svg)](https://travis-ci.org/gilbarbara/react-inlinesvg) 
+[![dependencies Status](https://david-dm.org/gilbarbara/react-inlinesvg/status.svg)](https://david-dm.org/gilbarbara/react-inlinesvg) 
 [![Maintainability](https://api.codeclimate.com/v1/badges/c7e42fe511b80cc25760/maintainability)](https://codeclimate.com/github/gilbarbara/react-inlinesvg/maintainability) 
 [![Test Coverage](https://api.codeclimate.com/v1/badges/c7e42fe511b80cc25760/test_coverage)](https://codeclimate.com/github/gilbarbara/react-inlinesvg/test_coverage)
 
@@ -35,9 +36,14 @@ The SVG [`<use>`][svg-use-external-source] element can be used to achieve
 something similar to this component. See [this article][use-article] for more
 information and [this table][use-support] for browser support and caveats.
 
-
 Usage
 ----
+First install it.
+
+`npm install --save react-inlinesvg`
+
+And import it into your code:
+
 
 ```jsx
 import SVG  from 'react-inlinesvg';
@@ -45,9 +51,9 @@ import SVG  from 'react-inlinesvg';
 <SVG
     src="/path/to/myfile.svg"
     preload={<Loader />}
-    onLoad: src => {
+    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.

package/es/index.js

@@ -0,0 +1,260 @@
+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; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import httpplease from 'httpplease';
+import ieXDomain from 'httpplease/plugins/oldiexdomain';
+
+import { configurationError, isSupportedEnvironment, randomString, uniquifySVGIDs, unsupportedBrowserError } from './utils';
+
+var http = httpplease.use(ieXDomain);
+
+var Status = {
+  PENDING: 'pending',
+  LOADING: 'loading',
+  LOADED: 'loaded',
+  FAILED: 'failed',
+  UNSUPPORTED: 'unsupported'
+};
+
+var getRequestsByUrl = {};
+var loadedIcons = {};
+
+var InlineSVG = function (_React$PureComponent) {
+  _inherits(InlineSVG, _React$PureComponent);
+
+  function InlineSVG(props) {
+    _classCallCheck(this, InlineSVG);
+
+    var _this = _possibleConstructorReturn(this, (InlineSVG.__proto__ || Object.getPrototypeOf(InlineSVG)).call(this, props));
+
+    _this.handleLoad = function (err, res) {
+      var isCached = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+      if (err) {
+        _this.fail(err);
+        return;
+      }
+
+      if (_this.isActive) {
+        _this.setState({
+          loadedText: res.text,
+          status: Status.LOADED
+        }, function () {
+          _this.props.onLoad(_this.props.src, isCached);
+        });
+      }
+    };
+
+    _this.state = {
+      status: Status.PENDING
+    };
+
+    _this.isActive = false;
+    return _this;
+  }
+
+  _createClass(InlineSVG, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      this.isActive = true;
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      /* istanbul ignore else */
+      if (this.state.status === Status.PENDING) {
+        if (this.props.supportTest()) {
+          if (this.props.src) {
+            this.startLoad();
+          } else {
+            this.fail(configurationError('Missing source'));
+          }
+        } else {
+          this.fail(unsupportedBrowserError());
+        }
+      }
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.src !== this.props.src) {
+        if (this.props.src) {
+          this.startLoad();
+        } else {
+          this.fail(configurationError('Missing source'));
+        }
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.isActive = false;
+    }
+  }, {
+    key: 'getFile',
+    value: function getFile(callback) {
+      var _props = this.props,
+          cacheGetRequests = _props.cacheGetRequests,
+          src = _props.src;
+
+
+      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] = [];
+
+          http.get(src, function (err, res) {
+            getRequestsByUrl[src].forEach(function (cb) {
+              loadedIcons[src] = [err, res];
+              cb(err, res);
+            });
+          });
+        }
+
+        getRequestsByUrl[src].push(callback);
+      } else {
+        http.get(src, function (err, res) {
+          callback(err, res);
+        });
+      }
+    }
+  }, {
+    key: 'fail',
+    value: function fail(error) {
+      var _this2 = this;
+
+      var status = error.isUnsupportedBrowserError ? Status.UNSUPPORTED : Status.FAILED;
+
+      /* istanbul ignore else */
+      if (this.isActive) {
+        this.setState({ status: status }, function () {
+          if (typeof _this2.props.onError === 'function') {
+            _this2.props.onError(error);
+          }
+        });
+      }
+    }
+  }, {
+    key: 'startLoad',
+    value: function startLoad() {
+      /* istanbul ignore else */
+      if (this.isActive) {
+        this.setState({
+          status: Status.LOADING
+        }, this.load);
+      }
+    }
+  }, {
+    key: 'load',
+    value: function load() {
+      var match = this.props.src.match(/data:image\/svg[^,]*?(;base64)?,(.*)/);
+
+      if (match) {
+        return this.handleLoad(null, {
+          text: match[1] ? atob(match[2]) : decodeURIComponent(match[2])
+        });
+      }
+
+      return this.getFile(this.handleLoad);
+    }
+  }, {
+    key: 'getClassName',
+    value: function getClassName() {
+      var className = 'isvg ' + this.state.status;
+
+      if (this.props.className) {
+        className += ' ' + this.props.className;
+      }
+
+      return className;
+    }
+  }, {
+    key: 'processSVG',
+    value: function processSVG(svgText) {
+      var _props2 = this.props,
+          uniquifyIDs = _props2.uniquifyIDs,
+          uniqueHash = _props2.uniqueHash;
+
+
+      if (uniquifyIDs) {
+        return uniquifySVGIDs(svgText, uniqueHash || randomString());
+      }
+
+      return svgText;
+    }
+  }, {
+    key: 'renderContents',
+    value: function renderContents() {
+      switch (this.state.status) {
+        case Status.UNSUPPORTED:
+        case Status.FAILED:
+          return this.props.children;
+        default:
+          return this.props.preloader;
+      }
+    }
+  }, {
+    key: 'render',
+    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: html
+      }, content);
+    }
+  }]);
+
+  return InlineSVG;
+}(React.PureComponent);
+
+InlineSVG.propTypes = {
+  cacheGetRequests: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  onError: PropTypes.func,
+  onLoad: PropTypes.func,
+  preloader: PropTypes.node,
+  src: PropTypes.string.isRequired,
+  style: PropTypes.object,
+  supportTest: PropTypes.func,
+  uniqueHash: PropTypes.string,
+  uniquifyIDs: PropTypes.bool,
+  wrapper: PropTypes.func
+};
+InlineSVG.defaultProps = {
+  cacheGetRequests: false,
+  onLoad: function onLoad() {},
+  supportTest: isSupportedEnvironment,
+  uniquifyIDs: true,
+  wrapper: React.createFactory('span')
+};
+export default InlineSVG;

package/es/utils.js

@@ -0,0 +1,116 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import once from 'once';
+
+export var supportsInlineSVG = once(function () {
+  /* istanbul ignore next */
+  if (!document) {
+    return false;
+  }
+
+  var div = document.createElement('div');
+  div.innerHTML = '<svg />';
+  return div.firstChild && div.firstChild.namespaceURI === 'http://www.w3.org/2000/svg';
+});
+
+export var isSupportedEnvironment = once(function () {
+  return supportsInlineSVG() && typeof window !== 'undefined' && window !== null ? window.XMLHttpRequest || window.XDomainRequest : false;
+});
+
+export var randomString = function randomString() {
+  var length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8;
+
+  var letters = 'abcdefghijklmnopqrstuvwxyz';
+  var numbers = '1234567890';
+  var charset = letters + letters.toUpperCase() + numbers;
+
+  var randomCharacter = function randomCharacter(array) {
+    return array[Math.floor(Math.random() * array.length)];
+  };
+
+  var R = '';
+  for (var i = 0; i < length; i++) {
+    R += randomCharacter(charset);
+  }
+  return R;
+};
+
+export var uniquifySVGIDs = 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;
+    };
+
+    return svgText.replace(idPattern, function (m, p1, p2, p3, p4, p5) {
+      //eslint-disable-line consistent-return
+      /* istanbul ignore else */
+      if (p2) {
+        return p1 + '="' + uniquifyID(p2) + '"';
+      } else if (p4) {
+        return p3 + '="#' + uniquifyID(p4) + '"';
+      } else if (p5) {
+        return '="url(#' + uniquifyID(p5) + ')"';
+      }
+    });
+  };
+}();
+
+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);
+
+  return _extends({}, err, attrs);
+};
+
+export var unsupportedBrowserError = function unsupportedBrowserError(message) {
+  var newMessage = message;
+
+  /* istanbul ignore else */
+  if (!newMessage) {
+    newMessage = 'Unsupported Browser';
+  }
+
+  return createError(newMessage, {
+    isSupportedBrowser: false,
+    isUnsupportedBrowserError: true
+  });
+};
+
+export var configurationError = function configurationError(message) {
+  return createError(message, {
+    isConfigurationError: true
+  });
+};

package/lib/index.js

@@ -1,8 +1,6 @@
 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 
 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"); } }; }();
 
@@ -214,7 +212,7 @@ var InlineSVG = function (_React$PureComponent) {
 
 
       if (uniquifyIDs) {
-        return (0, _utils.uniquifySVGIDs)(svgText, uniqueHash);
+        return (0, _utils.uniquifySVGIDs)(svgText, uniqueHash || (0, _utils.randomString)());
       }
 
       return svgText;
@@ -274,8 +272,6 @@ InlineSVG.defaultProps = {
   onLoad: function onLoad() {},
   supportTest: _utils.isSupportedEnvironment,
   uniquifyIDs: true,
-  uniqueHash: (0, _utils.randomString)(),
   wrapper: _react2.default.createFactory('span')
 };
-exports.default = InlineSVG;
-module.exports = exports['default'];
+exports.default = InlineSVG;

package/lib/utils.js

@@ -1,8 +1,6 @@
 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.configurationError = exports.unsupportedBrowserError = exports.uniquifySVGIDs = exports.randomString = exports.isSupportedEnvironment = exports.supportsInlineSVG = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -31,7 +29,7 @@ var supportsInlineSVG = exports.supportsInlineSVG = (0, _once2.default)(function
 });
 
 var isSupportedEnvironment = exports.isSupportedEnvironment = (0, _once2.default)(function () {
-  return ((typeof window !== 'undefined' && window !== null ? window.XMLHttpRequest : false) || (typeof window !== 'undefined' && window !== null ? window.XDomainRequest : false)) && supportsInlineSVG();
+  return supportsInlineSVG() && typeof window !== 'undefined' && window !== null ? window.XMLHttpRequest || window.XDomainRequest : false;
 });
 
 var randomString = exports.randomString = function randomString() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-inlinesvg",
-  "version": "0.7.1",
+  "version": "0.7.5",
   "description": "An SVG loader for React",
   "repository": {
     "type": "git",
@@ -23,7 +23,13 @@
   "bugs": {
     "url": "https://github.com/gilbarbara/react-inlinesvg/issues"
   },
-  "main": "./lib/index.js",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "files": [
+    "es",
+    "lib",
+    "src"
+  ],
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0",
     "react-dom": "^15.0.0 || ^16.0.0",
@@ -34,52 +40,69 @@
     "once": "^1.4.0"
   },
   "devDependencies": {
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.2",
-    "babel-jest": "^21.2.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-eslint": "^8.2.1",
+    "babel-jest": "^22.1.0",
+    "babel-plugin-array-includes": "^2.0.3",
+    "babel-plugin-transform-flow-strip-types": "^6.22.0",
+    "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
-    "babel-register": "^6.26.0",
     "babelify": "^8.0.0",
-    "browserify": "^14.5.0",
+    "browserify": "^15.2.0",
     "browserify-shim": "^3.8.14",
+    "chalk": "^2.3.0",
     "cors": "^2.8.4",
-    "enzyme": "^3.1.1",
-    "enzyme-adapter-react-16": "^1.0.4",
-    "eslint": "^4.10.0",
+    "cross-env": "^5.1.3",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.16.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",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.6.1",
     "gulp": "^3.9.1",
-    "gulp-babel": "^7.0.0",
-    "gulp-bump": "^2.8.0",
+    "gulp-babel": "^7.0.1",
+    "gulp-bump": "^3.0.0",
     "gulp-concat": "^2.6.1",
-    "gulp-connect": "^5.0.0",
+    "gulp-connect": "^5.2.0",
     "gulp-load-plugins": "^1.5.0",
     "gulp-rename": "^1.2.2",
     "gulp-util": "^3.0.8",
     "husky": "^0.14.3",
-    "jest-cli": "^21.2.1",
-    "jest-enzyme": "^4.0.1",
-    "jsdom": "^11.3.0",
-    "react": "^16.1.0",
+    "jest": "^22.1.4",
+    "jest-enzyme": "^4.1.1",
+    "jsdom": "^11.6.2",
+    "react": "^16.2.0",
     "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^16.1.0",
-    "react-test-renderer": "^16.1.0",
-    "vinyl-source-stream": "^1.1.0"
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
+    "rimraf": "^2.6.2",
+    "vinyl-source-stream": "^2.0.0",
+    "yargs": "^11.0.0"
   },
   "scripts": {
-    "build": "gulp build",
-    "serve": "gulp test-server",
-    "test": "npm run serve & SERVE_PID=$! && jest --config config/jest.config.js --bail --coverage && kill $SERVE_PID",
-    "test:watch": "jest --config config/jest.config.js --watch",
+    "build": "npm run clean && npm run build:commonjs && npm run build:es && npm run build:standalone",
+    "build:commonjs": "cross-env BABEL_ENV=commonjs babel src -d lib",
+    "build:es": "cross-env NODE_ENV=production babel src -d es",
+    "build:standalone": "gulp build",
+    "watch": "npm run build:commonjs -- -w",
+    "clean": "rimraf es && rimraf lib && rimraf standalone",
+    "start": "gulp server",
+    "test": "npm run start & SERVE_PID=$! && jest --bail --coverage && kill $SERVE_PID",
+    "test:watch": "jest --watch",
     "lint": "eslint -c ./.eslintrc $(find src -name '*.js')",
-    "precommit": "npm run lint && npm test",
-    "prepublish": "npm run build"
+    "precommit": "node tasks has-commits && npm run lint && npm test",
+    "postmerge": "node tasks update",
+    "prepublishOnly": "npm run build"
   },
+  "browserslist": [
+    "last 2 versions",
+    "safari >= 8",
+    "ios > 8"
+  ],
   "browserify": {
     "transform": [
       [