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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alloy-js/core",
-  "version": "0.23.0-dev.8",
+  "version": "0.23.0-dev.9",
   "description": "",
   "repository": {
     "type": "git",

package/src/components/Prose.tsx

@@ -22,7 +22,7 @@ export function Prose(props: Prose) {
             .map((word, index, array) => (
               <>
                 {word}
-                {index < array.length - 1 && <br />}
+                {/*@once*/ index < array.length - 1 && <br />}
               </>
             ));
         }

package/src/components/Scope.tsx

@@ -1,5 +1,6 @@
 import { createScope } from "../binder.js";
 import { ScopeContext, useScope } from "../context/scope.js";
+import { debug } from "../debug/index.js";
 import type { Children } from "../runtime/component.js";
 import { BasicScope } from "../symbols/basic-scope.js";
 import { OutputScope } from "../symbols/output-scope.js";
@@ -52,6 +53,7 @@ export function Scope(props: ScopeProps) {
   let scope: OutputScope;
   if ("value" in props) {
     scope = props.value;
+    debug.symbols.relocateScope(scope);
   } else {
     const parentScope = useScope();
     if (parentScope && !(parentScope instanceof BasicScope)) {

package/src/components/SourceDirectory.tsx

@@ -1,8 +1,7 @@
-import { shallowReactive } from "@vue/reactivity";
 import { join } from "pathe";
 import { useContext } from "../context.js";
 import { SourceDirectoryContext } from "../context/source-directory.js";
-import { getContext } from "../reactivity.js";
+import { getContext, shallowReactive } from "../reactivity.js";
 import type { Children } from "../runtime/component.js";
 
 export interface SourceDirectoryProps {

package/src/content-slot.tsx

@@ -1,6 +1,6 @@
 import { computed, Ref, shallowRef } from "@vue/reactivity";
 import { Show } from "./components/Show.jsx";
-import { getContext } from "./reactivity.js";
+import { ensureIsEmpty, getContext } from "./reactivity.js";
 import { Children, Component } from "./runtime/component.js";
 
 export interface ContentSlot {
@@ -61,7 +61,7 @@ export function createContentSlot(): ContentSlot {
 
   function ContentSlot(props: { children: Children }) {
     const context = getContext()!;
-    isEmptySource.value = context.isEmpty!;
+    isEmptySource.value = ensureIsEmpty(context);
     return props.children;
   }
   ContentSlot.ref = isEmpty;

package/src/context.ts

@@ -20,8 +20,8 @@ export function useContext<T>(context: ComponentContext<T>): T | undefined {
   // context must come from a parent
   let current = getContext();
   while (current) {
-    if (Object.hasOwn(current.context!, context.id)) {
-      return current.context![context.id] as T | undefined;
+    if (current.context && Object.hasOwn(current.context, context.id)) {
+      return current.context[context.id] as T | undefined;
     }
     current = current.owner;
   }
@@ -43,7 +43,7 @@ export function createContext<T = unknown>(
     const rendered = shallowRef();
     effect(
       () => {
-        context!.context![id] = props.value;
+        (context!.context ??= {})[id] = props.value;
         rendered.value = () => props.children;
       },
       undefined,

package/src/debug/effects.test.tsx

@@ -39,58 +39,51 @@ afterEach(async () => {
 it("emits effect, ref, edge, and update messages", async () => {
   const collector = createMessageCollector(socket!);
   const r1 = ref(0);
-  const r2 = ref(1);
 
+  // Create an effect that reads r1.
+  let observed = 0;
   effect(() => {
-    r1.value = r2.value + 1;
+    observed = r1.value;
   });
 
+  // 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();
 
-  expect(effectsMessages[0]).toMatchObject({
-    type: "effect:refAdded",
-    ref: expect.objectContaining({
-      id: expect.any(Number),
-      kind: "ref",
-    }),
+  // 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[1]).toMatchObject({
-    type: "effect:refAdded",
-    ref: expect.objectContaining({
-      id: expect.any(Number),
-      kind: "ref",
-    }),
+  expect(byType("effect:effectAdded")[0]).toMatchObject({
+    effect: expect.objectContaining({ id: expect.any(Number) }),
   });
-  expect(effectsMessages[2]).toMatchObject({
-    type: "effect:effectAdded",
-    effect: expect.objectContaining({
-      id: expect.any(Number),
-    }),
-  });
-  expect(effectsMessages[3]).toMatchObject({
-    type: "effect:track",
+  expect(byType("effect:track")[0]).toMatchObject({
     edge: expect.objectContaining({
       type: "track",
       effectId: expect.any(Number),
       refId: expect.any(Number),
     }),
   });
-  expect(effectsMessages[4]).toMatchObject({
-    type: "effect:trigger",
+  expect(byType("effect:trigger")[0]).toMatchObject({
     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),
-    }),
-  });
+
+  expect(observed).toBe(42);
 });

package/src/debug/effects.ts

@@ -211,6 +211,8 @@ export function register(input: {
   name?: string;
   type?: string;
   createdAt?: SourceLocation;
+  contextId?: number;
+  ownerContextId?: number | null;
 }): number {
   if (!isDevtoolsEnabled()) return -1;
   const id = effectIdCounter++;
@@ -230,6 +232,7 @@ export function registerRef(input: {
   kind?: string;
   createdAt?: SourceLocation;
   createdByEffectId?: number;
+  isInfrastructure?: boolean;
 }) {
   if (!isDevtoolsEnabled()) return;
   if (refs.has(input.id)) return;
@@ -275,6 +278,7 @@ export function trigger(input: {
   targetKey?: unknown;
   location?: SourceLocation;
   kind?: "trigger" | "triggered-by";
+  causedBy?: number;
 }) {
   if (!isDevtoolsEnabled()) return;
   const edge: EffectEdgeDebugInfo = {

package/src/debug/index.ts

@@ -40,6 +40,7 @@ import {
 import {
   registerScope,
   registerSymbol,
+  relocateScope,
   reset as resetSymbols,
   unregisterScope,
   unregisterSymbol,
@@ -107,6 +108,7 @@ export const debug = {
   },
   symbols: {
     registerScope,
+    relocateScope,
     unregisterScope,
     registerSymbol,
     unregisterSymbol,

package/src/debug/symbols.ts

@@ -184,6 +184,15 @@ export function unregisterScope(scope: OutputScope) {
   });
 }
 
+/**
+ * Re-register a pre-existing scope under the current render context.
+ * Called when `<Scope value={existingScope}>` mounts an already-created scope
+ * into a new location in the render tree.
+ */
+export function relocateScope(_scope: OutputScope) {
+  // Placeholder — real implementation added in the trace-writer branch.
+}
+
 export function registerSymbol(symbol: OutputSymbol) {
   if (!isDevtoolsEnabled()) return;
   if (symbolWatchers.has(symbol.id)) return;

package/src/index.ts

@@ -5,7 +5,6 @@ export {
   isReactive,
   isRef,
   reactive,
-  shallowReactive,
   toRaw,
   track,
   trigger,

package/src/reactive-union-set.ts

@@ -1,14 +1,13 @@
 import {
   ITERATE_KEY,
   ReactiveFlags,
-  shallowReactive,
   shallowReadonly,
   track,
   TrackOpTypes,
   trigger,
   TriggerOpTypes,
 } from "@vue/reactivity";
-import { effect, untrack } from "./reactivity.js";
+import { effect, root, shallowReactive, untrack } from "./reactivity.js";
 
 export interface ReactiveUnionSetOptions<T> {
   onAdd?: OnReactiveSetAddCallback<T>;
@@ -129,6 +128,7 @@ export class ReactiveUnionSet<T> extends Set<T> {
      * that were added to the parent set.
      */
     const prevValues = new Map<T, T>();
+    const itemDisposers = new Map<T, () => void>();
 
     effect(
       () => {
@@ -137,13 +137,24 @@ export class ReactiveUnionSet<T> extends Set<T> {
             untrack(() => onDelete?.(prevSourceValue));
             prevValues.delete(prevSourceValue);
             this.delete(prevTargetValue);
+            const disposer = itemDisposers.get(prevSourceValue);
+            if (disposer) {
+              disposer();
+              itemDisposers.delete(prevSourceValue);
+            }
           }
         }
 
         for (const value of subset) {
           if (!prevValues.has(value)) {
             if (onAdd) {
-              const added = untrack(() => onAdd(value));
+              const added = untrack(() =>
+                root((disposer) => {
+                  const result = onAdd(value);
+                  itemDisposers.set(value, disposer);
+                  return result;
+                }),
+              );
               prevValues.set(value, added);
             } else {
               this.add(value);