@alloy-js/core 0.23.0-dev.0 → 0.23.0-dev.8

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":
@@ -210,6 +92,109 @@ function kvTable(sep = "  ") {
   });
 }
 
-export function shouldDebug() {
-  return typeof process !== "undefined" && !!process.env?.ALLOY_DEBUG;
+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,55 @@
+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 = 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",
+    diagnostics: expect.any(Array),
+  });
+});

package/src/debug/effects.test.tsx

@@ -0,0 +1,96 @@
+import { afterEach, beforeEach, 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, ref } from "../reactivity.js";
+import { renderAsync } from "../render.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, edge, and update messages", async () => {
+  const collector = 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: "effect:refAdded",
+    ref: expect.objectContaining({
+      id: expect.any(Number),
+      kind: "ref",
+    }),
+  });
+  expect(effectsMessages[1]).toMatchObject({
+    type: "effect:refAdded",
+    ref: expect.objectContaining({
+      id: expect.any(Number),
+      kind: "ref",
+    }),
+  });
+  expect(effectsMessages[2]).toMatchObject({
+    type: "effect:effectAdded",
+    effect: expect.objectContaining({
+      id: expect.any(Number),
+    }),
+  });
+  expect(effectsMessages[3]).toMatchObject({
+    type: "effect:track",
+    edge: expect.objectContaining({
+      type: "track",
+      effectId: expect.any(Number),
+      refId: expect.any(Number),
+    }),
+  });
+  expect(effectsMessages[4]).toMatchObject({
+    type: "effect:trigger",
+    edge: expect.objectContaining({
+      type: "trigger",
+      effectId: expect.any(Number),
+      refId: expect.any(Number),
+    }),
+  });
+  expect(effectsMessages[5]).toMatchObject({
+    type: "effect:effectUpdated",
+    effect: expect.objectContaining({
+      id: expect.any(Number),
+    }),
+  });
+});