@impakers/debug 1.4.2 → 1.4.4

package/dist/react.js

@@ -1484,15 +1484,20 @@ function probeComponentSource(fiber) {
   return result;
 }
 function probeSourceWalk(fiber, maxDepth = 15) {
+  const results = [];
+  const seenFileNames = /* @__PURE__ */ new Set();
   let current = fiber;
   let depth = 0;
   while (current && depth < maxDepth) {
     const source = probeComponentSource(current);
-    if (source) return source;
+    if (source && !seenFileNames.has(source.fileName)) {
+      seenFileNames.add(source.fileName);
+      results.push(source);
+    }
     current = current.return;
     depth++;
   }
-  return null;
+  return results;
 }
 function getSourceLocation(element) {
   const fiber = getFiberFromElement2(element);
@@ -1521,9 +1526,15 @@ function getSourceLocation(element) {
       isProduction: false
     };
   }
-  const probed = probeSourceWalk(fiber);
-  if (probed) {
-    return { found: true, source: probed, isReactApp: true, isProduction: false };
+  const probedList = probeSourceWalk(fiber);
+  if (probedList.length > 0) {
+    return {
+      found: true,
+      source: probedList[0],
+      sourceCandidates: probedList,
+      isReactApp: true,
+      isProduction: false
+    };
   }
   return {
     found: false,
@@ -2430,7 +2441,18 @@ function CommentThread({
           useCORS: true,
           allowTaint: true,
           scale: Math.min(window.devicePixelRatio, 2),
-          logging: false
+          logging: false,
+          onclone: (clonedDoc) => {
+            const unsupported = /oklab|oklch|color-mix|(?<![a-z])lch|(?<![a-z])lab/i;
+            clonedDoc.querySelectorAll("style").forEach((styleEl) => {
+              if (unsupported.test(styleEl.textContent || "")) {
+                styleEl.textContent = (styleEl.textContent || "").replace(
+                  /[^{};\n]+:\s*[^;{}]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;{}]*/gi,
+                  ""
+                );
+              }
+            });
+          }
         });
         const base64 = canvas.toDataURL("image/jpeg", 0.7);
         setPendingImage(base64);
@@ -3359,6 +3381,17 @@ function detectSourceFile(element) {
   }
   return void 0;
 }
+function detectSourceFileCandidates(element) {
+  const result = getSourceLocation(element);
+  const loc = result.found ? result : findNearestComponentSource(element);
+  if (loc.found && loc.sourceCandidates && loc.sourceCandidates.length > 0) {
+    return loc.sourceCandidates.map((s) => formatSourceLocation(s, "path"));
+  }
+  if (loc.found && loc.source) {
+    return [formatSourceLocation(loc.source, "path")];
+  }
+  return [];
+}
 var STORAGE_PREFIX = "impakers-debug-markers-";
 function getRouteKey() {
   return STORAGE_PREFIX + window.location.pathname;
@@ -3631,25 +3664,36 @@ function DebugWidget({ endpoint, getUser, onHide }) {
         targetElement: elementUnder
       });
       setHoverInfo(null);
-      const rawSource = detectSourceFile(elementUnder);
-      if (rawSource?.includes("/chunks/")) {
-        resolveSourceString(rawSource).then((resolved) => {
-          if (resolved) {
-            setPendingAnnotation(
-              (prev) => prev ? {
-                ...prev,
-                resolvedSource: `${resolved.source}:${resolved.line}`,
-                resolvedName: resolved.name ?? void 0
-              } : prev
-            );
+      const candidates = detectSourceFileCandidates(elementUnder);
+      const chunkCandidates = candidates.filter((c) => c.includes("/chunks/"));
+      if (chunkCandidates.length > 0) {
+        (async () => {
+          for (const candidate of chunkCandidates) {
+            try {
+              const resolved = await resolveSourceString(candidate);
+              if (resolved) {
+                setPendingAnnotation(
+                  (prev) => prev ? {
+                    ...prev,
+                    resolvedSource: `${resolved.source}:${resolved.line}`,
+                    resolvedName: resolved.name ?? void 0
+                  } : prev
+                );
+                break;
+              }
+            } catch {
+            }
           }
-        }).catch(() => {
-        });
+        })();
       }
     };
     document.addEventListener("click", handleClick, true);
     return () => document.removeEventListener("click", handleClick, true);
   }, [isActive, pendingAnnotation]);
+  const showErrorToast = (0, import_react7.useCallback)((msg) => {
+    setToastError(msg);
+    originalSetTimeout(() => setToastError(null), 4e3);
+  }, []);
   const addAnnotation = (0, import_react7.useCallback)(
     async (comment) => {
       if (!pendingAnnotation || submitting) return;
@@ -3665,19 +3709,29 @@ function DebugWidget({ endpoint, getUser, onHide }) {
             useCORS: true,
             allowTaint: true,
             scale: 1,
-            // 1x로 줄여서 용량 절약
             logging: false,
             width: window.innerWidth,
-            height: window.innerHeight
+            height: window.innerHeight,
+            onclone: (clonedDoc) => {
+              const unsupported = /oklab|oklch|color-mix|(?<![a-z])lch|(?<![a-z])lab/i;
+              clonedDoc.querySelectorAll("style").forEach((styleEl) => {
+                if (unsupported.test(styleEl.textContent || "")) {
+                  styleEl.textContent = (styleEl.textContent || "").replace(
+                    /[^{};\n]+:\s*[^;{}]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;{}]*/gi,
+                    ""
+                  );
+                }
+              });
+            }
           });
           screenshot = canvas.toDataURL("image/jpeg", 0.5);
         } catch {
         } finally {
           debugEls.forEach((el) => el.style.visibility = "");
         }
-        let resolvedSource = pendingAnnotation.sourceFile || "";
-        let resolvedName = null;
-        if (pendingAnnotation.sourceFile?.includes("/chunks/")) {
+        let resolvedSource = pendingAnnotation.resolvedSource || pendingAnnotation.sourceFile || "";
+        let resolvedName = pendingAnnotation.resolvedName || null;
+        if (!pendingAnnotation.resolvedSource && pendingAnnotation.sourceFile?.includes("/chunks/")) {
           try {
             const resolved = await resolveSourceString(pendingAnnotation.sourceFile);
             if (resolved) {
@@ -3816,10 +3870,6 @@ ${elementInfo.join("\n")}`);
     });
     return unsubscribe;
   }, [activeThread, endpoint]);
-  const showErrorToast = (0, import_react7.useCallback)((msg) => {
-    setToastError(msg);
-    originalSetTimeout(() => setToastError(null), 4e3);
-  }, []);
   const handleThreadReply = (0, import_react7.useCallback)(async (taskId, content, screenshot, file) => {
     const authorName = getUser?.()?.name ? String(getUser().name) : "\uC775\uBA85";
     const authorId = getUser?.()?.id ? String(getUser().id) : void 0;