@alloy-js/core 0.17.0 → 0.18.0-dev.3

package/src/runtime/intrinsic.ts

@@ -0,0 +1,199 @@
+import type { Children } from "./component.js";
+export interface IntrinsicElements {
+  /**
+   * Attempt to render the children on a single line if possible. If a group
+   * contains `<breakParent />` or a hard line, or if the group exceeds the
+   * print width, all linebreaks in the group will be broken.
+   */
+  group: { shouldBreak?: boolean; id?: symbol; children: Children };
+
+  /**
+   * A regular line break. This will break if the line exceeds the print
+   * width, otherwise it will be a space.
+   */
+  line: {};
+
+  /**
+   * A regular line break. This will break if the line exceeds the print
+   * width, otherwise it will be a space.
+   */
+  br: {};
+
+  /**
+   * A hard line break. This is a line that will always break, even if the
+   * group does not exceed print width.
+   */
+  hardline: {};
+
+  /**
+   * A hard line break. This is a line that will always break, even if the
+   * group does not exceed print width.
+   */
+  hbr: {};
+
+  /**
+   * A soft line break. This will break if the line exceeds the print width,
+   * otherwise it will be be nothing.
+   */
+  softline: {};
+
+  /**
+   * A soft line break. This will break if the line exceeds the print width,
+   * otherwise it will be be nothing.
+   */
+  sbr: {};
+
+  /**
+   * A literal line break. This will always break, even if the group does not
+   * exceed print width. The new line will ignore indentation.
+   */
+  literalline: {};
+
+  /**
+   * A literal line break. This will always break, even if the group does not
+   * exceed print width. The new line will ignore indentation.
+   */
+  lbr: {};
+
+  /**
+   * Increase the indentation level of the children of this component.
+   * Indentation is determined by the print options provided to the Output
+   * component or source file.
+   */
+  indent: { children: Children };
+
+  /**
+   * Indent the children of this component if the group specified by `groupId`
+   * is broken (or not broken if `negate` is passed). The specified group must
+   * already be printed.
+   */
+  indentIfBreak: { children: Children; groupId: symbol; negate?: boolean };
+
+  /**
+   * Similar to `group`, but will only place a line break before the last
+   * segment to exceed the print width. This is useful for formatting
+   * paragraphs of text where breaks are inserted prior to words which would
+   * otherwise exceed the print width.
+   */
+  fill: { children: Children };
+
+  /**
+   * Force the parent group to break.
+   */
+  breakParent: {};
+
+  /**
+   * Print children if the current group or already printed group specified by
+   * `groupId` is broken. Otherwise, `flatContents` is printed instead.
+   */
+  ifBreak: { children: Children; flatContents?: Children; groupId?: symbol };
+
+  /**
+   * Print this content at the end of the line. Useful for things like line
+   * comments.
+   */
+  lineSuffix: { children: Children };
+
+  /**
+   * Force any line suffixes to print at this point.
+   */
+  lineSuffixBoundary: {};
+
+  /**
+   * Decrease the indentation level of the children of this component.
+   * Indentation is determined by the print options provided to the Output
+   * component or source file.
+   */
+  dedent: { children: Children };
+
+  /**
+   * Indent the children of this component by either the number of characters
+   * indicated by the `width` prop, or by the provided string indicated by the
+   * `string` prop.
+   */
+  align:
+    | { children: Children; width: number }
+    | { children: Children; string: string };
+
+  /**
+   * Mark the current indentation level as "root" for the purposes of literal
+   * line breaks and `dedentToRoot`.
+   */
+  markAsRoot: { children: Children };
+
+  /**
+   * Decrease the indentation level to the root level specified by
+   * `<markAsRoot />`, or else to no indentation.
+   */
+  dedentToRoot: { children: Children };
+}
+export interface IntrinsicElementBase<
+  TKey extends keyof IntrinsicElements = keyof IntrinsicElements,
+> {
+  [intrinsicElementKey]: true;
+  name: TKey;
+  props: IntrinsicElements[TKey];
+}
+
+export function createIntrinsic<TKey extends keyof IntrinsicElements>(
+  name: TKey,
+  props: IntrinsicElements[TKey],
+): IntrinsicElementBase<TKey> {
+  return {
+    [intrinsicElementKey]: true,
+    name,
+    props,
+  };
+}
+
+export function isIntrinsicElement(type: unknown): type is IntrinsicElement {
+  return (
+    typeof type === "object" && type !== null && intrinsicElementKey in type
+  );
+}
+
+export const intrinsicElementKey = Symbol();
+export type IndentIntrinsicElement = IntrinsicElementBase<"indent">;
+export type IndentIfBreakIntrinsicElement =
+  IntrinsicElementBase<"indentIfBreak">;
+export type BrIntrinsicElement = IntrinsicElementBase<"br">;
+export type LineIntrinsicElement = IntrinsicElementBase<"line">;
+export type HbrIntrinsicElement = IntrinsicElementBase<"hbr">;
+export type HardlineIntrinsicElement = IntrinsicElementBase<"hardline">;
+export type SbrIntrinsicElement = IntrinsicElementBase<"sbr">;
+export type SoftlineIntrinsicElement = IntrinsicElementBase<"softline">;
+export type GroupIntrinsicElement = IntrinsicElementBase<"group">;
+export type AlignIntrinsicElement = IntrinsicElementBase<"align">;
+export type FillIntrinsicElement = IntrinsicElementBase<"fill">;
+export type BreakParentIntrinsicElement = IntrinsicElementBase<"breakParent">;
+export type LineSuffixIntrinsicElement = IntrinsicElementBase<"lineSuffix">;
+export type LineSuffixBoundaryIntrinsicElement =
+  IntrinsicElementBase<"lineSuffixBoundary">;
+export type DedentIntrinsicElement = IntrinsicElementBase<"dedent">;
+export type DedentToRootIntrinsicElement = IntrinsicElementBase<"dedentToRoot">;
+export type MarkAsRootIntrinsicElement = IntrinsicElementBase<"markAsRoot">;
+export type LiterallineIntrinsicElement = IntrinsicElementBase<"literalline">;
+export type LbrIntrinsicElement = IntrinsicElementBase<"lbr">;
+export type IfBreakIntrinsicElement = IntrinsicElementBase<"ifBreak">;
+
+export type IntrinsicElement =
+  | IndentIntrinsicElement
+  | IndentIfBreakIntrinsicElement
+  | BrIntrinsicElement
+  | LineIntrinsicElement
+  | HbrIntrinsicElement
+  | HardlineIntrinsicElement
+  | SbrIntrinsicElement
+  | SoftlineIntrinsicElement
+  | GroupIntrinsicElement
+  | AlignIntrinsicElement
+  | FillIntrinsicElement
+  | BreakParentIntrinsicElement
+  | LineSuffixIntrinsicElement
+  | LineSuffixBoundaryIntrinsicElement
+  | DedentIntrinsicElement
+  | LiterallineIntrinsicElement
+  | LbrIntrinsicElement
+  | DedentToRootIntrinsicElement
+  | MarkAsRootIntrinsicElement
+  | IfBreakIntrinsicElement;

package/src/slot.ts

@@ -1,12 +1,11 @@
 import { ref, Ref } from "@vue/reactivity";
+import { effect, memo } from "./reactivity.js";
 import {
   Children,
   Component,
   ComponentDefinition,
-  effect,
-  memo,
-} from "./jsx-runtime.js";
-import { OutputSymbol } from "./symbols/output-symbol.js";
+} from "./runtime/component.js";
+import type { OutputSymbol } from "./symbols/output-symbol.js";
 
 export interface SlotInstance extends ComponentDefinition {}
 

package/src/stc.ts

@@ -1,9 +1,9 @@
 import { code, text } from "./code.js";
-import type {
+import {
   Children,
   ComponentCreator,
   ComponentDefinition,
-} from "./jsx-runtime.js";
+} from "./runtime/component.js";
 
 export type MakeChildrenOptional<T extends object> =
   T extends { children?: any } ?

package/src/sti.ts

@@ -1,19 +1,19 @@
 import { code, text } from "./code.js";
+import { Children } from "./runtime/component.js";
 import {
-  type Children,
   createIntrinsic,
-  type IntrinsicElementBase,
-  type JSX,
-} from "./jsx-runtime.js";
+  IntrinsicElementBase,
+  IntrinsicElements,
+} from "./runtime/intrinsic.js";
 
-export type StiSignature<T extends keyof JSX.IntrinsicElements> = (
+export type StiSignature<T extends keyof IntrinsicElements> = (
   ...args: unknown extends T ? []
-  : {} extends Omit<JSX.IntrinsicElements[T], "children"> ?
-    [props?: JSX.IntrinsicElements[T]]
-  : [props: JSX.IntrinsicElements[T]]
+  : {} extends Omit<IntrinsicElements[T], "children"> ?
+    [props?: IntrinsicElements[T]]
+  : [props: IntrinsicElements[T]]
 ) => StiComponentCreator<T>;
 
-export type StiComponentCreator<T extends keyof JSX.IntrinsicElements> =
+export type StiComponentCreator<T extends keyof IntrinsicElements> =
   (() => IntrinsicElementBase<T>) & {
     code(
       template: TemplateStringsArray,
@@ -26,11 +26,11 @@ export type StiComponentCreator<T extends keyof JSX.IntrinsicElements> =
     children(...children: Children[]): () => IntrinsicElementBase<T>;
   };
 
-export function sti<T extends keyof JSX.IntrinsicElements>(
+export function sti<T extends keyof IntrinsicElements>(
   name: T,
 ): StiSignature<T> {
   return (...args) => {
-    const props: JSX.IntrinsicElements[T] | undefined = args[0];
+    const props: IntrinsicElements[T] | undefined = args[0];
     const fn: StiComponentCreator<T> = () => createIntrinsic(name, props!);
     fn.children = (...children: Children[]) => {
       const propsWithChildren = {

package/src/symbols/flags.ts

@@ -0,0 +1,82 @@
+/**
+ * Flags that describe an output scope.
+ */
+export enum OutputScopeFlags {
+  None = 0,
+
+  /**
+   * This scope is a static member scope.
+   */
+  StaticMemberScope = 1 << 0,
+
+  /**
+   * This scope is an instance member scope.
+   */
+  InstanceMemberScope = 1 << 1,
+
+  /**
+   * This scope is transient, and only exists to be merged with other scopes.
+   */
+  Transient = 1 << 2,
+
+  /**
+   * 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.
+   */
+  MemberScope = StaticMemberScope | InstanceMemberScope,
+}
+
+/**
+ * Flags that describe an output symbol.
+ */
+export enum OutputSymbolFlags {
+  None = 0,
+
+  /**
+   * The symbol is an instance member container. Symbols with this flag will have a
+   * instanceMemberScope property that contains symbols for instance members.
+   */
+  InstanceMemberContainer = 1 << 0,
+
+  /**
+   * The symbol is a static member container. Symbols with this flag will have a
+   * staticMemberScope property that contains symbols for static members.
+   */
+  StaticMemberContainer = 1 << 1,
+
+  /**
+   * Whether this symbol contains members of any kind.
+   */
+  MemberContainer = InstanceMemberContainer | StaticMemberContainer,
+
+  /**
+   * Whether this symbol is an instance member of another symbol (i.e that it is
+   * stored in an instance member scope).
+   */
+  InstanceMember = 1 << 2,
+
+  /**
+   * Whether this symbol is a static member of another symbol (i.e that it is
+   * stored in a static member scope).
+   */
+  StaticMember = 1 << 3,
+
+  /**
+   * Transient symbols are not added to symbol tables and do not create
+   * referencable refkeys. They are used for temporary symbols that are intended
+   * to be used to calculate other symbols.
+   */
+  Transient = 1 << 4,
+
+  /**
+   * This symbol aliases another symbol. Only its name, flags, and scope are
+   * stored in this symbol. Otherwise, everything else is located on the alias
+   * target.
+   */
+  Alias = 1 << 5,
+
+  /**
+   * Whether this is an instance member or static member of another symbol.
+   */
+  Member = InstanceMember | StaticMember,
+}

package/src/symbols/index.ts

@@ -1,3 +1,4 @@
+export * from "./flags.js";
 export * from "./output-scope.js";
 export * from "./output-symbol.js";
 export * from "./symbol-flow.js";

package/src/symbols/output-scope.ts

@@ -20,37 +20,10 @@ import {
   traceEffect,
   TracePhase,
 } from "../tracer.js";
-import { OutputSymbol } from "./output-symbol.js";
+import { OutputScopeFlags } from "./flags.js";
+import type { OutputSymbol } from "./output-symbol.js";
 import { SymbolTable } from "./symbol-table.js";
 
-/**
- * Flags that describe an output scope.
- */
-export enum OutputScopeFlags {
-  None = 0,
-
-  /**
-   * This scope is a static member scope.
-   */
-  StaticMemberScope = 1 << 0,
-
-  /**
-   * This scope is an instance member scope.
-   */
-  InstanceMemberScope = 1 << 1,
-
-  /**
-   * This scope is transient, and only exists to be merged with other scopes.
-   */
-  Transient = 1 << 2,
-
-  /**
-   * 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.
-   */
-  MemberScope = StaticMemberScope | InstanceMemberScope,
-}
-
 let scopeCount = 0;
 
 export interface OutputScopeOptions {

package/src/symbols/output-symbol.ts

@@ -21,61 +21,8 @@ import {
   traceEffect,
   TracePhase,
 } from "../tracer.js";
-import { OutputScope, OutputScopeFlags } from "./output-scope.js";
-/**
- * Flags that describe an output symbol.
- */
-export enum OutputSymbolFlags {
-  None = 0,
-
-  /**
-   * The symbol is an instance member container. Symbols with this flag will have a
-   * instanceMemberScope property that contains symbols for instance members.
-   */
-  InstanceMemberContainer = 1 << 0,
-
-  /**
-   * The symbol is a static member container. Symbols with this flag will have a
-   * staticMemberScope property that contains symbols for static members.
-   */
-  StaticMemberContainer = 1 << 1,
-
-  /**
-   * Whether this symbol contains members of any kind.
-   */
-  MemberContainer = InstanceMemberContainer | StaticMemberContainer,
-
-  /**
-   * Whether this symbol is an instance member of another symbol (i.e that it is
-   * stored in an instance member scope).
-   */
-  InstanceMember = 1 << 2,
-
-  /**
-   * Whether this symbol is a static member of another symbol (i.e that it is
-   * stored in a static member scope).
-   */
-  StaticMember = 1 << 3,
-
-  /**
-   * Transient symbols are not added to symbol tables and do not create
-   * referencable refkeys. They are used for temporary symbols that are intended
-   * to be used to calculate other symbols.
-   */
-  Transient = 1 << 4,
-
-  /**
-   * This symbol aliases another symbol. Only its name, flags, and scope are
-   * stored in this symbol. Otherwise, everything else is located on the alias
-   * target.
-   */
-  Alias = 1 << 5,
-
-  /**
-   * Whether this is an instance member or static member of another symbol.
-   */
-  Member = InstanceMember | StaticMember,
-}
+import { OutputScopeFlags, OutputSymbolFlags } from "./flags.js";
+import { OutputScope } from "./output-scope.js";
 
 export interface OutputSymbolOptions {
   binder?: Binder;

package/src/symbols/symbol-flow.ts

@@ -1,14 +1,10 @@
-import {
-  Context,
-  effect,
-  getContext,
-  onCleanup,
-} from "@alloy-js/core/jsx-runtime";
 import { isRef, Ref, shallowReactive } from "@vue/reactivity";
+import { Context, effect, getContext, onCleanup } from "../reactivity.js";
 
 import { MemberScopeContext } from "../context/member-scope.js";
 import { ScopeContext } from "../context/scope.js";
-import { OutputSymbol, OutputSymbolFlags } from "./output-symbol.js";
+import { OutputSymbolFlags } from "./flags.js";
+import { OutputSymbol } from "./output-symbol.js";
 
 export interface TakeSymbolCallback {
   (symbol: OutputSymbol): void;

package/src/symbols/symbol-slot.tsx

@@ -1,5 +1,6 @@
 import { Ref, ShallowReactive, shallowRef } from "@vue/reactivity";
-import { Children, effect, onCleanup } from "../jsx-runtime.js";
+import { effect, onCleanup } from "../reactivity.js";
+import type { Children } from "../runtime/component.js";
 import { OutputSymbol } from "./output-symbol.js";
 import { takeSymbols } from "./symbol-flow.js";
 

package/src/symbols/symbol-table.ts

@@ -1,4 +1,4 @@
-import { NameConflictResolver } from "../binder.js";
+import type { NameConflictResolver } from "../binder.js";
 import { ReactiveUnionSet } from "../reactive-union-set.js";
 import { queueJob } from "../scheduler.js";
 import {
@@ -7,8 +7,8 @@ import {
   trace,
   TracePhase,
 } from "../tracer.js";
-import { OutputScope } from "./output-scope.js";
-import { OutputSymbol } from "./output-symbol.js";
+import type { OutputScope } from "./output-scope.js";
+import type { OutputSymbol } from "./output-symbol.js";
 
 export class SymbolTable extends ReactiveUnionSet<OutputSymbol> {
   private _namesToDeconflict: Set<string> = new Set();

package/src/tap.ts

@@ -4,7 +4,7 @@ import { DeclarationContext } from "./context/declaration.js";
 import { MemberDeclarationContext } from "./context/member-declaration.js";
 import { useScope } from "./context/scope.js";
 import { SourceFileContext } from "./context/source-file.js";
-import { ComponentDefinition } from "./jsx-runtime.js";
+import type { ComponentDefinition } from "./runtime/component.js";
 import { OutputScope } from "./symbols/output-scope.js";
 import { OutputSymbol } from "./symbols/output-symbol.js";
 

package/src/tracer.ts

@@ -1,9 +1,10 @@
-import { untrack } from "@alloy-js/core/jsx-runtime";
 import { effect, ReactiveEffectRunner } from "@vue/reactivity";
+import { untrack } from "./reactivity.js";
 import type { Refkey } from "./refkey.js";
 import { scheduler } from "./scheduler.js";
-import { OutputScope, OutputScopeFlags } from "./symbols/output-scope.js";
-import { OutputSymbol, OutputSymbolFlags } from "./symbols/output-symbol.js";
+import { OutputScopeFlags, OutputSymbolFlags } from "./symbols/flags.js";
+import { type OutputScope } from "./symbols/output-scope.js";
+import { type OutputSymbol } from "./symbols/output-symbol.js";
 
 // enable tracing for specific phases using a comma separated list of
 // dotted identifiers, e.g. `scope.update,symbol.create`.
@@ -30,7 +31,6 @@ debuggerIdsEnv.split(",").forEach((id) => {
   }
 });
 export const TracePhase = {
-  render: {},
   scope: {
     update: {
       area: "scope",
@@ -112,6 +112,40 @@ export const TracePhase = {
       bg: { r: 100, g: 50, b: 50 },
     },
   },
+  effect: {
+    schedule: {
+      area: "effect",
+      subarea: "schedule",
+      bg: { r: 100, g: 100, b: 0 },
+    },
+    track: {
+      area: "effect",
+      subarea: "track",
+      bg: { r: 75, g: 75, b: 0 },
+    },
+    trigger: {
+      area: "effect",
+      subarea: "trigger",
+      bg: { r: 50, g: 50, b: 0 },
+    },
+  },
+  render: {
+    worker: {
+      area: "render",
+      subarea: "worker",
+      bg: { r: 100, g: 50, b: 0 },
+    },
+    appendChild: {
+      area: "render",
+      subarea: "appendChild",
+      bg: { r: 100, g: 50, b: 0 },
+    },
+    renderEffect: {
+      area: "render",
+      subarea: "render effect",
+      bg: { r: 100, g: 50, b: 0 },
+    },
+  },
 } as const;
 
 interface TracePhase extends TextFormat {

package/src/utils.tsx

@@ -1,19 +1,21 @@
 import { toRaw } from "@vue/reactivity";
+import { BaseListProps } from "./components/List.jsx";
 import {
-  Children,
-  ComponentCreator,
   createCustomContext,
   CustomContext,
   Disposable,
-  isComponentCreator,
   memo,
   onCleanup,
   root,
   untrack,
-} from "./jsx-runtime.js";
+} from "./reactivity.js";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { BaseListProps } from "./components/List.jsx";
 import { OutputDirectory, OutputFile, render } from "./render.js";
+import {
+  Children,
+  ComponentCreator,
+  isComponentCreator,
+} from "./runtime/component.js";
 
 export interface JoinOptions {
   /**