@keak/sdk 2.2.1 → 2.2.3

package/dist/index.cjs.js

@@ -2359,6 +2359,117 @@ function detectVariantElements(children) {
 // Cache for memoized snapshot objects to prevent infinite re-renders
 // Key format: "ready-isDesktopProject" → e.g., "true-false"
 const snapshotCache = new Map();
+// KeakLoader Component - Page-level middleware that waits for embedded script
+// Wrap your app/page with this to prevent rendering until variant assignments are ready
+const KeakLoader = ({ children }) => {
+    console.log(`[Keak SDK] 🔵 KeakLoader rendering started`);
+    const embeddedScriptStatus = React.useSyncExternalStore(
+    // subscribe - called when component mounts
+    (callback) => {
+        console.log(`[Keak SDK] 📡 KeakLoader subscribe called`);
+        if (typeof window === 'undefined') {
+            return () => { };
+        }
+        // Check if already ready
+        const embeddedData = window.KEAK_EMBEDDED_DATA;
+        const isDesktopProject = !!(embeddedData && embeddedData.projectUuid);
+        const hasComputeFunction = typeof window.KeakAssign?.computeAssignments === 'function';
+        // If not a desktop project AND embedded data exists, no need to wait
+        if (embeddedData && !isDesktopProject) {
+            console.log(`[Keak SDK] ✅ KeakLoader: Not a desktop project - no waiting needed`);
+            return () => { };
+        }
+        // If desktop project and already has compute function, ready immediately
+        if (isDesktopProject && hasComputeFunction) {
+            console.log(`[Keak SDK] ✅ KeakLoader: Embedded script already ready`);
+            return () => { };
+        }
+        // Poll for embedded script to load with shorter timeout (300ms max)
+        console.log(`[Keak SDK] ⏳ KeakLoader: Starting polling...`);
+        let attempts = 0;
+        const maxAttempts = 10; // 10 * 30ms = 300ms max
+        const pollInterval = setInterval(() => {
+            attempts++;
+            console.log(`[Keak SDK] 🔄 KeakLoader poll attempt ${attempts}/${maxAttempts}`);
+            const currentData = window.KEAK_EMBEDDED_DATA;
+            const currentIsDesktop = !!(currentData && currentData.projectUuid);
+            const currentHasFunc = typeof window.KeakAssign?.computeAssignments === 'function';
+            // If embedded data appears with projectUuid AND compute function is ready
+            if (currentIsDesktop && currentHasFunc) {
+                console.log(`[Keak SDK] ✅ KeakLoader: Desktop project script ready after ${attempts} attempts`);
+                clearInterval(pollInterval);
+                callback(); // Notify React of change
+            }
+            // If embedded data appears but has NO projectUuid (confirmed not a desktop project)
+            else if (currentData && !currentIsDesktop) {
+                console.log(`[Keak SDK] ✅ KeakLoader: Confirmed not a desktop project after ${attempts} attempts`);
+                clearInterval(pollInterval);
+                callback(); // Notify React of change
+            }
+            // Timeout - proceed anyway
+            else if (attempts >= maxAttempts) {
+                console.warn(`[Keak SDK] ⏰ KeakLoader: Timeout after 300ms - proceeding anyway`);
+                clearInterval(pollInterval);
+                callback(); // Notify React of change
+            }
+        }, 30); // 30ms interval for faster checks
+        return () => {
+            console.log(`[Keak SDK] 🧹 KeakLoader cleanup interval`);
+            clearInterval(pollInterval);
+        };
+    }, 
+    // getSnapshot - called synchronously during render
+    () => {
+        if (typeof window === 'undefined') {
+            const cacheKey = 'true-false';
+            if (!snapshotCache.has(cacheKey)) {
+                snapshotCache.set(cacheKey, { ready: true, isDesktopProject: false });
+            }
+            return snapshotCache.get(cacheKey);
+        }
+        const embeddedData = window.KEAK_EMBEDDED_DATA;
+        const isDesktopProject = !!(embeddedData && embeddedData.projectUuid);
+        const hasComputeFunction = typeof window.KeakAssign?.computeAssignments === 'function';
+        const ready = !isDesktopProject || hasComputeFunction;
+        // Create cache key from the actual values
+        const cacheKey = `${ready}-${isDesktopProject}`;
+        // Return cached snapshot if it exists
+        if (!snapshotCache.has(cacheKey)) {
+            console.log(`[Keak SDK] 📸 KeakLoader getSnapshot - Creating new cached snapshot:`, { ready, isDesktopProject });
+            snapshotCache.set(cacheKey, { ready, isDesktopProject });
+        }
+        return snapshotCache.get(cacheKey);
+    }, 
+    // getServerSnapshot - for SSR
+    () => {
+        if (typeof window === 'undefined') {
+            const cacheKey = 'true-false';
+            if (!snapshotCache.has(cacheKey)) {
+                snapshotCache.set(cacheKey, { ready: true, isDesktopProject: false });
+            }
+            return snapshotCache.get(cacheKey);
+        }
+        // Browser environment - check for embedded data
+        const embeddedData = window.KEAK_EMBEDDED_DATA;
+        const isDesktopProject = !!(embeddedData && embeddedData.projectUuid);
+        const hasComputeFunction = typeof window.KeakAssign?.computeAssignments === 'function';
+        const ready = !isDesktopProject || hasComputeFunction;
+        const cacheKey = `${ready}-${isDesktopProject}`;
+        if (!snapshotCache.has(cacheKey)) {
+            console.log(`[Keak SDK] 🌐 KeakLoader getServerSnapshot - Creating new cached snapshot:`, { ready, isDesktopProject });
+            snapshotCache.set(cacheKey, { ready, isDesktopProject });
+        }
+        return snapshotCache.get(cacheKey);
+    });
+    console.log(`[Keak SDK] 🔍 KeakLoader status:`, embeddedScriptStatus);
+    // BLOCKING: Don't render anything until embedded data is ready (for desktop projects)
+    if (embeddedScriptStatus.isDesktopProject && !embeddedScriptStatus.ready) {
+        console.log(`[Keak SDK] 🚫 KeakLoader blocking page render - waiting for embedded script`);
+        return null;
+    }
+    console.log(`[Keak SDK] ✅ KeakLoader proceeding with render`);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
 // Experiment Component
 const Experiment = ({ name, children, active = true }) => {
     // CRITICAL: For Keak Code desktop projects, wait for embedded script to load
@@ -2371,19 +2482,21 @@ const Experiment = ({ name, children, active = true }) => {
         if (typeof window === 'undefined') {
             return () => { };
         }
-        // If already ready, no need to poll
+        // Check if already ready
         const embeddedData = window.KEAK_EMBEDDED_DATA;
-        if (!embeddedData || !embeddedData.projectUuid) {
-            // Not a desktop project - no waiting needed
+        const isDesktopProject = !!(embeddedData && embeddedData.projectUuid);
+        const hasComputeFunction = typeof window.KeakAssign?.computeAssignments === 'function';
+        // If not a desktop project AND embedded data exists, no need to wait
+        if (embeddedData && !isDesktopProject) {
             console.log(`[Keak SDK] ✅ Not a desktop project for "${name}" - no waiting needed`);
             return () => { };
         }
-        if (typeof window.KeakAssign?.computeAssignments === 'function') {
-            // Already ready
+        // If desktop project and already has compute function, ready immediately
+        if (isDesktopProject && hasComputeFunction) {
             console.log(`[Keak SDK] ✅ Embedded script already ready for "${name}"`);
             return () => { };
         }
-        // Desktop project but script not ready - poll with timeout
+        // Poll for embedded script to load (either waiting for KEAK_EMBEDDED_DATA or computeAssignments)
         console.log(`[Keak SDK] ⏳ Starting polling for "${name}"...`);
         let attempts = 0;
         const maxAttempts = 10; // 500ms max
@@ -2391,12 +2504,21 @@ const Experiment = ({ name, children, active = true }) => {
             attempts++;
             console.log(`[Keak SDK] 🔄 Poll attempt ${attempts}/${maxAttempts} for "${name}"`);
             const currentData = window.KEAK_EMBEDDED_DATA;
-            const hasFunc = typeof window.KeakAssign?.computeAssignments === 'function';
-            if (currentData && hasFunc) {
-                console.log(`[Keak SDK] ✅ Script ready after ${attempts} attempts for "${name}"`);
+            const currentIsDesktop = !!(currentData && currentData.projectUuid);
+            const currentHasFunc = typeof window.KeakAssign?.computeAssignments === 'function';
+            // If embedded data appears with projectUuid AND compute function is ready
+            if (currentIsDesktop && currentHasFunc) {
+                console.log(`[Keak SDK] ✅ Desktop project script ready after ${attempts} attempts for "${name}"`);
+                clearInterval(pollInterval);
+                callback(); // Notify React of change
+            }
+            // If embedded data appears but has NO projectUuid (confirmed not a desktop project)
+            else if (currentData && !currentIsDesktop) {
+                console.log(`[Keak SDK] ✅ Confirmed not a desktop project after ${attempts} attempts for "${name}"`);
                 clearInterval(pollInterval);
                 callback(); // Notify React of change
             }
+            // Timeout - proceed anyway
             else if (attempts >= maxAttempts) {
                 console.warn(`[Keak SDK] ⏰ Timeout after ${maxAttempts} attempts for "${name}" - proceeding anyway`);
                 clearInterval(pollInterval);
@@ -2776,6 +2898,7 @@ function initializeToolbar(config) {
 
 exports.Conversion = Conversion;
 exports.Experiment = Experiment;
+exports.KeakLoader = KeakLoader;
 exports.KeakToolbar = KeakToolbar;
 exports.Variant = Variant;
 exports.buildSourcePathInjection = buildSourcePathInjection;