Update public/_kleap/kleap-react-tagger.js

public/_kleap/kleap-react-tagger.js

@@ -0,0 +1,182 @@
+(() => {
+  console.log("[kleap-react-tagger] Initializing React component tagger");
+
+  // Counter for unique IDs
+
+  // Helper to get component path for better identification
+  function getComponentPath(element) {
+    const path = [];
+    let current = element;
+    let depth = 0;
+    const maxDepth = 5; // Limit depth to avoid too long paths
+
+    while (current && current !== document.body && depth < maxDepth) {
+      let identifier = current.tagName.toLowerCase();
+
+      // Add class or id for better identification
+      if (current.id) {
+        identifier += `#${current.id}`;
+      } else if (current.className && typeof current.className === "string") {
+        const firstClass = current.className.trim().split(" ")[0];
+        if (firstClass && !firstClass.startsWith("_")) {
+          identifier += `.${firstClass}`;
+        }
+      }
+
+      path.unshift(identifier);
+      current = current.parentElement;
+      depth++;
+    }
+
+    return path.join(" > ");
+  }
+
+  // Generate unique ID based on element position and content
+  function generateUniqueId(element) {
+    const path = getComponentPath(element);
+    const text = element.textContent?.trim().substring(0, 20) || "";
+    const tag = element.tagName.toLowerCase();
+
+    // Create hash from path and content for uniqueness
+    const hashInput = `${path}-${text}-${tag}`;
+    let hash = 0;
+    for (let i = 0; i < hashInput.length; i++) {
+      const char = hashInput.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash; // Convert to 32bit integer
+    }
+
+    return `kleap-${Math.abs(hash).toString(36)}`;
+  }
+
+  // Enhanced approach: tag all elements intelligently
+  function tagAllElements() {
+    const elements = document.querySelectorAll("*:not([data-kleap-id])");
+    let taggedCount = 0;
+
+    elements.forEach((element) => {
+      // Skip script, style, and other non-visual elements
+      const tagName = element.tagName.toLowerCase();
+      if (
+        [
+          "script",
+          "style",
+          "meta",
+          "link",
+          "head",
+          "title",
+          "html",
+          "body",
+          "noscript",
+        ].includes(tagName)
+      ) {
+        return;
+      }
+
+      // Don't skip SVG elements - they're visual!
+      // Allow SVG but skip internal SVG elements like path, circle, etc
+      if (element instanceof SVGElement && !["svg", "g"].includes(tagName)) {
+        return;
+      }
+
+      // Skip elements that are purely decorative or layout
+      if (element.getAttribute("aria-hidden") === "true") {
+        return;
+      }
+
+      // Create unique ID based on element content and position
+      const kleapId = generateUniqueId(element);
+      const kleapPath = getComponentPath(element);
+
+      // Better naming for components
+      let kleapName = tagName;
+
+      // Try to get a meaningful name from various sources
+      if (element.className && typeof element.className === "string") {
+        const classes = element.className
+          .trim()
+          .split(" ")
+          .filter((c) => c && !c.startsWith("_"));
+        if (classes.length > 0) {
+          kleapName = `${tagName}.${classes[0]}`;
+        }
+      } else if (element.id) {
+        kleapName = `${tagName}#${element.id}`;
+      } else if (element.getAttribute("role")) {
+        kleapName = `${tagName}[role=${element.getAttribute("role")}]`;
+      } else if (element.getAttribute("aria-label")) {
+        kleapName = `${tagName}[${element.getAttribute("aria-label")}]`;
+      }
+
+      // Store ID and metadata for easy retrieval
+      element.setAttribute("data-kleap-id", kleapId);
+      element.setAttribute("data-kleap-name", kleapName);
+      element.setAttribute("data-kleap-path", kleapPath);
+
+      // Store the actual text content for this element
+      const textContent = element.textContent?.trim();
+      if (textContent && textContent.length > 0) {
+        element.setAttribute("data-kleap-text", textContent.substring(0, 100));
+      }
+      taggedCount++;
+    });
+
+    if (taggedCount > 0) {
+      console.log(`[kleap-react-tagger] Tagged ${taggedCount} elements`);
+    }
+  }
+
+  // Watch for DOM changes and tag new elements
+  function setupMutationObserver() {
+    const observer = new MutationObserver((mutations) => {
+      let hasNewElements = false;
+
+      mutations.forEach((mutation) => {
+        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === 1 && !node.hasAttribute("data-kleap-id")) {
+              hasNewElements = true;
+            }
+          });
+        }
+      });
+
+      if (hasNewElements) {
+        tagAllElements();
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    console.log("[kleap-react-tagger] Mutation observer setup complete");
+  }
+
+  // Initialize when DOM is ready
+  function initialize() {
+    if (!document.body) {
+      setTimeout(initialize, 100);
+      return;
+    }
+
+    // Tag existing elements
+    tagAllElements();
+
+    // Setup observer for future elements
+    setupMutationObserver();
+
+    // Also re-tag periodically to catch any missed elements
+    setInterval(tagAllElements, 2000);
+  }
+
+  // Start initialization
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initialize);
+  } else {
+    initialize();
+  }
+
+  console.log("[kleap-react-tagger] Setup complete");
+})();