viconic-react-icons 1.3.0 → 1.4.1

package/dist/index.js

@@ -2061,11 +2061,7 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       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() {
+    function tryInjectFromEvent() {
       if (isInjected()) return;
       const W = window.__viconic;
       if (W && W.icons) {
@@ -2081,8 +2077,12 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
         window.CopyIcons.forceProcess(el);
       }
-      if (isKitIcon && !reloadTriggered && attempt >= 4 && prefixMatch) {
-        reloadTriggered = true;
+    }
+    document.addEventListener("viconic:ready", tryInjectFromEvent);
+    const fallbackTimer = setTimeout(() => {
+      if (isInjected()) return;
+      tryInjectFromEvent();
+      if (!isInjected() && isKitIcon && prefixMatch) {
         const prefix = prefixMatch[1];
         if (window.CopyIconsKit) {
           for (const kId in window.CopyIconsKit) {
@@ -2094,15 +2094,10 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
           }
         }
       }
-      if (isInjected()) return;
-      attempt++;
-      if (attempt < delays.length) {
-        timerId = setTimeout(tryInject, delays[attempt]);
-      }
-    }
-    timerId = setTimeout(tryInject, delays[0]);
+    }, 500);
     return () => {
-      if (timerId) clearTimeout(timerId);
+      document.removeEventListener("viconic:ready", tryInjectFromEvent);
+      clearTimeout(fallbackTimer);
     };
   }, [name, className, size, color, style]);
   const combinedStyle = {

package/dist/index.mjs

@@ -2026,11 +2026,7 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       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() {
+    function tryInjectFromEvent() {
       if (isInjected()) return;
       const W = window.__viconic;
       if (W && W.icons) {
@@ -2046,8 +2042,12 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
         window.CopyIcons.forceProcess(el);
       }
-      if (isKitIcon && !reloadTriggered && attempt >= 4 && prefixMatch) {
-        reloadTriggered = true;
+    }
+    document.addEventListener("viconic:ready", tryInjectFromEvent);
+    const fallbackTimer = setTimeout(() => {
+      if (isInjected()) return;
+      tryInjectFromEvent();
+      if (!isInjected() && isKitIcon && prefixMatch) {
         const prefix = prefixMatch[1];
         if (window.CopyIconsKit) {
           for (const kId in window.CopyIconsKit) {
@@ -2059,15 +2059,10 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
           }
         }
       }
-      if (isInjected()) return;
-      attempt++;
-      if (attempt < delays.length) {
-        timerId = setTimeout(tryInject, delays[attempt]);
-      }
-    }
-    timerId = setTimeout(tryInject, delays[0]);
+    }, 500);
     return () => {
-      if (timerId) clearTimeout(timerId);
+      document.removeEventListener("viconic:ready", tryInjectFromEvent);
+      clearTimeout(fallbackTimer);
     };
   }, [name, className, size, color, style]);
   const combinedStyle = {

package/package.json

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

package/src/index.jsx

@@ -1,223 +1,214 @@
-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
-// ============================================
-const _initializedKits = new Set();
-
-/**
- * Initialize a Viconic Kit in your React app.
- * Injects the kit's loader.js script into <head>.
- * Supports multiple kits — call once per kit.
- *
- * @param {Object} options
- * @param {string} options.kitId - UUID of the Kit (required)
- * @param {string} [options.cdnBase] - Custom CDN domain (default: cdn.viconic.dev)
- * 
- * @example
- * import { initViconic } from 'viconic-react-icons';
- * 
- * initViconic({ kitId: '387a6161-cb39-411f-8f13-29a5813e4efd' });
- * // Multiple kits:
- * initViconic({ kitId: 'another-kit-uuid', version: '1.0' });
- */
-export function initViconic(options = {}) {
-    const { kitId, cdnBase = 'cdn.viconic.dev', version } = options;
-    if (typeof window === 'undefined') return; // SSR guard
-    if (!kitId) {
-        console.warn('[Viconic] initViconic requires a kitId');
-        return;
-    }
-    if (_initializedKits.has(kitId)) return; // Already initialized
-    _initializedKits.add(kitId);
-
-    const scriptId = `viconic-kit-${kitId}`;
-    if (document.getElementById(scriptId)) return; // Script already in DOM
-
-    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);
-}
-
-/**
- * ViconicIcon — React component for rendering Viconic icons.
- * 
- * Works with both:
- * - System icons: <ViconicIcon name="lucide:home" />
- * - Kit icons: <ViconicIcon name="@myprefix/home" /> (after initViconic)
- * 
- * @param {string} name - Icon identifier (e.g., "lucide:home", "@prefix/name")
- * @param {string} [className] - CSS class names
- * @param {object} [style] - Inline styles
- * @param {string|number} [size] - Icon size (CSS value)
- * @param {string} [color] - Icon color (CSS value)
- */
-export const ViconicIcon = ({ name, className, style, size, color, ...props }) => {
-    const iconRef = useRef(null);
-    const prevNameRef = useRef(name);
-
-    useEffect(() => {
-        const el = iconRef.current;
-        if (!el) return;
-
-        // --- FIX DOM REUSE (Reconciliation) ---
-        if (prevNameRef.current !== name) {
-            el.innerHTML = '';
-            el.classList.remove('vi-ok', 'svg-loaded', 'vi-mono', 'ci-multicolor');
-            prevNameRef.current = name;
-        }
-
-        const isKitIcon = name && name.startsWith('@');
-        const prefixMatch = isKitIcon ? name.match(/^@([^/]+)\/(.+)$/) : null;
-
-        function isInjected() {
-            return el.classList.contains('vi-ok') || el.classList.contains('svg-loaded');
-        }
-
-        // --- 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');
-                }
-            }
-        }
-
-        // --- 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();
-            if (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
-                window.CopyIcons.forceProcess(el);
-            }
-
-            // 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;
-                        }
-                    }
-                }
-            }
-
-            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 } : {}),
-        ...(color ? { color: color } : {}),
-        ...style
-    };
-
-    return (
-        <viconic-icon
-            ref={iconRef}
-            icon={name}
-            class={className}
-            style={combinedStyle}
-            {...props}
-        ></viconic-icon>
-    );
-};
-
-export default ViconicIcon;
+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
+// ============================================
+const _initializedKits = new Set();
+
+/**
+ * Initialize a Viconic Kit in your React app.
+ * Injects the kit's loader.js script into <head>.
+ * Supports multiple kits — call once per kit.
+ *
+ * @param {Object} options
+ * @param {string} options.kitId - UUID of the Kit (required)
+ * @param {string} [options.cdnBase] - Custom CDN domain (default: cdn.viconic.dev)
+ * 
+ * @example
+ * import { initViconic } from 'viconic-react-icons';
+ * 
+ * initViconic({ kitId: '387a6161-cb39-411f-8f13-29a5813e4efd' });
+ * // Multiple kits:
+ * initViconic({ kitId: 'another-kit-uuid', version: '1.0' });
+ */
+export function initViconic(options = {}) {
+    const { kitId, cdnBase = 'cdn.viconic.dev', version } = options;
+    if (typeof window === 'undefined') return; // SSR guard
+    if (!kitId) {
+        console.warn('[Viconic] initViconic requires a kitId');
+        return;
+    }
+    if (_initializedKits.has(kitId)) return; // Already initialized
+    _initializedKits.add(kitId);
+
+    const scriptId = `viconic-kit-${kitId}`;
+    if (document.getElementById(scriptId)) return; // Script already in DOM
+
+    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);
+}
+
+/**
+ * ViconicIcon — React component for rendering Viconic icons.
+ * 
+ * Works with both:
+ * - System icons: <ViconicIcon name="lucide:home" />
+ * - Kit icons: <ViconicIcon name="@myprefix/home" /> (after initViconic)
+ * 
+ * @param {string} name - Icon identifier (e.g., "lucide:home", "@prefix/name")
+ * @param {string} [className] - CSS class names
+ * @param {object} [style] - Inline styles
+ * @param {string|number} [size] - Icon size (CSS value)
+ * @param {string} [color] - Icon color (CSS value)
+ */
+export const ViconicIcon = ({ name, className, style, size, color, ...props }) => {
+    const iconRef = useRef(null);
+    const prevNameRef = useRef(name);
+
+    useEffect(() => {
+        const el = iconRef.current;
+        if (!el) return;
+
+        // --- FIX DOM REUSE (Reconciliation) ---
+        if (prevNameRef.current !== name) {
+            el.innerHTML = '';
+            el.classList.remove('vi-ok', 'svg-loaded', 'vi-mono', 'ci-multicolor');
+            prevNameRef.current = name;
+        }
+
+        const isKitIcon = name && name.startsWith('@');
+        const prefixMatch = isKitIcon ? name.match(/^@([^/]+)\/(.+)$/) : null;
+
+        function isInjected() {
+            return el.classList.contains('vi-ok') || el.classList.contains('svg-loaded');
+        }
+
+        // --- 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');
+                }
+            }
+        }
+
+        // --- 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: Event-driven — listen for viconic:ready fired by kit loader after register() ---
+        // Much faster than polling: icons appear the instant the loader finishes fetching them.
+        function tryInjectFromEvent() {
+            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 (!isKitIcon && window.CopyIcons && window.CopyIcons.forceProcess) {
+                window.CopyIcons.forceProcess(el);
+            }
+        }
+
+        document.addEventListener('viconic:ready', tryInjectFromEvent);
+
+        // --- PATH 5: Short-deadline fallback (500ms) in case script already fired before we listened ---
+        const fallbackTimer = setTimeout(() => {
+            if (isInjected()) return;
+            tryInjectFromEvent();
+            // If still not loaded after 500ms, trigger kit reload once
+            if (!isInjected() && isKitIcon && prefixMatch) {
+                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;
+                        }
+                    }
+                }
+            }
+        }, 500);
+
+        return () => {
+            document.removeEventListener('viconic:ready', tryInjectFromEvent);
+            clearTimeout(fallbackTimer);
+        };
+    }, [name, className, size, color, style]);
+
+    const combinedStyle = {
+        ...(size ? { fontSize: size } : {}),
+        ...(color ? { color: color } : {}),
+        ...style
+    };
+
+    return (
+        <viconic-icon
+            ref={iconRef}
+            icon={name}
+            class={className}
+            style={combinedStyle}
+            {...props}
+        ></viconic-icon>
+    );
+};
+
+export default ViconicIcon;