@backmatter/studio 0.0.15 → 0.0.17

package/src/element-origin.ts

@@ -0,0 +1,149 @@
+// packages/studio/src/element-origin.ts
+// Where a rendered element comes from, read from the React fiber the dev server
+// already attached. A production build or a non-React host yields nothing.
+
+export type ElementOrigin = {
+  component: string | null;
+  file: string | null;
+  line: number | null;
+  column: number | null;
+  stack: string[];
+};
+
+const STACK_CAP = 4;
+const SOURCE_ROOT = /(?:^|\/)((?:src|app|pages|components|blocks|lib|content)\/[\w./@+-]+\.(?:tsx|ts|jsx|js|mdx))$/;
+const SOURCE_FILE = /^[\w./@+-]+\.(?:tsx|ts|jsx|js|mdx)$/;
+
+type Fiber = {
+  type?: unknown;
+  elementType?: unknown;
+  return?: Fiber | null;
+  _debugStack?: unknown;
+  _debugInfo?: unknown;
+};
+
+function fiberOf(element: Element): Fiber | null {
+  for (const key of Object.keys(element)) {
+    if (!key.startsWith("__reactFiber$") && !key.startsWith("__reactInternalInstance$")) continue;
+    const value = (element as unknown as Record<string, unknown>)[key];
+    if (value && typeof value === "object") return value as Fiber;
+  }
+  return null;
+}
+
+function functionName(value: unknown): string | null {
+  if (typeof value === "function") {
+    const named = value as { displayName?: string; name?: string };
+    const name = named.displayName || named.name;
+    return name && name !== "Unknown" ? name : null;
+  }
+  if (!value || typeof value !== "object") return null;
+  const record = value as { displayName?: string; render?: unknown; type?: unknown };
+  if (typeof record.displayName === "string" && record.displayName) return record.displayName;
+  const rendered = functionName(record.render);
+  if (rendered) return rendered;
+  return functionName(record.type);
+}
+
+function componentName(fiber: Fiber): string | null {
+  const named = functionName(fiber.type);
+  if (named) return named;
+  return functionName(fiber.elementType);
+}
+
+function pushName(names: string[], name: string | null) {
+  if (!name || names.includes(name) || names.length >= STACK_CAP) return;
+  names.push(name);
+}
+
+function normalizeFile(raw: string): string | null {
+  let file = raw.trim();
+  file = file.replace(/^webpack-internal:\/\/\/(?:\([^)]*\)\/)?/, "");
+  file = file.replace(/^webpack:\/\/\/?/, "");
+  if (file.startsWith("./")) file = file.slice(2);
+  if (file.startsWith("file://")) {
+    try {
+      file = decodeURIComponent(new URL(file).pathname);
+    } catch {
+      return null;
+    }
+  }
+  file = file.split(/[?#]/)[0] ?? "";
+  if (/node_modules|react-dom|react-jsx|next\/dist|webpack\/bootstrap|_next\/|https?:/i.test(file)) return null;
+  const rooted = file.match(SOURCE_ROOT);
+  if (rooted?.[1]) return rooted[1];
+  if (SOURCE_FILE.test(file) && !file.startsWith("/") && !file.includes("..")) return file;
+  return null;
+}
+
+function frameAt(line: string): { file: string; line: number; column: number } | null {
+  const trimmed = line.trim();
+  if (!trimmed || trimmed.includes("react-stack-top-frame") || trimmed.includes("react_stack_bottom_frame")) {
+    return null;
+  }
+  const chrome = trimmed.match(/^at\s+(?:async\s+)?(?:.*?\s+\()?(.+?):(\d+):(\d+)\)?$/);
+  const firefox = chrome ? null : trimmed.match(/^(?:.*@)?(.+?):(\d+):(\d+)$/);
+  const match = chrome ?? firefox;
+  if (!match?.[1]) return null;
+  const file = normalizeFile(match[1]);
+  if (!file) return null;
+  const lineNo = Number(match[2]);
+  const column = Number(match[3]);
+  if (!Number.isInteger(lineNo) || lineNo < 1 || !Number.isInteger(column) || column < 1) return null;
+  return { file, line: lineNo, column };
+}
+
+function stackText(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object" && "stack" in value) {
+    const stack = (value as { stack?: unknown }).stack;
+    return typeof stack === "string" ? stack : "";
+  }
+  return "";
+}
+
+function locationFromStack(value: unknown): { file: string; line: number; column: number } | null {
+  const text = stackText(value);
+  if (!text) return null;
+  for (const line of text.split("\n")) {
+    if (line.includes("react_stack_bottom_frame")) break;
+    const frame = frameAt(line);
+    if (frame) return frame;
+  }
+  return null;
+}
+
+function debugNames(value: unknown, names: string[]) {
+  if (!Array.isArray(value)) return;
+  for (const entry of value) {
+    if (!entry || typeof entry !== "object") continue;
+    const name = (entry as { name?: unknown }).name;
+    if (typeof name === "string") pushName(names, name);
+  }
+}
+
+/** The component and source behind an element, when the dev fiber exposes them. */
+export function readElementOrigin(element: Element): ElementOrigin | null {
+  const names: string[] = [];
+  let file: string | null = null;
+  let line: number | null = null;
+  let column: number | null = null;
+  let fiber = fiberOf(element);
+  const seen = new Set<Fiber>();
+  while (fiber && !seen.has(fiber) && names.length < STACK_CAP) {
+    seen.add(fiber);
+    pushName(names, componentName(fiber));
+    debugNames(fiber._debugInfo, names);
+    if (!file) {
+      const located = locationFromStack(fiber._debugStack);
+      if (located) {
+        file = located.file;
+        line = located.line;
+        column = located.column;
+      }
+    }
+    fiber = fiber.return ?? null;
+  }
+  if (names.length === 0 && !file) return null;
+  return { component: names[0] ?? null, file, line, column, stack: names };
+}