iconly - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/index.js

@@ -14,39 +14,91 @@
 class $4fa36e821943b400$var$Iconly {
+    static #dbInstance;
+    #options;
+    #container;
     constructor(options){
-        this.options = {
+        this.#options = {
             file: "./icons.svg",
+            version: "1.0",
+            debug: false,
+            container: document.body || document.documentElement,
             ...options
         };
-        this.isLocalStorage = typeof window.localStorage !== "undefined";
-        this.body = document.body;
+        this.#container = typeof this.#options.container === "string" ? document.querySelector(this.#options.container) : this.#options.container;
+        if (!$4fa36e821943b400$var$Iconly.#dbInstance) $4fa36e821943b400$var$Iconly.#dbInstance = this.#openDB("iconlyDB", 1);
     }
-    async init() {
-        const { file: file } = this.options;
-        if (this.isLocalStorage) {
-            const storedSize = localStorage.getItem("inlineSVGsize");
-            const storedData = localStorage.getItem("inlineSVGdata");
+    async #openDB(name, version) {
+        if (!("indexedDB" in window)) {
+            this.#logError("This browser doesn't support IndexedDB");
+            return;
+        }
+        let db;
+        try {
+            db = await new Promise((resolve, reject)=>{
+                const request = indexedDB.open(name, version);
+                request.onerror = ()=>reject(`IndexedDB error: ${request.error}`);
+                request.onupgradeneeded = (event)=>{
+                    const db = event.target.result;
+                    if (!db.objectStoreNames.contains("icons")) db.createObjectStore("icons", {
+                        keyPath: "version"
+                    });
+                };
+                request.onsuccess = ()=>resolve(request.result);
+            });
+        } catch (error) {
+            this.#logError(error);
+            throw error;
+        }
+        return db;
+    }
+    async #fetchData(file) {
+        try {
             const response = await fetch(file);
             if (!response.ok) throw new Error("Network response was not ok");
-            const data = await response.text();
-            if (storedSize && storedSize === data.length.toString()) this.insert(storedData);
-            else {
-                this.insert(data);
-                localStorage.setItem("inlineSVGdata", data);
-                localStorage.setItem("inlineSVGsize", data.length.toString());
-            }
-        } else {
-            const response = await fetch(file);
-            if (!response.ok) throw new Error("Network response was not ok");
-            const data = await response.text();
-            this.insert(data);
+            return response.text();
+        } catch (error) {
+            this.#logError(error);
+            throw error;
         }
     }
-    insert(data) {
-        if (!document.getElementById("iconset")) {
-            if (this.body) this.body.insertAdjacentHTML("beforeend", data);
-            else document.addEventListener("DOMContentLoaded", ()=>{
-                this.body.insertAdjacentHTML("beforeend", data);
+    async #insert(data) {
+        let iconSetDiv = document.getElementById("iconset");
+        if (!iconSetDiv) {
+            iconSetDiv = document.createElement("div");
+            iconSetDiv.id = "iconset";
+            iconSetDiv.setAttribute("aria-hidden", "true");
+            iconSetDiv.style.cssText = "width: 0; height: 0; position: absolute;";
+            this.#container.appendChild(iconSetDiv);
+        }
+        iconSetDiv.innerHTML = data;
+    }
+    async init() {
+        const { file: file, version: version } = this.#options;
+        try {
+            let data = await this.#fetchData(file);
+            const db = await $4fa36e821943b400$var$Iconly.#dbInstance;
+            const tx = db.transaction("icons", "readwrite");
+            const store = tx.objectStore("icons");
+            const dbVersion = await new Promise((resolve, reject)=>{
+                const request = store.get(version);
+                request.onsuccess = ()=>resolve(request.result);
+                request.onerror = ()=>reject(request.error);
             });
+            if (!(dbVersion && dbVersion.data)) await new Promise((resolve, reject)=>{
+                const request = store.put({
+                    version: version,
+                    data: data
+                });
+                request.onsuccess = ()=>resolve();
+                request.onerror = ()=>reject(request.error);
+            });
+            else data = dbVersion.data;
+            await tx.complete;
+            await this.#insert(data);
+        } catch (error) {
+            this.#logError("Error initializing Iconly:", error);
         }
     }
+    #logError(...messages) {
+        if (this.#options.debug) console.error(...messages);
+    }
 }
@@ -53,0 +105,0 @@ var $4fa36e821943b400$export$2e2bcd8739ae039 = $4fa36e821943b400$var$Iconly;

dist/index.module.js

 class $cf838c15c8b009ba$var$Iconly {
+    static #dbInstance;
+    #options;
+    #container;
     constructor(options){
-        this.options = {
+        this.#options = {
             file: "./icons.svg",
+            version: "1.0",
+            debug: false,
+            container: document.body || document.documentElement,
             ...options
         };
-        this.isLocalStorage = typeof window.localStorage !== "undefined";
-        this.body = document.body;
+        this.#container = typeof this.#options.container === "string" ? document.querySelector(this.#options.container) : this.#options.container;
+        if (!$cf838c15c8b009ba$var$Iconly.#dbInstance) $cf838c15c8b009ba$var$Iconly.#dbInstance = this.#openDB("iconlyDB", 1);
     }
-    async init() {
-        const { file: file } = this.options;
-        if (this.isLocalStorage) {
-            const storedSize = localStorage.getItem("inlineSVGsize");
-            const storedData = localStorage.getItem("inlineSVGdata");
+    async #openDB(name, version) {
+        if (!("indexedDB" in window)) {
+            this.#logError("This browser doesn't support IndexedDB");
+            return;
+        }
+        let db;
+        try {
+            db = await new Promise((resolve, reject)=>{
+                const request = indexedDB.open(name, version);
+                request.onerror = ()=>reject(`IndexedDB error: ${request.error}`);
+                request.onupgradeneeded = (event)=>{
+                    const db = event.target.result;
+                    if (!db.objectStoreNames.contains("icons")) db.createObjectStore("icons", {
+                        keyPath: "version"
+                    });
+                };
+                request.onsuccess = ()=>resolve(request.result);
+            });
+        } catch (error) {
+            this.#logError(error);
+            throw error;
+        }
+        return db;
+    }
+    async #fetchData(file) {
+        try {
             const response = await fetch(file);
             if (!response.ok) throw new Error("Network response was not ok");
-            const data = await response.text();
-            if (storedSize && storedSize === data.length.toString()) this.insert(storedData);
-            else {
-                this.insert(data);
-                localStorage.setItem("inlineSVGdata", data);
-                localStorage.setItem("inlineSVGsize", data.length.toString());
-            }
-        } else {
-            const response = await fetch(file);
-            if (!response.ok) throw new Error("Network response was not ok");
-            const data = await response.text();
-            this.insert(data);
+            return response.text();
+        } catch (error) {
+            this.#logError(error);
+            throw error;
         }
     }
-    insert(data) {
-        if (!document.getElementById("iconset")) {
-            if (this.body) this.body.insertAdjacentHTML("beforeend", data);
-            else document.addEventListener("DOMContentLoaded", ()=>{
-                this.body.insertAdjacentHTML("beforeend", data);
+    async #insert(data) {
+        let iconSetDiv = document.getElementById("iconset");
+        if (!iconSetDiv) {
+            iconSetDiv = document.createElement("div");
+            iconSetDiv.id = "iconset";
+            iconSetDiv.setAttribute("aria-hidden", "true");
+            iconSetDiv.style.cssText = "width: 0; height: 0; position: absolute;";
+            this.#container.appendChild(iconSetDiv);
+        }
+        iconSetDiv.innerHTML = data;
+    }
+    async init() {
+        const { file: file, version: version } = this.#options;
+        try {
+            let data = await this.#fetchData(file);
+            const db = await $cf838c15c8b009ba$var$Iconly.#dbInstance;
+            const tx = db.transaction("icons", "readwrite");
+            const store = tx.objectStore("icons");
+            const dbVersion = await new Promise((resolve, reject)=>{
+                const request = store.get(version);
+                request.onsuccess = ()=>resolve(request.result);
+                request.onerror = ()=>reject(request.error);
             });
+            if (!(dbVersion && dbVersion.data)) await new Promise((resolve, reject)=>{
+                const request = store.put({
+                    version: version,
+                    data: data
+                });
+                request.onsuccess = ()=>resolve();
+                request.onerror = ()=>reject(request.error);
+            });
+            else data = dbVersion.data;
+            await tx.complete;
+            await this.#insert(data);
+        } catch (error) {
+            this.#logError("Error initializing Iconly:", error);
         }
     }
+    #logError(...messages) {
+        if (this.#options.debug) console.error(...messages);
+    }
 }
@@ -40,0 +92,0 @@ var $cf838c15c8b009ba$export$2e2bcd8739ae039 = $cf838c15c8b009ba$var$Iconly;

package.json

 {
   "name": "iconly",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "SVG Sprite",
@@ -33,5 +33,3 @@ "author": "ux-ui.pro",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.29.1",
-    "parcel": "^2.11.0",
-    "postcss-html": "^1.6.0"
+    "parcel": "^2.11.0"
   },
@@ -43,4 +41,4 @@ "keywords": [
     "sprite",
-    "localStorage"
+    "IndexedDB"
   ]
 }

README.md

@@ -10,3 +10,3 @@ <div align="center">
 
-<sup>500B gzipped</sup>
+<p>The Iconly class is designed to manage icons in a web application</p>
 <h3><a href="https://codepen.io/ux-ui/pen/zYmyqWR">Demo</a></h3>
@@ -30,7 +30,9 @@
 ```javascript
-const icons = new Iconly({
-  file: '/sprite.svg',
+const iconly = new Iconly({
+  file: './sprite.svg',
+  version: '1.0',
+  debug: true,
 });
 
-icons.init();
+iconly.init().then(() => console.log('Iconly is initialized and icons are loaded.'));
 ```
@@ -43,3 +45,3 @@ <br>
 ```HTML
-<svg id="iconset" aria-hidden="true" style="width: 0; height: 0; position: absolute;">
+<svg>
 	<symbol id="icon-one" viewBox="0 0 100 100">
@@ -59,3 +61,3 @@ <path ... />
 <svg>
-	<use xlink:href="#icon-name"></use>
+	<use href="#icon-name"></use>
 </svg>
@@ -62,0 +64,0 @@ ```

src/index.js

 class Iconly {
+	static #dbInstance;
+
+	#options;
+
+	#container;
+
 	constructor(options) {
-		this.options = { file: './icons.svg', ...options };
-		this.isLocalStorage = typeof window.localStorage !== 'undefined';
-		this.body = document.body;
+		this.#options = {
+			file: './icons.svg',
+			version: '1.0',
+			debug: false,
+			container: document.body || document.documentElement,
+			...options
+		};
+		this.#container = typeof this.#options.container === 'string' ? document.querySelector(this.#options.container) : this.#options.container;
+
+		if (!Iconly.#dbInstance) {
+			Iconly.#dbInstance = this.#openDB('iconlyDB', 1);
+		}
 	}
 
-	async init() {
-		const { file } = this.options;
+	async #openDB(name, version) {
+		if (!('indexedDB' in window)) {
+			this.#logError('This browser doesn\'t support IndexedDB');
+			return;
+		}
 
-		if (this.isLocalStorage) {
-			const storedSize = localStorage.getItem('inlineSVGsize');
-			const storedData = localStorage.getItem('inlineSVGdata');
-			const response = await fetch(file);
+		let db;
 
-			if (!response.ok) throw new Error('Network response was not ok');
+		try {
+			db = await new Promise((resolve, reject) => {
+				const request = indexedDB.open(name, version);
 
-			const data = await response.text();
+				request.onerror = () => reject(`IndexedDB error: ${request.error}`);
+				request.onupgradeneeded = (event) => {
+					const db = event.target.result;
+					if (!db.objectStoreNames.contains('icons')) {
+						db.createObjectStore('icons', { keyPath: 'version' });
+					}
+				};
+				request.onsuccess = () => resolve(request.result);
+			});
+		} catch (error) {
+			this.#logError(error);
 
-			if (storedSize && storedSize === data.length.toString()) {
-				this.insert(storedData);
-			} else {
-				this.insert(data);
+			throw error;
+		}
+		return db;
+	}
 
-				localStorage.setItem('inlineSVGdata', data);
-				localStorage.setItem('inlineSVGsize', data.length.toString());
-			}
-		} else {
+	async #fetchData(file) {
+		try {
 			const response = await fetch(file);
@@ -33,21 +58,67 @@
 
-			const data = await response.text();
+			return response.text();
+		} catch (error) {
+			this.#logError(error);
 
-			this.insert(data);
+			throw error;
 		}
 	}
 
-	insert(data) {
-		if (!document.getElementById('iconset')) {
-			if (this.body) {
-				this.body.insertAdjacentHTML('beforeend', data);
+	async #insert(data) {
+		let iconSetDiv = document.getElementById('iconset');
+
+		if (!iconSetDiv) {
+			iconSetDiv = document.createElement('div');
+			iconSetDiv.id = 'iconset';
+			iconSetDiv.setAttribute('aria-hidden', 'true');
+			iconSetDiv.style.cssText = 'width: 0; height: 0; position: absolute;';
+
+			this.#container.appendChild(iconSetDiv);
+		}
+
+		iconSetDiv.innerHTML = data;
+	}
+
+	async init() {
+		const { file, version } = this.#options;
+
+		try {
+			let data = await this.#fetchData(file);
+
+			const db = await Iconly.#dbInstance;
+			const tx = db.transaction('icons', 'readwrite');
+			const store = tx.objectStore('icons');
+
+			const dbVersion = await new Promise((resolve, reject) => {
+				const request = store.get(version);
+
+				request.onsuccess = () => resolve(request.result);
+				request.onerror = () => reject(request.error);
+			});
+
+			if (!(dbVersion && dbVersion.data)) {
+				await new Promise((resolve, reject) => {
+					const request = store.put({ version, data });
+
+					request.onsuccess = () => resolve();
+					request.onerror = () => reject(request.error);
+				});
 			} else {
-				document.addEventListener('DOMContentLoaded', () => {
-					this.body.insertAdjacentHTML('beforeend', data);
-				});
+				data = dbVersion.data;
 			}
+
+			await tx.complete;
+			await this.#insert(data);
+		} catch (error) {
+			this.#logError('Error initializing Iconly:', error);
 		}
 	}
+
+	#logError(...messages) {
+		if (this.#options.debug) {
+			console.error(...messages);
+		}
+	}
 }
 
 export default Iconly;

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

31822

increased by96.71%

Dev dependency count

3

decreased by-40%

Number of package files

10

increased by11.11%

Lines of code

291

increased by120.45%

Number of lines in readme file

65

increased by3.17%

Number of medium supply chain risk alerts

4

decreased by-33.33%

No dependency changes