react-inlinesvg - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

esm/index.js

@@ -82,3 +82,4 @@ var __extends = (this && this.__extends) || (function () {
             writable: true,
-            value: function (content) {
+            value: function (content, hasCache) {
+                if (hasCache === void 0) { hasCache = false; }
                 /* istanbul ignore else */
@@ -88,2 +89,3 @@ if (_this.isActive) {
                         content: content,
+                        hasCache: hasCache,
                         status: STATUS.LOADED,
@@ -262,7 +264,7 @@ }, _this.getElement);
                     }
-                    var descElement = document.createElement('desc');
+                    var descElement = document.createElementNS('http://www.w3.org/2000/svg', 'desc');
                     descElement.innerHTML = description;
                     svg.prepend(descElement);
                 }
-                if (title) {
+                if (typeof title !== 'undefined') {
                     var originalTitle = svg.querySelector('title');
@@ -272,5 +274,7 @@ if (originalTitle && originalTitle.parentNode) {
                     }
-                    var titleElement = document.createElement('title');
-                    titleElement.innerHTML = title;
-                    svg.prepend(titleElement);
+                    if (title) {
+                        var titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+                        titleElement.innerHTML = title;
+                        svg.prepend(titleElement);
+                    }
                 }
@@ -316,2 +320,3 @@ return svg;
                     element: null,
+                    hasCache: false,
                     status: STATUS.LOADING,
@@ -322,3 +327,3 @@ }, function () {
                     if (cache && cache.status === STATUS.LOADED) {
-                        _this.handleLoad(cache.content);
+                        _this.handleLoad(cache.content, true);
                         return;
@@ -325,0 +330,0 @@ }

esm/types.d.ts

 import * as React from 'react';
-export declare type ErrorCallback = (error: Error | FetchError) => void;
-export declare type LoadCallback = (src: string, isCached: boolean) => void;
-export declare type PlainObject<T = unknown> = Record<string | number | symbol, T>;
-export declare type PreProcessorCallback = (code: string) => string;
+export type ErrorCallback = (error: Error | FetchError) => void;
+export type LoadCallback = (src: string, isCached: boolean) => void;
+export type PlainObject<T = unknown> = Record<string | number | symbol, T>;
+export type PreProcessorCallback = (code: string) => string;
 export interface Props extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> {
@@ -18,3 +18,3 @@ baseURL?: string;
     src: string;
-    title?: string;
+    title?: string | null;
     uniqueHash?: string;
@@ -21,0 +21,0 @@ uniquifyIDs?: boolean;

lib/index.js

@@ -99,3 +99,4 @@ "use strict";
             writable: true,
-            value: function (content) {
+            value: function (content, hasCache) {
+                if (hasCache === void 0) { hasCache = false; }
                 /* istanbul ignore else */
@@ -105,2 +106,3 @@ if (_this.isActive) {
                         content: content,
+                        hasCache: hasCache,
                         status: helpers_1.STATUS.LOADED,
@@ -279,7 +281,7 @@ }, _this.getElement);
                     }
-                    var descElement = document.createElement('desc');
+                    var descElement = document.createElementNS('http://www.w3.org/2000/svg', 'desc');
                     descElement.innerHTML = description;
                     svg.prepend(descElement);
                 }
-                if (title) {
+                if (typeof title !== 'undefined') {
                     var originalTitle = svg.querySelector('title');
@@ -289,5 +291,7 @@ if (originalTitle && originalTitle.parentNode) {
                     }
-                    var titleElement = document.createElement('title');
-                    titleElement.innerHTML = title;
-                    svg.prepend(titleElement);
+                    if (title) {
+                        var titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+                        titleElement.innerHTML = title;
+                        svg.prepend(titleElement);
+                    }
                 }
@@ -333,2 +337,3 @@ return svg;
                     element: null,
+                    hasCache: false,
                     status: helpers_1.STATUS.LOADING,
@@ -339,3 +344,3 @@ }, function () {
                     if (cache && cache.status === helpers_1.STATUS.LOADED) {
-                        _this.handleLoad(cache.content);
+                        _this.handleLoad(cache.content, true);
                         return;
@@ -342,0 +347,0 @@ }

lib/types.d.ts

 import * as React from 'react';
-export declare type ErrorCallback = (error: Error | FetchError) => void;
-export declare type LoadCallback = (src: string, isCached: boolean) => void;
-export declare type PlainObject<T = unknown> = Record<string | number | symbol, T>;
-export declare type PreProcessorCallback = (code: string) => string;
+export type ErrorCallback = (error: Error | FetchError) => void;
+export type LoadCallback = (src: string, isCached: boolean) => void;
+export type PlainObject<T = unknown> = Record<string | number | symbol, T>;
+export type PreProcessorCallback = (code: string) => string;
 export interface Props extends Omit<React.SVGProps<SVGElement>, 'onLoad' | 'onError' | 'ref'> {
@@ -18,3 +18,3 @@ baseURL?: string;
     src: string;
-    title?: string;
+    title?: string | null;
     uniqueHash?: string;
@@ -21,0 +21,0 @@ uniquifyIDs?: boolean;

package.json

 {
   "name": "react-inlinesvg",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "An SVG loader for React",
@@ -42,34 +42,34 @@ "author": "Gil Barbara <[e-mail]>",
   "devDependencies": {
-    "@gilbarbara/eslint-config": "^0.3.1",
+    "@gilbarbara/eslint-config": "^0.3.7",
     "@gilbarbara/helpers": "^0.6.3",
     "@gilbarbara/prettier-config": "^0.1.0",
     "@gilbarbara/tsconfig": "^0.1.1",
-    "@size-limit/preset-small-lib": "^8.0.1",
+    "@size-limit/preset-small-lib": "^8.2.4",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^14.0.0",
     "@types/exenv": "^1.2.0",
     "@types/fetch-mock": "^7.3.5",
-    "@types/jest": "^28.1.7",
-    "@types/node": "^18.7.6",
+    "@types/jest": "^29.4.0",
+    "@types/node": "^18.14.1",
     "@types/node-fetch": "^2.6.2",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "cross-fetch": "^3.1.5",
     "del-cli": "^5.0.0",
     "http-server": "^14.1.1",
-    "husky": "^8.0.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "jest-extended": "^3.0.2",
+    "husky": "^8.0.3",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
+    "jest-extended": "^3.2.4",
     "jest-fetch-mock": "^3.0.3",
     "jest-serializer-html": "^7.1.0",
-    "jest-watch-typeahead": "^2.0.0",
+    "jest-watch-typeahead": "^2.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "repo-tools": "^0.2.2",
-    "size-limit": "^8.0.1",
-    "start-server-and-test": "^1.14.0",
-    "ts-jest": "^28.0.8",
+    "size-limit": "^8.2.4",
+    "start-server-and-test": "^1.15.4",
+    "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.5"
   },
@@ -84,3 +84,3 @@ "scripts": {
     "start": "http-server test/__fixtures__ -p 1337 --cors",
-    "test": "start-server-and-test start http://localhost:1337 test:coverage",
+    "test": "start-server-and-test start http://127.0.0.1:1337 test:coverage",
     "test:coverage": "jest --coverage --bail",
@@ -87,0 +87,0 @@ "test:watch": "jest --watchAll --verbose",

README.md

@@ -26,16 +26,14 @@ # react-inlinesvg
 ```tsx
-import React, { useRef } from 'react';
-import SVG, { Props as SVGProps } from 'react-inlinesvg';
+import React from 'react';
+import SVG from 'react-inlinesvg';
 
-const Logo = React.forwardRef<SVGElement, SVGProps>((props, ref) => (
-  <SVG innerRef={ref} title="MyLogo" {...props} />
-));
-
-export function App() {
-  const logo = useRef<SVGElement>(null);
-
+export default function App() {
   return (
     <main>
-      <SVG src={`${process.env.PUBLIC_URL}/menu.svg`} width={24} height="auto" title="Menu" />
-      <Logo ref={logo} src={`${process.env.PUBLIC_URL}/logo.svg`} />
+      <SVG
+        src="https://cdn.svgporn.com/logos/react.svg"
+        width={128}
+        height="auto"
+        title="React"
+      />
     </main>
@@ -42,0 +40,0 @@ );

src/types.ts

@@ -20,3 +20,3 @@ import * as React from 'react';
   src: string;
-  title?: string;
+  title?: string | null;
   uniqueHash?: string;
@@ -23,0 +23,0 @@ uniquifyIDs?: boolean;

No alert changes

Improved metrics

Total package byte prevSize

90177

increased by0.96%

Lines of code

1561

increased by0.9%

Worsened metrics

Number of lines in readme file

182

decreased by-1.09%

No dependency changes