@alloy-js/core 0.23.0-dev.10 → 0.23.0-dev.12

package/src/debug/render.ts

@@ -13,11 +13,28 @@ import {
   type PrintHook,
   type RenderedTextTree,
 } from "../print-hook.js";
-import { untrack } from "../reactivity.js";
+import { getContext, untrack } from "../reactivity.js";
 import type { ComponentCreator } from "../runtime/component.js";
 import { flushJobsAsync } from "../scheduler.js";
 import { sanitizeRecord } from "./serialize.js";
-import { emitDevtoolsMessage } from "./trace.js";
+import { resolveComponentSource } from "./source-map.js";
+import {
+  deleteDirectory,
+  deleteOutputFile,
+  insertDirectory,
+  insertOutputFile,
+  insertRenderError,
+  insertRenderNode,
+  isTraceEnabled,
+  notifyFlushComplete,
+  notifyRenderComplete,
+  notifyRenderReset,
+  deleteRenderNode as traceDeleteRenderNode,
+  updateRenderNodeProps as traceUpdateRenderNodeProps,
+  updateEffectComponentByContext,
+  updateRenderNodeContext,
+} from "./trace-writer.js";
+import { isDebugEnabled, logDevtoolsMessage } from "./trace.js";
 
 /** The kind discriminant for render tree nodes. */
 export type RenderTreeNodeKind = RenderTreeNode["kind"];
@@ -63,6 +80,10 @@ type TrackedNode = RenderedTextTree | PrintHook;
 let nodeIds = new WeakMap<TrackedNode, number>();
 let idToNode = new Map<number, TrackedNode>();
 let entryIds = new WeakMap<RenderedTextTree, number[]>();
+let nodeKinds = new WeakMap<
+  TrackedNode,
+  { kind: string; name?: string; source?: RenderTreeNodeInfo["source"] }
+>();
 let fileNodes = new Map<number, { path: string; filetype: string }>();
 let directoryNodes = new Map<number, { path: string }>();
 let nodeProps = new Map<number, string | undefined>();
@@ -94,11 +115,7 @@ function serializeRenderTreeProps(input: Record<string, unknown> | undefined) {
 
 function emitNodeRemoved(parentId: number | null, id: number) {
   clearRenderTreeChildrenForId(id);
-  emitDevtoolsMessage({
-    type: "render:nodeRemoved",
-    parentId,
-    id,
-  });
+  traceDeleteRenderNode(id);
 
   rerenderActions.delete(id);
   nodeProps.delete(id);
@@ -106,19 +123,13 @@ function emitNodeRemoved(parentId: number | null, id: number) {
 
   const fileInfo = fileNodes.get(id);
   if (fileInfo) {
-    emitDevtoolsMessage({
-      type: "files:fileRemoved",
-      path: fileInfo.path,
-    });
+    deleteOutputFile(fileInfo.path);
     fileNodes.delete(id);
   }
 
   const dirInfo = directoryNodes.get(id);
   if (dirInfo) {
-    emitDevtoolsMessage({
-      type: "files:directoryRemoved",
-      path: dirInfo.path,
-    });
+    deleteDirectory(dirInfo.path);
     directoryNodes.delete(id);
   }
 }
@@ -134,7 +145,13 @@ function getEntryList(parent: RenderedTextTree) {
 
 function getOrCreateNodeId(node: TrackedNode) {
   const existing = nodeIds.get(node);
-  if (existing) return existing;
+  if (existing) {
+    // Restore reverse mapping — emitNodeRemoved deletes idToNode but nodeIds
+    // (WeakMap) survives.  Without this, clearRenderTreeChildrenForId can't
+    // find the node on the next cleanup, leaving orphaned children in the DB.
+    idToNode.set(existing, node);
+    return existing;
+  }
   const id = nextId++;
   nodeIds.set(node, id);
   idToNode.set(id, node);
@@ -142,7 +159,7 @@ function getOrCreateNodeId(node: TrackedNode) {
 }
 
 export function getRenderNodeId(node: RenderedTextTree | PrintHook) {
-  if (!isDevtoolsEnabled()) return undefined;
+  if (!isDebugEnabled()) return undefined;
   return getOrCreateNodeId(node);
 }
 
@@ -152,33 +169,38 @@ function setEntryId(parent: RenderedTextTree, index: number, id: number) {
 }
 
 export function initialize(root: RenderedTextTree) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   ensureDevtoolsHandler();
   nodeIds = new WeakMap();
   idToNode = new Map();
   entryIds = new WeakMap();
+  nodeKinds = new WeakMap();
   fileNodes = new Map();
   directoryNodes = new Map();
   nodeProps = new Map();
   rerenderActions = new Map();
   nextId = 1;
-  emitDevtoolsMessage({ type: "render:reset" });
+  notifyRenderReset();
   const rootId = getOrCreateNodeId(root);
-  emitDevtoolsMessage({
-    type: "render:nodeAdded",
-    parentId: null,
-    node: {
-      id: rootId,
-      kind: "root",
-    },
-  });
+  insertRenderNode(
+    rootId,
+    null,
+    "root",
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    null,
+    undefined,
+  );
 }
 
 export function registerRenderNodeActions(
   node: RenderedTextTree | PrintHook,
   actions: RenderNodeActions,
 ) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const id = getOrCreateNodeId(node);
   rerenderActions.set(id, actions);
 }
@@ -186,7 +208,7 @@ export function registerRenderNodeActions(
 export function unregisterRenderNodeActions(
   node: RenderedTextTree | PrintHook,
 ) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const id = nodeIds.get(node);
   if (id !== undefined) {
     rerenderActions.delete(id);
@@ -223,18 +245,21 @@ export function recordTextNode(
   index: number,
   value: string,
 ) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const id = nextId++;
   setEntryId(parent, index, id);
-  emitDevtoolsMessage({
-    type: "render:nodeAdded",
-    parentId: getOrCreateNodeId(parent),
-    node: {
-      id,
-      kind: "text",
-      value,
-    },
-  });
+  insertRenderNode(
+    id,
+    getOrCreateNodeId(parent),
+    "text",
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    null,
+    value,
+  );
 }
 
 function recordNodeAdded(
@@ -243,20 +268,30 @@ function recordNodeAdded(
   node: RenderedTextTree | PrintHook,
   info: RenderTreeNodeInfo,
 ) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const id = getOrCreateNodeId(node);
   if (info.propsSerialized !== undefined) {
     nodeProps.set(id, info.propsSerialized);
   }
-  setEntryId(parent, index, id);
-  emitDevtoolsMessage({
-    type: "render:nodeAdded",
-    parentId: getOrCreateNodeId(parent),
-    node: {
-      id,
-      ...info,
-    },
+  // Remember the kind and source so cached re-adds preserve them
+  nodeKinds.set(node, {
+    kind: info.kind,
+    name: info.name,
+    source: info.source,
   });
+  setEntryId(parent, index, id);
+  insertRenderNode(
+    id,
+    getOrCreateNodeId(parent),
+    info.kind,
+    info.name,
+    info.propsSerialized,
+    info.source?.fileName,
+    info.source?.lineNumber,
+    info.source?.columnNumber,
+    null,
+    undefined,
+  );
 }
 
 function recordSubtreeAdded(
@@ -264,25 +299,35 @@ function recordSubtreeAdded(
   subtree: RenderedTextTree,
   info: RenderTreeNodeInfo = { kind: "fragment" },
 ) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const parentId = getOrCreateNodeId(parentNode);
   // Check if this node was previously rendered (cached) by seeing if it already has an ID
   const existingId = nodeIds.get(subtree);
   const isCached = existingId !== undefined;
   const id = isCached ? existingId : getOrCreateNodeId(subtree);
+  // Merge source from previously-saved nodeKinds if the caller didn't provide one
+  const savedKind = nodeKinds.get(subtree);
+  const source = info.source ?? savedKind?.source;
+  // Remember the kind and source so cached re-adds preserve them
+  nodeKinds.set(subtree, { kind: info.kind, name: info.name, source });
   // Track in entryIds so clearRenderTreeChildren can find and remove it
   if (Array.isArray(parentNode)) {
     const list = getEntryList(parentNode);
     list.push(id);
   }
-  emitDevtoolsMessage({
-    type: "render:nodeAdded",
+  insertRenderNode(
+    id,
     parentId,
-    node: {
-      id,
-      ...info,
-    },
-  });
+    info.kind,
+    info.name,
+    info.propsSerialized,
+    source?.fileName,
+    source?.lineNumber,
+    source?.columnNumber,
+    null,
+    undefined,
+  );
+
   // For cached nodes, we need to recursively re-add all their children since
   // clearRenderTreeChildren removed them when the parent re-rendered
   if (isCached) {
@@ -297,9 +342,15 @@ function recordSubtreeAdded(
  * to be explicitly re-added.
  */
 function recordCachedSubtreeChildrenRecursively(node: RenderedTextTree) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const parentId = getOrCreateNodeId(node);
 
+  // Clear any previously-recorded children from the DB before re-adding.
+  // The in-memory tree may have changed since the last cached re-add
+  // (e.g., a memo inside the cached subtree re-ran), so old DB children
+  // that are no longer in the tree would become orphans.
+  clearRenderTreeChildren(node);
+
   // Rebuild the entryIds for this node
   const list = getEntryList(node);
   list.length = 0;
@@ -312,55 +363,70 @@ function recordCachedSubtreeChildrenRecursively(node: RenderedTextTree) {
         const id = nextId++;
         list.push(id);
         idToNode.set(id, child as unknown as RenderedTextTree);
-        emitDevtoolsMessage({
-          type: "render:nodeAdded",
+        insertRenderNode(
+          id,
           parentId,
-          node: {
-            id,
-            kind: "text",
-            value: child,
-          },
-        });
+          "text",
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          null,
+          child,
+        );
       }
     } else if (Array.isArray(child)) {
-      // Nested RenderedTextTree - record and recurse
+      // Nested RenderedTextTree - record and recurse, preserving original kind and source
       const id = getOrCreateNodeId(child);
       list.push(id);
-      emitDevtoolsMessage({
-        type: "render:nodeAdded",
+      const savedKind = nodeKinds.get(child);
+      insertRenderNode(
+        id,
         parentId,
-        node: {
-          id,
-          kind: "fragment",
-        },
-      });
+        savedKind?.kind ?? "fragment",
+        savedKind?.name,
+        undefined,
+        savedKind?.source?.fileName,
+        savedKind?.source?.lineNumber,
+        savedKind?.source?.columnNumber,
+        null,
+        undefined,
+      );
       recordCachedSubtreeChildrenRecursively(child);
     } else if (isPrintHook(child)) {
       // PrintHook - record and recurse into subtree
       const id = getOrCreateNodeId(child);
       list.push(id);
-      emitDevtoolsMessage({
-        type: "render:nodeAdded",
+      insertRenderNode(
+        id,
         parentId,
-        node: {
-          id,
-          kind: "printHook",
-          name: (child as { name?: string }).name ?? "hook",
-        },
-      });
+        "printHook",
+        (child as { name?: string }).name ?? "hook",
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        null,
+        undefined,
+      );
       if (child.subtree) {
         const subtreeId = getOrCreateNodeId(child.subtree);
         const hookList = getEntryList(child as unknown as RenderedTextTree);
         hookList.length = 0;
         hookList.push(subtreeId);
-        emitDevtoolsMessage({
-          type: "render:nodeAdded",
-          parentId: id,
-          node: {
-            id: subtreeId,
-            kind: "fragment",
-          },
-        });
+        insertRenderNode(
+          subtreeId,
+          id,
+          "fragment",
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          null,
+          undefined,
+        );
         recordCachedSubtreeChildrenRecursively(child.subtree);
       }
     }
@@ -371,20 +437,16 @@ function recordNodePropsUpdated(
   node: RenderedTextTree | PrintHook,
   propsSerialized: string | undefined,
 ) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const id = getOrCreateNodeId(node);
   const previous = nodeProps.get(id);
   if (previous === propsSerialized) return;
   nodeProps.set(id, propsSerialized);
-  emitDevtoolsMessage({
-    type: "render:nodeUpdated",
-    id,
-    propsSerialized,
-  });
+  traceUpdateRenderNodeProps(id, propsSerialized);
 }
 
 function clearRenderTreeChildren(parent: RenderedTextTree) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const list = entryIds.get(parent);
   if (!list || list.length === 0) return;
   const parentId = getOrCreateNodeId(parent);
@@ -403,9 +465,15 @@ function clearRenderTreeChildrenForId(id: number) {
     clearRenderTreeChildren(node);
     return;
   }
+  // For PrintHook nodes: clear the subtree's children, then remove
+  // the subtree node itself (which is a child of this hook).
   const subtree = (node as { subtree?: RenderedTextTree }).subtree;
   if (subtree && Array.isArray(subtree)) {
     clearRenderTreeChildren(subtree);
+    const subtreeId = nodeIds.get(subtree);
+    if (subtreeId !== undefined) {
+      emitNodeRemoved(id, subtreeId);
+    }
   }
 }
 
@@ -414,14 +482,11 @@ function clearRenderTreeChildrenForId(id: number) {
 // ─────────────────────────────────────────────────────────────────────────────
 
 function recordDirectoryNode(node: RenderedTextTree, path: string) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const id = getOrCreateNodeId(node);
   if (directoryNodes.has(id)) return;
   directoryNodes.set(id, { path });
-  emitDevtoolsMessage({
-    type: "files:directoryAdded",
-    path,
-  });
+  insertDirectory(path);
 }
 
 function recordFileNode(
@@ -429,36 +494,25 @@ function recordFileNode(
   path: string,
   filetype: string,
 ) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const id = getOrCreateNodeId(node);
   if (fileNodes.has(id)) return;
   fileNodes.set(id, { path, filetype });
-  emitDevtoolsMessage({
-    type: "files:fileAdded",
-    path,
-    filetype,
-    renderNodeId: id,
-  });
+  insertOutputFile(path, filetype, id);
 }
 
 function removeFileEntriesForNode(node: RenderedTextTree | PrintHook) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const id = nodeIds.get(node);
   if (id === undefined) return;
   const fileInfo = fileNodes.get(id);
   if (fileInfo) {
-    emitDevtoolsMessage({
-      type: "files:fileRemoved",
-      path: fileInfo.path,
-    });
+    deleteOutputFile(fileInfo.path);
     fileNodes.delete(id);
   }
   const dirInfo = directoryNodes.get(id);
   if (dirInfo) {
-    emitDevtoolsMessage({
-      type: "files:directoryRemoved",
-      path: dirInfo.path,
-    });
+    deleteDirectory(dirInfo.path);
     directoryNodes.delete(id);
   }
 }
@@ -482,7 +536,7 @@ export function beginComponent(
     actions,
   } = options;
 
-  if (!isDevtoolsEnabled()) {
+  if (!isDebugEnabled()) {
     return {
       recordDirectory() {},
       recordFile() {},
@@ -501,6 +555,7 @@ export function beginComponent(
       }
     }
     const propsSerialized = serializeRenderTreeProps(propsSource);
+    const resolvedSource = resolveComponentSource(source);
     if (isExisting) {
       clearRenderTreeChildren(node);
     } else {
@@ -508,9 +563,17 @@ export function beginComponent(
         kind: "component",
         name: componentName,
         propsSerialized,
-        source,
+        source: resolvedSource,
       });
     }
+
+    if (isTraceEnabled()) {
+      const ctx = getContext();
+      if (ctx) {
+        updateRenderNodeContext(getOrCreateNodeId(node), ctx.id);
+        updateEffectComponentByContext(ctx.id, componentName);
+      }
+    }
     recordNodePropsUpdated(node, propsSerialized);
     registerRenderNodeActions(node, actions);
 
@@ -610,7 +673,7 @@ export function error(
   error: RenderErrorInfo,
   componentStack: RenderErrorStackEntry[],
 ) {
-  if (!isDevtoolsEnabled()) return;
+  if (!isDebugEnabled()) return;
   const serializedStack = untrack(() =>
     componentStack.map((entry) => ({
       name: entry.name,
@@ -619,21 +682,29 @@ export function error(
       source: entry.source,
     })),
   );
-  const message = {
+  logDevtoolsMessage({
     type: "render:error" as const,
     id: nextErrorId++,
     name: error.name,
     message: error.message,
     stack: error.stack,
     componentStack: serializedStack,
-  };
-  emitDevtoolsMessage(message);
+  });
+
+  insertRenderError(
+    error.name,
+    error.message,
+    error.stack,
+    JSON.stringify(serializedStack),
+  );
 }
 
 export function complete() {
-  emitDevtoolsMessage({ type: "render:complete" });
+  logDevtoolsMessage({ type: "render:complete" });
+  notifyRenderComplete();
 }
 
 export function flushJobsComplete() {
-  emitDevtoolsMessage({ type: "flushJobs:complete" });
+  logDevtoolsMessage({ type: "flushJobs:complete" });
+  notifyFlushComplete();
 }

package/src/debug/source-map.ts

@@ -0,0 +1,135 @@
+/**
+ * Shared source-map resolution utilities.
+ *
+ * Used by both effect source capture (effects.ts) and component source
+ * resolution (render.ts) to convert file paths and resolve source maps.
+ */
+
+import type { SourceLocation } from "../devtools/devtools-protocol.js";
+
+// Lazily loaded findSourceMap from node:module
+let findSourceMap:
+  | ((path: string) =>
+      | {
+          findEntry: (
+            line: number,
+            col: number,
+          ) =>
+            | {
+                originalSource: string;
+                originalLine: number;
+                originalColumn: number;
+              }
+            | undefined;
+        }
+      | undefined)
+  | undefined;
+let loaded = false;
+let realpathSync: ((path: string) => string) | undefined;
+let fileURLToPath: ((url: string | URL) => string) | undefined;
+const realpathCache = new Map<string, string>();
+
+export function loadSourceMapSupport() {
+  if (loaded) return;
+  loaded = true;
+  try {
+    const mod = process.getBuiltinModule?.("node:module") as
+      | typeof import("node:module")
+      | undefined;
+    if (mod && typeof mod.findSourceMap === "function") {
+      findSourceMap = mod.findSourceMap as typeof findSourceMap;
+    }
+  } catch {
+    // not available
+  }
+  try {
+    const fs = process.getBuiltinModule?.("node:fs") as
+      | typeof import("node:fs")
+      | undefined;
+    if (fs) {
+      realpathSync = fs.realpathSync;
+    }
+  } catch {
+    // not available
+  }
+  try {
+    const url = process.getBuiltinModule?.("node:url") as
+      | typeof import("node:url")
+      | undefined;
+    if (url) {
+      fileURLToPath = url.fileURLToPath;
+    }
+  } catch {
+    // not available
+  }
+}
+
+export function getRealPath(fileName: string): string {
+  if (!realpathSync) return fileName;
+  let real = realpathCache.get(fileName);
+  if (real === undefined) {
+    try {
+      real = realpathSync(fileName);
+    } catch {
+      real = fileName;
+    }
+    realpathCache.set(fileName, real);
+  }
+  return real;
+}
+
+export function resolveSourceMap(
+  fileName: string,
+  line: number,
+  col: number,
+): { fileName: string; line: number; col: number } {
+  if (!findSourceMap) return { fileName, line, col };
+  // pnpm uses symlinks; findSourceMap only matches the real path
+  const real = getRealPath(fileName);
+  const map = findSourceMap(real);
+  if (!map) return { fileName, line, col };
+  const entry = map.findEntry(line - 1, col - 1);
+  if (!entry) return { fileName, line, col };
+  return {
+    fileName: entry.originalSource,
+    line: entry.originalLine + 1,
+    col: entry.originalColumn + 1,
+  };
+}
+
+function stripFileUrl(path: string): string {
+  if (!path.startsWith("file://")) return path;
+  if (fileURLToPath) return fileURLToPath(path);
+  return new URL(path).pathname;
+}
+
+/**
+ * Resolve a component source location. Handles:
+ * - `file://` URLs from import.meta.url (converts to file path)
+ * - Source map resolution (maps compiled .js to original .tsx)
+ * - Plain absolute paths (legacy format, returned as-is)
+ */
+export function resolveComponentSource(
+  source: SourceLocation | undefined,
+): SourceLocation | undefined {
+  if (!source?.fileName) return source;
+  loadSourceMapSupport();
+
+  const fileName = stripFileUrl(source.fileName);
+
+  if (source.lineNumber != null && source.columnNumber != null) {
+    // Resolve through source maps to get the original .tsx path
+    const resolved = resolveSourceMap(
+      fileName,
+      source.lineNumber,
+      source.columnNumber,
+    );
+    return {
+      fileName: stripFileUrl(resolved.fileName),
+      lineNumber: resolved.line,
+      columnNumber: resolved.col,
+    };
+  }
+
+  return { ...source, fileName };
+}