@alloy-js/core 0.11.0 → 0.12.0

package/src/binder.ts

@@ -1,6 +1,5 @@
 import {
   computed,
-  effect,
   reactive,
   ref,
   Ref,
@@ -10,8 +9,9 @@ import {
 import { useBinder } from "./context/binder.js";
 import { useMemberScope } from "./context/member-scope.js";
 import { useScope } from "./context/scope.js";
-import { memo, untrack } from "./jsx-runtime.js";
+import { effect, memo, onCleanup, untrack } from "./jsx-runtime.js";
 import { refkey, Refkey } from "./refkey.js";
+import { queueJob, QueueJob } from "./scheduler.js";
 export type Metadata = object;
 
 /**
@@ -464,6 +464,7 @@ export function createOutputBinder(options: BinderOptions = {}): Binder {
     OutputScope,
     Map<string, Ref<OutputScope | undefined>>
   >();
+  const deconflictJobs = new Map<OutputScope, Map<string, QueueJob>>();
 
   return binder;
 
@@ -622,26 +623,77 @@ export function createOutputBinder(options: BinderOptions = {}): Binder {
   }
 
   function instantiateSymbolInto(source: OutputSymbol, target: OutputSymbol) {
-    if (~source.flags & OutputSymbolFlags.InstanceMemberContainer) {
-      throw new Error("Can only instantiate symbols with instance members");
+    if (target.staticMemberScope) {
+      return;
     }
 
-    addInstanceMembersToSymbol(target);
+    // Ensure static member scope exists
+    addStaticMembersToSymbol(target);
 
     effect(() => {
-      for (const sym of source.instanceMemberScope!.symbols) {
-        if (target.instanceMemberScope!.symbols.has(sym)) {
-          continue;
-        }
+      // copy instance members if it's an instance‐container
+      if (source.flags & OutputSymbolFlags.InstanceMemberContainer) {
+        copyMembers(
+          source.instanceMemberScope!.symbols,
+          target,
+          target.staticMemberScope!,
+        );
+      }
 
-        createSymbol({
-          name: sym.name,
-          scope: target.instanceMemberScope!,
-          refkey: [refkey(target.refkeys[0], sym.refkeys[0])],
-          flags: sym.flags | OutputSymbolFlags.InstanceMember,
-        });
+      // copy static members if it's a static‐container
+      if (source.flags & OutputSymbolFlags.StaticMemberContainer) {
+        copyMembers(
+          source.staticMemberScope!.symbols,
+          target,
+          target.staticMemberScope!,
+        );
       }
     });
+
+    /**
+     * Recursively copy `symbols` from `sourceSym` into `intoScope` of `targetSym`.
+     * Always marks each instantiation as StaticMember so lookups use dot notation (e.g. Parent.child)
+     * and preserves any StaticMemberContainer flag to auto create newSym.staticMemberScope.
+     */
+    function copyMembers(
+      symbols: Set<OutputSymbol>,
+      targetSym: OutputSymbol,
+      intoScope: OutputScope,
+    ) {
+      for (const srcSym of symbols) {
+        untrack(() => {
+          const wantKey = refkey(targetSym.refkeys[0], srcSym.refkeys[0]);
+
+          // create the new symbol. Preserve StaticMemberContainer if present
+          const newSym = createSymbol({
+            name: srcSym.name,
+            scope: intoScope,
+            refkey: wantKey,
+            flags: srcSym.flags | OutputSymbolFlags.StaticMember,
+          });
+
+          onCleanup(() => {
+            binder.deleteSymbol(newSym);
+          });
+
+          // if the source symbol itself was a container of static members,
+          // recurse into the newSym.staticMemberScope that createSymbol just gave us
+          if (
+            srcSym.staticMemberScope &&
+            srcSym.staticMemberScope.symbols.size > 0
+          ) {
+            // ensure we have that scope
+            addStaticMembersToSymbol(newSym);
+
+            copyMembers(
+              srcSym.staticMemberScope.symbols,
+              newSym,
+              newSym.staticMemberScope!,
+            );
+          }
+        });
+      }
+    }
   }
 
   function addStaticMembersToSymbol(symbol: OutputSymbol) {
@@ -789,7 +841,7 @@ export function createOutputBinder(options: BinderOptions = {}): Binder {
   function deconflict(symbol: OutputSymbol) {
     const scope = symbol.scope;
     const existingNames = [...scope.symbols].filter(
-      (sym) => sym.originalName === symbol.name,
+      (sym) => sym.name === symbol.name,
     );
 
     if (existingNames.length < 2) {
@@ -797,7 +849,13 @@ export function createOutputBinder(options: BinderOptions = {}): Binder {
     }
 
     if (options.nameConflictResolver) {
-      options.nameConflictResolver(symbol.name, existingNames);
+      queueJob(
+        deconflictJobForScopeAndName(
+          scope,
+          symbol.name,
+          options.nameConflictResolver,
+        ),
+      );
     } else {
       // default disambiguation is first-wins
       for (let i = 1; i < existingNames.length; i++) {
@@ -806,6 +864,31 @@ export function createOutputBinder(options: BinderOptions = {}): Binder {
     }
   }
 
+  function deconflictJobForScopeAndName(
+    scope: OutputScope,
+    name: string,
+    handler: NameConflictResolver,
+  ) {
+    if (!deconflictJobs.has(scope)) {
+      deconflictJobs.set(scope, new Map());
+    }
+
+    const jobs = deconflictJobs.get(scope)!;
+    if (jobs.has(name)) {
+      return jobs.get(name)!;
+    }
+    const job = () => {
+      const conflictedSymbols = [...scope.symbols].filter(
+        (sym) => sym.name === name,
+      );
+      handler(name, conflictedSymbols);
+      jobs.delete(name);
+    };
+
+    jobs.set(name, job);
+    return job;
+  }
+
   function getSymbolForRefkey<TSymbol extends OutputSymbol>(
     refkey: Refkey,
   ): Ref<TSymbol | undefined> {

package/src/components/For.tsx

@@ -38,10 +38,10 @@ export interface ForProps<
 }
 
 export type ForSupportedCollections =
-  | any[]
-  | Map<any, any>
-  | Set<any>
-  | IterableIterator<any>;
+  | readonly unknown[]
+  | ReadonlyMap<unknown, unknown>
+  | ReadonlySet<unknown>
+  | IterableIterator<unknown>;
 /**
  * The For component iterates over the provided array and invokes the child
  * callback for each item. It can optionally be provided with a `joiner` which

package/src/jsx-runtime.ts

@@ -5,6 +5,7 @@ import {
   isReactive,
   pauseTracking,
   proxyRefs,
+  ReactiveEffectRunner,
   Ref,
   resetTracking,
   shallowRef,
@@ -14,6 +15,7 @@ import {
 } from "@vue/reactivity";
 import { Refkey } from "./refkey.js";
 import { RenderedTextTree } from "./render.js";
+import { scheduler } from "./scheduler.js";
 
 if ((globalThis as any).ALLOY) {
   throw new Error(
@@ -125,21 +127,29 @@ export function effect<T>(fn: (prev?: T) => T, current?: T) {
     for (let k = 0, len = d.length; k < len; k++) d[k]();
 
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    final && stop(c);
+    final && stop(runner);
   };
 
   onCleanup(() => cleanupFn(true));
-  const c = vueEffect(() => {
-    cleanupFn(false);
-
-    const oldContext = globalContext;
-    globalContext = context;
-    try {
-      current = fn(current);
-    } finally {
-      globalContext = oldContext;
-    }
-  }, {});
+  const runner: ReactiveEffectRunner<void> = vueEffect(
+    () => {
+      cleanupFn(false);
+
+      const oldContext = globalContext;
+      globalContext = context;
+      try {
+        current = fn(current);
+      } finally {
+        globalContext = oldContext;
+      }
+    },
+    {
+      scheduler: scheduler(() => runner),
+    },
+  );
+
+  // allow recursive effects (recursive option does nothing, possible bug)
+  (runner as any).effect.flags |= 1 << 5;
 }
 
 /**

package/src/render.ts

@@ -22,6 +22,7 @@ import {
   untrack,
 } from "./jsx-runtime.js";
 import { isRefkey } from "./refkey.js";
+import { flushJobs } from "./scheduler.js";
 const {
   builders: {
     align,
@@ -181,6 +182,7 @@ export function render(
   options?: PrintTreeOptions,
 ): OutputDirectory {
   const tree = renderTree(children);
+  flushJobs();
   let rootDirectory: OutputDirectory | undefined = undefined;
 
   // when passing Output, the first render tree child is the Output component.
@@ -559,6 +561,9 @@ export function printTree(tree: RenderedTextTree, options?: PrintTreeOptions) {
     ),
   };
 
+  // make sure queue is empty
+  flushJobs();
+
   const d = printTreeWorker(tree);
   return doc.printer.printDocToString(d, options as doc.printer.Options)
     .formatted;

package/src/scheduler.ts

@@ -0,0 +1,24 @@
+import { ReactiveEffectRunner } from "@vue/reactivity";
+
+export interface QueueJob {
+  (): any;
+}
+const queue = new Set<QueueJob>();
+
+export function scheduler(jobGetter: () => ReactiveEffectRunner) {
+  return () => {
+    queueJob(jobGetter());
+  };
+}
+export function queueJob(job: QueueJob) {
+  // the set is serving an important purpose here in deduping the effects we run
+  // (which in effect coalesces multiple update effects together).
+  queue.add(job);
+}
+
+export function flushJobs() {
+  for (const job of queue) {
+    queue.delete(job);
+    job();
+  }
+}

package/temp/api.json

@@ -6003,25 +6003,25 @@
             },
             {
               "kind": "Content",
-              "text": "any[] | "
+              "text": "readonly unknown[] | "
             },
             {
               "kind": "Reference",
-              "text": "Map",
-              "canonicalReference": "!Map:interface"
+              "text": "ReadonlyMap",
+              "canonicalReference": "!ReadonlyMap:interface"
             },
             {
               "kind": "Content",
-              "text": "<any, any> | "
+              "text": "<unknown, unknown> | "
             },
             {
               "kind": "Reference",
-              "text": "Set",
-              "canonicalReference": "!Set:interface"
+              "text": "ReadonlySet",
+              "canonicalReference": "!ReadonlySet:interface"
             },
             {
               "kind": "Content",
-              "text": "<any> | "
+              "text": "<unknown> | "
             },
             {
               "kind": "Reference",
@@ -6030,7 +6030,7 @@
             },
             {
               "kind": "Content",
-              "text": "<any>"
+              "text": "<unknown>"
             },
             {
               "kind": "Content",

package/test/components/declaration.test.tsx

@@ -7,6 +7,7 @@ import {
   Scope,
   useBinder,
 } from "../../src/index.js";
+import { flushJobs } from "../../src/scheduler.js";
 import { createTap } from "../../src/tap.js";
 
 it("creates and cleans up a symbol", () => {
@@ -33,5 +34,6 @@ it("creates and cleans up a symbol", () => {
   const subScope = [...binder.globalScope.children][0];
   expect(subScope.symbols.size).toBe(1);
   doDecl.value = false;
+  flushJobs();
   expect(subScope.symbols.size).toBe(0);
 });

package/test/components/list.test.tsx

@@ -73,7 +73,6 @@ it("is useful for statements", () => {
       <Statement />
     </List>,
   );
-
   expect(printTree(tree)).toEqual(d`
     console.log(true);
     console.log(true);

package/test/control-flow/for.test.tsx

@@ -1,8 +1,9 @@
 import "@alloy-js/core/testing";
 import { d } from "@alloy-js/core/testing";
-import { expect, it } from "vitest";
+import { describe, expect, it } from "vitest";
 import { For } from "../../src/components/For.jsx";
 import { onCleanup, printTree, reactive, renderTree } from "../../src/index.js";
+import { flushJobs } from "../../src/scheduler.js";
 
 it("works", () => {
   const messages = ["hi", "bye"];
@@ -17,6 +18,30 @@ it("works", () => {
   `);
 });
 
+describe("readonly collections", () => {
+  const out = d`
+    a
+    b
+  `;
+  it("array", () => {
+    const messages: readonly string[] = ["a", "b"];
+    expect(<For each={messages}>{(x) => <>{x}</>}</For>).toRenderTo(out);
+  });
+
+  it("map", () => {
+    const messages: ReadonlyMap<string, string> = new Map([
+      ["a", "a"],
+      ["b", "b"],
+    ]);
+    expect(<For each={messages}>{(x) => <>{x}</>}</For>).toRenderTo(out);
+  });
+
+  it("set", () => {
+    const messages: ReadonlySet<string> = new Set(["a", "b"]);
+    expect(<For each={messages}>{(x) => <>{x}</>}</For>).toRenderTo(out);
+  });
+});
+
 it("handles map entries", () => {
   const map = new Map([["a", { name: "foo" }]]);
   const entries = Array.from(map.entries());
@@ -76,6 +101,7 @@ it("doesn't rerender mappers", () => {
   expect(count).toBe(2);
 
   messages.push("maybe");
+  flushJobs();
 
   expect(count).toBe(3);
   expect(printTree(tree)).toBe(d`
@@ -93,7 +119,7 @@ it("doesn't rerender mappers with sets", () => {
   expect(count).toBe(2);
 
   messages.add("maybe");
-
+  flushJobs();
   expect(count).toBe(3);
   expect(printTree(tree)).toBe(d`
     item 0
@@ -116,7 +142,7 @@ it("doesn't rerender mappers with maps", () => {
   expect(count).toBe(2);
 
   messages.set("maybe", "three");
-
+  flushJobs();
   expect(count).toBe(3);
   expect(printTree(tree)).toBe(d`
     item 0
@@ -132,9 +158,11 @@ it("doesn't rerender mappers (with splice)", () => {
   const tree = renderTree(template);
   expect(count).toBe(3);
   messages.splice(1, 1);
+  flushJobs();
   // A sufficiently smart mapJoin would be able to handle this case...
   // but for now we re-render everything after the splice point.
   expect(count).toBe(4);
+
   expect(printTree(tree)).toBe(d`
     item 0
     item 3
@@ -165,12 +193,14 @@ it("cleans up things which end up removed (with push)", () => {
   `);
 
   items.pop();
+  flushJobs();
   expect(cleanups).toEqual(["b"]);
   expect(printTree(tree)).toBe(d`
     Letter a
   `);
 
   items.pop();
+  flushJobs();
   expect(cleanups).toEqual(["b", "a"]);
   expect(printTree(tree)).toBe("");
 });
@@ -200,7 +230,7 @@ it("cleans up things which end up removed (with splice)", () => {
   `);
 
   items.splice(1, 1);
-
+  flushJobs();
   // A sufficiently smart mapJoin would be able to handle this case...
   // but for now we re-render everything after the splice point.
   expect(cleanups).toEqual(["b", "c"]);

package/test/reactivity/circular-reactives.test.tsx

@@ -0,0 +1,32 @@
+import { shallowReactive } from "@vue/reactivity";
+import { expect, it } from "vitest";
+import { For } from "../../src/index.js";
+import { printTree, renderTree } from "../../src/render.js";
+import { d } from "../../testing/render.js";
+
+it("it should work with circular reactives", () => {
+  const items: string[] = shallowReactive([]);
+  let added = false;
+  function MaybeAddString(props: any) {
+    if (!added) {
+      items.push("item " + items.length);
+      added = true;
+    }
+    return <>{props.item}</>;
+  }
+  const template = (
+    <>
+      <For each={items}>
+        {(item) => {
+          return <MaybeAddString item={item} />;
+        }}
+      </For>
+    </>
+  );
+  const tree = renderTree(template);
+  items.push("item start");
+  expect(printTree(tree)).toBe(d`
+    item start
+    item 1
+  `);
+});

package/test/reactivity/cleanup.test.tsx

@@ -2,6 +2,7 @@ import { Children, effect, memo, onCleanup } from "@alloy-js/core/jsx-runtime";
 import { ref } from "@vue/reactivity";
 import { describe, expect, it } from "vitest";
 import { renderTree } from "../../src/render.js";
+import { flushJobs } from "../../src/scheduler.js";
 
 describe("memo cleanup", () => {
   it("cleans up when memo value is recomputed", () => {
@@ -19,6 +20,7 @@ describe("memo cleanup", () => {
     expect(callCount).toBe(0);
 
     r.value = 2;
+    flushJobs();
 
     expect(m()).toBe(2);
     expect(callCount).toBe(1);
@@ -40,6 +42,7 @@ describe("effect cleanup", () => {
     expect(cleanedUp).toBe(false);
 
     r.value = 2;
+    flushJobs();
 
     expect(cleanedUp).toBe(true);
   });
@@ -58,6 +61,7 @@ describe("element cleanup", () => {
     const template = <>{el}</>;
     renderTree(template);
     el.value = "";
+    flushJobs();
     expect(cleanedUp).toBe(true);
   });
 
@@ -85,6 +89,7 @@ describe("element cleanup", () => {
     const template = <>{el}</>;
     renderTree(template);
     el.value = "";
+    flushJobs();
     expect(cleanedUpC1).toBe(true);
     expect(cleanedUpC2).toBe(true);
   });

package/test/reactivity/untrack.test.ts

@@ -1,6 +1,7 @@
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { memo, untrack } from "../../src/jsx-runtime.js";
+import { flushJobs } from "../../src/scheduler.js";
 
 it("ignores signals for dependency tracking", () => {
   const signal = ref(0);
@@ -12,6 +13,7 @@ it("ignores signals for dependency tracking", () => {
   expect(m()).toBe(0);
 
   signal.value = 1;
+  flushJobs();
 
   expect(m()).toBe(0);
 });
@@ -28,6 +30,7 @@ it("doesn't affect signal changes", () => {
   untrack(() => {
     signal.value = 1;
   });
+  flushJobs();
 
   expect(m()).toBe(1);
 });

package/test/rendering/memoization.test.tsx

@@ -2,6 +2,7 @@ import { memo } from "@alloy-js/core/jsx-runtime";
 import { ref } from "@vue/reactivity";
 import { expect, it } from "vitest";
 import { renderTree } from "../../src/render.js";
+import { flushJobs } from "../../src/scheduler.js";
 
 it("memoizes child components", () => {
   let renderCount = 0;
@@ -26,5 +27,6 @@ it("memoizes child components", () => {
 
   renderTree(template);
   doThing.value = true;
+  flushJobs();
   expect(renderCount).toBe(2);
 });