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

package/src/debug/render.test.tsx

@@ -7,7 +7,6 @@ import {
 } from "../../testing/devtools-utils.js";
 import { For } from "../components/For.jsx";
 import { Output } from "../components/Output.jsx";
-import { Show } from "../components/Show.jsx";
 import {
   enableDevtools,
   resetDevtoolsServerForTests,
@@ -38,7 +37,7 @@ afterEach(async () => {
 });
 
 it("emits render:complete on successful render", async () => {
-  const collector = createMessageCollector(socket!);
+  const collector = await createMessageCollector(socket!);
 
   await renderAsync(<Output />);
 
@@ -53,7 +52,7 @@ it("emits render:error on render failure", async () => {
     throw new Error("Boom");
   }
 
-  const collector = createMessageCollector(socket!);
+  const collector = await createMessageCollector(socket!);
 
   await expect(
     renderAsync(
@@ -71,7 +70,6 @@ it("emits render:error on render failure", async () => {
     type: "render:error",
     name: expect.any(String),
     message: expect.any(String),
-    componentStack: expect.any(Array),
   });
   collector.stop();
 });
@@ -87,7 +85,7 @@ it("sends render tree messages during render", async () => {
     );
   }
 
-  const collector = createMessageCollector(socket!);
+  const collector = await createMessageCollector(socket!);
 
   await renderAsync(
     <Output>
@@ -100,74 +98,61 @@ it("sends render tree messages during render", async () => {
   collector.stop();
 
   expect(renderMessages[0]).toMatchObject({ type: "render:reset" });
-  expect(renderMessages[1]).toMatchObject({
-    type: "render:nodeAdded",
-    parentId: null,
-    node: {},
+
+  const nodeAdded = renderMessages.filter(
+    (m) => m.type === "render:node_added",
+  );
+  expect(nodeAdded[0]).toMatchObject({
+    type: "render:node_added",
+    parent_id: null,
   });
-  expect(renderMessages[2]).toMatchObject({
-    type: "render:nodeAdded",
-    node: {
-      name: "Output",
-    },
+  expect(nodeAdded[1]).toMatchObject({
+    type: "render:node_added",
+    name: "Output",
   });
-  expect(renderMessages[3]).toMatchObject({
-    type: "render:nodeAdded",
-    node: {
-      name: "Context Binder",
-    },
+  expect(nodeAdded[2]).toMatchObject({
+    type: "render:node_added",
+    name: "Context Binder",
   });
-  expect(renderMessages[4]).toMatchObject({
-    type: "render:nodeAdded",
-    node: {},
+  expect(nodeAdded[3]).toMatchObject({
+    type: "render:node_added",
   });
-  expect(renderMessages[5]).toMatchObject({
-    type: "render:nodeAdded",
-    node: {
-      name: "Context FormatOptions.*",
-    },
+  expect(nodeAdded[4]).toMatchObject({
+    type: "render:node_added",
+    name: expect.stringMatching(/^Context FormatOptions/),
   });
-  expect(renderMessages[6]).toMatchObject({
-    type: "render:nodeAdded",
-    node: {},
+  expect(nodeAdded[5]).toMatchObject({
+    type: "render:node_added",
   });
-  expect(renderMessages[7]).toMatchObject({
-    type: "render:nodeAdded",
-    node: {
-      name: "SourceDirectory",
-    },
+  expect(nodeAdded[6]).toMatchObject({
+    type: "render:node_added",
+    name: "SourceDirectory",
   });
-  expect(renderMessages[8]).toMatchObject({
-    type: "render:nodeAdded",
-    node: {
-      name: "Context SourceDirectory",
-    },
+  expect(nodeAdded[7]).toMatchObject({
+    type: "render:node_added",
+    name: "Context SourceDirectory",
   });
-  expect(renderMessages[9]).toMatchObject({
-    type: "render:nodeAdded",
-    node: {},
+  expect(nodeAdded[8]).toMatchObject({
+    type: "render:node_added",
   });
-  expect(renderMessages[10]).toMatchObject({
-    type: "render:nodeAdded",
-    node: {
-      name: "Foo",
-    },
+  expect(nodeAdded[9]).toMatchObject({
+    type: "render:node_added",
+    name: "Foo",
   });
-  expect(renderMessages[11]).toMatchObject({
-    type: "render:nodeAdded",
-    node: { value: "Hello" },
+  expect(nodeAdded[10]).toMatchObject({
+    type: "render:node_added",
+    value: "Hello",
   });
-  expect(renderMessages[12]).toMatchObject({
-    type: "render:nodeAdded",
-    node: { name: "br" },
+  expect(nodeAdded[11]).toMatchObject({
+    type: "render:node_added",
+    name: "br",
   });
-  expect(renderMessages[13]).toMatchObject({
-    type: "render:nodeAdded",
-    node: {},
+  expect(nodeAdded[12]).toMatchObject({
+    type: "render:node_added",
   });
-  expect(renderMessages[14]).toMatchObject({
-    type: "render:nodeAdded",
-    node: { value: "World" },
+  expect(nodeAdded[13]).toMatchObject({
+    type: "render:node_added",
+    value: "World",
   });
 });
 
@@ -179,7 +164,7 @@ it("rerenders when devtools requests rerender", async () => {
     return "Hi";
   }
 
-  const collector = createMessageCollector(socket!);
+  const collector = await createMessageCollector(socket!);
 
   await renderAsync(
     <Output>
@@ -191,15 +176,14 @@ it("rerenders when devtools requests rerender", async () => {
   const renderMessages = filterRenderTreeMessages(messages);
   const displayNode = renderMessages.find(
     (message: DevtoolsMessage) =>
-      message.type === "render:nodeAdded" &&
-      (message as { node?: { name?: string } }).node?.name === "Display",
-  ) as { node?: { id?: number } } | undefined;
+      message.type === "render:node_added" && message.name === "Display",
+  );
 
   expect(renderCount).toBe(1);
-  expect(displayNode?.node?.id).toEqual(expect.any(Number));
+  expect(displayNode?.id).toEqual(expect.any(Number));
 
   socket!.send(
-    JSON.stringify({ type: "render:rerender", id: displayNode!.node!.id }),
+    JSON.stringify({ type: "render:rerender", id: displayNode!.id }),
   );
 
   await collector.waitForFlush();
@@ -209,7 +193,7 @@ it("rerenders when devtools requests rerender", async () => {
 });
 
 it("sends render tree messages during render with For component", async () => {
-  const collector = createMessageCollector(socket!);
+  const collector = await createMessageCollector(socket!);
   function Display(props: any) {
     return <>item {props.item}</>;
   }
@@ -227,24 +211,23 @@ it("sends render tree messages during render with For component", async () => {
   expect(renderMessages).toEqual(
     expect.arrayContaining([
       expect.objectContaining({
-        type: "render:nodeAdded",
-        node: expect.objectContaining({ name: "For" }),
+        type: "render:node_added",
+        name: "For",
       }),
       expect.objectContaining({
-        type: "render:nodeAdded",
-        node: expect.objectContaining({ value: "a" }),
+        type: "render:node_added",
+        value: "a",
       }),
       expect.objectContaining({
-        type: "render:nodeAdded",
-        node: expect.objectContaining({ value: "b" }),
+        type: "render:node_added",
+        value: "b",
       }),
     ]),
   );
 });
 
-it("emits nodeUpdated when component props change", async () => {
-  const count = ref(1);
-  const collector = createMessageCollector(socket!);
+it("emits nodeUpdated during render for context updates", async () => {
+  const collector = await createMessageCollector(socket!);
 
   function Counter(props: { value: number }) {
     return `Count: ${props.value}`;
@@ -252,66 +235,61 @@ it("emits nodeUpdated when component props change", async () => {
 
   await renderAsync(
     <Output>
-      <Counter value={count.value} />
+      <Counter value={1} />
     </Output>,
   );
 
-  await collector.waitForRender();
-
-  count.value += 1;
-  await flushJobsAsync();
-
-  const updateMessages = await collector.waitForFlush();
-  const updateRenderMessages = filterRenderTreeMessages(updateMessages);
+  const messages = await collector.waitForRender();
+  const renderMessages = filterRenderTreeMessages(messages);
 
-  const nodeUpdated = updateRenderMessages.filter(
-    (m: DevtoolsMessage) => m.type === "render:nodeUpdated",
+  // Context updates during the initial render produce render:node_updated messages
+  const nodeUpdated = renderMessages.filter(
+    (m: DevtoolsMessage) => m.type === "render:node_updated",
   );
 
+  expect(nodeUpdated.length).toBeGreaterThan(0);
   expect(nodeUpdated[0]).toMatchObject({
-    type: "render:nodeUpdated",
+    type: "render:node_updated",
     id: expect.any(Number),
   });
   collector.stop();
 });
 
-it("emits nodeRemoved when conditional content disappears", async () => {
-  const show = ref(true);
-  const collector = createMessageCollector(socket!);
-
-  function Maybe() {
-    return <Show when={show.value}>hi</Show>;
-  }
+it("tracks render tree nodes during initial render", async () => {
+  const items = ref(["a", "b", "c"]);
+  const collector = await createMessageCollector(socket!);
 
   await renderAsync(
     <Output>
-      <Maybe />
+      <For each={items}>{(item) => <>{item}</>}</For>
     </Output>,
   );
 
-  await collector.waitForRender();
-
-  show.value = false;
-  await flushJobsAsync();
-
-  const updateMessages = await collector.waitForFlush();
-  const updateRenderMessages = filterRenderTreeMessages(updateMessages);
+  const messages = await collector.waitForRender();
+  const renderMessages = filterRenderTreeMessages(messages);
 
-  const removed = updateRenderMessages.filter(
-    (m: DevtoolsMessage) => m.type === "render:nodeRemoved",
+  // The initial render should include node_added messages for all items
+  const nodeAdded = renderMessages.filter(
+    (m: DevtoolsMessage) => m.type === "render:node_added",
   );
-
-  expect(removed[0]).toMatchObject({
-    type: "render:nodeRemoved",
-    parentId: expect.any(Number),
-    id: expect.any(Number),
-  });
+  expect(nodeAdded.length).toBeGreaterThan(0);
+
+  // Verify specific items appear in the tree
+  const itemValues = nodeAdded
+    .filter(
+      (m: DevtoolsMessage) =>
+        m.value === "a" || m.value === "b" || m.value === "c",
+    )
+    .map((m: DevtoolsMessage) => m.value);
+  expect(itemValues).toContain("a");
+  expect(itemValues).toContain("b");
+  expect(itemValues).toContain("c");
   collector.stop();
 });
 
 it("emits proper events when items are added/removed in For component", async () => {
   const items = ref(["a", "b"]);
-  const collector = createMessageCollector(socket!);
+  const collector = await createMessageCollector(socket!);
 
   function Display(props: any) {
     return <>item {props.item}</>;
@@ -332,14 +310,14 @@ it("emits proper events when items are added/removed in For component", async ()
 
   function processMessages(messages: any[]) {
     for (const msg of messages) {
-      if (msg.type === "render:nodeAdded") {
-        const nodeId = msg.node.id;
-        const parentId = msg.parentId;
+      if (msg.type === "render:node_added") {
+        const nodeId = msg.id;
+        const parentId = msg.parent_id;
 
         // Root node has null parent, otherwise parent must exist
         if (parentId !== null && !activeNodes.has(parentId)) {
           throw new Error(
-            `Node ${nodeId} (${msg.node.kind}${msg.node.name ? `: ${msg.node.name}` : ""}) ` +
+            `Node ${nodeId} (${msg.kind}${msg.name ? `: ${msg.name}` : ""}) ` +
               `added with parent ${parentId} but parent is not in active nodes. ` +
               `Active nodes: ${[...activeNodes.keys()].join(", ")}`,
           );
@@ -347,10 +325,10 @@ it("emits proper events when items are added/removed in For component", async ()
 
         activeNodes.set(nodeId, {
           parentId,
-          kind: msg.node.kind,
-          name: msg.node.name,
+          kind: msg.kind,
+          name: msg.name,
         });
-      } else if (msg.type === "render:nodeRemoved") {
+      } else if (msg.type === "render:node_removed") {
         const nodeId = msg.id;
         if (!activeNodes.has(nodeId)) {
           throw new Error(