@keak/sdk 2.0.6 → 2.0.8

package/dist/index.js

@@ -193,6 +193,10 @@ if (typeof window !== 'undefined') {
  * React adds debug source information in development mode that includes the original
  * file path, line number, and column number where a component was defined.
  */
+// Debug flag - set window.__KEAK_DEBUG__ = true to enable verbose logging
+const DEBUG = typeof window !== 'undefined' && window.__KEAK_DEBUG__;
+// Cache for Fiber source lookups to avoid repeated traversals
+const fiberSourceCache = new WeakMap();
 /**
  * Extract React Fiber from a DOM element
  */
@@ -202,10 +206,14 @@ function getReactFiberFromElement(element) {
         key.startsWith('__reactInternalInstance') ||
         key.startsWith('__reactProps'));
     if (!fiberKey) {
-        console.log('[Keak Fiber] No React Fiber key found on element. Keys:', Object.keys(element).filter(k => k.startsWith('__')));
+        if (DEBUG) {
+            console.log('[Keak Fiber] No React Fiber key found on element. Keys:', Object.keys(element).filter(k => k.startsWith('__')));
+        }
         return null;
     }
-    console.log('[Keak Fiber] Found Fiber key:', fiberKey);
+    if (DEBUG) {
+        console.log('[Keak Fiber] Found Fiber key:', fiberKey);
+    }
     return element[fiberKey];
 }
 /**
@@ -277,7 +285,9 @@ function traverseChildren(fiber, visited, remainingDepth) {
                     columnNumber: source.columnNumber || 1,
                     componentName
                 };
-                console.log('[Keak Fiber] Found valid source in child traversal:', sourceInfo);
+                if (DEBUG) {
+                    console.log('[Keak Fiber] Found valid source in child traversal:', sourceInfo);
+                }
                 return sourceInfo; // Return first valid match
             }
         }
@@ -309,7 +319,9 @@ function extractSourceFromFiber(fiber) {
     if (!fiber) {
         return null;
     }
-    console.log('[Keak Fiber] Starting Fiber traversal');
+    if (DEBUG) {
+        console.log('[Keak Fiber] Starting Fiber traversal');
+    }
     // Track visited fibers to avoid infinite loops
     const visited = new Set();
     let current = fiber;
@@ -324,14 +336,16 @@ function extractSourceFromFiber(fiber) {
         visited.add(current);
         // Check for debug source
         const source = current._debugSource || current.__source;
-        if (depth === 0) {
+        if (DEBUG && depth === 0) {
             console.log('[Keak Fiber] Root fiber has source?', !!source);
             if (source) {
                 console.log('[Keak Fiber] Root source:', source);
             }
         }
         if (source && source.fileName && source.lineNumber) {
-            console.log('[Keak Fiber] Found source at depth', depth, ':', source.fileName, ':', source.lineNumber);
+            if (DEBUG) {
+                console.log('[Keak Fiber] Found source at depth', depth, ':', source.fileName, ':', source.lineNumber);
+            }
             const componentName = getComponentName(current);
             // Filter out React internals, node_modules, layout wrappers, and dynamic imports
             const isInternalFile = source.fileName.includes('node_modules') ||
@@ -353,15 +367,19 @@ function extractSourceFromFiber(fiber) {
                     columnNumber: source.columnNumber || 1,
                     componentName
                 };
-                console.log('[Keak Fiber] Valid source found:', sourceInfo);
+                if (DEBUG) {
+                    console.log('[Keak Fiber] Valid source found:', sourceInfo);
+                }
                 // Take the first valid source (lowest depth = most specific)
                 if (!bestMatch) {
                     bestMatch = sourceInfo;
-                    console.log('[Keak Fiber] Using source at depth', depth);
+                    if (DEBUG) {
+                        console.log('[Keak Fiber] Using source at depth', depth);
+                    }
                     return sourceInfo;
                 }
             }
-            else {
+            else if (DEBUG) {
                 console.log('[Keak Fiber] Skipping source (wrapper/layout):', {
                     file: source.fileName.split('/').pop(),
                     component: componentName,
@@ -387,17 +405,21 @@ function extractSourceFromFiber(fiber) {
     }
     // After upward traversal, try downward/sibling traversal if no match found
     if (!bestMatch && fiber.child) {
-        console.log('[Keak Fiber] No match found in upward traversal, trying children/siblings');
+        if (DEBUG) {
+            console.log('[Keak Fiber] No match found in upward traversal, trying children/siblings');
+        }
         const childMatch = traverseChildren(fiber, visited, maxDepth - depth);
         if (childMatch) {
             bestMatch = childMatch;
         }
     }
-    if (bestMatch) {
-        console.log('[Keak Fiber] Returning best match:', bestMatch);
-    }
-    else {
-        console.log('[Keak Fiber] No component source found after traversing', depth, 'levels');
+    if (DEBUG) {
+        if (bestMatch) {
+            console.log('[Keak Fiber] Returning best match:', bestMatch);
+        }
+        else {
+            console.log('[Keak Fiber] No component source found after traversing', depth, 'levels');
+        }
     }
     return bestMatch;
 }
@@ -405,27 +427,39 @@ function extractSourceFromFiber(fiber) {
  * Main function to get source information from a DOM element
  */
 function getReactFiberSource(element) {
+    // Check cache first to avoid repeated Fiber traversals
+    if (fiberSourceCache.has(element)) {
+        return fiberSourceCache.get(element) || null;
+    }
     try {
         const fiber = getReactFiberFromElement(element);
         if (!fiber) {
-            console.log('[Keak Fiber] No React Fiber found on element');
+            if (DEBUG) {
+                console.log('[Keak Fiber] No React Fiber found on element');
+            }
+            fiberSourceCache.set(element, null);
             return null;
         }
         const sourceInfo = extractSourceFromFiber(fiber);
-        if (sourceInfo) {
-            console.log('[Keak Fiber] Found source:', {
-                file: sourceInfo.fileName,
-                line: sourceInfo.lineNumber,
-                component: sourceInfo.componentName
-            });
-        }
-        else {
-            console.log('[Keak Fiber] No source information found in Fiber tree');
+        if (DEBUG) {
+            if (sourceInfo) {
+                console.log('[Keak Fiber] Found source:', {
+                    file: sourceInfo.fileName,
+                    line: sourceInfo.lineNumber,
+                    component: sourceInfo.componentName
+                });
+            }
+            else {
+                console.log('[Keak Fiber] No source information found in Fiber tree');
+            }
         }
+        // Cache the result
+        fiberSourceCache.set(element, sourceInfo);
         return sourceInfo;
     }
     catch (error) {
         console.error('[Keak Fiber] Error extracting source:', error);
+        fiberSourceCache.set(element, null);
         return null;
     }
 }
@@ -2845,7 +2879,14 @@ function useKeak(config = {}) {
         });
         // Cleanup on unmount
         return () => {
-            // Keep instance alive for session, don't destroy
+            // Remove toolbar from DOM on unmount
+            const toolbarRoot = document.getElementById('keak-toolbar-root');
+            if (toolbarRoot) {
+                toolbarRoot.remove();
+                console.log('[Keak] Cleaned up toolbar on unmount');
+            }
+            // Reset flag to allow re-initialization
+            toolbarInitialized = false;
         };
     }, []); // Empty deps - only run once
     return keakInstance;
@@ -3149,6 +3190,13 @@ function initializeToolbar(config) {
             import('react'),
             import('react-dom/client')
         ]).then(([React, ReactDOMClient]) => {
+            // DOM-based duplicate prevention: Check if toolbar already exists
+            const existingToolbar = document.getElementById('keak-toolbar-root');
+            if (existingToolbar) {
+                console.log('[Keak] Toolbar already exists in DOM, skipping initialization');
+                toolbarInitialized = true;
+                return;
+            }
             const toolbarRoot = document.createElement('div');
             toolbarRoot.id = 'keak-toolbar-root';
             document.body.appendChild(toolbarRoot);