viconic-react-icons 1.5.0 → 1.5.2

package/dist/index.js

@@ -2003,20 +2003,39 @@ var import_react = __toESM(require("react"));
   }
 })();
 var _initializedKits = /* @__PURE__ */ new Set();
+var _kitRegistry = {};
+var _pendingMisses = {};
+if (typeof document !== "undefined") {
+  document.addEventListener("viconic:ready", (e) => {
+    const prefix = e && e.detail && e.detail.prefix;
+    if (prefix) _flushPendingMisses(prefix);
+  });
+}
 var _kitMissQueues = {};
 var _kitMissTimers = {};
-function _queueKitMiss(prefix, iconBaseName) {
-  if (typeof window === "undefined") return;
+function _resolveRegistry(prefix) {
+  if (_kitRegistry[prefix]) return _kitRegistry[prefix];
   const kits = window.CopyIconsKit || {};
-  let kitId = null;
   for (const kId in kits) {
     const kit = kits[kId];
     if (kit.config && kit.config.prefix === prefix) {
-      kitId = kId;
-      break;
+      const entry = { kitId: kId, api: kit.config.api || "https://api.viconic.dev" };
+      _kitRegistry[prefix] = entry;
+      return entry;
     }
   }
-  if (!kitId) return;
+  return null;
+}
+function _flushPendingMisses(prefix) {
+  const pending = _pendingMisses[prefix];
+  if (!pending || !pending.size) return;
+  const entry = _resolveRegistry(prefix);
+  if (!entry) return;
+  delete _pendingMisses[prefix];
+  pending.forEach((name) => _dispatchBatchFetch(prefix, name, entry));
+}
+function _dispatchBatchFetch(prefix, iconBaseName, entry) {
+  const { kitId, api } = entry;
   if (!_kitMissQueues[kitId]) _kitMissQueues[kitId] = /* @__PURE__ */ new Set();
   _kitMissQueues[kitId].add(iconBaseName);
   if (_kitMissTimers[kitId]) return;
@@ -2025,34 +2044,40 @@ function _queueKitMiss(prefix, iconBaseName) {
     const names = [..._kitMissQueues[kitId] || []];
     delete _kitMissQueues[kitId];
     if (!names.length) return;
-    const kit = (window.CopyIconsKit || {})[kitId];
-    if (!kit || !kit.config) return;
-    const api = kit.config.api || "https://api.viconic.dev";
     fetch(`${api}/api/v1/kits/${kitId}/icons/?icons=${names.join(",")}`).then((r) => r.ok ? r.json() : null).then((bj) => {
       if (!bj || !bj.icons) return;
       const W = window.__viconic = window.__viconic || {};
       W.icons = W.icons || {};
-      const pfx = kit.config.prefix;
       for (const n in bj.icons) {
         if (!Object.prototype.hasOwnProperty.call(bj.icons, n)) continue;
         const d = bj.icons[n];
         const svg = d.svg || "";
         if (!svg || !svg.includes("<")) continue;
-        W.icons[`@${pfx}/${n}`] = svg;
-        W.icons[`${pfx}:${n}`] = svg;
-        W.icons[`${pfx}/${n}`] = svg;
+        W.icons[`@${prefix}/${n}`] = svg;
+        W.icons[`${prefix}:${n}`] = svg;
+        W.icons[`${prefix}/${n}`] = svg;
         W.icons[n] = W.icons[n] || svg;
       }
       try {
-        document.dispatchEvent(new CustomEvent("viconic:ready", { detail: { prefix: pfx, kitId } }));
+        document.dispatchEvent(new CustomEvent("viconic:ready", { detail: { prefix, kitId } }));
       } catch (e) {
       }
     }).catch(() => {
     });
-  }, 0);
+  }, 150);
+}
+function _queueKitMiss(prefix, iconBaseName) {
+  if (typeof window === "undefined") return;
+  const entry = _resolveRegistry(prefix);
+  if (entry) {
+    _dispatchBatchFetch(prefix, iconBaseName, entry);
+  } else {
+    if (!_pendingMisses[prefix]) _pendingMisses[prefix] = /* @__PURE__ */ new Set();
+    _pendingMisses[prefix].add(iconBaseName);
+  }
 }
 function initViconic(options = {}) {
-  const { kitId, cdnBase = "cdn.viconic.dev", version } = options;
+  const { kitId, cdnBase = "cdn.viconic.dev", version, prefix: explicitPrefix, api = "https://api.viconic.dev" } = options;
   if (typeof window === "undefined") return;
   if (!kitId) {
     console.warn("[Viconic] initViconic requires a kitId");
@@ -2060,6 +2085,13 @@ function initViconic(options = {}) {
   }
   if (_initializedKits.has(kitId)) return;
   _initializedKits.add(kitId);
+  if (explicitPrefix) {
+    _kitRegistry[explicitPrefix] = { kitId, api };
+  }
+  if (typeof window !== "undefined") {
+    window.__viconicKitIds = window.__viconicKitIds || {};
+    window.__viconicKitIds[kitId] = { api };
+  }
   const scriptId = `viconic-kit-${kitId}`;
   if (document.getElementById(scriptId)) return;
   const script = document.createElement("script");
@@ -2069,6 +2101,15 @@ function initViconic(options = {}) {
     const vQuery = version === "dev" ? Date.now() : version;
     url += `?v=${vQuery}`;
   }
+  script.onload = () => {
+    const kits = window.CopyIconsKit || {};
+    const kit = kits[kitId];
+    if (kit && kit.config && kit.config.prefix) {
+      const pfx = kit.config.prefix;
+      _kitRegistry[pfx] = { kitId, api: kit.config.api || api };
+      _flushPendingMisses(pfx);
+    }
+  };
   script.src = url;
   script.async = true;
   document.head.appendChild(script);
@@ -2127,18 +2168,13 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       }
     }
     document.addEventListener("viconic:ready", tryInjectFromEvent);
-    const fallbackTimer = setTimeout(() => {
-      if (isInjected()) return;
-      tryInjectFromEvent();
-      if (!isInjected() && isKitIcon && prefixMatch) {
-        const prefix = prefixMatch[1];
-        const iconBaseName = prefixMatch[2];
-        _queueKitMiss(prefix, iconBaseName);
-      }
-    }, 50);
+    if (!isInjected() && isKitIcon && prefixMatch) {
+      const prefix = prefixMatch[1];
+      const iconBaseName = prefixMatch[2];
+      _queueKitMiss(prefix, iconBaseName);
+    }
     return () => {
       document.removeEventListener("viconic:ready", tryInjectFromEvent);
-      clearTimeout(fallbackTimer);
     };
   }, [name, className, size, color, style]);
   const combinedStyle = {

package/dist/index.mjs

@@ -1968,20 +1968,39 @@ import React, { useEffect, useRef } from "react";
   }
 })();
 var _initializedKits = /* @__PURE__ */ new Set();
+var _kitRegistry = {};
+var _pendingMisses = {};
+if (typeof document !== "undefined") {
+  document.addEventListener("viconic:ready", (e) => {
+    const prefix = e && e.detail && e.detail.prefix;
+    if (prefix) _flushPendingMisses(prefix);
+  });
+}
 var _kitMissQueues = {};
 var _kitMissTimers = {};
-function _queueKitMiss(prefix, iconBaseName) {
-  if (typeof window === "undefined") return;
+function _resolveRegistry(prefix) {
+  if (_kitRegistry[prefix]) return _kitRegistry[prefix];
   const kits = window.CopyIconsKit || {};
-  let kitId = null;
   for (const kId in kits) {
     const kit = kits[kId];
     if (kit.config && kit.config.prefix === prefix) {
-      kitId = kId;
-      break;
+      const entry = { kitId: kId, api: kit.config.api || "https://api.viconic.dev" };
+      _kitRegistry[prefix] = entry;
+      return entry;
     }
   }
-  if (!kitId) return;
+  return null;
+}
+function _flushPendingMisses(prefix) {
+  const pending = _pendingMisses[prefix];
+  if (!pending || !pending.size) return;
+  const entry = _resolveRegistry(prefix);
+  if (!entry) return;
+  delete _pendingMisses[prefix];
+  pending.forEach((name) => _dispatchBatchFetch(prefix, name, entry));
+}
+function _dispatchBatchFetch(prefix, iconBaseName, entry) {
+  const { kitId, api } = entry;
   if (!_kitMissQueues[kitId]) _kitMissQueues[kitId] = /* @__PURE__ */ new Set();
   _kitMissQueues[kitId].add(iconBaseName);
   if (_kitMissTimers[kitId]) return;
@@ -1990,34 +2009,40 @@ function _queueKitMiss(prefix, iconBaseName) {
     const names = [..._kitMissQueues[kitId] || []];
     delete _kitMissQueues[kitId];
     if (!names.length) return;
-    const kit = (window.CopyIconsKit || {})[kitId];
-    if (!kit || !kit.config) return;
-    const api = kit.config.api || "https://api.viconic.dev";
     fetch(`${api}/api/v1/kits/${kitId}/icons/?icons=${names.join(",")}`).then((r) => r.ok ? r.json() : null).then((bj) => {
       if (!bj || !bj.icons) return;
       const W = window.__viconic = window.__viconic || {};
       W.icons = W.icons || {};
-      const pfx = kit.config.prefix;
       for (const n in bj.icons) {
         if (!Object.prototype.hasOwnProperty.call(bj.icons, n)) continue;
         const d = bj.icons[n];
         const svg = d.svg || "";
         if (!svg || !svg.includes("<")) continue;
-        W.icons[`@${pfx}/${n}`] = svg;
-        W.icons[`${pfx}:${n}`] = svg;
-        W.icons[`${pfx}/${n}`] = svg;
+        W.icons[`@${prefix}/${n}`] = svg;
+        W.icons[`${prefix}:${n}`] = svg;
+        W.icons[`${prefix}/${n}`] = svg;
         W.icons[n] = W.icons[n] || svg;
       }
       try {
-        document.dispatchEvent(new CustomEvent("viconic:ready", { detail: { prefix: pfx, kitId } }));
+        document.dispatchEvent(new CustomEvent("viconic:ready", { detail: { prefix, kitId } }));
       } catch (e) {
       }
     }).catch(() => {
     });
-  }, 0);
+  }, 150);
+}
+function _queueKitMiss(prefix, iconBaseName) {
+  if (typeof window === "undefined") return;
+  const entry = _resolveRegistry(prefix);
+  if (entry) {
+    _dispatchBatchFetch(prefix, iconBaseName, entry);
+  } else {
+    if (!_pendingMisses[prefix]) _pendingMisses[prefix] = /* @__PURE__ */ new Set();
+    _pendingMisses[prefix].add(iconBaseName);
+  }
 }
 function initViconic(options = {}) {
-  const { kitId, cdnBase = "cdn.viconic.dev", version } = options;
+  const { kitId, cdnBase = "cdn.viconic.dev", version, prefix: explicitPrefix, api = "https://api.viconic.dev" } = options;
   if (typeof window === "undefined") return;
   if (!kitId) {
     console.warn("[Viconic] initViconic requires a kitId");
@@ -2025,6 +2050,13 @@ function initViconic(options = {}) {
   }
   if (_initializedKits.has(kitId)) return;
   _initializedKits.add(kitId);
+  if (explicitPrefix) {
+    _kitRegistry[explicitPrefix] = { kitId, api };
+  }
+  if (typeof window !== "undefined") {
+    window.__viconicKitIds = window.__viconicKitIds || {};
+    window.__viconicKitIds[kitId] = { api };
+  }
   const scriptId = `viconic-kit-${kitId}`;
   if (document.getElementById(scriptId)) return;
   const script = document.createElement("script");
@@ -2034,6 +2066,15 @@ function initViconic(options = {}) {
     const vQuery = version === "dev" ? Date.now() : version;
     url += `?v=${vQuery}`;
   }
+  script.onload = () => {
+    const kits = window.CopyIconsKit || {};
+    const kit = kits[kitId];
+    if (kit && kit.config && kit.config.prefix) {
+      const pfx = kit.config.prefix;
+      _kitRegistry[pfx] = { kitId, api: kit.config.api || api };
+      _flushPendingMisses(pfx);
+    }
+  };
   script.src = url;
   script.async = true;
   document.head.appendChild(script);
@@ -2092,18 +2133,13 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       }
     }
     document.addEventListener("viconic:ready", tryInjectFromEvent);
-    const fallbackTimer = setTimeout(() => {
-      if (isInjected()) return;
-      tryInjectFromEvent();
-      if (!isInjected() && isKitIcon && prefixMatch) {
-        const prefix = prefixMatch[1];
-        const iconBaseName = prefixMatch[2];
-        _queueKitMiss(prefix, iconBaseName);
-      }
-    }, 50);
+    if (!isInjected() && isKitIcon && prefixMatch) {
+      const prefix = prefixMatch[1];
+      const iconBaseName = prefixMatch[2];
+      _queueKitMiss(prefix, iconBaseName);
+    }
     return () => {
       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.5.0",
+  "version": "1.5.2",
   "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

@@ -36,58 +36,100 @@ import './copyicons-smart-loader.js';
 // ============================================
 const _initializedKits = new Set();
 
+// ============================================
+// Kit registry: prefix -> { kitId, api }
+// Populated by initViconic() via script.onload
+// and by viconic:ready event handler.
+// ============================================
+const _kitRegistry = {}; // prefix -> { kitId, api }
+
+// Pending misses buffered before registry is ready
+// prefix -> Set of icon names
+const _pendingMisses = {};
+
+// Global viconic:ready listener — fires when kit loader calls register()
+// This is the main trigger for flushing pending misses when loader.js
+// completes its first batch fetch (which happens after script.onload).
+if (typeof document !== 'undefined') {
+    document.addEventListener('viconic:ready', (e) => {
+        const prefix = e && e.detail && e.detail.prefix;
+        if (prefix) _flushPendingMisses(prefix);
+    });
+}
+
 // ============================================
 // DEBOUNCED BATCH FETCH for missing kit icons
-// All ViconicIcon mounts queue their miss here;
-// a single setTimeout(0) fires ONE batch request
-// per kit instead of N individual kit.reload() calls.
 // ============================================
 const _kitMissQueues = {}; // kitId -> Set of icon names
 const _kitMissTimers = {}; // kitId -> timer handle
 
-function _queueKitMiss(prefix, iconBaseName) {
-    if (typeof window === 'undefined') return;
-    // Find kit by prefix
+function _resolveRegistry(prefix) {
+    if (_kitRegistry[prefix]) return _kitRegistry[prefix];
+    // Fallback: check CopyIconsKit
     const kits = window.CopyIconsKit || {};
-    let kitId = null;
     for (const kId in kits) {
         const kit = kits[kId];
-        if (kit.config && kit.config.prefix === prefix) { kitId = kId; break; }
+        if (kit.config && kit.config.prefix === prefix) {
+            const entry = { kitId: kId, api: kit.config.api || 'https://api.viconic.dev' };
+            _kitRegistry[prefix] = entry;
+            return entry;
+        }
     }
-    if (!kitId) return;
+    return null;
+}
+
+function _flushPendingMisses(prefix) {
+    const pending = _pendingMisses[prefix];
+    if (!pending || !pending.size) return;
+    const entry = _resolveRegistry(prefix);
+    if (!entry) return;
+    delete _pendingMisses[prefix];
+    pending.forEach(name => _dispatchBatchFetch(prefix, name, entry));
+}
+
+function _dispatchBatchFetch(prefix, iconBaseName, entry) {
+    const { kitId, api } = entry;
     if (!_kitMissQueues[kitId]) _kitMissQueues[kitId] = new Set();
     _kitMissQueues[kitId].add(iconBaseName);
-    if (_kitMissTimers[kitId]) return; // already scheduled
+    if (_kitMissTimers[kitId]) return; // already scheduled, will pick up new additions
+    // 150ms debounce: long enough to collect all icons across a full React render cycle
     _kitMissTimers[kitId] = setTimeout(() => {
         delete _kitMissTimers[kitId];
         const names = [...(_kitMissQueues[kitId] || [])];
         delete _kitMissQueues[kitId];
         if (!names.length) return;
-        const kit = (window.CopyIconsKit || {})[kitId];
-        if (!kit || !kit.config) return;
-        const api = kit.config.api || 'https://api.viconic.dev';
         fetch(`${api}/api/v1/kits/${kitId}/icons/?icons=${names.join(',')}`)
             .then(r => r.ok ? r.json() : null)
             .then(bj => {
                 if (!bj || !bj.icons) return;
                 const W = (window.__viconic = window.__viconic || {});
                 W.icons = W.icons || {};
-                const pfx = kit.config.prefix;
                 for (const n in bj.icons) {
                     if (!Object.prototype.hasOwnProperty.call(bj.icons, n)) continue;
                     const d = bj.icons[n];
                     const svg = d.svg || '';
                     if (!svg || !svg.includes('<')) continue;
-                    W.icons[`@${pfx}/${n}`] = svg;
-                    W.icons[`${pfx}:${n}`] = svg;
-                    W.icons[`${pfx}/${n}`] = svg;
+                    W.icons[`@${prefix}/${n}`] = svg;
+                    W.icons[`${prefix}:${n}`] = svg;
+                    W.icons[`${prefix}/${n}`] = svg;
                     W.icons[n] = W.icons[n] || svg;
                 }
-                // Fire viconic:ready so all waiting ViconicIcon components inject
-                try { document.dispatchEvent(new CustomEvent('viconic:ready', { detail: { prefix: pfx, kitId } })); } catch(e) {}
+                try { document.dispatchEvent(new CustomEvent('viconic:ready', { detail: { prefix, kitId } })); } catch(e) {}
             })
             .catch(() => {});
-    }, 0); // setTimeout(0): collect ALL icon misses from current render cycle
+    }, 150);
+}
+
+function _queueKitMiss(prefix, iconBaseName) {
+    if (typeof window === 'undefined') return;
+    const entry = _resolveRegistry(prefix);
+    if (entry) {
+        _dispatchBatchFetch(prefix, iconBaseName, entry);
+    } else {
+        // Registry not ready yet — buffer until loader fires
+        if (!_pendingMisses[prefix]) _pendingMisses[prefix] = new Set();
+        _pendingMisses[prefix].add(iconBaseName);
+    }
 }
 
 /**
@@ -107,7 +149,7 @@ function _queueKitMiss(prefix, iconBaseName) {
  * initViconic({ kitId: 'another-kit-uuid', version: '1.0' });
  */
 export function initViconic(options = {}) {
-    const { kitId, cdnBase = 'cdn.viconic.dev', version } = options;
+    const { kitId, cdnBase = 'cdn.viconic.dev', version, prefix: explicitPrefix, api = 'https://api.viconic.dev' } = options;
     if (typeof window === 'undefined') return; // SSR guard
     if (!kitId) {
         console.warn('[Viconic] initViconic requires a kitId');
@@ -116,6 +158,18 @@ export function initViconic(options = {}) {
     if (_initializedKits.has(kitId)) return; // Already initialized
     _initializedKits.add(kitId);
 
+    // Register synchronously so _queueKitMiss can find kitId immediately,
+    // even before the async loader.js script has loaded and populated CopyIconsKit.
+    // If prefix is not known yet, we'll also register once CopyIconsKit fires.
+    if (explicitPrefix) {
+        _kitRegistry[explicitPrefix] = { kitId, api };
+    }
+    // Also register by kitId so we can backfill prefix once loader fires
+    if (typeof window !== 'undefined') {
+        window.__viconicKitIds = window.__viconicKitIds || {};
+        window.__viconicKitIds[kitId] = { api };
+    }
+
     const scriptId = `viconic-kit-${kitId}`;
     if (document.getElementById(scriptId)) return; // Script already in DOM
 
@@ -129,6 +183,18 @@ export function initViconic(options = {}) {
         url += `?v=${vQuery}`;
     }
 
+    // Once loader.js runs and registers CopyIconsKit, backfill _kitRegistry and flush pending misses
+    script.onload = () => {
+        const kits = window.CopyIconsKit || {};
+        const kit = kits[kitId];
+        if (kit && kit.config && kit.config.prefix) {
+            const pfx = kit.config.prefix;
+            _kitRegistry[pfx] = { kitId, api: kit.config.api || api };
+            // Flush any misses buffered before the loader was ready
+            _flushPendingMisses(pfx);
+        }
+    };
+
     script.src = url;
     script.async = true;
     document.head.appendChild(script);
@@ -223,21 +289,17 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
 
         document.addEventListener('viconic:ready', tryInjectFromEvent);
 
-        // --- PATH 5: Short-deadline fallback (50ms) — queue a batch fetch for all missing kit icons ---
-        const fallbackTimer = setTimeout(() => {
-            if (isInjected()) return;
-            tryInjectFromEvent();
-            if (!isInjected() && isKitIcon && prefixMatch) {
-                const prefix = prefixMatch[1];
-                const iconBaseName = prefixMatch[2];
-                // Use batch queue instead of kit.reload() to avoid N separate API calls
-                _queueKitMiss(prefix, iconBaseName);
-            }
-        }, 50);
+        // --- PATH 5: Immediate queue for missing kit icons ---
+        // Call _queueKitMiss immediately (no per-component delay) so all icons from
+        // the same render cycle are collected into the same debounced batch request.
+        if (!isInjected() && isKitIcon && prefixMatch) {
+            const prefix = prefixMatch[1];
+            const iconBaseName = prefixMatch[2];
+            _queueKitMiss(prefix, iconBaseName);
+        }
 
         return () => {
             document.removeEventListener('viconic:ready', tryInjectFromEvent);
-            clearTimeout(fallbackTimer);
         };
     }, [name, className, size, color, style]);