@alloy-js/core 0.16.0 → 0.18.0-dev.2

package/dist/src/binder.js

@@ -1,103 +1,11 @@
-import { computed, reactive, ref, shallowRef } from "@vue/reactivity";
-import { useBinder } from "./context/binder.js";
+import { computed, ref, shallowRef } from "@vue/reactivity";
 import { useMemberScope } from "./context/member-scope.js";
 import { useScope } from "./context/scope.js";
-import { effect, memo, onCleanup, untrack } from "./jsx-runtime.js";
+import { effect, untrack } from "./reactivity.js";
 import { refkey } from "./refkey.js";
-import { queueJob } from "./scheduler.js";
-/**
- * Flags that describe an output symbol.
- */
-export let OutputSymbolFlags = /*#__PURE__*/function (OutputSymbolFlags) {
-  OutputSymbolFlags[OutputSymbolFlags["None"] = 0] = "None";
-  /**
-   * The symbol is an instance member container. Symbols with this flag will have a
-   * instanceMemberScope property that contains symbols for instance members.
-   */
-  OutputSymbolFlags[OutputSymbolFlags["InstanceMemberContainer"] = 1] = "InstanceMemberContainer";
-  /**
-   * The symbol is a static member container. Symbols with this flag will have a
-   * staticMemberScope property that contains symbols for static members.
-   */
-  OutputSymbolFlags[OutputSymbolFlags["StaticMemberContainer"] = 2] = "StaticMemberContainer";
-  /**
-   * Whether this symbol contains members of any kind.
-   */
-  OutputSymbolFlags[OutputSymbolFlags["MemberContainer"] = 3] = "MemberContainer";
-  /**
-   * Whether this symbol is an instance member of another symbol (i.e that it is
-   * stored in an instance member scope).
-   */
-  OutputSymbolFlags[OutputSymbolFlags["InstanceMember"] = 4] = "InstanceMember";
-  /**
-   * Whether this symbol is a static member of another symbol (i.e that it is
-   * stored in a static member scope).
-   */
-  OutputSymbolFlags[OutputSymbolFlags["StaticMember"] = 8] = "StaticMember";
-  /**
-   * Whether this is an instance member or static member of another symbol.
-   */
-  OutputSymbolFlags[OutputSymbolFlags["Member"] = 12] = "Member";
-  return OutputSymbolFlags;
-}({});
-
-/**
- * An output symbol is a named entity that can be referenced in your output
- * code. Referencing symbols is generally accomplished by using a
- * {@link Refkey}.
- *
- * @remarks
- *
- * This interface is the base implementation of symbol. Generally, most
- * languages will have subtypes of this interface that provide additional,
- * language-specific metadata about declared symbols. For example, symbols in
- * TypeScript need to track whether they are exported or what kind of symbol
- * they are (e.g. type, value, parameter, etc.)
- *
- * Symbols are reactive values, which allows you to observe changes to the symbol
- * information. For example, a symbol's name may change if it becomes conflicted
- * with a symbol that is added later.
- */
-
-/**
- * Flags that describe an output scope.
- */
-export let OutputScopeFlags = /*#__PURE__*/function (OutputScopeFlags) {
-  OutputScopeFlags[OutputScopeFlags["None"] = 0] = "None";
-  /**
-   * This scope is a static member scope.
-   */
-  OutputScopeFlags[OutputScopeFlags["StaticMemberScope"] = 1] = "StaticMemberScope";
-  /**
-   * This scope is an instance member scope.
-   */
-  OutputScopeFlags[OutputScopeFlags["InstanceMemberScope"] = 2] = "InstanceMemberScope";
-  /**
-   * This scope is a member scope. Scopes with this flag will have an `owner`
-   * property that points to the symbol whose member this scope holds.
-   */
-  OutputScopeFlags[OutputScopeFlags["MemberScope"] = 3] = "MemberScope";
-  return OutputScopeFlags;
-}({});
-
-/**
- * A container of symbols accessible within some scope in your output code.
- *
- * @remarks
- *
- * Scopes form a tree. All scopes except the global scope have a parent scope
- * identified by `parent`. Scopes can have nested scopes which can be accessed
- * using the `children` property. Whether a child scope can be accessed from
- * the parent scope is determined by each language's scoping rules.
- *
- * This interface is the base implementation of scope. Generally, most languages
- * will have subtypes of this interface that provide additional metadata about
- * the scope. For example, TypeScript scopes need to track whether the scope
- * represents a package, module, class, function, etc.
- *
- * Scopes are reactive values, which allows you to observe changes to the scope
- * within a reactive context.
- */
+import { OutputSymbolFlags } from "./symbols/flags.js";
+import { OutputScope } from "./symbols/output-scope.js";
+import { formatRefkeys, formatSymbol, formatSymbolName, trace, TracePhase } from "./tracer.js";
 
 /**
  * The binder tracks all output scopes and symbols. Scopes are nested containers
@@ -142,150 +50,37 @@ export let OutputScopeFlags = /*#__PURE__*/function (OutputScopeFlags) {
 
 export function createOutputBinder(options = {}) {
   const binder = {
-    createScope,
-    createSymbol,
-    deleteSymbol,
     resolveDeclarationByKey,
     getSymbolForRefkey,
-    addStaticMembersToSymbol,
-    addInstanceMembersToSymbol,
-    instantiateSymbolInto,
     findSymbolName,
     findScopeName,
     resolveFQN: resolveFQN,
-    globalScope: undefined
+    globalScope: undefined,
+    notifyScopeCreated,
+    notifySymbolCreated,
+    notifySymbolDeleted,
+    nameConflictResolver: options.nameConflictResolver
   };
-  const globalSymbols = reactive(new Set());
-  binder.globalScope = reactive({
-    kind: "global",
-    name: "<global>",
-    symbols: new Set(),
-    symbolsByRefkey: new Map(),
-    children: new Set(),
-    parent: undefined,
+  binder.globalScope = new OutputScope("<global>", {
     binder,
-    flags: OutputScopeFlags.None,
-    getSymbolNames: symbolNames(globalSymbols)
+    kind: "global"
   });
   const knownDeclarations = new Map();
   const waitingDeclarations = new Map();
   const waitingSymbolNames = new Map();
   const waitingScopeNames = new Map();
-  const deconflictJobs = new Map();
   return binder;
-  function createScope(args) {
-    const {
-      kind,
-      name,
-      parent,
-      owner,
-      flags = OutputScopeFlags.None,
-      metadata = {},
-      ...rest
-    } = args;
-    if (flags & OutputScopeFlags.MemberScope) {
-      if (!owner) {
-        throw new Error("Member scopes must have an owner");
-      }
-    }
-
-    // member scopes don't have a parent regular scope. Perhaps in the future
-    // their parent would be something like a prototype object.
-    let parentScope;
-    if (parent) {
-      parentScope = parent;
-    } else if (flags & OutputScopeFlags.MemberScope) {
-      parentScope = undefined;
-    } else {
-      parentScope = useScope() ?? binder.globalScope;
-    }
-    const symbols = reactive(new Set());
-    const symbolsByRefkey = reactive(new Map());
-    const scope = reactive({
-      kind: kind,
-      name: name,
-      symbols,
-      symbolsByRefkey,
-      children: new Set(),
-      parent: parentScope,
-      flags,
-      owner,
-      binder,
-      metadata,
-      ...rest,
-      getSymbolNames: symbolNames(symbols)
-    });
-    if (parentScope) {
-      parentScope.children.add(scope);
-    }
-    if (waitingScopeNames.has(parentScope)) {
-      const waiting = waitingScopeNames.get(parentScope);
-      if (waiting?.has(name)) {
-        const ref = waiting.get(name);
-        ref.value = scope;
-      }
-    }
-    return scope;
-  }
-  function createSymbol(args) {
-    const {
-      name,
-      scope = useDefaultScope(args.flags),
-      refkey,
-      flags = OutputSymbolFlags.None,
-      metadata = {},
-      ...rest
-    } = args;
-    const allRefkeys = [refkey ?? []].flat();
-    if (!scope) {
-      throw new Error("No scope was provided and no scope could be found in context");
-    }
-    if (flags & OutputSymbolFlags.Member && (scope.flags & OutputScopeFlags.MemberScope) === 0) {
-      throw new Error("Member symbols must be stored in a member scope.");
-    }
-    if (scope.flags & OutputScopeFlags.StaticMemberScope) {
-      if (~flags & OutputSymbolFlags.InstanceMember && ~flags & OutputSymbolFlags.StaticMember) {
-        throw new Error("Symbols stored in a member scope must have either OutputSymbolFlags.InstanceMember or OutputSymbolFlags.StaticMember flags");
-      }
-    }
-    const symbol = reactive({
-      originalName: name,
-      name: name,
-      scope,
-      refkeys: allRefkeys,
-      binder,
-      flags,
-      metadata,
-      ...rest
-    });
-    if (args.flags && args.flags & OutputSymbolFlags.InstanceMemberContainer) {
-      symbol.instanceMemberScope = createScope({
-        kind: "member",
-        name: "instance members",
-        parent: undefined,
-        owner: symbol,
-        flags: OutputScopeFlags.InstanceMemberScope
-      });
-    }
-    if (args.flags && args.flags & OutputSymbolFlags.StaticMemberContainer) {
-      symbol.staticMemberScope = createScope({
-        kind: "member",
-        name: "static members",
-        parent: undefined,
-        owner: symbol,
-        flags: OutputScopeFlags.StaticMemberScope
-      });
+  function notifyScopeCreated(scope) {
+    if (!scope.parent || !waitingScopeNames.has(scope.parent)) {
+      return;
     }
-    scope.symbols.add(symbol);
-    for (const refkey of allRefkeys) {
-      scope.symbolsByRefkey.set(refkey, symbol);
+    const waiting = waitingScopeNames.get(scope.parent);
+    if (waiting?.has(scope.name)) {
+      const ref = waiting.get(scope.name);
+      ref.value = scope;
     }
-    deconflict(symbol);
-    notifyRefkey(symbol);
-    return symbol;
   }
-  function deleteSymbol(symbol) {
-    symbol.scope.symbols.delete(symbol);
+  function notifySymbolDeleted(symbol) {
     if (!refkey) {
       return;
     }
@@ -295,101 +90,25 @@ export function createOutputBinder(options = {}) {
       resolution.value = undefined;
     }
   }
-  function instantiateSymbolInto(source, target) {
-    if (target.staticMemberScope) {
-      return;
-    }
-
-    // Ensure static member scope exists
-    addStaticMembersToSymbol(target);
-    effect(() => {
-      // copy instance members if it's an instance‐container
-      if (source.flags & OutputSymbolFlags.InstanceMemberContainer) {
-        copyMembers(source.instanceMemberScope.symbols, target, target.staticMemberScope);
+  function hasTransientScope(symbol) {
+    let sym = symbol;
+    let transient = false;
+    while (sym) {
+      if (sym.flags & OutputSymbolFlags.Transient) {
+        transient = true;
+        break;
       }
-
-      // copy static members if it's a static‐container
-      if (source.flags & OutputSymbolFlags.StaticMemberContainer) {
-        copyMembers(source.staticMemberScope.symbols, target, target.staticMemberScope);
+      if (sym.flags & ~OutputSymbolFlags.Member) {
+        break;
       }
-    });
-
-    /**
-     * 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, targetSym, intoScope) {
-      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) {
-    if (symbol.flags & OutputSymbolFlags.StaticMemberContainer) {
-      // nothing to do.
-      return;
-    }
-    symbol.flags |= OutputSymbolFlags.StaticMemberContainer;
-    symbol.staticMemberScope = createScope({
-      kind: "member",
-      name: "static members",
-      parent: undefined,
-      owner: symbol,
-      flags: OutputScopeFlags.StaticMemberScope
-    });
-  }
-  function addInstanceMembersToSymbol(symbol) {
-    if (symbol.flags & OutputSymbolFlags.InstanceMemberContainer) {
-      // nothing to do.
-      return;
-    }
-    symbol.flags |= OutputSymbolFlags.InstanceMemberContainer;
-    symbol.instanceMemberScope = createScope({
-      kind: "member",
-      name: "instance members",
-      parent: undefined,
-      owner: symbol,
-      flags: OutputScopeFlags.InstanceMemberScope
-    });
-  }
-  function resolveDeclarationByKey(currentScope, currentMemberScope, key) {
-    const targetDeclaration = knownDeclarations.get(key);
-    if (targetDeclaration) {
-      // this any cast hides a ridiculous error, fix it probably
-      return shallowRef(buildResult(currentScope, currentMemberScope, targetDeclaration));
-    } else {
-      return waitForRefkey(key, symbol => {
-        if (symbol) {
-          return buildResult(currentScope, currentMemberScope, symbol);
-        } else {
-          return undefined;
-        }
-      });
+      sym = sym.scope.owner;
     }
+    return transient;
   }
   function buildResult(currentScope, currentMemberScope, targetDeclarationBase) {
+    trace(TracePhase.resolve.success, () => {
+      return `Resolved ${formatRefkeys(targetDeclarationBase.refkeys)} to ${formatSymbol(targetDeclarationBase)}`;
+    });
     if (targetDeclarationBase.flags & OutputSymbolFlags.InstanceMember) {
       // todo: handle referencing nested objects by refkey
       return {
@@ -445,70 +164,56 @@ export function createOutputBinder(options = {}) {
     }
     return chain;
   }
-  function deconflict(symbol) {
-    const scope = symbol.scope;
-    const existingNames = [...scope.symbols].filter(sym => sym.name === symbol.name);
-    if (existingNames.length < 2) {
-      return;
-    }
-    queueJob(deconflictJobForScopeAndName(scope, symbol.name, options.nameConflictResolver));
-  }
-  function deconflictJobForScopeAndName(scope, name, handler) {
-    if (!deconflictJobs.has(scope)) {
-      deconflictJobs.set(scope, new Map());
+  function getSymbolForRefkey(refkey) {
+    if (waitingDeclarations.has(refkey)) {
+      return waitingDeclarations.get(refkey);
     }
-    const jobs = deconflictJobs.get(scope);
-    if (jobs.has(name)) {
-      return jobs.get(name);
+    const symbolRef = shallowRef();
+    waitingDeclarations.set(refkey, symbolRef);
+    if (knownDeclarations.has(refkey)) {
+      symbolRef.value = knownDeclarations.get(refkey);
     }
-    const job = () => {
-      const conflictedSymbols = [...scope.symbols].filter(sym => sym.name === name);
-      if (handler) {
-        handler(name, conflictedSymbols);
-      } else {
-        defaultConflictHandler(name, conflictedSymbols);
-      }
-      jobs.delete(name);
-    };
-    jobs.set(name, job);
-    return job;
+    return symbolRef;
   }
-
-  /**
-   * Default conflict handler. This will rename all but the first symbol
-   * to have a suffix of _2, _3, etc.
-   */
-  function defaultConflictHandler(_, conflictedSymbols) {
-    for (let i = 1; i < conflictedSymbols.length; i++) {
-      conflictedSymbols[i].name = conflictedSymbols[i].originalName + "_" + (i + 1);
-    }
-  }
-  function getSymbolForRefkey(refkey) {
-    const symbol = knownDeclarations.get(refkey);
-    if (symbol) {
-      return shallowRef(symbol);
-    } else {
-      if (waitingDeclarations.has(refkey)) {
-        return waitingDeclarations.get(refkey);
-      } else {
-        const declSignal = shallowRef();
-        waitingDeclarations.set(refkey, declSignal);
-        return declSignal;
+  function resolveDeclarationByKey(currentScope, currentMemberScope, refkey) {
+    const resolvedSymbol = getSymbolForRefkey(refkey);
+    return computed(() => {
+      trace(TracePhase.resolve.pending, () => `Resolving ${formatRefkeys(refkey)}.`);
+      const symbol = resolvedSymbol.value;
+      if (!symbol) {
+        trace(TracePhase.resolve.failure, () => `No symbol for ${formatRefkeys(refkey)}.`);
+        return undefined;
       }
-    }
+      trace(TracePhase.resolve.pending, () => `${formatRefkeys(refkey)} resolved to ${formatSymbolName(symbol)}.`);
+      if (hasTransientScope(symbol)) {
+        trace(TracePhase.resolve.failure, () => `Symbol ${formatSymbolName(symbol)} in transient scope.`);
+        return undefined;
+      }
+      trace(TracePhase.resolve.success, () => `${formatRefkeys(refkey)} successfully resolved to ${formatSymbolName(symbol)}.`);
+      return buildResult(currentScope, currentMemberScope, symbol);
+    });
   }
-  function waitForRefkey(refkey, cb) {
-    let declSignal;
-    if (waitingDeclarations.has(refkey)) {
-      declSignal = waitingDeclarations.get(refkey);
-    } else {
-      declSignal = shallowRef();
-      waitingDeclarations.set(refkey, declSignal);
+  function notifySymbolCreated(symbol) {
+    if (symbol.flags & OutputSymbolFlags.Transient) {
+      // just ignore transient symbols.
+      return;
     }
-    return computed(() => cb(declSignal.value));
-  }
-  function notifyRefkey(symbol) {
-    effect(() => {
+    effect(oldRefkeys => {
+      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);
+
+            // 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);
@@ -526,6 +231,7 @@ export function createOutputBinder(options = {}) {
           }
         }
       }
+      return [...symbol.refkeys];
     });
   }
   function findSymbolName(scope, name) {
@@ -550,7 +256,7 @@ export function createOutputBinder(options = {}) {
       scope ??= binder.globalScope;
       for (const child of scope.children) {
         if (child.name === name) {
-          return ref(child);
+          return shallowRef(child);
         }
       }
       const scopeRef = shallowRef(undefined);
@@ -618,9 +324,12 @@ export function createOutputBinder(options = {}) {
  * is declared, the ref will be updated with the resolution result.
  */
 export function resolve(refkey) {
-  const scope = useScope() ?? useBinder().globalScope;
+  const scope = useScope();
   const memberScope = useMemberScope();
-  const binder = scope.binder;
+  const binder = scope?.binder ?? memberScope?.instanceMembers?.binder ?? memberScope?.staticMembers?.binder;
+  if (!binder) {
+    throw new Error("Can't resolve refkey without a binder");
+  }
   return binder.resolveDeclarationByKey(scope, memberScope?.instanceMembers, refkey);
 }
 const createSymbolsSymbol = Symbol();
@@ -630,16 +339,6 @@ export function getSymbolCreator(creator) {
 export function getSymbolCreatorSymbol() {
   return createSymbolsSymbol;
 }
-function symbolNames(symbols) {
-  return memo(() => {
-    const names = new Set();
-    for (const sym of symbols.values()) {
-      names.add(sym.name);
-    }
-    return names;
-  });
-}
-
 /**
  * Use symbol flags to determine the scope in which a symbol with those flags
  * should be declared given the current context.

package/dist/src/code.d.ts

@@ -1,4 +1,4 @@
-import { Children } from "./jsx-runtime.js";
+import type { Children } from "./runtime/component.js";
 export declare function text(template: TemplateStringsArray, ...substitutions: Children[]): Children;
 /**
  * Turn the provided string template into Children by replacing literal line

package/dist/src/code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../src/code.ts"],"names":[],"mappings":"AAIA,OAAO,EAAS,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEnD,wBAAgB,IAAI,CAClB,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,aAAa,EAAE,QAAQ,EAAE,GAC3B,QAAQ,CAmBV;AAQD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAClB,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,aAAa,EAAE,QAAQ,EAAE,GAC3B,QAAQ,CAiFV"}
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../src/code.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAS,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE9D,wBAAgB,IAAI,CAClB,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,aAAa,EAAE,QAAQ,EAAE,GAC3B,QAAQ,CAmBV;AAQD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAClB,QAAQ,EAAE,oBAAoB,EAC9B,GAAG,aAAa,EAAE,QAAQ,EAAE,GAC3B,QAAQ,CAiFV"}

package/dist/src/components/Block.d.ts

@@ -1,4 +1,4 @@
-import { Children } from "@alloy-js/core";
+import type { Children } from "../runtime/component.js";
 export interface BlockProps {
     /**
      * The opening punctuation of the block. Defaults to "\{".

package/dist/src/components/Block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../src/components/Block.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAmC,MAAM,gBAAgB,CAAC;AAE3E,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,YAYtC"}
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../src/components/Block.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAIxD,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,YAYtC"}

package/dist/src/components/Block.js

@@ -1,5 +1,7 @@
 import { memo as _$memo, createComponent as _$createComponent, createIntrinsic as _$createIntrinsic } from "@alloy-js/core/jsx-runtime";
-import { childrenArray, computed, Indent } from "@alloy-js/core";
+import { computed } from "@vue/reactivity";
+import { childrenArray } from "../utils.js";
+import { Indent } from "./Indent.js";
 /**
  * Create an indented block of source text. The block has `opener` text which is
  * added prior to the block, which defaults to `"{"`, and `closer` text which is

package/dist/src/components/Declaration.d.ts

@@ -1,6 +1,6 @@
-import { OutputSymbol } from "../binder.js";
-import { Children } from "../jsx-runtime.js";
 import { Refkey } from "../refkey.js";
+import type { Children } from "../runtime/component.js";
+import { OutputSymbol } from "../symbols/output-symbol.js";
 /**
  * Create a declaration by providing an already created symbol. The symbol is
  * merely exposed via {@link DeclarationContext}.

package/dist/src/components/Declaration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Declaration.d.ts","sourceRoot":"","sources":["../../../src/components/Declaration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI5C,OAAO,EAAE,QAAQ,EAAa,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC;IAErB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEnC,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,MAAM,MAAM,gBAAgB,GACxB,0BAA0B,GAC1B,wBAAwB,CAAC;AAE7B;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,YA0BlD"}
+{"version":3,"file":"Declaration.d.ts","sourceRoot":"","sources":["../../../src/components/Declaration.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D;;;GAGG;AACH,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,MAAM,EAAE,YAAY,CAAC;IAErB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEnC,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,MAAM,MAAM,gBAAgB,GACxB,0BAA0B,GAC1B,wBAAwB,CAAC;AAE7B;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,YA0BlD"}

package/dist/src/components/Declaration.js

@@ -2,7 +2,8 @@ import { memo as _$memo, createComponent as _$createComponent } from "@alloy-js/
 import { useContext } from "../context.js";
 import { BinderContext } from "../context/binder.js";
 import { DeclarationContext } from "../context/declaration.js";
-import { onCleanup } from "../jsx-runtime.js";
+import { onCleanup } from "../reactivity.js";
+import { OutputSymbol } from "../symbols/output-symbol.js";
 
 /**
  * Create a declaration by providing an already created symbol. The symbol is
@@ -39,13 +40,13 @@ export function Declaration(props) {
   if ("symbol" in props) {
     declaration = props.symbol;
   } else {
-    declaration = binder.createSymbol({
-      name: props.name,
-      refkey: props.refkey,
+    declaration = new OutputSymbol(props.name, {
+      binder,
+      refkeys: [props.refkey ?? []].flat(),
       metadata: props.metadata
     });
     onCleanup(() => {
-      binder.deleteSymbol(declaration);
+      declaration.delete();
     });
   }
   return _$createComponent(DeclarationContext.Provider, {

package/dist/src/components/For.d.ts

@@ -1,5 +1,5 @@
-import { Children } from "@alloy-js/core/jsx-runtime";
 import { Ref } from "@vue/reactivity";
+import type { Children } from "../runtime/component.js";
 import { BaseListProps } from "./List.jsx";
 export type ForCallbackArgs<T> = number extends keyof T ? [value: T[number]] : T extends Ref<infer U> ? ForCallbackArgs<U> : T extends () => infer U ? ForCallbackArgs<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] : [];
 export interface ForProps<T extends ForSupportedCollections | (() => ForSupportedCollections) | Ref<ForSupportedCollections>, U extends Children> extends BaseListProps {

package/dist/src/components/For.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"For.d.ts","sourceRoot":"","sources":["../../../src/components/For.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAQ,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAS,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,eAAe,CAAC,CAAC,IAC3B,MAAM,SAAS,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GACzC,CAAC,SAAS,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAC3C,CAAC,SAAS,MAAM,MAAM,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAC5C,CAAC,SAAS,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,GACpD,CAAC,SAAS,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GACnC,CAAC,SAAS,gBAAgB,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAChD,EAAE,CAAC;AAEP,MAAM,WAAW,QAAQ,CACvB,CAAC,SACG,uBAAuB,GACvB,CAAC,MAAM,uBAAuB,CAAC,GAC/B,GAAG,CAAC,uBAAuB,CAAC,EAChC,CAAC,SAAS,QAAQ,CAClB,SAAQ,aAAa;IACrB;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IAEjE;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,uBAAuB,GAC/B,SAAS,OAAO,EAAE,GAClB,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,GAC7B,WAAW,CAAC,OAAO,CAAC,GACpB,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,GAAG,CACjB,CAAC,SACG,uBAAuB,GACvB,CAAC,MAAM,uBAAuB,CAAC,GAC/B,GAAG,CAAC,uBAAuB,CAAC,EAChC,CAAC,SAAS,QAAQ,EAClB,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,aAetB"}
+{"version":3,"file":"For.d.ts","sourceRoot":"","sources":["../../../src/components/For.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,eAAe,CAAC,CAAC,IAC3B,MAAM,SAAS,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GACzC,CAAC,SAAS,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAC3C,CAAC,SAAS,MAAM,MAAM,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAC5C,CAAC,SAAS,GAAG,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,GACpD,CAAC,SAAS,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GACnC,CAAC,SAAS,gBAAgB,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAChD,EAAE,CAAC;AAEP,MAAM,WAAW,QAAQ,CACvB,CAAC,SACG,uBAAuB,GACvB,CAAC,MAAM,uBAAuB,CAAC,GAC/B,GAAG,CAAC,uBAAuB,CAAC,EAChC,CAAC,SAAS,QAAQ,CAClB,SAAQ,aAAa;IACrB;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IAEjE;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,uBAAuB,GAC/B,SAAS,OAAO,EAAE,GAClB,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,GAC7B,WAAW,CAAC,OAAO,CAAC,GACpB,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,GAAG,CACjB,CAAC,SACG,uBAAuB,GACvB,CAAC,MAAM,uBAAuB,CAAC,GAC/B,GAAG,CAAC,uBAAuB,CAAC,EAChC,CAAC,SAAS,QAAQ,EAClB,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,aAetB"}

package/dist/src/components/For.js

@@ -1,5 +1,5 @@
-import { memo } from "@alloy-js/core/jsx-runtime";
 import { isRef } from "@vue/reactivity";
+import { memo } from "../reactivity.js";
 import { baseListPropsToMapJoinArgs, mapJoin } from "../utils.js";
 /**
  * The For component iterates over the provided array and invokes the child

package/dist/src/components/Indent.d.ts

@@ -1,4 +1,4 @@
-import { Children } from "@alloy-js/core/jsx-runtime";
+import type { Children } from "../runtime/component.js";
 export interface IndentProps {
     children: Children;
     /**