react-inlinesvg - npm Package Compare versions

Comparing version 1.0.0-3 to 1.0.0-4

lib/index.d.ts

 import React from 'react';
-import { InlineSVGError } from './utils';
+import { InlineSVGError } from './helpers';
 export interface IProps {
@@ -25,10 +25,12 @@ baseURL?: string;
 export interface IFetchError extends Error {
+    code: string;
+    errno: string;
     message: string;
     type: string;
-    errno: string;
-    code: string;
 }
 export interface IStorageItem {
+    content: string;
+    queue: any[];
+    status: string;
     url: string;
-    content: string;
 }
@@ -43,3 +45,2 @@ export declare const STATUS: {
 };
-export declare const storage: IStorageItem[];
 export default class InlineSVG extends React.PureComponent<IProps, IState> {
@@ -46,0 +47,0 @@ static defaultProps: {

lib/index.js

@@ -65,3 +65,3 @@ "use strict";
 var dom_to_react_1 = __importDefault(require("dom-to-react"));
-var utils_1 = require("./utils");
+var helpers_1 = require("./helpers");
 exports.STATUS = {
@@ -75,3 +75,3 @@ FAILED: 'failed',
 };
-exports.storage = [];
+var storage = [];
 var InlineSVG = /** @class */ (function (_super) {
@@ -95,3 +95,4 @@ __extends(InlineSVG, _super);
             var status = error.message === 'Browser does not support SVG' ? exports.STATUS.UNSUPPORTED : exports.STATUS.FAILED;
-            if (process.env.NODE_ENV === 'development') {
+            /* istanbul ignore else */
+            if (process.env.NODE_ENV !== 'production') {
                 console.error(error); // tslint:disable-line:no-console
@@ -112,20 +113,43 @@ }
             try {
+                if (cacheRequests) {
+                    storage.push({ url: src, content: '', status: exports.STATUS.LOADING, queue: [] });
+                }
                 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 utils_1.InlineSVGError('Not Found');
+                        throw new helpers_1.InlineSVGError('Not Found');
                     }
+                    if (!['image/svg+xml', 'text/plain'].some(function (d) { return fileType.indexOf(d) >= 0; })) {
+                        throw new helpers_1.InlineSVGError("Content type isn't valid: " + fileType);
+                    }
                     return response.text();
                 })
                     .then(function (content) {
+                    _this.handleLoad(content);
                     /* istanbul ignore else */
                     if (cacheRequests) {
-                        exports.storage.push({ url: src, content: content });
+                        var cache = storage.find(function (d) { return d.url === src; });
+                        /* istanbul ignore else */
+                        if (cache) {
+                            cache.content = content;
+                            cache.status = exports.STATUS.LOADED;
+                            cache.queue = cache.queue.filter(function (cb) {
+                                cb(content);
+                                return false;
+                            });
+                        }
                     }
-                    _this.handleLoad(content);
                 })
-                    .catch(function (error) { return _this.handleError(error); });
+                    .catch(function (error) {
+                    /* istanbul ignore else */
+                    if (cacheRequests) {
+                        storage = storage.filter(function (d) { return d.url !== src; });
+                    }
+                    _this.handleError(error);
+                });
             }
             catch (error) {
-                _this.handleError(new utils_1.InlineSVGError(error.message));
+                _this.handleError(new helpers_1.InlineSVGError(error.message));
             }
@@ -136,3 +160,3 @@ };
             element: null,
-            hasCache: !!props.cacheRequests && !!exports.storage.find(function (s) { return s.url === props.src; }),
+            hasCache: !!props.cacheRequests && !!storage.find(function (s) { return s.url === props.src; }),
             status: exports.STATUS.PENDING,
@@ -144,4 +168,4 @@ };
         this._isMounted = true;
-        if (!utils_1.canUseDOM()) {
-            this.handleError(new utils_1.InlineSVGError('No DOM'));
+        if (!helpers_1.canUseDOM()) {
+            this.handleError(new helpers_1.InlineSVGError('No DOM'));
             return;
@@ -155,8 +179,8 @@ }
                 /* istanbul ignore else */
-                if (!utils_1.isSupportedEnvironment()) {
-                    throw new utils_1.InlineSVGError('Browser does not support SVG');
+                if (!helpers_1.isSupportedEnvironment()) {
+                    throw new helpers_1.InlineSVGError('Browser does not support SVG');
                 }
                 /* istanbul ignore else */
                 if (!src) {
-                    throw new utils_1.InlineSVGError('Missing src');
+                    throw new helpers_1.InlineSVGError('Missing src');
                 }
@@ -171,3 +195,3 @@ this.load();
     InlineSVG.prototype.componentDidUpdate = function (prevProps, prevState) {
-        if (!utils_1.canUseDOM()) {
+        if (!helpers_1.canUseDOM()) {
             return;
@@ -185,3 +209,3 @@ }
             if (!src) {
-                this.handleError(new utils_1.InlineSVGError('Missing src'));
+                this.handleError(new helpers_1.InlineSVGError('Missing src'));
                 return;
@@ -210,3 +234,3 @@ }
         }
-        var hash = uniqueHash || utils_1.randomString();
+        var hash = uniqueHash || helpers_1.randomString();
         __spread(node.children).map(function (d) {
@@ -243,3 +267,3 @@ if (d.attributes && d.attributes.length) {
             if (!svg) {
-                throw new utils_1.InlineSVGError('Could not parse the SVG code');
+                throw new helpers_1.InlineSVGError('Could not parse the loaded code');
             }
@@ -298,5 +322,11 @@ svg = this.updateSVGAttributes(svg);
                 var _a = _this.props, cacheRequests = _a.cacheRequests, src = _a.src;
-                var cache = cacheRequests && exports.storage.find(function (d) { return d.url === src; });
+                var cache = cacheRequests && storage.find(function (d) { return d.url === src; });
                 if (cache) {
-                    _this.handleLoad(cache.content);
+                    /* istanbul ignore else */
+                    if (cache.status === exports.STATUS.LOADING) {
+                        cache.queue.push(_this.handleLoad);
+                    }
+                    else if (cache.status === exports.STATUS.LOADED) {
+                        _this.handleLoad(cache.content);
+                    }
                     return;
@@ -321,3 +351,3 @@ }
     InlineSVG.prototype.render = function () {
-        if (!utils_1.canUseDOM()) {
+        if (!helpers_1.canUseDOM()) {
             return null;
@@ -324,0 +354,0 @@ }

package.json

 {
   "name": "react-inlinesvg",
-  "version": "1.0.0-3",
+  "version": "1.0.0-4",
   "description": "An SVG loader for React",
@@ -27,4 +27,3 @@ "author": "Gil Barbara <[e-mail]>",
     "react",
-    "svg",
-    "typescript"
+    "svg"
   ],
@@ -82,2 +81,4 @@ "license": "MIT",
     "eslint-plugin-react": "^7.14.2",
+    "fetch-mock": "^7.3.6",
+    "http-server": "^0.11.1",
     "husky": "^3.0.0",
@@ -91,8 +92,6 @@ "jest": "^24.8.0",
     "prettier": "^1.18.2",
-    "react": "^16.7.0",
-    "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^16.7.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-test-renderer": "^16.8.6",
     "rimraf": "^2.6.3",
-    "serve": "^11.1.0",
     "start-server-and-test": "^1.9.1",
@@ -112,3 +111,3 @@ "styled-components": "^4.3.2",
     "clean": "rimraf lib",
-    "start": "serve -p 1337 test/__fixtures__",
+    "start": "http-server -p 1337 --cors test/__fixtures__",
     "test": "start-server-and-test start http://localhost:1337 test:coverage",
@@ -115,0 +114,0 @@ "test:coverage": "jest --coverage --bail",

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

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

29654

increased by5.57%

Lines of code

491

increased by6.74%

No dependency changes