npm - viconic-react-icons - Versions diffs - 1.4.2 → 1.5.1 - Mend

viconic-react-icons 1.4.2 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -112,15 +112,22 @@ Inject a kit's smart loader script into `<head>`. Call once per kit at app start
 | :--- | :--- | :--- | :--- |
 | `kitId` | `string` | — | **Required.** UUID of your Viconic Kit. |
 | `cdnBase` | `string` | `"cdn.viconic.dev"` | Custom CDN domain. |
-| `version` | `string` | `undefined` | Bypass cache version (e.g. pass `"dev"` or a timestamp). |
+| `version` | `string` | `undefined` | Cache-bust version. **Update this every time you add/remove icons in your kit.** |
 ```jsx
 // In your main.jsx or App.jsx
 import { initViconic } from "viconic-react-icons";
-initViconic({ kitId: "387a6161-cb39-411f-8f13-29a5813e4efd" });
+// Copy the exact snippet from the "Usage & Setup" tab in your Kit Editor
+// It already includes the correct version timestamp for your kit.
+initViconic({ kitId: "387a6161-cb39-411f-8f13-29a5813e4efd", version: "1774867419" });
 ```
+> **⚠️ Important — Cache Busting:**
+> Every time you update your kit on [viconic.dev](https://viconic.dev) (add/remove icons, click **"Update Kit"**), you must update the `version` value in `initViconic()` to the new timestamp shown in the **Usage & Setup** tab.
+> This ensures your users always load the latest kit instead of a stale cached version.
+> The **Usage & Setup** tab always shows the ready-to-copy snippet with the current version pre-filled.
 ---
 ## 🧠 Architecture
@@ -135,4 +142,4 @@ Because we fetch SVGs in parallel and cache them heavily via LocalStorage across
 ## 📄 License
-This project is licensed under the MIT License. Icon licenses depend on the specific icon families you use.
+This project is licensed under the MIT License. Icon licenses depend on the specific icon families you use.

package/dist/index.js CHANGED Viewed

@@ -2003,8 +2003,81 @@ 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 _resolveRegistry(prefix) {
+  if (_kitRegistry[prefix]) return _kitRegistry[prefix];
+  const kits = window.CopyIconsKit || {};
+  for (const kId in kits) {
+    const kit = kits[kId];
+    if (kit.config && kit.config.prefix === prefix) {
+      const entry = { kitId: kId, api: kit.config.api || "https://api.viconic.dev" };
+      _kitRegistry[prefix] = entry;
+      return entry;
+    }
+  }
+  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;
+  _kitMissTimers[kitId] = setTimeout(() => {
+    delete _kitMissTimers[kitId];
+    const names = [..._kitMissQueues[kitId] || []];
+    delete _kitMissQueues[kitId];
+    if (!names.length) return;
+    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 || {};
+      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[`@${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, kitId } }));
+      } catch (e) {
+      }
+    }).catch(() => {
+    });
+  }, 0);
+}
+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");
@@ -2012,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");
@@ -2021,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);
@@ -2084,17 +2173,10 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       tryInjectFromEvent();
       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;
-            }
-          }
-        }
+        const iconBaseName = prefixMatch[2];
+        _queueKitMiss(prefix, iconBaseName);
       }
-    }, 500);
+    }, 50);
     return () => {
       document.removeEventListener("viconic:ready", tryInjectFromEvent);
       clearTimeout(fallbackTimer);

package/dist/index.mjs CHANGED Viewed

@@ -1968,8 +1968,81 @@ 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 _resolveRegistry(prefix) {
+  if (_kitRegistry[prefix]) return _kitRegistry[prefix];
+  const kits = window.CopyIconsKit || {};
+  for (const kId in kits) {
+    const kit = kits[kId];
+    if (kit.config && kit.config.prefix === prefix) {
+      const entry = { kitId: kId, api: kit.config.api || "https://api.viconic.dev" };
+      _kitRegistry[prefix] = entry;
+      return entry;
+    }
+  }
+  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;
+  _kitMissTimers[kitId] = setTimeout(() => {
+    delete _kitMissTimers[kitId];
+    const names = [..._kitMissQueues[kitId] || []];
+    delete _kitMissQueues[kitId];
+    if (!names.length) return;
+    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 || {};
+      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[`@${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, kitId } }));
+      } catch (e) {
+      }
+    }).catch(() => {
+    });
+  }, 0);
+}
+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");
@@ -1977,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");
@@ -1986,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);
@@ -2049,17 +2138,10 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
       tryInjectFromEvent();
       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;
-            }
-          }
-        }
+        const iconBaseName = prefixMatch[2];
+        _queueKitMiss(prefix, iconBaseName);
       }
-    }, 500);
+    }, 50);
     return () => {
       document.removeEventListener("viconic:ready", tryInjectFromEvent);
       clearTimeout(fallbackTimer);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "viconic-react-icons",
-  "version": "1.4.2",
+  "version": "1.5.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 CHANGED Viewed

@@ -36,6 +36,101 @@ 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
+// ============================================
+const _kitMissQueues = {}; // kitId -> Set of icon names
+const _kitMissTimers = {}; // kitId -> timer handle
+function _resolveRegistry(prefix) {
+    if (_kitRegistry[prefix]) return _kitRegistry[prefix];
+    // Fallback: check CopyIconsKit
+    const kits = window.CopyIconsKit || {};
+    for (const kId in kits) {
+        const kit = kits[kId];
+        if (kit.config && kit.config.prefix === prefix) {
+            const entry = { kitId: kId, api: kit.config.api || 'https://api.viconic.dev' };
+            _kitRegistry[prefix] = entry;
+            return entry;
+        }
+    }
+    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;
+    _kitMissTimers[kitId] = setTimeout(() => {
+        delete _kitMissTimers[kitId];
+        const names = [...(_kitMissQueues[kitId] || [])];
+        delete _kitMissQueues[kitId];
+        if (!names.length) return;
+        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 || {};
+                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[`@${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, kitId } })); } catch(e) {}
+            })
+            .catch(() => {});
+    }, 0);
+}
+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);
+    }
+}
 /**
  * Initialize a Viconic Kit in your React app.
  * Injects the kit's loader.js script into <head>.
@@ -53,7 +148,7 @@ const _initializedKits = new Set();
  * 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');
@@ -62,6 +157,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
@@ -75,6 +182,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);
@@ -169,24 +288,17 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
         document.addEventListener('viconic:ready', tryInjectFromEvent);
-        // --- PATH 5: Short-deadline fallback (500ms) in case script already fired before we listened ---
+        // --- PATH 5: Short-deadline fallback (50ms) — queue a batch fetch for all missing kit icons ---
         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;
-                        }
-                    }
-                }
+                const iconBaseName = prefixMatch[2];
+                // Use batch queue instead of kit.reload() to avoid N separate API calls
+                _queueKitMiss(prefix, iconBaseName);
             }
-        }, 500);
+        }, 50);
         return () => {
             document.removeEventListener('viconic:ready', tryInjectFromEvent);