react-inlinesvg - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib/index.d.ts

@@ -49,2 +49,3 @@ import React from 'react';
     private _isMounted;
+    private readonly hash;
     constructor(props: IProps);
@@ -54,6 +55,6 @@ componentDidMount(): void;
     componentWillUnmount(): void;
-    private parseSVG;
+    private processSVG;
     private updateSVGAttributes;
-    private generateNode;
-    private generateElement;
+    private getNode;
+    private getElement;
     private load;
@@ -60,0 +61,0 @@ private handleLoad;

lib/index.js

@@ -15,13 +15,2 @@ "use strict";
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -64,4 +53,3 @@ var t = {};
 var react_1 = __importDefault(require("react"));
-// @ts-ignore
-var dom_to_react_1 = __importDefault(require("dom-to-react"));
+var react_from_dom_1 = __importDefault(require("react-from-dom"));
 var helpers_1 = require("./helpers");
@@ -89,3 +77,3 @@ exports.STATUS = {
                     status: exports.STATUS.LOADED,
-                }, _this.generateElement);
+                }, _this.getElement);
             }
@@ -98,3 +86,4 @@ };
             if (process.env.NODE_ENV !== 'production') {
-                console.error(error); // tslint:disable-line:no-console
+                // tslint:disable-next-line:no-console
+                console.error(error);
             }
@@ -163,2 +152,3 @@ /* istanbul ignore else */
         };
+        _this.hash = props.uniqueHash || helpers_1.randomString();
         return _this;
@@ -215,3 +205,3 @@ }
     };
-    InlineSVG.prototype.parseSVG = function () {
+    InlineSVG.prototype.processSVG = function () {
         var content = this.state.content;
@@ -226,3 +216,3 @@ var preProcessor = this.props.preProcessor;
         var _this = this;
-        var _a = this.props, _b = _a.baseURL, baseURL = _b === void 0 ? '' : _b, uniquifyIDs = _a.uniquifyIDs, uniqueHash = _a.uniqueHash;
+        var _a = this.props, _b = _a.baseURL, baseURL = _b === void 0 ? '' : _b, uniquifyIDs = _a.uniquifyIDs;
         var replaceableAttributes = ['id', 'href', 'xlink:href', 'xlink:role', 'xlink:arcrole'];
@@ -232,3 +222,2 @@ if (!uniquifyIDs) {
         }
-        var hash = uniqueHash || helpers_1.randomString();
         __spread(node.children).map(function (d) {
@@ -240,3 +229,3 @@ if (d.attributes && d.attributes.length) {
                     if (match && match[1]) {
-                        a.value = "url(" + baseURL + match[1] + "__" + hash + ")";
+                        a.value = "url(" + baseURL + match[1] + "__" + _this.hash + ")";
                     }
@@ -247,3 +236,3 @@ });
                     if (attribute) {
-                        attribute.value = attribute.value + "__" + hash;
+                        attribute.value = attribute.value + "__" + _this.hash;
                     }
@@ -259,15 +248,13 @@ });
     };
-    InlineSVG.prototype.generateNode = function () {
+    InlineSVG.prototype.getNode = function () {
         var _a = this.props, description = _a.description, title = _a.title;
         try {
-            var svgText = this.parseSVG();
-            var parser = new DOMParser();
-            var doc = parser.parseFromString(svgText, 'image/svg+xml');
-            var svg = doc.querySelector('svg');
-            if (!svg) {
-                throw new helpers_1.InlineSVGError('Could not parse the loaded code');
+            var svgText = this.processSVG();
+            var node = react_from_dom_1.default(svgText, { nodeOnly: true });
+            if (!node) {
+                throw new helpers_1.InlineSVGError('Could not convert the src to a DOM Node');
             }
-            svg = this.updateSVGAttributes(svg);
+            node = this.updateSVGAttributes(node);
             if (description) {
-                var originalDesc = svg.querySelector('desc');
+                var originalDesc = node.querySelector('desc');
                 if (originalDesc && originalDesc.parentNode) {
@@ -278,6 +265,6 @@ originalDesc.parentNode.removeChild(originalDesc);
                 descElement.innerHTML = description;
-                svg.prepend(descElement);
+                node.prepend(descElement);
             }
             if (title) {
-                var originalTitle = svg.querySelector('title');
+                var originalTitle = node.querySelector('title');
                 if (originalTitle && originalTitle.parentNode) {
@@ -288,25 +275,25 @@ originalTitle.parentNode.removeChild(originalTitle);
                 titleElement.innerHTML = title;
-                svg.prepend(titleElement);
+                node.prepend(titleElement);
             }
-            return svg;
+            return node;
         }
         catch (error) {
-            return this.handleError(error);
+            this.handleError(error);
         }
     };
-    InlineSVG.prototype.generateElement = function () {
+    InlineSVG.prototype.getElement = function () {
         var _a = this.props, baseURL = _a.baseURL, cacheRequests = _a.cacheRequests, children = _a.children, description = _a.description, onError = _a.onError, onLoad = _a.onLoad, loader = _a.loader, preProcessor = _a.preProcessor, src = _a.src, title = _a.title, uniqueHash = _a.uniqueHash, uniquifyIDs = _a.uniquifyIDs, rest = __rest(_a, ["baseURL", "cacheRequests", "children", "description", "onError", "onLoad", "loader", "preProcessor", "src", "title", "uniqueHash", "uniquifyIDs"]);
         try {
-            var node = this.generateNode();
-            /* istanbul ignore else */
-            if (node) {
-                var d2r = new dom_to_react_1.default();
-                this.setState({
-                    element: react_1.default.cloneElement(d2r.prepareNode(node), __assign({}, rest)),
-                    status: exports.STATUS.READY,
-                });
+            var node = this.getNode();
+            var element = react_from_dom_1.default(node);
+            if (!element) {
+                throw new helpers_1.InlineSVGError('Could not convert the src to a React element');
             }
+            this.setState({
+                element: react_1.default.cloneElement(element, rest),
+                status: exports.STATUS.READY,
+            });
         }
         catch (error) {
-            this.handleError(error);
+            this.handleError(new helpers_1.InlineSVGError(error.message));
         }
@@ -313,0 +300,0 @@ };

package.json

 {
   "name": "react-inlinesvg",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "An SVG loader for React",
@@ -25,2 +25,3 @@ "author": "Gil Barbara <[e-mail]>",
   "types": "lib/index.d.ts",
+  "license": "MIT",
   "keywords": [
@@ -30,3 +31,2 @@ "react",
   ],
-  "license": "MIT",
   "peerDependencies": {
@@ -37,3 +37,3 @@ "react": "^16.0.0",
   "dependencies": {
-    "dom-to-react": "^1.0.0",
+    "react-from-dom": "^0.2.1",
     "exenv": "^1.2.2",
@@ -79,3 +79,3 @@ "once": "^1.4.0"
     "eslint-config-prettier": "^5.1.0",
-    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
@@ -82,0 +82,0 @@ "eslint-plugin-prettier": "^3.1.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

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

Worsened metrics

Total package byte prevSize

29107

decreased by-1.32%

Lines of code

478

decreased by-2.45%

Dependency changes

• + Addedreact-from-dom@^0.2.1

• + Addedreact-from-dom@0.2.3(transitive)

• - Removeddom-to-react@^1.0.0

• - Removeddom-to-react@1.0.0(transitive)