@alloy-js/core 0.23.0-dev.1 → 0.23.0-dev.11

package/src/{debug.ts → debug/cli.ts}

@@ -1,127 +1,16 @@
-import { isReactive } from "@vue/reactivity";
 import Table from "cli-table3";
 import pc from "picocolors";
-import { contextsByKey } from "./context.js";
-import { Context, getContext } from "./reactivity.js";
+import { contextsByKey } from "../context.js";
+import { getContext, untrack } from "../reactivity.js";
+import { isReactiveTarget } from "./effects.js";
 
-interface DebugInterface {
-  component: {
-    stack(): void;
-    tree(): void;
-    watch(): void;
-    render(): void;
-    context(): void;
-  };
-}
-
-const debug: DebugInterface = {
-  component: {
-    stack: debugStack,
-    tree() {
-      //eslint-disable-next-line no-console
-      console.log("tree");
-    },
-    watch() {
-      //eslint-disable-next-line no-console
-      console.log("watch");
-    },
-    render() {
-      //eslint-disable-next-line no-console
-      console.log("render");
-    },
-    context: debugContext,
-  },
-};
-
-function debugStack() {
-  let currentContext = getContext();
-  let foundContexts: Context[] = [];
-  while (currentContext !== null) {
-    if (
-      currentContext.context &&
-      Object.getOwnPropertySymbols(currentContext.context)[0]
-    ) {
-      foundContexts.push(currentContext);
-    }
-
-    if (
-      currentContext.componentOwner &&
-      currentContext.componentOwner.component.name !== "Provider"
-    ) {
-      process.stdout.write(
-        style.component.name(currentContext.componentOwner.component.name) +
-          "\n",
-      );
-      const table = kvTable();
-      const props = currentContext.componentOwner.props;
-
-      table.push([
-        { hAlign: "right", content: "props" },
-        props && Object.keys(props).length > 0 ?
-          dumpValue(props)
-        : pc.gray("(none)"),
-      ]);
-
-      table.push([
-        { hAlign: "right", content: "contexts" },
-        foundContexts.length > 0 ?
-          foundContexts.map((c) => printContext(c, true)).join("\n")
-        : pc.gray("(none)"),
-      ]);
-
-      process.stdout.write(table.toString() + "\n\n");
-      foundContexts = [];
-    }
-
-    currentContext = currentContext.owner;
-  }
-}
-
-function debugContext() {
-  let currentContext = getContext();
-  while (currentContext !== null) {
-    //eslint-disable-next-line no-console
-    console.log(printContext(currentContext));
-    currentContext = currentContext.owner;
-  }
-}
-function printContext(context: Context, omitOwner: boolean = false) {
-  if (!context.context) return "";
-  const key = Object.getOwnPropertySymbols(context.context)[0];
-  if (!key) return "";
-  const contextDefinition = contextsByKey.get(key);
-  const contextName = contextDefinition?.name ?? "unknown context";
-  const value = context.context[key];
-
-  let output = style.context.name(contextName);
-  if (!omitOwner) {
-    const owner = findContextOwner(context);
-    output += " provided by " + style.component.name(owner);
-  }
-
-  output += "\n" + dumpValue(value) + "\n";
-
-  return output;
-}
-
-function findContextOwner(context: Context) {
-  let currentContext: Context | null = context;
-  while (
-    currentContext &&
-    (currentContext.componentOwner === undefined ||
-      currentContext.componentOwner.component.name === "Provider")
-  ) {
-    currentContext = currentContext.owner;
+function reactiveTag(value: unknown) {
+  if (isReactiveTarget(value)) {
+    return " " + pc.greenBright(`reactive`) + " ";
   }
-
-  return currentContext?.componentOwner?.component.name ?? "unknown";
-}
-declare global {
-  var debug: DebugInterface;
+  return "";
 }
 
-globalThis.debug = debug;
-
 const style = {
   value: {
     primitive(value: string | number | boolean | null | undefined) {
@@ -151,13 +40,6 @@ const style = {
   },
 };
 
-function reactiveTag(value: unknown) {
-  if (isReactive(value)) {
-    return " " + pc.greenBright(`reactive`) + " ";
-  }
-  return "";
-}
-
 function dumpValue(value: unknown, level = 0) {
   switch (typeof value) {
     case "boolean":
@@ -209,3 +91,110 @@ function kvTable(sep = "  ") {
     style: { "padding-left": 0, "padding-right": 0 },
   });
 }
+
+function printContext(
+  context: ReturnType<typeof getContext>,
+  omitOwner = false,
+) {
+  if (!context?.context) return "";
+  const key = Object.getOwnPropertySymbols(context.context)[0];
+  if (!key) return "";
+  const contextDefinition = contextsByKey.get(key);
+  const contextName = contextDefinition?.name ?? "unknown context";
+  const value = context.context[key];
+
+  let output = style.context.name(contextName);
+  if (!omitOwner) {
+    const owner = findContextOwner(context);
+    output += " provided by " + style.component.name(owner);
+  }
+
+  output += "\n" + dumpValue(value) + "\n";
+
+  return output;
+}
+
+function findContextOwner(context: ReturnType<typeof getContext>) {
+  let currentContext = context;
+  while (
+    currentContext &&
+    (currentContext.componentOwner === undefined ||
+      currentContext.componentOwner.component.name === "Provider")
+  ) {
+    currentContext = currentContext.owner;
+  }
+
+  return currentContext?.componentOwner?.component.name ?? "unknown";
+}
+
+export function debugStack() {
+  untrack(() => {
+    let currentContext = getContext();
+    let foundContexts: (typeof currentContext)[] = [];
+    while (currentContext !== null) {
+      if (
+        currentContext.context &&
+        Object.getOwnPropertySymbols(currentContext.context)[0]
+      ) {
+        foundContexts.push(currentContext);
+      }
+
+      if (
+        currentContext.componentOwner &&
+        currentContext.componentOwner.component.name !== "Provider"
+      ) {
+        process.stdout.write(
+          style.component.name(currentContext.componentOwner.component.name) +
+            "\n",
+        );
+        const table = kvTable();
+        const props = currentContext.componentOwner.props;
+
+        table.push([
+          { hAlign: "right", content: "props" },
+          props && Object.keys(props).length > 0 ?
+            dumpValue(props)
+          : pc.gray("(none)"),
+        ]);
+
+        table.push([
+          { hAlign: "right", content: "contexts" },
+          foundContexts.length > 0 ?
+            foundContexts.map((c) => printContext(c, true)).join("\n")
+          : pc.gray("(none)"),
+        ]);
+
+        process.stdout.write(table.toString() + "\n\n");
+        foundContexts = [];
+      }
+
+      currentContext = currentContext.owner;
+    }
+  });
+}
+
+export function debugContext() {
+  untrack(() => {
+    let currentContext = getContext();
+    while (currentContext !== null) {
+      // eslint-disable-next-line no-console
+      console.log(printContext(currentContext));
+      currentContext = currentContext.owner;
+    }
+  });
+}
+
+export function debugTree() {
+  // eslint-disable-next-line no-console
+  console.log("tree");
+}
+
+export function debugWatch() {
+  // eslint-disable-next-line no-console
+  console.log("watch");
+}
+
+export function debugRender() {
+  // eslint-disable-next-line no-console
+  console.log("render");
+}

package/src/debug/diagnostics.test.tsx

@@ -0,0 +1,56 @@
+import { afterEach, beforeEach, expect, it } from "vitest";
+import WebSocket from "ws";
+import {
+  createMessageCollector,
+  type DevtoolsMessage,
+} from "../../testing/devtools-utils.js";
+import { Output } from "../components/Output.jsx";
+import {
+  enableDevtools,
+  resetDevtoolsServerForTests,
+} from "../devtools/devtools-server.js";
+import { DiagnosticsCollector } from "../diagnostics.js";
+import { renderAsync } from "../render.js";
+
+let socket: WebSocket | undefined;
+
+beforeEach(async () => {
+  const server = await enableDevtools({ port: 0 });
+  socket = new WebSocket(`ws://127.0.0.1:${server.port}`);
+
+  await new Promise<void>((resolve, reject) => {
+    socket?.once("open", resolve);
+    socket?.once("error", reject);
+  });
+});
+
+afterEach(async () => {
+  if (socket) {
+    socket.close();
+    socket = undefined;
+  }
+
+  await resetDevtoolsServerForTests();
+});
+
+it("emits diagnostics:report messages", async () => {
+  const collector = await createMessageCollector(socket!);
+  const diagnostics = new DiagnosticsCollector();
+
+  diagnostics.emit({ message: "Test diagnostic", severity: "warning" });
+
+  await renderAsync(<Output>{"ok"}</Output>);
+
+  const messages = await collector.waitForRender();
+  const diagnosticsMessages = messages.filter(
+    (m: DevtoolsMessage) => m.type === "diagnostics:report",
+  );
+
+  collector.stop();
+
+  expect(diagnosticsMessages[0]).toMatchObject({
+    type: "diagnostics:report",
+    message: "Test diagnostic",
+    severity: "warning",
+  });
+});

package/src/debug/effects.test.tsx

@@ -0,0 +1,301 @@
+import { shallowReactive } from "@vue/reactivity";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import WebSocket from "ws";
+import {
+  createMessageCollector,
+  filterEffectsMessages,
+} from "../../testing/devtools-utils.js";
+import { Output } from "../components/Output.jsx";
+import {
+  enableDevtools,
+  resetDevtoolsServerForTests,
+} from "../devtools/devtools-server.js";
+import { effect, memo, ref } from "../reactivity.js";
+import { renderAsync } from "../render.js";
+import { flushJobsAsync } from "../scheduler.js";
+import { debug } from "./index.js";
+
+let socket: WebSocket | undefined;
+
+beforeEach(async () => {
+  debug.effect.reset();
+
+  const server = await enableDevtools({ port: 0 });
+  socket = new WebSocket(`ws://127.0.0.1:${server.port}`);
+  await new Promise<void>((resolve, reject) => {
+    socket?.once("open", resolve);
+    socket?.once("error", reject);
+  });
+});
+
+afterEach(async () => {
+  if (socket) {
+    socket.close();
+    socket = undefined;
+  }
+
+  await resetDevtoolsServerForTests();
+  debug.effect.reset();
+});
+
+it("emits effect, ref, and track messages", async () => {
+  const collector = await createMessageCollector(socket!);
+  const r1 = ref(0);
+  const r2 = ref(1);
+
+  effect(() => {
+    r1.value = r2.value + 1;
+  });
+
+  await renderAsync(<Output>{"ok"}</Output>);
+
+  const messages = await collector.waitForRender();
+  const effectsMessages = filterEffectsMessages(messages);
+  collector.stop();
+
+  expect(effectsMessages[0]).toMatchObject({
+    type: "ref:added",
+    id: expect.any(Number),
+    kind: "ref",
+  });
+  expect(effectsMessages[1]).toMatchObject({
+    type: "ref:added",
+    id: expect.any(Number),
+    kind: "ref",
+  });
+  expect(effectsMessages[2]).toMatchObject({
+    type: "effect:added",
+    id: expect.any(Number),
+  });
+  expect(effectsMessages[3]).toMatchObject({
+    type: "edge:track",
+    effect_id: expect.any(Number),
+    ref_id: expect.any(Number),
+  });
+});
+
+describe("unified trigger edges", () => {
+  it("ref trigger records consumer and producer (caused_by)", async () => {
+    const collector = await createMessageCollector(socket!);
+    const r = ref(0);
+
+    // Producer effect writes to the ref
+    const producerName = "test-producer";
+    effect(
+      () => {
+        r.value = 42;
+      },
+      undefined,
+      { debug: { name: producerName } },
+    );
+
+    // Consumer effect reads the ref
+    const consumerName = "test-consumer";
+    effect(
+      () => {
+        void r.value;
+      },
+      undefined,
+      { debug: { name: consumerName } },
+    );
+
+    await renderAsync(<Output>{"ok"}</Output>);
+    const renderMessages = await collector.waitForRender();
+
+    // Trigger the consumer by changing the ref
+    r.value = 99;
+    await flushJobsAsync();
+    const flushMessages = await collector.waitForFlush();
+    collector.stop();
+
+    // Find the trigger edge on the consumer
+    const triggerEdges = flushMessages.filter(
+      (m: any) => m.type === "edge:trigger" && m.ref_id !== undefined,
+    );
+    expect(triggerEdges.length).toBeGreaterThan(0);
+
+    // The trigger edge should be on the consumer effect
+    const effectsMessages = filterEffectsMessages(renderMessages);
+    const consumerEffect = effectsMessages.find(
+      (m: any) => m.type === "effect:added" && m.name === consumerName,
+    );
+    expect(consumerEffect).toBeDefined();
+
+    const consumerTrigger = triggerEdges.find(
+      (m: any) => m.effect_id === consumerEffect!.id,
+    );
+    expect(consumerTrigger).toBeDefined();
+    // caused_by is null since the mutation happens outside any effect (top-level r.value = 99)
+    expect(consumerTrigger!.caused_by).toBeNull();
+  });
+
+  it("reactive object trigger records consumer and producer", async () => {
+    const collector = await createMessageCollector(socket!);
+    const map = shallowReactive(new Map<string, number>());
+
+    // Consumer: memo reads the map
+    const sum = memo(() => {
+      let total = 0;
+      for (const v of map.values()) total += v;
+      return total;
+    });
+
+    // Producer: effect mutates the map
+    effect(
+      () => {
+        const _s = sum();
+        map.set("key", 42);
+      },
+      undefined,
+      { debug: { name: "producer-effect" } },
+    );
+
+    await renderAsync(<Output>{"ok"}</Output>);
+
+    const messages = await collector.waitForRender();
+    const effectsMessages = filterEffectsMessages(messages);
+    collector.stop();
+
+    // Find trigger edges for the reactive map
+    const triggerEdges = effectsMessages.filter(
+      (m: any) => m.type === "edge:trigger" && m.target_id !== undefined,
+    );
+    expect(triggerEdges.length).toBeGreaterThan(0);
+
+    // The trigger should have caused_by (the producer effect)
+    const producerEffect = effectsMessages.find(
+      (m: any) => m.type === "effect:added" && m.name === "producer-effect",
+    );
+    expect(producerEffect).toBeDefined();
+
+    const withCause = triggerEdges.filter(
+      (m: any) => m.caused_by === producerEffect!.id,
+    );
+    expect(withCause.length).toBeGreaterThan(0);
+    expect(withCause[0]).toMatchObject({
+      type: "edge:trigger",
+      effect_id: expect.any(Number),
+      caused_by: producerEffect!.id,
+      target_id: expect.any(Number),
+    });
+  });
+
+  it("trigger outside any effect has no caused_by", async () => {
+    const collector = await createMessageCollector(socket!);
+    const r = ref(0);
+
+    // Consumer effect
+    effect(() => {
+      void r.value;
+    });
+
+    await renderAsync(<Output>{"ok"}</Output>);
+    await collector.waitForRender();
+
+    // Trigger from top-level (outside any effect)
+    r.value = 1;
+    await flushJobsAsync();
+    const flushMessages = await collector.waitForFlush();
+    collector.stop();
+
+    const triggerEdges = flushMessages.filter(
+      (m: any) => m.type === "edge:trigger",
+    );
+    expect(triggerEdges.length).toBeGreaterThan(0);
+    // caused_by should be null (no producer effect)
+    expect(triggerEdges[0].caused_by).toBeNull();
+  });
+
+  it("multiple consumers of same ref get separate trigger edges", async () => {
+    const collector = await createMessageCollector(socket!);
+    const r = ref(0);
+
+    // Two consumer effects
+    effect(
+      () => {
+        void r.value;
+      },
+      undefined,
+      { debug: { name: "consumer-a" } },
+    );
+    effect(
+      () => {
+        void r.value;
+      },
+      undefined,
+      { debug: { name: "consumer-b" } },
+    );
+
+    await renderAsync(<Output>{"ok"}</Output>);
+    const renderMessages = await collector.waitForRender();
+
+    // Find the effect IDs
+    const effectsMessages = filterEffectsMessages(renderMessages);
+    const consumerA = effectsMessages.find(
+      (m: any) => m.type === "effect:added" && m.name === "consumer-a",
+    );
+    const consumerB = effectsMessages.find(
+      (m: any) => m.type === "effect:added" && m.name === "consumer-b",
+    );
+    expect(consumerA).toBeDefined();
+    expect(consumerB).toBeDefined();
+
+    // Trigger both by changing the ref
+    r.value = 1;
+    await flushJobsAsync();
+    const flushMessages = await collector.waitForFlush();
+    collector.stop();
+
+    const triggerEdges = flushMessages.filter(
+      (m: any) => m.type === "edge:trigger",
+    );
+
+    // Each consumer gets its own trigger edge
+    const aTrigger = triggerEdges.find(
+      (m: any) => m.effect_id === consumerA!.id,
+    );
+    const bTrigger = triggerEdges.find(
+      (m: any) => m.effect_id === consumerB!.id,
+    );
+    expect(aTrigger).toBeDefined();
+    expect(bTrigger).toBeDefined();
+    // Both reference the same ref
+    expect(aTrigger!.ref_id).toBe(bTrigger!.ref_id);
+  });
+
+  it("no triggered-by or duplicate trigger edge types exist", async () => {
+    const collector = await createMessageCollector(socket!);
+    const r = ref(0);
+    const map = shallowReactive(new Map<string, number>());
+
+    effect(() => {
+      void r.value;
+      for (const _v of map.values()) {
+        /* track */
+      }
+    });
+
+    effect(() => {
+      r.value = 1;
+      map.set("x", 1);
+    });
+
+    await renderAsync(<Output>{"ok"}</Output>);
+    const messages = await collector.waitForRender();
+    collector.stop();
+
+    // No edge:triggered-by messages should exist
+    const triggeredBy = messages.filter(
+      (m: any) => m.type === "edge:triggered-by",
+    );
+    expect(triggeredBy.length).toBe(0);
+
+    // All edge types should be edge:track or edge:trigger only
+    const edges = messages.filter(
+      (m: any) => typeof m.type === "string" && m.type.startsWith("edge:"),
+    );
+    for (const edge of edges) {
+      expect(["edge:track", "edge:trigger"]).toContain(edge.type);
+    }
+  });
+});