@alloy-js/core 0.10.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

@@ -4,9 +4,9 @@ import { baseListPropsToMapJoinArgs, mapJoin } from "../utils.js";
 import { BaseListProps } from "./List.jsx";
 
 export type ForCallbackArgs<T> =
-  T extends Ref<infer U> ? ForCallbackArgs<U>
+  number extends keyof T ? [value: T[number]]
+  : T extends Ref<infer U> ? ForCallbackArgs<U>
   : T extends () => infer U ? ForCallbackArgs<U>
-  : T extends (infer U)[] ? [value: U]
   : T extends Map<infer U, infer V> ? [key: U, value: V]
   : T extends Set<infer U> ? [value: U]
   : T extends IterableIterator<infer U> ? [value: U]
@@ -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/components/ReferenceOrContent.tsx

@@ -0,0 +1,22 @@
+import { Children } from "@alloy-js/core/jsx-runtime";
+import { computed } from "@vue/reactivity";
+import { useContext } from "../context.js";
+import { BinderContext } from "../context/binder.js";
+import type { Refkey } from "../refkey.js";
+
+export interface ReferenceOrContentProps {
+  readonly refkey: Refkey;
+  readonly children: Children;
+}
+
+export function ReferenceOrContent(props: ReferenceOrContentProps) {
+  const binder = useContext(BinderContext);
+  if (!binder) {
+    throw new Error("Need binder context to create declarations");
+  }
+
+  const sym = binder.getSymbolForRefkey(props.refkey);
+  return computed(() =>
+    sym.value === undefined ? props.children : props.refkey,
+  );
+}

package/src/components/index.tsx

@@ -9,6 +9,7 @@ export * from "./MemberScope.jsx";
 export * from "./Name.jsx";
 export * from "./Output.js";
 export * from "./Prose.jsx";
+export * from "./ReferenceOrContent.jsx";
 export * from "./Scope.js";
 export * from "./Show.jsx";
 export * from "./SourceDirectory.js";

package/src/components/stc/index.ts

@@ -19,5 +19,6 @@ export const SourceDirectory = stc(base.SourceDirectory);
 export const SourceFile = stc(base.SourceFile);
 export const Switch = stc(base.Switch);
 export const Wrap = stc(base.Wrap);
+export const ReferenceOrContent = stc(base.ReferenceOrContent);
 
 export * from "./sti.js";

package/src/debug.ts

@@ -1,6 +1,6 @@
 import { isReactive } from "@vue/reactivity";
-import { Chalk } from "chalk";
 import Table from "cli-table3";
+import pc from "picocolors";
 import { contextsByKey } from "./context.js";
 import { Context, getContext } from "./jsx-runtime.js";
 
@@ -56,14 +56,14 @@ function debugStack() {
         { hAlign: "right", content: "props" },
         props && Object.keys(props).length > 0 ?
           dumpValue(props)
-        : chalk.gray("(none)"),
+        : pc.gray("(none)"),
       ]);
 
       table.push([
         { hAlign: "right", content: "contexts" },
         foundContexts.length > 0 ?
           foundContexts.map((c) => printContext(c, true)).join("\n")
-        : chalk.gray("(none)"),
+        : pc.gray("(none)"),
       ]);
 
       process.stdout.write(table.toString() + "\n\n");
@@ -119,39 +119,38 @@ declare global {
 
 globalThis.debug = debug;
 
-const chalk = new Chalk();
 const style = {
   value: {
     primitive(value: string | number | boolean | null | undefined) {
       switch (typeof value) {
         case "string":
-          return chalk.blue(`"${value}"`);
+          return pc.blue(`"${value}"`);
         case "object":
         case "undefined":
-          return chalk.gray(String(value));
+          return pc.gray(String(value));
         default:
-          return chalk.blue(String(value));
+          return pc.blue(String(value));
       }
     },
     symbol(value: symbol) {
-      return chalk.gray(String(value));
+      return pc.gray(String(value));
     },
   },
   context: {
     name(name: string) {
-      return chalk.bgGray(` ${chalk.white(name)} `);
+      return pc.bgBlack(` ${pc.white(name)} `);
     },
   },
   component: {
     name(name: string) {
-      return chalk.bgBlue(` <${chalk.white(name)}> `);
+      return pc.bgBlue(` <${pc.white(name)}> `);
     },
   },
 };
 
 function reactiveTag(value: unknown) {
   if (isReactive(value)) {
-    return " " + chalk.greenBright(`reactive`) + " ";
+    return " " + pc.greenBright(`reactive`) + " ";
   }
   return "";
 }
@@ -168,7 +167,7 @@ function dumpValue(value: unknown, level = 0) {
       if (value === null) {
         return style.value.primitive(null) + reactiveTag(value);
       } else {
-        if (level > 0) return chalk.gray(`{ ... }` + reactiveTag(value));
+        if (level > 0) return pc.gray(`{ ... }` + reactiveTag(value));
 
         const table = kvTable(" ");
 
@@ -179,7 +178,7 @@ function dumpValue(value: unknown, level = 0) {
         return table.toString();
       }
     case "function":
-      return chalk.gray("ƒ ()");
+      return pc.gray("ƒ ()");
     case "undefined":
       return style.value.primitive(undefined);
   }

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;
 }
 
 /**
@@ -462,9 +472,9 @@ export function createComponent<TProps extends Props = Props>(
 export function taggedComponent<TProps = Props>(
   tag: symbol,
   component: Component<TProps>,
-): Component<TProps> {
+): Component<TProps> & Required<Pick<Component<TProps>, "tag">> {
   component.tag = tag;
-  return component;
+  return component as any;
 }
 
 export const intrinsicElementKey = Symbol();

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();
+  }
+}