@impakers/debug 1.4.5 → 1.4.7

package/dist/next.d.mts

@@ -10,6 +10,10 @@ interface ImpakersDebugOptions {
      * false로 설정하면 소스코드가 .map에 그대로 노출됨
      */
     stripSourceContent?: boolean;
+    /**
+     * Next App Router route -> file manifest 생성 여부 (기본: true)
+     */
+    emitRouteManifest?: boolean;
 }
 /**
  * Next.js config wrapper — 소스맵 설정 자동 구성

package/dist/next.d.ts

@@ -10,6 +10,10 @@ interface ImpakersDebugOptions {
      * false로 설정하면 소스코드가 .map에 그대로 노출됨
      */
     stripSourceContent?: boolean;
+    /**
+     * Next App Router route -> file manifest 생성 여부 (기본: true)
+     */
+    emitRouteManifest?: boolean;
 }
 /**
  * Next.js config wrapper — 소스맵 설정 자동 구성

package/dist/next.js

@@ -89,8 +89,127 @@ var StripSourceContentPlugin = class {
     );
   }
 };
+var RouteManifestPlugin = class {
+  constructor(projectDir) {
+    this.projectDir = projectDir;
+  }
+  apply(compiler) {
+    compiler.hooks.afterEmit.tapAsync(
+      "ImpakersDebugRouteManifest",
+      (compilation, callback) => {
+        const fs = require("fs");
+        const path = require("path");
+        const outputPath = compilation.outputOptions?.path;
+        if (!outputPath) {
+          callback();
+          return;
+        }
+        const appDir = findAppDirectory(fs, path, this.projectDir);
+        if (!appDir) {
+          callback();
+          return;
+        }
+        const entries = scanRouteManifestEntries(fs, path, this.projectDir, appDir);
+        if (entries.length === 0) {
+          callback();
+          return;
+        }
+        const manifestPath = path.resolve(
+          outputPath,
+          "../static/chunks/impakers-debug-route-manifest.json"
+        );
+        try {
+          fs.mkdirSync(path.dirname(manifestPath), { recursive: true });
+          fs.writeFileSync(
+            manifestPath,
+            JSON.stringify({ version: 1, entries }, null, 2),
+            "utf-8"
+          );
+          console.log(
+            `[@impakers/debug] Emitted route manifest with ${entries.length} route entries`
+          );
+        } catch {
+        }
+        callback();
+      }
+    );
+  }
+};
+function findAppDirectory(fs, path, projectDir) {
+  const candidates = [
+    path.join(projectDir, "src", "app"),
+    path.join(projectDir, "app")
+  ];
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate) && fs.statSync(candidate).isDirectory()) {
+      return candidate;
+    }
+  }
+  return null;
+}
+function toPosixPath(path) {
+  return path.replace(/\\/g, "/");
+}
+function findRouteFile(fs, path, dir, baseName) {
+  const extensions = [".tsx", ".ts", ".jsx", ".js"];
+  for (const ext of extensions) {
+    const file = path.join(dir, `${baseName}${ext}`);
+    if (fs.existsSync(file) && fs.statSync(file).isFile()) {
+      return file;
+    }
+  }
+  return null;
+}
+function getUrlSegment(segmentName) {
+  if (!segmentName) return null;
+  if (segmentName.startsWith("(") && segmentName.endsWith(")")) return null;
+  return segmentName;
+}
+function routeFromSegments(segments) {
+  if (segments.length === 0) return "/";
+  return `/${segments.join("/")}`;
+}
+function scanRouteManifestEntries(fs, path, projectDir, appDir) {
+  const entries = [];
+  const walk = (currentDir, routeSegments, layoutChain) => {
+    const currentLayout = findRouteFile(fs, path, currentDir, "layout");
+    const nextLayoutChain = currentLayout ? [
+      ...layoutChain,
+      {
+        kind: "layout",
+        file: toPosixPath(path.relative(projectDir, currentLayout))
+      }
+    ] : layoutChain;
+    const currentPage = findRouteFile(fs, path, currentDir, "page");
+    if (currentPage) {
+      entries.push({
+        route: routeFromSegments(routeSegments),
+        segments: [...routeSegments],
+        files: [
+          {
+            kind: "page",
+            file: toPosixPath(path.relative(projectDir, currentPage))
+          },
+          ...nextLayoutChain
+        ]
+      });
+    }
+    const children = fs.readdirSync(currentDir, { withFileTypes: true }).filter((entry) => entry.isDirectory()).sort((a, b) => a.name.localeCompare(b.name));
+    for (const child of children) {
+      if (child.name.startsWith("@")) continue;
+      const nextSegment = getUrlSegment(child.name);
+      walk(
+        path.join(currentDir, child.name),
+        nextSegment ? [...routeSegments, nextSegment] : routeSegments,
+        nextLayoutChain
+      );
+    }
+  };
+  walk(appDir, [], []);
+  return entries;
+}
 function withImpakersDebug(nextConfig, options = {}) {
-  const { stripSourceContent = true } = options;
+  const { stripSourceContent = true, emitRouteManifest = true } = options;
   return {
     ...nextConfig,
     // 소스맵 생성 활성화
@@ -99,9 +218,14 @@ function withImpakersDebug(nextConfig, options = {}) {
       if (typeof nextConfig.webpack === "function") {
         config = nextConfig.webpack(config, context);
       }
-      if (!context.isServer && stripSourceContent) {
+      if (!context.isServer) {
         config.plugins = config.plugins || [];
-        config.plugins.push(new StripSourceContentPlugin());
+        if (stripSourceContent) {
+          config.plugins.push(new StripSourceContentPlugin());
+        }
+        if (emitRouteManifest && context.dir) {
+          config.plugins.push(new RouteManifestPlugin(context.dir));
+        }
       }
       return config;
     }

package/dist/next.mjs

@@ -72,8 +72,127 @@ var StripSourceContentPlugin = class {
     );
   }
 };
+var RouteManifestPlugin = class {
+  constructor(projectDir) {
+    this.projectDir = projectDir;
+  }
+  apply(compiler) {
+    compiler.hooks.afterEmit.tapAsync(
+      "ImpakersDebugRouteManifest",
+      (compilation, callback) => {
+        const fs = __require("fs");
+        const path = __require("path");
+        const outputPath = compilation.outputOptions?.path;
+        if (!outputPath) {
+          callback();
+          return;
+        }
+        const appDir = findAppDirectory(fs, path, this.projectDir);
+        if (!appDir) {
+          callback();
+          return;
+        }
+        const entries = scanRouteManifestEntries(fs, path, this.projectDir, appDir);
+        if (entries.length === 0) {
+          callback();
+          return;
+        }
+        const manifestPath = path.resolve(
+          outputPath,
+          "../static/chunks/impakers-debug-route-manifest.json"
+        );
+        try {
+          fs.mkdirSync(path.dirname(manifestPath), { recursive: true });
+          fs.writeFileSync(
+            manifestPath,
+            JSON.stringify({ version: 1, entries }, null, 2),
+            "utf-8"
+          );
+          console.log(
+            `[@impakers/debug] Emitted route manifest with ${entries.length} route entries`
+          );
+        } catch {
+        }
+        callback();
+      }
+    );
+  }
+};
+function findAppDirectory(fs, path, projectDir) {
+  const candidates = [
+    path.join(projectDir, "src", "app"),
+    path.join(projectDir, "app")
+  ];
+  for (const candidate of candidates) {
+    if (fs.existsSync(candidate) && fs.statSync(candidate).isDirectory()) {
+      return candidate;
+    }
+  }
+  return null;
+}
+function toPosixPath(path) {
+  return path.replace(/\\/g, "/");
+}
+function findRouteFile(fs, path, dir, baseName) {
+  const extensions = [".tsx", ".ts", ".jsx", ".js"];
+  for (const ext of extensions) {
+    const file = path.join(dir, `${baseName}${ext}`);
+    if (fs.existsSync(file) && fs.statSync(file).isFile()) {
+      return file;
+    }
+  }
+  return null;
+}
+function getUrlSegment(segmentName) {
+  if (!segmentName) return null;
+  if (segmentName.startsWith("(") && segmentName.endsWith(")")) return null;
+  return segmentName;
+}
+function routeFromSegments(segments) {
+  if (segments.length === 0) return "/";
+  return `/${segments.join("/")}`;
+}
+function scanRouteManifestEntries(fs, path, projectDir, appDir) {
+  const entries = [];
+  const walk = (currentDir, routeSegments, layoutChain) => {
+    const currentLayout = findRouteFile(fs, path, currentDir, "layout");
+    const nextLayoutChain = currentLayout ? [
+      ...layoutChain,
+      {
+        kind: "layout",
+        file: toPosixPath(path.relative(projectDir, currentLayout))
+      }
+    ] : layoutChain;
+    const currentPage = findRouteFile(fs, path, currentDir, "page");
+    if (currentPage) {
+      entries.push({
+        route: routeFromSegments(routeSegments),
+        segments: [...routeSegments],
+        files: [
+          {
+            kind: "page",
+            file: toPosixPath(path.relative(projectDir, currentPage))
+          },
+          ...nextLayoutChain
+        ]
+      });
+    }
+    const children = fs.readdirSync(currentDir, { withFileTypes: true }).filter((entry) => entry.isDirectory()).sort((a, b) => a.name.localeCompare(b.name));
+    for (const child of children) {
+      if (child.name.startsWith("@")) continue;
+      const nextSegment = getUrlSegment(child.name);
+      walk(
+        path.join(currentDir, child.name),
+        nextSegment ? [...routeSegments, nextSegment] : routeSegments,
+        nextLayoutChain
+      );
+    }
+  };
+  walk(appDir, [], []);
+  return entries;
+}
 function withImpakersDebug(nextConfig, options = {}) {
-  const { stripSourceContent = true } = options;
+  const { stripSourceContent = true, emitRouteManifest = true } = options;
   return {
     ...nextConfig,
     // 소스맵 생성 활성화
@@ -82,9 +201,14 @@ function withImpakersDebug(nextConfig, options = {}) {
       if (typeof nextConfig.webpack === "function") {
         config = nextConfig.webpack(config, context);
       }
-      if (!context.isServer && stripSourceContent) {
+      if (!context.isServer) {
         config.plugins = config.plugins || [];
-        config.plugins.push(new StripSourceContentPlugin());
+        if (stripSourceContent) {
+          config.plugins.push(new StripSourceContentPlugin());
+        }
+        if (emitRouteManifest && context.dir) {
+          config.plugins.push(new RouteManifestPlugin(context.dir));
+        }
       }
       return config;
     }

package/dist/react.js

@@ -1569,35 +1569,70 @@ function findNearestComponentSource(element, maxAncestors = 10) {
 }
 
 // src/utils/capture-element.ts
-async function captureElement(el, options = {}) {
-  const { quality = 0.7, maxScale = 2 } = options;
-  const rect = el.getBoundingClientRect();
-  const scale = Math.min(window.devicePixelRatio, maxScale);
-  const canvas = document.createElement("canvas");
-  canvas.width = rect.width * scale;
-  canvas.height = rect.height * scale;
-  const ctx = canvas.getContext("2d");
-  ctx.scale(scale, scale);
-  const clone = el.cloneNode(true);
-  inlineComputedStyles(el, clone);
-  clone.style.margin = "0";
-  clone.style.position = "static";
-  const serializer = new XMLSerializer();
-  const html = serializer.serializeToString(clone);
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${rect.width}" height="${rect.height}">
-    <foreignObject width="100%" height="100%">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="width:${rect.width}px;height:${rect.height}px;overflow:hidden">${html}</div>
-    </foreignObject>
-  </svg>`;
-  const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
-  const url = URL.createObjectURL(blob);
+var UNSUPPORTED_RE = /oklab|oklch|color-mix/i;
+function sanitizeUnsupportedColors(clonedDoc) {
   try {
-    const img = await loadImage(url);
-    ctx.drawImage(img, 0, 0, rect.width, rect.height);
-    return canvas.toDataURL("image/jpeg", quality);
-  } finally {
-    URL.revokeObjectURL(url);
+    for (let i = 0; i < clonedDoc.styleSheets.length; i++) {
+      try {
+        const sheet = clonedDoc.styleSheets[i];
+        const rules = sheet.cssRules || sheet.rules;
+        if (!rules) continue;
+        sanitizeCSSRules(sheet, rules);
+      } catch {
+      }
+    }
+  } catch {
   }
+  clonedDoc.querySelectorAll("style").forEach((styleEl) => {
+    const text = styleEl.textContent || "";
+    if (UNSUPPORTED_RE.test(text)) {
+      styleEl.textContent = text.replace(
+        /[^{};\n]+:\s*[^;{}]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;{}]*/gi,
+        ""
+      );
+    }
+  });
+  clonedDoc.querySelectorAll("*").forEach((el) => {
+    const s = el.style;
+    if (!s?.cssText) return;
+    if (UNSUPPORTED_RE.test(s.cssText)) {
+      s.cssText = s.cssText.replace(
+        /[^;]*(?:oklab|oklch|color-mix|lch|lab)\([^)]*(?:\([^)]*\))*[^)]*\)[^;]*/gi,
+        ""
+      );
+    }
+  });
+}
+function sanitizeCSSRules(sheet, rules) {
+  for (let j = rules.length - 1; j >= 0; j--) {
+    const rule = rules[j];
+    if ("cssRules" in rule && rule.cssRules) {
+      sanitizeCSSRules(sheet, rule.cssRules);
+      continue;
+    }
+    if (rule instanceof CSSStyleRule) {
+      const style = rule.style;
+      for (let k = style.length - 1; k >= 0; k--) {
+        const prop = style[k];
+        const val = style.getPropertyValue(prop);
+        if (UNSUPPORTED_RE.test(val)) {
+          style.setProperty(prop, "transparent");
+        }
+      }
+    }
+  }
+}
+async function captureElement(el, options = {}) {
+  const { quality = 0.7, maxScale = 2 } = options;
+  const html2canvas = (await import("html2canvas")).default;
+  const canvas = await html2canvas(el, {
+    useCORS: true,
+    allowTaint: true,
+    scale: Math.min(window.devicePixelRatio, maxScale),
+    logging: false,
+    onclone: (clonedDoc) => sanitizeUnsupportedColors(clonedDoc)
+  });
+  return canvas.toDataURL("image/jpeg", quality);
 }
 async function captureFullPage(options = {}) {
   const { quality = 0.5, hideSelectors = [] } = options;
@@ -1614,17 +1649,7 @@ async function captureFullPage(options = {}) {
       logging: false,
       width: window.innerWidth,
       height: window.innerHeight,
-      onclone: (clonedDoc) => {
-        const unsupported = /oklab|oklch|color-mix/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,
-              ""
-            );
-          }
-        });
-      }
+      onclone: (clonedDoc) => sanitizeUnsupportedColors(clonedDoc)
     });
     return canvas.toDataURL("image/jpeg", quality);
   } catch {
@@ -1633,23 +1658,6 @@ async function captureFullPage(options = {}) {
     hiddenEls.forEach((el) => el.style.visibility = "");
   }
 }
-function loadImage(src) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => resolve(img);
-    img.onerror = () => reject(new Error("\uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328"));
-    img.src = src;
-  });
-}
-function inlineComputedStyles(src, dst) {
-  const cs = window.getComputedStyle(src);
-  dst.style.cssText = cs.cssText;
-  const srcChildren = src.children;
-  const dstChildren = dst.children;
-  for (let i = 0; i < srcChildren.length && i < dstChildren.length; i++) {
-    inlineComputedStyles(srcChildren[i], dstChildren[i]);
-  }
-}
 
 // src/core/collector.ts
 var MAX_ERRORS = 20;
@@ -1866,6 +1874,151 @@ function collectMetadata(getUser) {
   return metadata;
 }
 
+// src/core/debug-targets.ts
+var NEXT_ROUTE_MANIFEST_URL = "/_next/static/chunks/impakers-debug-route-manifest.json";
+var manifestPromise = null;
+var manifestFailed = false;
+function normalizePathname(pathname) {
+  if (!pathname || pathname === "/") return "/";
+  return pathname.endsWith("/") ? pathname.slice(0, -1) || "/" : pathname;
+}
+function splitPathname(pathname) {
+  const normalized = normalizePathname(pathname);
+  if (normalized === "/") return [];
+  return normalized.slice(1).split("/").map((segment) => decodeURIComponent(segment)).filter(Boolean);
+}
+function isDynamicSegment(segment) {
+  return /^\[[^\]]+\]$/.test(segment);
+}
+function isCatchAllSegment(segment) {
+  return /^\[\.\.\.[^\]]+\]$/.test(segment);
+}
+function isOptionalCatchAllSegment(segment) {
+  return /^\[\[\.\.\.[^\]]+\]\]$/.test(segment);
+}
+function scoreRouteMatch(routeSegments, pathnameSegments) {
+  let routeIndex = 0;
+  let pathIndex = 0;
+  let score = 0;
+  while (routeIndex < routeSegments.length) {
+    const routeSegment = routeSegments[routeIndex];
+    if (isOptionalCatchAllSegment(routeSegment)) {
+      score += 1;
+      pathIndex = pathnameSegments.length;
+      routeIndex += 1;
+      break;
+    }
+    if (isCatchAllSegment(routeSegment)) {
+      if (pathIndex >= pathnameSegments.length) return null;
+      score += 2;
+      pathIndex = pathnameSegments.length;
+      routeIndex += 1;
+      break;
+    }
+    const pathSegment = pathnameSegments[pathIndex];
+    if (pathSegment === void 0) return null;
+    if (isDynamicSegment(routeSegment)) {
+      score += 5;
+      routeIndex += 1;
+      pathIndex += 1;
+      continue;
+    }
+    if (routeSegment !== pathSegment) return null;
+    score += 20;
+    routeIndex += 1;
+    pathIndex += 1;
+  }
+  if (routeIndex !== routeSegments.length) return null;
+  if (pathIndex !== pathnameSegments.length) return null;
+  return score;
+}
+async function loadNextRouteManifest() {
+  if (manifestFailed) return null;
+  if (manifestPromise) return manifestPromise;
+  manifestPromise = (async () => {
+    try {
+      const res = await fetch(NEXT_ROUTE_MANIFEST_URL, { cache: "force-cache" });
+      if (!res.ok) {
+        manifestFailed = true;
+        return null;
+      }
+      const json = await res.json();
+      if (!json || typeof json !== "object" || !Array.isArray(json.entries)) {
+        manifestFailed = true;
+        return null;
+      }
+      return json;
+    } catch {
+      manifestFailed = true;
+      return null;
+    }
+  })();
+  return manifestPromise;
+}
+function buildRouteTargets(entry) {
+  const pageTarget = entry.files.find((file) => file.kind === "page");
+  const layoutTargets = entry.files.filter((file) => file.kind === "layout");
+  const targets = [];
+  if (pageTarget) {
+    targets.push({
+      kind: "route-page",
+      file: pageTarget.file,
+      label: "Current page route",
+      confidence: 1,
+      reason: "matched-current-url"
+    });
+  }
+  layoutTargets.forEach((layout, index) => {
+    targets.push({
+      kind: "route-layout",
+      file: layout.file,
+      label: index === layoutTargets.length - 1 ? "Nearest layout" : "Ancestor layout",
+      confidence: Math.max(0.7, 0.95 - index * 0.08),
+      reason: "matched-layout-chain"
+    });
+  });
+  return targets;
+}
+async function getRouteDebugTargets(pathname) {
+  if (typeof window === "undefined") return null;
+  const currentPathname = pathname ?? window.location.pathname;
+  const manifest = await loadNextRouteManifest();
+  if (!manifest) return null;
+  const pathnameSegments = splitPathname(currentPathname);
+  let bestEntry = null;
+  let bestScore = -1;
+  for (const entry of manifest.entries) {
+    const score = scoreRouteMatch(entry.segments, pathnameSegments);
+    if (score === null) continue;
+    if (score > bestScore) {
+      bestScore = score;
+      bestEntry = entry;
+    }
+  }
+  if (!bestEntry) return null;
+  return {
+    targets: buildRouteTargets(bestEntry),
+    context: {
+      pathname: normalizePathname(currentPathname),
+      matchedRoute: bestEntry.route,
+      source: "next-route-manifest"
+    }
+  };
+}
+function mergeDebugTargets(...groups) {
+  const merged = [];
+  const seen = /* @__PURE__ */ new Set();
+  groups.forEach((group) => {
+    group?.forEach((target) => {
+      const key = `${target.kind}:${target.file}:${target.line ?? ""}:${target.column ?? ""}`;
+      if (seen.has(key)) return;
+      seen.add(key);
+      merged.push(target);
+    });
+  });
+  return merged.sort((a, b) => b.confidence - a.confidence);
+}
+
 // src/core/api.ts
 function getToken() {
   const token = loadToken();
@@ -3433,6 +3586,23 @@ function detectSourceFileCandidates(element) {
   }
   return [];
 }
+function buildComponentDebugTarget(resolvedSource, componentName) {
+  const match = resolvedSource.match(/^(.+):(\d+)(?::(\d+))?$/);
+  if (!match) return null;
+  const [, file, lineStr, columnStr] = match;
+  const line = Number.parseInt(lineStr, 10);
+  const column = columnStr ? Number.parseInt(columnStr, 10) : void 0;
+  if (!file || Number.isNaN(line)) return null;
+  return {
+    kind: "component",
+    file,
+    line,
+    column,
+    label: componentName || "Resolved component source",
+    confidence: 0.98,
+    reason: "resolved-from-source-map"
+  };
+}
 var STORAGE_PREFIX = "impakers-debug-markers-";
 function getRouteKey() {
   return STORAGE_PREFIX + window.location.pathname;
@@ -3754,7 +3924,28 @@ function DebugWidget({ endpoint, getUser, onHide }) {
           } catch {
           }
         }
+        const routeMatch = await getRouteDebugTargets(window.location.pathname);
+        const componentTarget = resolvedSource && !resolvedSource.includes("/chunks/") ? buildComponentDebugTarget(resolvedSource, resolvedName) : null;
+        const debugTargets = mergeDebugTargets(
+          componentTarget ? [componentTarget] : void 0,
+          routeMatch?.targets
+        );
+        if (debugTargets.length > 0) {
+          metadata.debugTargets = debugTargets;
+        }
+        if (routeMatch?.context) {
+          metadata.routeDebug = routeMatch.context;
+        }
         const descriptionParts = [comment];
+        if (debugTargets.length > 0) {
+          descriptionParts.push(
+            "\n\n---\n**\uB514\uBC84\uAE45 \uD0C0\uAC9F \uD30C\uC77C**:",
+            ...debugTargets.map((target) => {
+              const suffix = target.line ? `:${target.line}${typeof target.column === "number" ? `:${target.column}` : ""}` : "";
+              return `- [${target.kind}] \`${target.file}${suffix}\` (${target.reason})`;
+            })
+          );
+        }
         const elementInfo = [];
         if (pendingAnnotation.element) {
           elementInfo.push(`**\uC120\uD0DD\uB41C \uC694\uC18C**: ${pendingAnnotation.element}`);