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

package/src/reactivity.ts

@@ -9,6 +9,7 @@ import {
   computed as vueComputed,
   effect as vueEffect,
   ref as vueRef,
+  shallowReactive as vueShallowReactive,
   shallowRef as vueShallowRef,
   toRef as vueToRef,
   toRefs as vueToRefs,
@@ -23,40 +24,6 @@ import { Children, ComponentCreator } from "./runtime/component.js";
 import { scheduler } from "./scheduler.js";
 import type { OutputSymbol } from "./symbols/output-symbol.js";
 
-function attachEffectWriteDebug(refValue: Ref<unknown>, kind: string) {
-  if (!isDevtoolsEnabled()) return;
-  const descriptor =
-    Object.getOwnPropertyDescriptor(refValue, "value") ??
-    Object.getOwnPropertyDescriptor(Object.getPrototypeOf(refValue), "value");
-  if (!descriptor?.get || !descriptor?.set) return;
-  if ((refValue as any).__alloyDebugWrapped) return;
-  Object.defineProperty(refValue, "value", {
-    get: descriptor.get,
-    set(value: unknown) {
-      descriptor.set!.call(this, value);
-      const effectId = globalContext?.meta?.effectId;
-      if (effectId !== undefined && effectId !== -1) {
-        const id = refId(refValue);
-        debug.effect.ensureRef({ id, kind });
-        debug.effect.trigger({
-          effectId,
-          target: refValue,
-          refId: id,
-          location: captureSourceLocation(),
-          kind: "trigger",
-        });
-      }
-    },
-    enumerable: descriptor.enumerable ?? true,
-    configurable: true,
-  });
-  Object.defineProperty(refValue, "__alloyDebugWrapped", {
-    value: true,
-    enumerable: false,
-    configurable: false,
-  });
-}
-
 if ((globalThis as any).__ALLOY__) {
   throw new Error(
     "Multiple versions of Alloy are loaded for this project. This will likely cause undesirable behavior.",
@@ -65,7 +32,8 @@ if ((globalThis as any).__ALLOY__) {
 (globalThis as any).__ALLOY__ = true;
 
 export function getElementCache() {
-  return getContext()!.elementCache;
+  const ctx = getContext()!;
+  return (ctx.elementCache ??= new Map());
 }
 
 export type ElementCacheKey =
@@ -79,8 +47,12 @@ export interface Disposable {
   (): void;
 }
 
+let contextIdCounter = 0;
+
 export interface Context {
-  disposables: Disposable[];
+  /** Monotonic numeric ID for trace/debug correlation. */
+  id: number;
+  disposables?: Disposable[];
   owner: Context | null;
 
   // context providers
@@ -93,7 +65,7 @@ export interface Context {
    * A cache of RenderTextTree nodes created within this context,
    * indexed by the component or function which created them.
    */
-  elementCache: ElementCache;
+  elementCache?: ElementCache;
   /**
    * When this context was created by a component, this will
    * be the component that created it.
@@ -118,9 +90,17 @@ export interface Context {
 
   /**
    * A ref that indicates whether the component is empty.
+   * Only allocated when reactively observed (ContentSlot, mapJoin).
    */
   isEmpty?: Ref<boolean>;
 
+  /**
+   * Cheap boolean tracking the last propagated empty state.
+   * Used by notifyContentState() for early-return optimization
+   * without requiring a reactive ref on every context.
+   */
+  _lastEmpty: boolean;
+
   /**
    * Whether this context is a root context
    */
@@ -132,21 +112,46 @@ export function getContext() {
   return globalContext;
 }
 
+/**
+ * Walk up the owner chain to find the nearest ancestor context that
+ * corresponds to an effect (has meta.effectId). This bridges non-effect
+ * scopes (like createRoot iterations in For) so the owner chain always
+ * connects effect-to-effect.
+ */
+function resolveOwnerEffectContextId(context: Context): number | null {
+  let owner = context.owner;
+  while (owner) {
+    if (owner.meta?.effectId !== undefined) {
+      return owner.id;
+    }
+    owner = owner.owner;
+  }
+  return context.owner?.id ?? null;
+}
+
+/**
+ * Ensure that a context has an isEmpty ref, creating one if needed.
+ * Only call this when you need to reactively observe isEmpty (e.g.,
+ * ContentSlot, mapJoin). Most contexts don't need an isEmpty ref.
+ */
+export function ensureIsEmpty(context: Context): Ref<boolean> {
+  context.isEmpty ??= ref(context.childrenWithContent === 0);
+  return context.isEmpty;
+}
+
 export interface RootOptions {
   componentOwner?: ComponentCreator<any>;
 }
 
 export function root<T>(fn: (d: Disposable) => T, options?: RootOptions): T {
   const context: Context = {
+    id: contextIdCounter++,
     componentOwner: options?.componentOwner,
-    disposables: [],
     owner: globalContext,
-    context: {},
-    elementCache: new Map(),
     takesSymbols: false,
     takenSymbols: undefined,
     childrenWithContent: 0,
-    isEmpty: ref(true),
+    _lastEmpty: true,
     isRoot: true,
   };
 
@@ -155,7 +160,7 @@ export function root<T>(fn: (d: Disposable) => T, options?: RootOptions): T {
   try {
     ret = untrack(() =>
       fn(() => {
-        for (const d of context!.disposables) {
+        for (const d of context!.disposables ?? []) {
           untrack(d);
         }
       }),
@@ -183,7 +188,21 @@ export function untrack<T>(fn: () => T): T {
   return v;
 }
 
-export function memo<T>(fn: () => T, equal?: boolean): () => T {
+/**
+ * Walk up the context owner chain to find the nearest effect ID.
+ * Used to attribute reactive mutations to the effect that caused them.
+ */
+export function findCurrentEffectId(): number | undefined {
+  let ctx = globalContext;
+  while (ctx) {
+    const id = ctx.meta?.effectId;
+    if (id !== undefined && id !== -1) return id;
+    ctx = ctx.owner;
+  }
+  return undefined;
+}
+
+export function memo<T>(fn: () => T, equal?: boolean, name?: string): () => T {
   const o = shallowRef<T>();
   effect(
     (prev) => {
@@ -194,10 +213,14 @@ export function memo<T>(fn: () => T, equal?: boolean): () => T {
     },
     undefined as T,
     {
-      debug: { name: "memo" },
+      debug: { name: name ? `memo:${name}` : "memo" },
     },
   );
-  return () => o.value as T;
+  const getter = (() => o.value as T) as () => T;
+  if (name) {
+    Object.defineProperty(getter, "name", { value: name, configurable: true });
+  }
+  return getter;
 }
 
 export function effect<T>(
@@ -206,13 +229,12 @@ export function effect<T>(
   options?: EffectOptions,
 ) {
   const context: Context = {
-    context: {},
-    disposables: [] as (() => void)[],
+    id: contextIdCounter++,
     owner: globalContext,
-    elementCache: new Map(),
     takesSymbols: false,
     takenSymbols: undefined,
     childrenWithContent: 0,
+    _lastEmpty: true,
     isRoot: false,
   };
 
@@ -221,94 +243,93 @@ export function effect<T>(
     name: debugInfo?.name ?? fn.name,
     type: debugInfo?.type,
     createdAt: captureSourceLocation(),
+    contextId: context.id,
+    ownerContextId: resolveOwnerEffectContextId(context),
   });
 
-  context.meta ??= {};
   if (effectId !== -1) {
+    context.meta ??= {};
     context.meta.effectId = effectId;
   }
 
   const cleanupFn = (final: boolean) => {
     const d = context.disposables;
-    context.disposables = [];
-    for (let k = 0, len = d.length; k < len; k++) untrack(d[k]);
+    context.disposables = undefined;
+    if (d) {
+      for (let k = 0, len = d.length; k < len; k++) untrack(d[k]);
+    }
 
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     final && stop(runner);
   };
 
   onCleanup(() => cleanupFn(true));
-  const runner: ReactiveEffectRunner<void> = vueEffect(
-    () => {
-      cleanupFn(false);
-
-      const oldContext = globalContext;
-      globalContext = context;
-      try {
-        current = fn(current);
-      } finally {
-        globalContext = oldContext;
+  const effectOpts: Record<string, unknown> = {
+    // allow recursive effects with 32, 1 and 4 are default flags
+    flags: 1 | 4 | 32,
+    scheduler: scheduler(),
+  };
+
+  if (effectId !== -1) {
+    effectOpts.onTrack = (event: any) => {
+      const targetKey =
+        typeof event.key === "symbol" ? event.key.toString() : event.key;
+      if (isRef(event.target)) {
+        const id = refId(event.target);
+        debug.effect.ensureRef({ id, kind: "ref" });
+        debug.effect.track({
+          effectId,
+          target: event.target,
+          refId: id,
+          targetKey,
+        });
+      } else {
+        debug.effect.track({
+          effectId,
+          target: event.target,
+          targetKey,
+        });
       }
-    },
-    {
-      // allow recursive effects with 32, 1 and 4 are default flags
-      // @ts-expect-error flags is a vue internal thing
-      flags: 1 | 4 | 32,
-      scheduler: scheduler(),
-      onTrack(event) {
-        if (effectId !== -1) {
-          const targetKey =
-            typeof event.key === "symbol" ? event.key.toString() : event.key;
-          if (isRef(event.target)) {
-            const id = refId(event.target);
-            debug.effect.ensureRef({ id, kind: "ref" });
-            debug.effect.track({
-              effectId,
-              target: event.target,
-              refId: id,
-              targetKey,
-              location: captureSourceLocation(),
-            });
-          } else {
-            debug.effect.track({
-              effectId,
-              target: event.target,
-              targetKey,
-              location: captureSourceLocation(),
-            });
-          }
-        }
-        // track edge emitted via recordEffectTrack
-      },
-      onTrigger(event) {
-        if (effectId !== -1) {
-          const targetKey =
-            typeof event.key === "symbol" ? event.key.toString() : event.key;
-          if (isRef(event.target)) {
-            const id = refId(event.target);
-            debug.effect.ensureRef({ id, kind: "ref" });
-            debug.effect.trigger({
-              effectId,
-              target: event.target,
-              refId: id,
-              targetKey,
-              location: captureSourceLocation(),
-              kind: "triggered-by",
-            });
-          } else {
-            debug.effect.trigger({
-              effectId,
-              target: event.target,
-              targetKey,
-              location: captureSourceLocation(),
-              kind: "triggered-by",
-            });
-          }
-        }
-        // trigger edge emitted via recordEffectTrigger
-      },
-    },
-  );
+    };
+    effectOpts.onTrigger = (event: any) => {
+      const targetKey =
+        typeof event.key === "symbol" ? event.key.toString() : event.key;
+      if (isRef(event.target)) {
+        const id = refId(event.target);
+        debug.effect.ensureRef({ id, kind: "ref" });
+        debug.effect.trigger({
+          effectId,
+          target: event.target,
+          refId: id,
+          targetKey,
+          kind: "triggered-by",
+        });
+      } else {
+        debug.effect.trigger({
+          effectId,
+          target: event.target,
+          targetKey,
+          kind: "triggered-by",
+        });
+      }
+    };
+  }
+
+  const runner: ReactiveEffectRunner<void> = vueEffect(() => {
+    cleanupFn(false);
+
+    const oldContext = globalContext;
+    globalContext = context;
+    try {
+      current = fn(current);
+    } finally {
+      globalContext = oldContext;
+    }
+  }, effectOpts as any);
+
+  if (effectId !== -1) {
+    effectIdMap.set(runner.effect, effectId);
+  }
 }
 
 /**
@@ -331,7 +352,7 @@ export function effect<T>(
  */
 export function onCleanup(fn: Disposable) {
   if (globalContext != null) {
-    globalContext.disposables.push(fn);
+    (globalContext.disposables ??= []).push(fn);
   }
 }
 
@@ -366,21 +387,45 @@ export function isCustomContext(child: Children): child is CustomContext {
   );
 }
 
-export function ref<T>(value?: T): Ref<T> {
+export function ref<T>(
+  value?: T,
+  options?: { isInfrastructure?: boolean },
+): Ref<T> {
   const result = vueRef(value) as Ref<T>;
-  attachEffectWriteDebug(result, "ref");
   debug.effect.registerRef({
-    id: refId(result),
+    id: refId(result, options?.isInfrastructure),
     kind: "ref",
     createdAt: captureSourceLocation(),
     createdByEffectId: globalContext?.meta?.effectId,
+    isInfrastructure: options?.isInfrastructure,
   });
   return result;
 }
 
+// Stores creation location for shallowReactive objects so registerNonRefTarget
+// can look it up later (since targets are lazily registered on first track/trigger).
+const reactiveCreationLocations = new WeakMap<
+  object,
+  ReturnType<typeof captureSourceLocation>
+>();
+
+export function getReactiveCreationLocation(target: object) {
+  return reactiveCreationLocations.get(target);
+}
+
+export function shallowReactive<T extends object>(
+  target: T,
+): ShallowReactive<T> {
+  const result = vueShallowReactive(target);
+  if (isDevtoolsEnabled()) {
+    // Store by raw target — Vue's onTrack/onTrigger events pass the raw object, not the proxy.
+    reactiveCreationLocations.set(target, captureSourceLocation());
+  }
+  return result;
+}
+
 export function shallowRef<T>(value?: T): Ref<T> {
   const result = vueShallowRef(value) as Ref<T>;
-  attachEffectWriteDebug(result, "shallowRef");
   debug.effect.registerRef({
     id: refId(result),
     kind: "shallowRef",
@@ -410,7 +455,6 @@ export function toRef<T extends object, K extends keyof T>(
     defaultValue === undefined ?
       (vueToRef(object, key) as Ref<T[K]>)
     : (vueToRef(object, key, defaultValue) as Ref<T[K]>);
-  attachEffectWriteDebug(result, "toRef");
   debug.effect.registerRef({
     id: refId(result),
     kind: "toRef",
@@ -425,7 +469,6 @@ export function toRefs<T extends object>(
 ): { [K in keyof T]: Ref<T[K]> } {
   const result = vueToRefs(object) as { [K in keyof T]: Ref<T[K]> };
   for (const refValue of Object.values(result) as Ref<unknown>[]) {
-    attachEffectWriteDebug(refValue, "toRef");
     debug.effect.registerRef({
       id: refId(refValue),
       kind: "toRef",
@@ -438,12 +481,28 @@ export function toRefs<T extends object>(
 
 const seenRefs = new WeakMap<Ref<unknown>, number>();
 let refIdCounter = 1;
+let infraRefIdCounter = -1;
+const effectIdMap = new WeakMap<object, number>();
 
-export function refId(ref: Ref<unknown>): number {
+export function refId(ref: Ref<unknown>, isInfrastructure?: boolean): number {
   let id = seenRefs.get(ref);
   if (id === undefined) {
-    id = refIdCounter++;
+    id = isInfrastructure ? infraRefIdCounter-- : refIdCounter++;
     seenRefs.set(ref, id);
   }
   return id;
 }
+
+/** Allocate a unique reactive target ID from the same counter space as ref IDs. */
+export function nextReactiveId(): number {
+  return refIdCounter++;
+}
+
+export function resetRefIdCounter(): void {
+  refIdCounter = 1;
+  infraRefIdCounter = -1;
+}
+
+export function getEffectDebugId(effect: object): number | undefined {
+  return effectIdMap.get(effect);
+}

package/src/render-stack.ts

@@ -33,6 +33,11 @@ export function popStack() {
   renderStack.pop();
 }
 
+export function currentComponentName(): string | undefined {
+  const entry = renderStack[renderStack.length - 1];
+  return entry?.component.name || undefined;
+}
+
 export function clearRenderStack() {
   renderStack.length = 0;
 }

package/src/render.ts

@@ -498,11 +498,12 @@ export function notifyContentState() {
     const startContext = getContext()!;
 
     if (startContext.childrenWithContent === 0) {
-      if (startContext.isEmpty!.value === true) {
+      if (startContext._lastEmpty) {
         // it was already empty, no work to do.
         return;
       }
 
+      startContext._lastEmpty = true;
       if (startContext.isEmpty) {
         startContext.isEmpty.value = true;
       }
@@ -518,18 +519,20 @@ export function notifyContentState() {
           // This isn't the last content so we have no work to do
           break;
         }
+        current._lastEmpty = true;
         if (current.isEmpty) {
           current.isEmpty.value = true;
         }
         current = current.owner;
       }
     } else {
-      if (startContext.isEmpty!.value === false) {
+      if (!startContext._lastEmpty) {
         // it was already non-empty, no work to do.
         return;
       }
 
-      if (startContext.isEmpty && startContext.isEmpty.value) {
+      startContext._lastEmpty = false;
+      if (startContext.isEmpty) {
         startContext.isEmpty.value = false;
       }
 
@@ -542,7 +545,8 @@ export function notifyContentState() {
           break;
         }
 
-        if (current.isEmpty && current.isEmpty.value) {
+        current._lastEmpty = false;
+        if (current.isEmpty) {
           current.isEmpty.value = false;
         }
 
@@ -757,16 +761,15 @@ function appendChild(node: RenderedTextTree, rawChild: Child) {
       }
     } else if (isComponentCreator(child)) {
       const index = node.length;
-      const rerenderToken = ref(0);
-      const breakNext = ref(false);
+      const rerenderToken = isDevtoolsEnabled() ? ref(0) : undefined;
+      const breakNext = isDevtoolsEnabled() ? ref(false) : undefined;
       // todo: remove this effect (only needed for context, not needed for anything else)
       effect(
         () => {
           // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-          rerenderToken.value;
+          rerenderToken?.value;
           const context = getContext();
           context!.childrenWithContent = 0;
-          context!.isEmpty ??= ref(true);
 
           if (context) context.componentOwner = child;
           const existing = node[index];
@@ -788,12 +791,12 @@ function appendChild(node: RenderedTextTree, rawChild: Child) {
             actions: {
               rerender: () => {
                 lastRenderError = null;
-                rerenderToken.value++;
+                if (rerenderToken) rerenderToken.value++;
               },
               rerenderAndBreak: () => {
                 lastRenderError = null;
-                breakNext.value = true;
-                rerenderToken.value++;
+                if (breakNext) breakNext.value = true;
+                if (rerenderToken) rerenderToken.value++;
               },
             },
           });
@@ -806,9 +809,9 @@ function appendChild(node: RenderedTextTree, rawChild: Child) {
           let childResult: Children | undefined;
           try {
             childResult = untrack(() => {
-              const shouldBreak = breakNext.value;
+              const shouldBreak = breakNext?.value;
               if (shouldBreak) {
-                breakNext.value = false;
+                breakNext!.value = false;
                 // eslint-disable-next-line no-debugger
                 debugger;
               }
@@ -880,7 +883,6 @@ function appendChild(node: RenderedTextTree, rawChild: Child) {
           }
           const context = getContext();
           context!.childrenWithContent = 0;
-          context!.isEmpty ??= ref(true);
 
           const existing = node[index];
           const memoNode: RenderedTextTree =

package/src/scheduler.ts

@@ -6,17 +6,39 @@ export interface QueueJob {
 }
 const immediateQueue = new Set<QueueJob>();
 const queue = new Set<QueueJob>();
+function isJobActive(job: QueueJob): boolean {
+  // ReactiveEffect uses bit 0 (flags & 1) as the ACTIVE flag.
+  // Skip effects that were stopped after being queued.
+  const flags = (job as any).flags;
+  return flags === undefined || (flags & 1) !== 0;
+}
 const pendingPromises = new Set<Promise<any>>();
 let waitForSignalPromise: Promise<void> | null = null;
 let resolveWaitForSignal: (() => void) | null = null;
 let jobSignalPromise: Promise<void> | null = null;
 let resolveJobSignal: (() => void) | null = null;
 
+// Maps effect debug IDs to the ref that most recently triggered them
+const lastTriggerRef = new Map<number, number>();
+
+/**
+ * Record which ref triggered an effect re-run.
+ * Called from the onTrigger debug hook before the effect is scheduled.
+ */
+export function setLastTriggerRef(effectDebugId: number, refId: number): void {
+  lastTriggerRef.set(effectDebugId, refId);
+}
+
 export function scheduler(immediate = false) {
+  if (!immediate) return defaultScheduler;
   return function (this: ReactiveEffect) {
-    queueJob(this, immediate);
+    queueJob(this, true);
   };
 }
+
+const defaultScheduler = function (this: ReactiveEffect) {
+  queueJob(this, false);
+};
 export function queueJob(job: QueueJob | (() => void), immediate = false) {
   // if we have an immediate job, we don't need to queue the normal job.
   // the set is serving an important purpose here in deduping the effects we run
@@ -52,6 +74,7 @@ export function flushJobs() {
   // First, run all synchronous jobs
   let job;
   while ((job = takeJob()) !== null) {
+    if (!isJobActive(job)) continue;
     job.run();
   }
 
@@ -96,6 +119,7 @@ export async function flushJobsAsync() {
     // First, run all synchronous jobs
     let job;
     while ((job = takeJob()) !== null) {
+      if (!isJobActive(job)) continue;
       job.run();
     }
 

package/src/symbols/output-scope.ts

@@ -1,7 +1,6 @@
 import {
   reactive,
   ReactiveFlags,
-  shallowReactive,
   track,
   TrackOpTypes,
   trigger,
@@ -10,7 +9,7 @@ import {
 import type { Binder } from "../binder.js";
 import { useBinder } from "../context/binder.js";
 import { inspect } from "../inspect.js";
-import { effect, untrack } from "../reactivity.js";
+import { effect, shallowReactive, untrack } from "../reactivity.js";
 import { OutputDeclarationSpace, OutputSpace } from "./output-space.js";
 import { OutputSymbol } from "./output-symbol.js";
 

package/src/symbols/output-symbol.ts

@@ -3,7 +3,6 @@ import {
   reactive,
   ReactiveFlags,
   Ref,
-  shallowReactive,
   track,
   TrackOpTypes,
   trigger,
@@ -15,7 +14,7 @@ import { useBinder } from "../context/binder.js";
 import { debug, TracePhase } from "../debug/index.js";
 import { inspect } from "../inspect.js";
 import { NamePolicyGetter } from "../name-policy.js";
-import { untrack } from "../reactivity.js";
+import { shallowReactive, untrack } from "../reactivity.js";
 import {
   isMemberRefkey,
   isNamekey,