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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alloy-js/core",
-  "version": "0.23.0-dev.10",
+  "version": "0.23.0-dev.12",
   "description": "",
   "repository": {
     "type": "git",
@@ -10,27 +10,33 @@
   "exports": {
     ".": {
       "browser": "./dist/src/index.browser.js",
+      "development": "./dist/dev/src/index.js",
       "import": "./dist/src/index.js"
     },
     "./jsx-runtime": {
       "types": "./dist/src/jsx-runtime.d.ts",
+      "development": "./dist/dev/src/jsx-runtime.js",
       "import": "./dist/src/jsx-runtime.js"
     },
     "./testing": {
+      "development": "./dist/dev/testing/index.js",
       "import": "./dist/testing/index.js"
     },
     "./testing/matchers": {
       "types": "./testing/vitest.d.ts"
     },
     "./stc": {
+      "development": "./dist/dev/src/components/stc/index.js",
       "import": "./dist/src/components/stc/index.js"
     },
     "./components": {
+      "development": "./dist/dev/src/components/index.js",
       "import": "./dist/src/components/index.js"
     },
     "./devtools": {
       "types": "./dist/src/devtools-entry.d.ts",
       "browser": "./dist/src/devtools-entry.browser.js",
+      "development": "./dist/dev/src/devtools-entry.js",
       "import": "./dist/src/devtools-entry.js"
     }
   },
@@ -56,7 +62,7 @@
     "ws": "^8.19.0"
   },
   "devDependencies": {
-    "@alloy-js/cli": "~0.22.0 || >= 0.23.0-dev.3",
+    "@alloy-js/cli": "~0.22.0 || >= 0.23.0-dev.4",
     "@alloy-js/rollup-plugin": "~0.1.0 || >= 0.1.1-dev.1",
     "@microsoft/api-extractor": "~7.52.8",
     "@rollup/plugin-typescript": "^12.1.2",
@@ -68,7 +74,7 @@
   "type": "module",
   "scripts": {
     "generate-docs": "api-extractor run",
-    "build": "alloy build && pnpm run generate-docs",
+    "build": "alloy build --with-dev && pnpm run generate-docs",
     "clean": "rimraf dist/ .temp/",
     "test": "vitest run",
     "test:watch": "vitest -w",

package/src/binder.ts

@@ -643,54 +643,63 @@ export function createOutputBinder(options: BinderOptions = {}): Binder {
   }
 
   function notifySymbolCreated(symbol: OutputSymbol): void {
-    effect<Refkey[]>((oldRefkeys) => {
-      if (symbol.refkeys) {
-        debug.trace(
-          TracePhase.resolve.pending,
-          () => `Notifying resolutions for ${formatRefkeys(symbol.refkeys)}.`,
-        );
-      }
-
-      if (oldRefkeys) {
-        for (const refkey of oldRefkeys) {
-          if (!symbol.refkeys.includes(refkey)) {
-            // remove the old refkey from the known declarations
-            knownDeclarations.delete(refkey);
+    effect<Refkey[]>(
+      (oldRefkeys) => {
+        if (symbol.refkeys) {
+          debug.trace(
+            TracePhase.resolve.pending,
+            () => `Notifying resolutions for ${formatRefkeys(symbol.refkeys)}.`,
+          );
+        }
 
-            // reset any waiting declarations
-            if (waitingDeclarations.has(refkey)) {
-              const signal = waitingDeclarations.get(refkey)!;
-              signal.value = undefined;
+        if (oldRefkeys) {
+          for (const refkey of oldRefkeys) {
+            if (!symbol.refkeys.includes(refkey)) {
+              // remove the old refkey from the known declarations
+              knownDeclarations.delete(refkey);
+
+              // reset any waiting declarations
+              if (waitingDeclarations.has(refkey)) {
+                const signal = waitingDeclarations.get(refkey)!;
+                signal.value = undefined;
+              }
             }
           }
         }
-      }
 
-      for (const refkey of symbol.refkeys) {
-        // notify those waiting for this refkey
-        knownDeclarations.set(refkey, symbol);
-        if (waitingDeclarations.has(refkey)) {
-          const signal = waitingDeclarations.get(refkey)!;
-          signal.value = symbol;
-        }
+        for (const refkey of symbol.refkeys) {
+          // notify those waiting for this refkey
+          knownDeclarations.set(refkey, symbol);
+          if (waitingDeclarations.has(refkey)) {
+            const signal = waitingDeclarations.get(refkey)!;
+            signal.value = symbol;
+          }
 
-        const scope = symbol.scope;
-        if (!scope) {
-          continue;
-        }
+          const scope = symbol.scope;
+          if (!scope) {
+            continue;
+          }
 
-        // notify those waiting for this symbol name
-        const waitingScope = waitingSymbolNames.get(scope);
-        if (waitingScope) {
-          const waitingName = waitingScope.get(symbol.name);
-          if (waitingName) {
-            waitingName.value = symbol;
+          // notify those waiting for this symbol name
+          const waitingScope = waitingSymbolNames.get(scope);
+          if (waitingScope) {
+            const waitingName = waitingScope.get(symbol.name);
+            if (waitingName) {
+              waitingName.value = symbol;
+            }
           }
         }
-      }
 
-      return [...symbol.refkeys];
-    });
+        return [...symbol.refkeys];
+      },
+      undefined,
+      {
+        debug: {
+          name: "binder:notifySymbolCreated",
+          type: "binder",
+        },
+      },
+    );
   }
 }
 

package/src/components/For.tsx

@@ -80,15 +80,19 @@ export function For<
   const cb = props.children;
   const options = baseListPropsToMapJoinArgs(props);
   options.skipFalsy = props.skipFalsy;
-  return memo(() => {
-    const maybeRef = props.each;
+  return memo(
+    () => {
+      const maybeRef = props.each;
 
-    return (mapJoin as any)(
-      typeof maybeRef === "function" ? maybeRef : (
-        () => (isRef(maybeRef) ? maybeRef.value : maybeRef)
-      ),
-      cb,
-      options,
-    );
-  });
+      return (mapJoin as any)(
+        typeof maybeRef === "function" ? maybeRef : (
+          () => (isRef(maybeRef) ? maybeRef.value : maybeRef)
+        ),
+        cb,
+        options,
+      );
+    },
+    undefined,
+    "For",
+  );
 }

package/src/components/List.tsx

@@ -57,10 +57,13 @@ export interface ListProps extends BaseListProps {
  */
 export function List(props: ListProps) {
   const [rest, forProps] = splitProps(props, ["children"]);
-  const resolvedChildren = memo(() =>
-    childrenArray(() => rest.children, {
-      preserveFragments: true,
-    }),
+  const resolvedChildren = memo(
+    () =>
+      childrenArray(() => rest.children, {
+        preserveFragments: true,
+      }),
+    undefined,
+    "List:children",
   );
   return (
     <For each={resolvedChildren} {...forProps} skipFalsy>

package/src/components/Switch.tsx

@@ -27,15 +27,19 @@ export function Switch(props: SwitchProps) {
   const children = childrenArray(() => props.children);
   const matches = findKeyedChildren(children, matchTag);
 
-  return memo(() => {
-    for (const match of matches) {
-      if (match.props.when || match.props.else) {
-        return match.props.children;
+  return memo(
+    () => {
+      for (const match of matches) {
+        if (match.props.when || match.props.else) {
+          return match.props.children;
+        }
       }
-    }
 
-    return undefined;
-  });
+      return undefined;
+    },
+    undefined,
+    "Switch",
+  );
 }
 
 export interface MatchProps {

package/src/debug/diagnostics.test.tsx

@@ -34,7 +34,7 @@ afterEach(async () => {
 });
 
 it("emits diagnostics:report messages", async () => {
-  const collector = createMessageCollector(socket!);
+  const collector = await createMessageCollector(socket!);
   const diagnostics = new DiagnosticsCollector();
 
   diagnostics.emit({ message: "Test diagnostic", severity: "warning" });
@@ -50,6 +50,7 @@ it("emits diagnostics:report messages", async () => {
 
   expect(diagnosticsMessages[0]).toMatchObject({
     type: "diagnostics:report",
-    diagnostics: expect.any(Array),
+    message: "Test diagnostic",
+    severity: "warning",
   });
 });

package/src/debug/effects.test.tsx

@@ -1,4 +1,5 @@
-import { afterEach, beforeEach, expect, it } from "vitest";
+import { shallowReactive } from "@vue/reactivity";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import WebSocket from "ws";
 import {
   createMessageCollector,
@@ -9,8 +10,9 @@ import {
   enableDevtools,
   resetDevtoolsServerForTests,
 } from "../devtools/devtools-server.js";
-import { effect, ref } from "../reactivity.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;
@@ -36,54 +38,264 @@ afterEach(async () => {
   debug.effect.reset();
 });
 
-it("emits effect, ref, edge, and update messages", async () => {
-  const collector = createMessageCollector(socket!);
+it("emits effect, ref, and track messages", async () => {
+  const collector = await createMessageCollector(socket!);
   const r1 = ref(0);
+  const r2 = ref(1);
 
-  // Create an effect that reads r1.
-  let observed = 0;
   effect(() => {
-    observed = r1.value;
+    r1.value = r2.value + 1;
   });
 
-  // Mutate r1 to trigger the effect.
-  r1.value = 42;
-
   await renderAsync(<Output>{"ok"}</Output>);
 
   const messages = await collector.waitForRender();
   const effectsMessages = filterEffectsMessages(messages);
   collector.stop();
 
-  // Check that core message types are present
-  const byType = (type: string) =>
-    effectsMessages.filter((m: any) => m.type === type);
-  expect(byType("effect:refAdded").length).toBeGreaterThanOrEqual(1);
-  expect(byType("effect:effectAdded").length).toBeGreaterThanOrEqual(1);
-  expect(byType("effect:track").length).toBeGreaterThanOrEqual(1);
-  expect(byType("effect:trigger").length).toBeGreaterThanOrEqual(1);
-  expect(byType("effect:effectUpdated").length).toBeGreaterThanOrEqual(1);
-
-  // Verify message shapes
-  expect(byType("effect:refAdded")[0]).toMatchObject({
-    ref: expect.objectContaining({ id: expect.any(Number), kind: "ref" }),
+  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();
   });
-  expect(byType("effect:effectAdded")[0]).toMatchObject({
-    effect: expect.objectContaining({ id: expect.any(Number) }),
+
+  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),
+    });
   });
-  expect(byType("effect:track")[0]).toMatchObject({
-    edge: expect.objectContaining({
-      type: "track",
-      effectId: expect.any(Number),
-      refId: 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();
   });
-  expect(byType("effect:trigger")[0]).toMatchObject({
-    edge: expect.objectContaining({
-      effectId: expect.any(Number),
-      refId: expect.any(Number),
-    }),
+
+  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);
   });
 
-  expect(observed).toBe(42);
+  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);
+    }
+  });
 });