viconic-react-icons 1.1.7 → 1.3.0

package/dist/index.js

@@ -1978,6 +1978,30 @@ var import_react = __toESM(require("react"));
 })();
 
 // src/index.jsx
+(function _preloadKitCache() {
+  if (typeof window === "undefined" || typeof localStorage === "undefined") return;
+  try {
+    const W = window.__viconic = window.__viconic || {};
+    W.icons = W.icons || {};
+    const TTL = 3 * 24 * 60 * 60 * 1e3;
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (!key || !key.startsWith("viconic:")) continue;
+      try {
+        const c = JSON.parse(localStorage.getItem(key));
+        if (c && c.d && Date.now() - c.t < TTL) {
+          for (const n in c.d) {
+            if (!Object.prototype.hasOwnProperty.call(c.d, n)) continue;
+            const svg = c.d[n];
+            if (!W.icons[n]) W.icons[n] = svg;
+          }
+        }
+      } catch (e) {
+      }
+    }
+  } catch (e) {
+  }
+})();
 var _initializedKits = /* @__PURE__ */ new Set();
 function initViconic(options = {}) {
   const { kitId, cdnBase = "cdn.viconic.dev", version } = options;
@@ -2013,31 +2037,56 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       prevNameRef.current = name;
     }
     const isKitIcon = name && name.startsWith("@");
-    if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
-      window.CopyIcons.forceProcess(el);
-    }
-    const isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
-    if (isLoaded) return;
-    let retries = 0;
-    const maxRetries = 100;
-    let hasTriggeredReload = false;
-    const timer = setInterval(() => {
-      retries++;
-      if (el.classList.contains("vi-ok") || el.classList.contains("svg-loaded")) {
-        clearInterval(timer);
-        return;
+    const prefixMatch = isKitIcon ? name.match(/^@([^/]+)\/(.+)$/) : null;
+    function isInjected() {
+      return el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
+    }
+    if (!isInjected()) {
+      const W = window.__viconic;
+      if (W && W.icons) {
+        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
+        if (svg) {
+          el.innerHTML = svg;
+          el.classList.add("vi-ok", "svg-loaded");
+        }
+      }
+    }
+    if (!isInjected() && !isKitIcon) {
+      if (window.CopyIcons && window.CopyIcons.forceProcess) {
+        window.CopyIcons.forceProcess(el);
+      }
+    }
+    if (!isInjected() && el._u) {
+      el._u();
+    }
+    if (isInjected()) return;
+    const delays = [50, 100, 200, 400, 800, 500, 500, 500, 500, 500, 500, 500];
+    let attempt = 0;
+    let timerId = null;
+    let reloadTriggered = false;
+    function tryInject() {
+      if (isInjected()) return;
+      const W = window.__viconic;
+      if (W && W.icons) {
+        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
+        if (svg) {
+          el.innerHTML = svg;
+          el.classList.add("vi-ok", "svg-loaded");
+          return;
+        }
       }
       if (el._u) el._u();
-      if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
+      if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
         window.CopyIcons.forceProcess(el);
       }
-      if (isKitIcon && !hasTriggeredReload && retries === 10) {
-        hasTriggeredReload = true;
-        const prefixMatch = name.match(/^@([^\/]+)/);
-        if (prefixMatch && window.CopyIconsKit) {
-          const prefix = prefixMatch[1];
-          for (const kitId in window.CopyIconsKit) {
-            const kit = window.CopyIconsKit[kitId];
+      if (isKitIcon && !reloadTriggered && attempt >= 4 && prefixMatch) {
+        reloadTriggered = true;
+        const prefix = prefixMatch[1];
+        if (window.CopyIconsKit) {
+          for (const kId in window.CopyIconsKit) {
+            const kit = window.CopyIconsKit[kId];
             if (kit.config && kit.config.prefix === prefix && typeof kit.reload === "function") {
               kit.reload();
               break;
@@ -2045,9 +2094,16 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
           }
         }
       }
-      if (retries >= maxRetries) clearInterval(timer);
-    }, 100);
-    return () => clearInterval(timer);
+      if (isInjected()) return;
+      attempt++;
+      if (attempt < delays.length) {
+        timerId = setTimeout(tryInject, delays[attempt]);
+      }
+    }
+    timerId = setTimeout(tryInject, delays[0]);
+    return () => {
+      if (timerId) clearTimeout(timerId);
+    };
   }, [name, className, size, color, style]);
   const combinedStyle = {
     ...size ? { fontSize: size } : {},

package/dist/index.mjs

@@ -1943,6 +1943,30 @@ import React, { useEffect, useRef } from "react";
 })();
 
 // src/index.jsx
+(function _preloadKitCache() {
+  if (typeof window === "undefined" || typeof localStorage === "undefined") return;
+  try {
+    const W = window.__viconic = window.__viconic || {};
+    W.icons = W.icons || {};
+    const TTL = 3 * 24 * 60 * 60 * 1e3;
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (!key || !key.startsWith("viconic:")) continue;
+      try {
+        const c = JSON.parse(localStorage.getItem(key));
+        if (c && c.d && Date.now() - c.t < TTL) {
+          for (const n in c.d) {
+            if (!Object.prototype.hasOwnProperty.call(c.d, n)) continue;
+            const svg = c.d[n];
+            if (!W.icons[n]) W.icons[n] = svg;
+          }
+        }
+      } catch (e) {
+      }
+    }
+  } catch (e) {
+  }
+})();
 var _initializedKits = /* @__PURE__ */ new Set();
 function initViconic(options = {}) {
   const { kitId, cdnBase = "cdn.viconic.dev", version } = options;
@@ -1978,31 +2002,56 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       prevNameRef.current = name;
     }
     const isKitIcon = name && name.startsWith("@");
-    if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
-      window.CopyIcons.forceProcess(el);
-    }
-    const isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
-    if (isLoaded) return;
-    let retries = 0;
-    const maxRetries = 100;
-    let hasTriggeredReload = false;
-    const timer = setInterval(() => {
-      retries++;
-      if (el.classList.contains("vi-ok") || el.classList.contains("svg-loaded")) {
-        clearInterval(timer);
-        return;
+    const prefixMatch = isKitIcon ? name.match(/^@([^/]+)\/(.+)$/) : null;
+    function isInjected() {
+      return el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
+    }
+    if (!isInjected()) {
+      const W = window.__viconic;
+      if (W && W.icons) {
+        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
+        if (svg) {
+          el.innerHTML = svg;
+          el.classList.add("vi-ok", "svg-loaded");
+        }
+      }
+    }
+    if (!isInjected() && !isKitIcon) {
+      if (window.CopyIcons && window.CopyIcons.forceProcess) {
+        window.CopyIcons.forceProcess(el);
+      }
+    }
+    if (!isInjected() && el._u) {
+      el._u();
+    }
+    if (isInjected()) return;
+    const delays = [50, 100, 200, 400, 800, 500, 500, 500, 500, 500, 500, 500];
+    let attempt = 0;
+    let timerId = null;
+    let reloadTriggered = false;
+    function tryInject() {
+      if (isInjected()) return;
+      const W = window.__viconic;
+      if (W && W.icons) {
+        const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+        const svg = iconBaseName && W.icons[iconBaseName] || name && W.icons[name] || null;
+        if (svg) {
+          el.innerHTML = svg;
+          el.classList.add("vi-ok", "svg-loaded");
+          return;
+        }
       }
       if (el._u) el._u();
-      if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
+      if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
         window.CopyIcons.forceProcess(el);
       }
-      if (isKitIcon && !hasTriggeredReload && retries === 10) {
-        hasTriggeredReload = true;
-        const prefixMatch = name.match(/^@([^\/]+)/);
-        if (prefixMatch && window.CopyIconsKit) {
-          const prefix = prefixMatch[1];
-          for (const kitId in window.CopyIconsKit) {
-            const kit = window.CopyIconsKit[kitId];
+      if (isKitIcon && !reloadTriggered && attempt >= 4 && prefixMatch) {
+        reloadTriggered = true;
+        const prefix = prefixMatch[1];
+        if (window.CopyIconsKit) {
+          for (const kId in window.CopyIconsKit) {
+            const kit = window.CopyIconsKit[kId];
             if (kit.config && kit.config.prefix === prefix && typeof kit.reload === "function") {
               kit.reload();
               break;
@@ -2010,9 +2059,16 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
           }
         }
       }
-      if (retries >= maxRetries) clearInterval(timer);
-    }, 100);
-    return () => clearInterval(timer);
+      if (isInjected()) return;
+      attempt++;
+      if (attempt < delays.length) {
+        timerId = setTimeout(tryInject, delays[attempt]);
+      }
+    }
+    timerId = setTimeout(tryInject, delays[0]);
+    return () => {
+      if (timerId) clearTimeout(timerId);
+    };
   }, [name, className, size, color, style]);
   const combinedStyle = {
     ...size ? { fontSize: size } : {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "viconic-react-icons",
-  "version": "1.1.7",
+  "version": "1.3.0",
   "description": "Viconic Smart Icons loader for React — supports Kit and 200k+ system icons",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/copyicons-smart-loader.js

@@ -51,12 +51,12 @@
     // already successfully injected. We intercept define() to patch _u()
     // so it skips elements that Smart Loader has already handled.
     const _origCEDefine = customElements.define.bind(customElements);
-    customElements.define = function(name, cls, opts) {
+    customElements.define = function (name, cls, opts) {
         if (name === 'viconic-icon' && cls && cls.prototype) {
             // Patch _u() to skip elements already handled by Smart Loader
             if (cls.prototype._u) {
                 const origU = cls.prototype._u;
-                cls.prototype._u = function() {
+                cls.prototype._u = function () {
                     if (this.classList.contains('svg-loaded')) return;
                     return origU.call(this);
                 };
@@ -64,7 +64,7 @@
             // Patch connectedCallback to also guard svg-loaded
             if (cls.prototype.connectedCallback) {
                 const origCC = cls.prototype.connectedCallback;
-                cls.prototype.connectedCallback = function() {
+                cls.prototype.connectedCallback = function () {
                     if (this.classList.contains('svg-loaded')) return;
                     return origCC.call(this);
                 };
@@ -771,13 +771,13 @@
                 const fillStyle = (originalFill === 'none') ? 'none' : 'currentColor';
                 svg.style.cssText = `width:1em;height:1em;fill:${fillStyle};display:inline-block;vertical-align:middle;`;
             }
-            
+
             if (element.getAttribute('animate') === 'trace') {
                 const isStrokeBased = (originalFill === 'none');
                 svg.style.setProperty('--trace-end-stroke', isStrokeBased ? 'currentColor' : 'transparent');
                 svg.style.setProperty('--trace-end-stroke-width', isStrokeBased ? (svg.getAttribute('stroke-width') || '2px') : '0px');
                 svg.style.setProperty('--trace-stroke-width', isStrokeBased ? (svg.getAttribute('stroke-width') || '2px') : '1px');
-                
+
                 const paths = svg.querySelectorAll('path, ellipse, circle, rect, polygon, polyline');
                 for (let i = 0; i < paths.length; i++) {
                     const p = paths[i];

package/src/index.jsx

@@ -1,6 +1,36 @@
 import React, { useEffect, useRef } from 'react';
 import './copyicons-smart-loader.js';
 
+// ============================================
+// PRE-LOAD KIT CACHE SYNCHRONOUSLY AT MODULE LEVEL
+// Same architecture as kit loader: read localStorage before any render
+// so icons are available instantly when components mount.
+// ============================================
+(function _preloadKitCache() {
+    if (typeof window === 'undefined' || typeof localStorage === 'undefined') return;
+    try {
+        const W = (window.__viconic = window.__viconic || {});
+        W.icons = W.icons || {};
+        const TTL = 3 * 24 * 60 * 60 * 1000; // 3 days
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (!key || !key.startsWith('viconic:')) continue;
+            try {
+                const c = JSON.parse(localStorage.getItem(key));
+                if (c && c.d && Date.now() - c.t < TTL) {
+                    // Register all icon name variants into W.icons
+                    for (const n in c.d) {
+                        if (!Object.prototype.hasOwnProperty.call(c.d, n)) continue;
+                        const svg = c.d[n];
+                        // Store by plain name so _u() can find it regardless of prefix
+                        if (!W.icons[n]) W.icons[n] = svg;
+                    }
+                }
+            } catch (e) { /* corrupted entry, skip */ }
+        }
+    } catch (e) { }
+})();
+
 // ============================================
 // Track initialized kits to avoid duplicate scripts
 // ============================================
@@ -37,14 +67,14 @@ export function initViconic(options = {}) {
 
     const script = document.createElement('script');
     script.id = scriptId;
-    
+
     // Add cache busting for development or specific version updates
     let url = `https://${cdnBase}/kits/${kitId}/loader.js`;
     if (version) {
         const vQuery = version === 'dev' ? Date.now() : version;
         url += `?v=${vQuery}`;
     }
-    
+
     script.src = url;
     script.async = true;
     document.head.appendChild(script);
@@ -72,53 +102,87 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
         if (!el) return;
 
         // --- FIX DOM REUSE (Reconciliation) ---
-        // React reuses DOM nodes. If `name` changes, we must wipe the old state 
-        // because the DOM node might still have 'svg-loaded' or 'vi-ok'.
         if (prevNameRef.current !== name) {
             el.innerHTML = '';
             el.classList.remove('vi-ok', 'svg-loaded', 'vi-mono', 'ci-multicolor');
             prevNameRef.current = name;
         }
 
-        // Path 1: Smart loader (system icons with prefix:name format)
         const isKitIcon = name && name.startsWith('@');
-        if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
-            window.CopyIcons.forceProcess(el);
+        const prefixMatch = isKitIcon ? name.match(/^@([^/]+)\/(.+)$/) : null;
+
+        function isInjected() {
+            return el.classList.contains('vi-ok') || el.classList.contains('svg-loaded');
         }
 
-        // Path 2: Kit icons — kit loader.js registers icons async into
-        // window.__viconic.icons and the custom element _u() method handles injection.
-        // If kit hasn't loaded yet, retry periodically until icon appears.
-        const isLoaded = el.classList.contains('vi-ok') || el.classList.contains('svg-loaded');
-        if (isLoaded) return;
-
-        let retries = 0;
-        const maxRetries = 100; // 100 × 100ms = 10 seconds max
-        let hasTriggeredReload = false;
-        
-        const timer = setInterval(() => {
-            retries++;
-            if (el.classList.contains('vi-ok') || el.classList.contains('svg-loaded')) {
-                clearInterval(timer);
-                return;
+        // --- PATH 1: Synchronous inject from W.icons (pre-loaded from localStorage at module init) ---
+        if (!isInjected()) {
+            const W = window.__viconic;
+            if (W && W.icons) {
+                // Try all key variants: iconBaseName, @prefix/name, prefix:name, prefix/name
+                const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+                const svg = (iconBaseName && W.icons[iconBaseName])
+                    || (name && W.icons[name])
+                    || null;
+                if (svg) {
+                    el.innerHTML = svg;
+                    el.classList.add('vi-ok', 'svg-loaded');
+                }
             }
-            // Trigger custom element update
+        }
+
+        // --- PATH 2: Smart loader for system icons (prefix:name) ---
+        if (!isInjected() && !isKitIcon) {
+            if (window.CopyIcons && window.CopyIcons.forceProcess) {
+                window.CopyIcons.forceProcess(el);
+            }
+        }
+
+        // --- PATH 3: Custom element _u() call (kit loader registered element) ---
+        if (!isInjected() && el._u) {
+            el._u();
+        }
+
+        if (isInjected()) return;
+
+        // --- PATH 4: Fallback retry — kit loader script may still be loading async ---
+        // Use short exponential backoff: 50ms, 100ms, 200ms, 400ms, 800ms, then every 500ms
+        // Max 8 seconds total. Much cheaper than 100 × 100ms polling.
+        const delays = [50, 100, 200, 400, 800, 500, 500, 500, 500, 500, 500, 500];
+        let attempt = 0;
+        let timerId = null;
+        let reloadTriggered = false;
+
+        function tryInject() {
+            if (isInjected()) return;
+
+            // Try W.icons again (kit may have loaded by now)
+            const W = window.__viconic;
+            if (W && W.icons) {
+                const iconBaseName = prefixMatch ? prefixMatch[2] : null;
+                const svg = (iconBaseName && W.icons[iconBaseName])
+                    || (name && W.icons[name])
+                    || null;
+                if (svg) {
+                    el.innerHTML = svg;
+                    el.classList.add('vi-ok', 'svg-loaded');
+                    return;
+                }
+            }
+
+            // Try custom element _u()
             if (el._u) el._u();
-            // Also try smart loader if it's not a kit icon
-            if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
+            if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
                 window.CopyIcons.forceProcess(el);
             }
-            
-            // HMR / Missing Kit Icon Fallback: 
-            // If it's a kit icon and hasn't loaded after 1 second, it might be newly added 
-            // in the Viconic Dashboard. We trigger a background reload of the kit.
-            if (isKitIcon && !hasTriggeredReload && retries === 10) {
-                hasTriggeredReload = true;
-                const prefixMatch = name.match(/^@([^\/]+)/);
-                if (prefixMatch && window.CopyIconsKit) {
-                    const prefix = prefixMatch[1];
-                    for (const kitId in window.CopyIconsKit) {
-                        const kit = window.CopyIconsKit[kitId];
+
+            // Trigger kit reload once if still not loaded after ~1s
+            if (isKitIcon && !reloadTriggered && attempt >= 4 && prefixMatch) {
+                reloadTriggered = true;
+                const prefix = prefixMatch[1];
+                if (window.CopyIconsKit) {
+                    for (const kId in window.CopyIconsKit) {
+                        const kit = window.CopyIconsKit[kId];
                         if (kit.config && kit.config.prefix === prefix && typeof kit.reload === 'function') {
                             kit.reload();
                             break;
@@ -126,11 +190,17 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
                     }
                 }
             }
-            
-            if (retries >= maxRetries) clearInterval(timer);
-        }, 100);
 
-        return () => clearInterval(timer);
+            if (isInjected()) return;
+
+            attempt++;
+            if (attempt < delays.length) {
+                timerId = setTimeout(tryInject, delays[attempt]);
+            }
+        }
+
+        timerId = setTimeout(tryInject, delays[0]);
+        return () => { if (timerId) clearTimeout(timerId); };
     }, [name, className, size, color, style]);
 
     const combinedStyle = {