@alloy-js/core 0.5.0 → 0.7.0

package/src/components/Scope.tsx

@@ -21,7 +21,9 @@ export function Scope(props: ScopeProps) {
     scope = binder.createScope({ kind, name: props.name! });
   }
 
-  return <ScopeContext.Provider value={scope}>
+  return (
+    <ScopeContext.Provider value={scope}>
       {props.children}
-    </ScopeContext.Provider>;
+    </ScopeContext.Provider>
+  );
 }

package/src/components/Show.tsx

@@ -0,0 +1,11 @@
+import { Children } from "@alloy-js/core/jsx-runtime";
+
+export interface ShowProps {
+  children: Children;
+  fallback?: Children;
+  when: boolean | undefined | null;
+}
+
+export function Show(props: ShowProps) {
+  return () => (props.when ? props.children : props.fallback);
+}

package/src/components/SourceDirectory.tsx

@@ -20,7 +20,11 @@ export function SourceDirectory(props: SourceDirectoryProps) {
   nodeContext.meta.directory = {
     path: sdPath,
   };
-  return <SourceDirectoryContext.Provider value={context}>{props.children}</SourceDirectoryContext.Provider>;
+  return (
+    <SourceDirectoryContext.Provider value={context}>
+      {props.children}
+    </SourceDirectoryContext.Provider>
+  );
 }
 
 function createSourceDirectoryContext(

package/src/components/SourceFile.tsx

@@ -1,12 +1,12 @@
 import { join } from "pathe";
 import { useContext } from "../context.js";
-import { IndentContext } from "../context/indent.js";
 import { SourceDirectoryContext } from "../context/source-directory.js";
 import { SourceFileContext } from "../context/source-file.js";
 import { Children, ComponentDefinition, getContext } from "../jsx-runtime.js";
 import { Refkey } from "../refkey.js";
+import { PrintTreeOptions } from "../render.js";
 
-export interface SourceFileProps {
+export interface SourceFileProps extends PrintTreeOptions {
   /**
    * The path of this file relative to its parent directory
    */
@@ -24,12 +24,6 @@ export interface SourceFileProps {
    * contents.
    */
   reference?: ComponentDefinition<{ refkey: Refkey }>;
-
-  /**
-   * A string representing one indent level, used when reindenting contents of
-   * this file.
-   */
-  indent?: string;
 }
 
 export function SourceFile(props: SourceFileProps) {
@@ -43,13 +37,15 @@ export function SourceFile(props: SourceFileProps) {
   const nodeContext = getContext()!;
   nodeContext.meta ??= {};
   nodeContext.meta.sourceFile = context;
+  nodeContext.meta.printOptions = {
+    printWidth: props.printWidth,
+    tabWidth: props.tabWidth,
+    useTabs: props.useTabs,
+  };
 
-  return <SourceFileContext.Provider value={context}>
-    { props.indent
-      ? <IndentContext.Provider value={{ level: 0, indent: props.indent, indentString: "" }}>
-          {props.children}
-        </IndentContext.Provider>
-      : props.children
-    }
-  </SourceFileContext.Provider>;
+  return (
+    <SourceFileContext.Provider value={context}>
+      {props.children}
+    </SourceFileContext.Provider>
+  );
 }

package/src/components/StatementList.tsx

@@ -0,0 +1,16 @@
+import { Children, List } from "@alloy-js/core";
+
+export interface StatementListProps {
+  children: Children;
+}
+
+/**
+ * Join child elements with semicolons and hardlines.
+ */
+export function StatementList(props: StatementListProps) {
+  return (
+    <List semicolon hardline enderPunctuation>
+      {props.children}
+    </List>
+  );
+}

package/src/components/Switch.tsx

@@ -0,0 +1,62 @@
+import { Children, memo, taggedComponent } from "@alloy-js/core/jsx-runtime";
+import { childrenArray, findKeyedChildren } from "../utils.js";
+
+export interface SwitchProps {
+  children: Children;
+}
+
+/**
+ * Conditionally render blocks of content based on the `when` prop of nested
+ * {@link Match} components.
+ *
+ * @example
+ *
+ * ```tsx
+ * <Switch>
+ *   <Match when={someCondition}>
+ *     <div>Condition met!</div>
+ *   </Match>
+ *   <Match else>
+ *     <div>Condition not met!</div>
+ *   </Match>
+ * </Switch>
+ * ```
+ */
+export function Switch(props: SwitchProps) {
+  const children = childrenArray(() => props.children);
+  const matches = findKeyedChildren(children, matchTag);
+
+  return memo(() => {
+    for (const match of matches) {
+      if (match.props.when || match.props.else) {
+        return match.props.children;
+      }
+    }
+
+    return undefined;
+  });
+}
+
+export interface MatchProps {
+  /**
+   * Condition under which the children of this element will be rendered.
+   */
+  when?: boolean;
+
+  /**
+   * If no `when` is matched, the children of this element will be rendered.
+   * The `else` match must be placed last.
+   */
+  else?: boolean;
+  children: Children;
+}
+
+export const matchTag = Symbol();
+
+/**
+ * The Match component is used inside of a {@link Switch} component to
+ * define conditionally rendered blocks of content.
+ */
+export const Match = taggedComponent(matchTag, (props: MatchProps) => {
+  return () => (props.when ? props.children : undefined);
+});

package/src/components/Wrap.tsx

@@ -0,0 +1,29 @@
+import { Children, ComponentDefinition } from "@alloy-js/core/jsx-runtime";
+
+export interface WrapProps<TProps> {
+  /**
+   * When true, the children will be wrapped with the provided component.
+   * Otherwise, the children will be rendered as is.
+   */
+  when: boolean;
+
+  /** Children to be wrapped. */
+  children: Children;
+
+  /** Component to be used for wrapping. */
+  with: ComponentDefinition<TProps>;
+
+  /** Props to pass to the wrapper component. */
+  props?: Omit<TProps, "children">;
+}
+
+/**
+ * Conditionally wrap the children of this component with the component given to
+ * `with` and passing `props` to it.
+ */
+export function Wrap<TProps>(props: WrapProps<TProps>) {
+  const Wrapper = props.with as any;
+  return props.when ?
+      <Wrapper {...(props.props ?? {})}>{props.children}</Wrapper>
+    : props.children;
+}

package/src/components/index.tsx

@@ -1,10 +1,17 @@
+export * from "./Block.js";
 export * from "./Declaration.js";
-export * from "./Indent.js";
+export * from "./For.js";
+export * from "./Indent.jsx";
+export * from "./List.jsx";
 export * from "./MemberDeclaration.jsx";
 export * from "./MemberName.jsx";
 export * from "./MemberScope.jsx";
 export * from "./Name.jsx";
 export * from "./Output.js";
 export * from "./Scope.js";
+export * from "./Show.jsx";
 export * from "./SourceDirectory.js";
 export * from "./SourceFile.js";
+export * from "./StatementList.jsx";
+export * from "./Switch.jsx";
+export * from "./Wrap.jsx";

package/src/components/stc/index.ts

@@ -1,9 +1,26 @@
-import { stc } from "../../utils.js";
+import { stc, sti } from "../../stc.js";
 import * as base from "../index.js";
 
+export const Block = stc(base.Block);
 export const Declaration = stc(base.Declaration);
+export const For = stc(base.For);
 export const Indent = stc(base.Indent);
+export const List = stc(base.List);
+export const MemberDeclaration = stc(base.MemberDeclaration);
+export const MemberName = stc(base.MemberName);
+export const MemberScope = stc(base.MemberScope);
+export const Name = stc(base.Name);
 export const Output = stc(base.Output);
 export const Scope = stc(base.Scope);
+export const Show = stc(base.Show);
+export const StatementList = stc(base.StatementList);
 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 indent = sti("indent");
+export const hbr = sti("hbr");
+export const sbr = sti("sbr");
+export const lbr = sti("lbr");
+export const br = sti("br");

package/src/context/index.ts

@@ -1,7 +1,6 @@
 export * from "./assignment.js";
 export * from "./binder.js";
 export * from "./declaration.js";
-export * from "./indent.js";
 export * from "./member-declaration.js";
 export * from "./member-scope.js";
 export * from "./name-policy.js";

package/src/context.ts

@@ -4,7 +4,6 @@ import {
   ComponentDefinition,
   effect,
   getContext,
-  untrack,
 } from "./jsx-runtime.js";
 
 export interface ComponentContext<T> {
@@ -49,8 +48,8 @@ export function createContext<T = unknown>(
       const rendered = shallowRef();
       effect(() => {
         context!.context![id] = props.value;
-        rendered.value = untrack(() => props.children);
-      });
+        rendered.value = () => props.children;
+      }, undefined);
 
       return rendered.value;
     },

package/src/index.browser.ts

@@ -0,0 +1,2 @@
+export * from "./index.js"; // Re-export everything
+export { writeOutput } from "./write-output.browser.js"; // Override writeOutput for browsers

package/src/index.ts

@@ -17,6 +17,7 @@ export * from "./jsx-runtime.js";
 export * from "./name-policy.js";
 export * from "./refkey.js";
 export * from "./render.js";
+export * from "./stc.js";
 export * from "./tap.js";
 export * from "./utils.js";
 export * from "./write-output.js";

package/src/jsx-runtime.ts

@@ -1,14 +1,18 @@
 // Much of the implementations in this file are inspired by vuerx-js
 // See: https://github.com/ryansolid/vuerx-jsx.
 import {
+  isReactive,
   pauseTracking,
+  proxyRefs,
   Ref,
   resetTracking,
   shallowRef,
   stop,
+  toRefs,
   effect as vueEffect,
 } from "@vue/reactivity";
 import { Refkey } from "./refkey.js";
+import { RenderedTextTree } from "./render.js";
 
 if ((globalThis as any).ALLOY) {
   throw new Error(
@@ -31,6 +35,11 @@ export interface Context {
   // store random info about the node
   meta?: Record<string, any>;
 
+  /**
+   * A cache of RenderTextTree nodes created within this context,
+   * indexed by the component or function which created them.
+   */
+  elementCache: ElementCache;
   /**
    * When this context was created by a component, this will
    * be the component that created it.
@@ -43,21 +52,35 @@ export function getContext() {
   return globalContext;
 }
 
-export function root<T>(
-  fn: (d: Disposable) => T,
-  componentOwner?: ComponentCreator<any>,
-): T {
-  globalContext = {
-    componentOwner,
+export function getElementCache() {
+  return getContext()!.elementCache;
+}
+
+export type ElementCacheKey =
+  | ComponentCreator
+  | (() => unknown)
+  | CustomContext;
+export type ElementCache = Map<ElementCacheKey, RenderedTextTree>;
+
+export interface RootOptions {
+  componentOwner?: ComponentCreator<any>;
+}
+
+export function root<T>(fn: (d: Disposable) => T, options?: RootOptions): T {
+  const context: Context = {
+    componentOwner: options?.componentOwner,
     disposables: [],
     owner: globalContext,
     context: {},
+    elementCache: new Map(),
   };
+
+  globalContext = context;
   let ret;
   try {
     ret = untrack(() =>
       fn(() => {
-        for (const d of globalContext!.disposables) {
+        for (const d of context!.disposables) {
           d();
         }
       }),
@@ -83,28 +106,31 @@ export function memo<T>(fn: () => T, equal?: boolean): () => T {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     (!equal || prev !== res) && (o.value = res);
     return res;
-  });
+  }, undefined as T);
   return () => o.value;
 }
 
 export function effect<T>(fn: (prev?: T) => T, current?: T) {
-  const context = {
-    src: "effect",
+  const context: Context = {
     context: {},
     disposables: [] as (() => void)[],
     owner: globalContext,
-  } as any;
+    elementCache: new Map(),
+  };
 
   const cleanupFn = (final: boolean) => {
     const d = context.disposables;
     context.disposables = [];
     for (let k = 0, len = d.length; k < len; k++) d[k]();
+
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     final && stop(c);
   };
 
+  onCleanup(() => cleanupFn(true));
   const c = vueEffect(() => {
     cleanupFn(false);
+
     const oldContext = globalContext;
     globalContext = context;
     try {
@@ -112,17 +138,64 @@ export function effect<T>(fn: (prev?: T) => T, current?: T) {
     } finally {
       globalContext = oldContext;
     }
-  });
-
-  cleanup(() => cleanupFn(true));
+  }, {});
 }
 
-export function cleanup(fn: Disposable) {
+/**
+ * Register a cleanup function which is called when the current reactive scope
+ * is recalculated or disposed. This is useful to clean up any side effects
+ * created in the reactive scope.
+ *
+ * @remarks
+ *
+ * When onCleanup is called inside a component definition, the provided function
+ * is called when the component is removed from the tree. This can be useful to
+ * clean up any side effects created as a result of rendering the component. For
+ * example, if rendering a component creates a symbol, `onCleanup` can be used
+ * to remove the symbol when the component is removed from the tree.
+ *
+ * When onCleanup is called inside a memo or effect, the function is called when
+ * the effect is refreshed (e.g. when a memo or computed recalculates) or
+ * disposed (e.g. it is no longer needed because it is attached to a component
+ * which was removed).
+ */
+export function onCleanup(fn: Disposable) {
   if (globalContext != null) {
     globalContext.disposables.push(fn);
   }
 }
 
+/**
+ * Create a custom reactive context for the children returned by
+ * the provided context.
+ */
+export interface CustomContext {
+  [CUSTOM_CONTEXT_SYM]: true;
+  useCustomContext: (useCb: CustomContextChildrenCallback) => void;
+}
+
+export type CustomContextChildrenCallback = (child: Children) => void;
+const CUSTOM_CONTEXT_SYM = Symbol();
+
+export function createCustomContext(
+  useCallback: (useChildren: CustomContextChildrenCallback) => void,
+): CustomContext {
+  return {
+    [CUSTOM_CONTEXT_SYM]: true,
+    useCustomContext(useCb: (children: Children) => void): void {
+      useCallback(useCb);
+    },
+  };
+}
+
+export function isCustomContext(child: Children): child is CustomContext {
+  return (
+    typeof child === "object" &&
+    child !== null &&
+    Object.hasOwn(child, CUSTOM_CONTEXT_SYM)
+  );
+}
+
 export type Child =
   | string
   | boolean
@@ -131,23 +204,24 @@ export type Child =
   | null
   | void
   | (() => Children)
-  | Child[]
   | Ref
-  | Refkey;
+  | Refkey
+  | CustomContext
+  | IntrinsicElement;
 
-export type Children = Child | Child[];
+export type Children = Child | Children[];
 export type Props = Record<string, any>;
 
 export interface ComponentDefinition<TProps = Props> {
-  (props: TProps): Child | Children;
+  (props: TProps): Children;
 }
 export interface Component<TProps = Props> {
-  (props: TProps): Child | Children;
+  (props: TProps): Children;
   tag?: symbol;
 }
 export interface ComponentCreator<TProps = Props> {
   component: Component<TProps>;
-  (): Child | Children;
+  (): Children;
   props: Props;
   tag?: symbol;
 }
@@ -219,8 +293,31 @@ export function isComponentCreator(item: unknown): item is ComponentCreator {
  */
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace JSX {
-  export interface IntrinsicElements {}
-  export type ElementType = ComponentDefinition<any>;
+  export interface IntrinsicElements {
+    group: { shouldBreak?: boolean; id?: symbol; children: Children };
+    line: {};
+    br: {};
+    hardline: {};
+    hbr: {};
+    softline: {};
+    sbr: {};
+    literalline: {};
+    lbr: {};
+    indent: { children: Children };
+    indentIfBreak: { children: Children; groupId: symbol; negate?: boolean };
+    fill: { children: Children };
+    breakParent: {};
+    ifBreak: { children: Children; flatContents?: Children; groupId?: symbol };
+    lineSuffix: { children: Children };
+    lineSuffixBoundary: {};
+    dedent: { children: Children };
+    align:
+      | { children: Children; width: number }
+      | { children: Children; string: string };
+    markAsRoot: { children: Children };
+    dedentToRoot: { children: Children };
+  }
+  export type ElementType = string | ComponentDefinition<any>;
   export type Element = Children;
   export interface ElementChildrenAttribute {
     children: {};
@@ -258,6 +355,76 @@ export function taggedComponent<TProps = Props>(
   return component;
 }
 
+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;
+
+export interface IntrinsicElementBase<
+  TKey extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements,
+> {
+  [intrinsicElementKey]: true;
+  name: TKey;
+  props: JSX.IntrinsicElements[TKey];
+}
+export function createIntrinsic<TKey extends keyof JSX.IntrinsicElements>(
+  name: TKey,
+  props: JSX.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 function mergeProps<T, U>(source: T, source1: U): T & U;
 export function mergeProps<T, U, V>(
   source: T,
@@ -296,6 +463,61 @@ export function mergeProps(...sources: any): any {
   return target;
 }
 
+export type SplitProps<T, K extends (readonly (keyof T)[])[]> = [
+  ...{
+    [P in keyof K]: P extends `${number}` ?
+      Pick<T, Extract<K[P], readonly (keyof T)[]>[number]>
+    : never;
+  },
+  { [P in keyof T as Exclude<P, K[number][number]>]: T[P] },
+];
+
+export function splitProps<
+  T extends Record<any, any>,
+  K extends [readonly (keyof T)[], ...(readonly (keyof T)[])[]],
+>(props: T, ...keys: K): SplitProps<T, K> {
+  if (isReactive(props)) {
+    const refs = untrack(() => toRefs(props));
+    const remainingKeys = new Set(Object.keys(refs));
+
+    const result: any = keys.map((keySet) => {
+      const resultSet: any = {};
+      for (const key of keySet) {
+        resultSet[key] = refs[key];
+        remainingKeys.delete(key as string);
+      }
+      return proxyRefs(resultSet);
+    });
+
+    const remaining: any = {};
+    for (const key of remainingKeys) {
+      remaining[key] = refs[key];
+    }
+
+    return [...result, proxyRefs(remaining)] as any;
+  }
+
+  const descriptors = Object.getOwnPropertyDescriptors(props);
+  const remainingKeys = new Set(Object.keys(descriptors));
+  const result: any = keys.map((keySet) => {
+    const resultSet: any = {};
+    for (const key of keySet) {
+      if (key in descriptors) {
+        Object.defineProperty(resultSet, key, descriptors[key]);
+        remainingKeys.delete(key as string);
+      }
+    }
+    return resultSet;
+  });
+
+  const remaining: any = {};
+  for (const key of remainingKeys) {
+    Object.defineProperty(remaining, key, descriptors[key]);
+  }
+
+  return [...result, remaining] as any;
+}
+
 function shouldDebug() {
   return typeof process !== "undefined" && !!process.env?.ALLOY_DEBUG;
 }