@b9g/crank 0.6.1 → 0.7.1

package/crank.d.ts

@@ -1,3 +1,4 @@
+import { CustomEventTarget } from "./event-target.js";
 /**
  * A type which represents all valid values for an element tag.
  */
@@ -9,11 +10,41 @@ export type Tag = string | symbol | Component;
  * or a component function.
  */
 export type TagProps<TTag extends Tag> = TTag extends string ? JSX.IntrinsicElements[TTag] : TTag extends Component<infer TProps> ? TProps & JSX.IntrinsicAttributes : Record<string, unknown> & JSX.IntrinsicAttributes;
-/***
- * SPECIAL TAGS
+/**
+ * Describes all valid values of an element tree, excluding iterables.
+ *
+ * Arbitrary objects can also be safely rendered, but will be converted to a
+ * string using the toString() method. We exclude them from this type to catch
+ * potential mistakes.
+ */
+export type Child = Element | string | number | boolean | null | undefined;
+/**
+ * An arbitrarily nested iterable of Child values.
+ *
+ * We use a recursive interface here rather than making the Children type
+ * directly recursive because recursive type aliases were added in TypeScript
+ * 3.7.
+ *
+ * You should avoid referencing this type directly, as it is mainly exported to
+ * prevent TypeScript errors.
+ */
+export interface ChildIterable extends Iterable<Child | ChildIterable> {
+}
+/**
+ * Describes all valid values for an element tree, including arbitrarily nested
+ * iterables of such values.
  *
- * Crank provides a couple tags which have special meaning for the renderer.
- ***/
+ * This type can be used to represent the type of the children prop for an
+ * element or the return/yield type of a component.
+ */
+export type Children = Child | ChildIterable;
+/**
+ * Represents all functions which can be used as a component.
+ *
+ * @template [TProps=*] - The expected props for the component.
+ */
+export type Component<TProps extends Record<string, unknown> = any> = (this: Context<TProps>, props: TProps, ctx: Context<TProps>) => Children | PromiseLike<Children> | Iterator<Children, Children | void, any> | AsyncIterator<Children, Children | void, any>;
+/*** SPECIAL TAGS ***/
 /**
  * A special tag for grouping multiple children within the same parent.
  *
@@ -32,64 +63,39 @@ export type Fragment = typeof Fragment;
  * This tag is useful for creating element trees with multiple roots, for
  * things like modals or tooltips.
  *
- * Renderer.prototype.render() will implicitly wrap top-level element trees in
- * a Portal element.
+ * Renderer.prototype.render() implicitly wraps top-level in a Portal element
+ * with the root set to the second argument passed in.
  */
-export declare const Portal: any;
+export declare const Portal: Component<{
+    root?: object;
+}> & symbol;
 export type Portal = typeof Portal;
 /**
  * A special tag which preserves whatever was previously rendered in the
- * element’s position.
+ * element's position.
  *
  * Copy elements are useful for when you want to prevent a subtree from
  * rerendering as a performance optimization. Copy elements can also be keyed,
  * in which case the previously rendered keyed element will be copied.
  */
-export declare const Copy: any;
+export declare const Copy: Component<{}> & symbol;
 export type Copy = typeof Copy;
 /**
- * A special tag for injecting raw nodes or strings via a value prop.
+ * A special tag for rendering text nodes.
  *
- * Renderer.prototype.raw() is called with the value prop.
+ * Strings in the element tree are implicitly wrapped in a Text element with
+ * value set to the string.
  */
-export declare const Raw: any;
+export declare const Text: Component<{
+    value: string;
+}> & symbol;
+export type Text = typeof Text;
+/** A special tag for injecting raw nodes or strings via a value prop. */
+export declare const Raw: Component<{
+    value: string | object;
+}> & symbol;
 export type Raw = typeof Raw;
-/**
- * Describes all valid values of an element tree, excluding iterables.
- *
- * Arbitrary objects can also be safely rendered, but will be converted to a
- * string using the toString() method. We exclude them from this type to catch
- * potential mistakes.
- */
-export type Child = Element | string | number | boolean | null | undefined;
-/**
- * An arbitrarily nested iterable of Child values.
- *
- * We use a recursive interface here rather than making the Children type
- * directly recursive because recursive type aliases were added in TypeScript
- * 3.7.
- *
- * You should avoid referencing this type directly, as it is mainly exported to
- * prevent TypeScript errors.
- */
-export interface ChildIterable extends Iterable<Child | ChildIterable> {
-}
-/**
- * Describes all valid values of an element tree, including arbitrarily nested
- * iterables of such values.
- */
-export type Children = Child | ChildIterable;
-/**
- * Represents all functions which can be used as a component.
- *
- * @template [TProps=*] - The expected props for the component.
- */
-export type Component<TProps extends Record<string, unknown> = any> = (this: Context<TProps>, props: TProps, ctx: Context<TProps>) => Children | PromiseLike<Children> | Iterator<Children, Children | void, any> | AsyncIterator<Children, Children | void, any>;
-/**
- * A type to keep track of keys. Any value can be a key, though null and
- * undefined are ignored.
- */
-type Key = unknown;
+type ChildrenIteratorResult = IteratorResult<Children, Children | void>;
 declare const ElementSymbol: unique symbol;
 export interface Element<TTag extends Tag = Tag> {
     /**
@@ -134,9 +140,6 @@ export interface Element<TTag extends Tag = Tag> {
  */
 export declare class Element<TTag extends Tag = Tag> {
     constructor(tag: TTag, props: TagProps<TTag>);
-    get key(): Key;
-    get ref(): unknown;
-    get copy(): boolean;
 }
 export declare function isElement(value: any): value is Element;
 /**
@@ -144,7 +147,7 @@ export declare function isElement(value: any): value is Element;
  *
  * This function is usually used as a transpilation target for JSX transpilers,
  * but it can also be called directly. It additionally extracts special props so
- * they aren’t accessible to renderer methods or components, and assigns the
+ * they aren't accessible to renderer methods or components, and assigns the
  * children prop according to any additional arguments passed to the function.
  */
 export declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, ...children: Array<unknown>): Element<TTag>;
@@ -153,155 +156,386 @@ export declare function cloneElement<TTag extends Tag>(el: Element<TTag>): Eleme
 /**
  * A helper type which repesents all possible rendered values of an element.
  *
- * @template TNode - The node type for the element provided by the renderer.
+ * @template TNode - The type of node produced by the associated renderer.
  *
  * When asking the question, what is the "value" of a specific element, the
  * answer varies depending on the tag:
  *
- * For host elements, the value is the nodes created for the element, e.g. the
- * DOM node in the case of the DOMRenderer.
- *
- * For fragments, the value is the value of the
+ * For intrinsic elements, the value is the node created for the element, e.g.
+ * the DOM node in the case of the DOMRenderer.
  *
- * For portals, the value is undefined, because a Portal element’s root and
+ * For portals, the value is undefined, because a Portal element's root and
  * children are opaque to its parent.
  *
- * For components, the value can be any of the above, because the value of a
- * component is determined by its immediate children.
- *
- * Rendered values can also be strings or arrays of nodes and strings, in the
- * case of component or fragment elements with strings or multiple children.
- *
- * All of these possible values are reflected in this utility type.
+ * For component or fragment elements the value can be a node or an array of
+ * nodes, depending on how many children they have.
  */
-export type ElementValue<TNode> = Array<TNode | string> | TNode | string | undefined;
+export type ElementValue<TNode> = Array<TNode> | TNode | undefined;
 /**
  * @internal
- * The internal nodes which are cached and diffed against new elements when
- * rendering element trees.
+ * Retainers are objects which act as the internal representation of elements,
+ * mirroring the element tree.
+ */
+declare class Retainer<TNode, TScope = unknown> {
+    /** A bitmask. See RETAINER FLAGS above. */
+    f: number;
+    el: Element;
+    ctx: ContextState<TNode, TScope, any> | undefined;
+    children: Array<Retainer<TNode, TScope> | undefined> | Retainer<TNode, TScope> | undefined;
+    fallback: Retainer<TNode, TScope> | undefined;
+    value: ElementValue<TNode> | undefined;
+    scope: TScope | undefined;
+    oldProps: Record<string, any> | undefined;
+    pendingDiff: Promise<undefined> | undefined;
+    onNextDiff: Function | undefined;
+    graveyard: Array<Retainer<TNode, TScope>> | undefined;
+    lingerers: Array<Set<Retainer<TNode, TScope>> | undefined> | undefined;
+    constructor(el: Element);
+}
+/**
+ * Interface for adapting the rendering process to a specific target environment.
+ *
+ * The RenderAdapter defines how Crank elements are mapped to nodes in your target
+ * rendering environment (DOM, Canvas, WebGL, Terminal, etc.). Each method handles
+ * a specific part of the element lifecycle, from creation to removal.
+ *
+ * @template TNode - The type representing a node in your target environment
+ * @template TScope - Additional context data passed down the component tree
+ * @template TRoot - The type of the root container (defaults to TNode)
+ * @template TResult - The type returned when reading element values (defaults to ElementValue<TNode>)
+ *
+ * @example
+ * ```typescript
+ * const adapter: RenderAdapter<MyNode, MyScope> = {
+ *   create: ({ tag, props }) => new MyNode(tag, props),
+ *   patch: ({ node, props }) => node.update(props),
+ *   arrange: ({ node, children }) => node.replaceChildren(children),
+ *   // ... other methods
+ * };
+ * ```
  */
-declare class Retainer<TNode> {
+export interface RenderAdapter<TNode, TScope, TRoot extends TNode | undefined = TNode, TResult = ElementValue<TNode>> {
     /**
-     * The element associated with this retainer.
+     * Creates a new node for the given element tag and props.
+     *
+     * This method is called when Crank encounters a new element that needs to be
+     * rendered for the first time. You should create and return a node appropriate
+     * for your target environment.
+     *
+     * @param data.tag - The element tag (e.g., "div", "sprite", or a symbol)
+     * @param data.tagName - String representation of the tag for debugging
+     * @param data.props - The element's props object
+     * @param data.scope - Current scope context (can be undefined)
+     * @returns A new node instance
+     *
+     * @example
+     * ```typescript
+     * create: ({ tag, props, scope }) => {
+     *   if (tag === "sprite") {
+     *     return new PIXI.Sprite(props.texture);
+     *   }
+     *   throw new Error(`Unknown tag: ${tag}`);
+     * }
+     * ```
      */
-    el: Element;
+    create(data: {
+        tag: string | symbol;
+        tagName: string;
+        props: Record<string, any>;
+        scope: TScope | undefined;
+    }): TNode;
     /**
-     * The context associated with this element. Will only be defined for
-     * component elements.
+     * Adopts existing nodes during hydration.
+     *
+     * Called when hydrating server-rendered content or reusing existing nodes.
+     * Should return an array of child nodes if the provided node matches the
+     * expected tag, or undefined if hydration should fail.
+     *
+     * @param data.tag - The element tag being hydrated
+     * @param data.tagName - String representation of the tag
+     * @param data.props - The element's props
+     * @param data.node - The existing node to potentially adopt
+     * @param data.scope - Current scope context
+     * @returns Array of child nodes to hydrate, or undefined if adoption fails
+     *
+     * @example
+     * ```typescript
+     * adopt: ({ tag, node }) => {
+     *   if (node && node.tagName.toLowerCase() === tag) {
+     *     return Array.from(node.children);
+     *   }
+     *   return undefined; // Hydration mismatch
+     * }
+     * ```
      */
-    ctx: ContextImpl<TNode> | undefined;
+    adopt(data: {
+        tag: string | symbol;
+        tagName: string;
+        props: Record<string, any>;
+        node: TNode | undefined;
+        scope: TScope | undefined;
+    }): Array<TNode> | undefined;
     /**
-     * The retainer children of this element. Retainers form a tree which mirrors
-     * elements. Can be a single child or undefined as a memory optimization.
+     * Creates or updates a text node.
+     *
+     * Called when rendering text content. Should create a new text node or
+     * update an existing one with the provided value.
+     *
+     * @param data.value - The text content to render
+     * @param data.scope - Current scope context
+     * @param data.oldNode - Previous text node to potentially reuse
+     * @param data.hydrationNodes - Nodes available during hydration
+     * @returns A text node containing the given value
+     *
+     * @example
+     * ```typescript
+     * text: ({ value, oldNode }) => {
+     *   if (oldNode && oldNode.text !== value) {
+     *     oldNode.text = value;
+     *     return oldNode;
+     *   }
+     *   return new TextNode(value);
+     * }
+     * ```
      */
-    children: Array<RetainerChild<TNode>> | RetainerChild<TNode>;
+    text(data: {
+        value: string;
+        scope: TScope | undefined;
+        oldNode: TNode | undefined;
+        hydrationNodes: Array<TNode> | undefined;
+    }): TNode;
     /**
-     * The value associated with this element.
+     * Computes scope context for child elements.
+     *
+     * Called to determine what scope context should be passed to child elements.
+     * The scope can be used to pass rendering context like theme, coordinate systems,
+     * or namespaces down the component tree.
+     *
+     * @param data.tag - The element tag
+     * @param data.tagName - String representation of the tag
+     * @param data.props - The element's props
+     * @param data.scope - Current scope context
+     * @returns New scope for children, or undefined to inherit current scope
+     *
+     * @example
+     * ```typescript
+     * scope: ({ tag, props, scope }) => {
+     *   if (tag === "svg") {
+     *     return { ...scope, namespace: "http://www.w3.org/2000/svg" };
+     *   }
+     *   return scope;
+     * }
+     * ```
      */
-    value: ElementValue<TNode>;
+    scope(data: {
+        tag: string | symbol;
+        tagName: string;
+        props: Record<string, any>;
+        scope: TScope | undefined;
+    }): TScope | undefined;
     /**
-     * The cached child values of this element. Only host and component elements
-     * will use this property.
+     * Handles raw values (strings or nodes) that bypass normal element processing.
+     *
+     * Called when rendering Raw elements or other direct node insertions.
+     * Should convert string values to appropriate nodes for your environment.
+     *
+     * @param data.value - Raw string or node value to render
+     * @param data.scope - Current scope context
+     * @param data.hydrationNodes - Nodes available during hydration
+     * @returns ElementValue that can be handled by arrange()
+     *
+     * @example
+     * ```typescript
+     * raw: ({ value, scope }) => {
+     *   if (typeof value === "string") {
+     *     const container = new Container();
+     *     container.innerHTML = value;
+     *     return Array.from(container.children);
+     *   }
+     *   return value;
+     * }
+     * ```
      */
-    cachedChildValues: ElementValue<TNode>;
+    raw(data: {
+        value: string | TNode;
+        scope: TScope | undefined;
+        hydrationNodes: Array<TNode> | undefined;
+    }): ElementValue<TNode>;
     /**
-     * The child which this retainer replaces. This property is used when an
-     * async retainer tree replaces previously rendered elements, so that the
-     * previously rendered elements can remain visible until the async tree
-     * fulfills. Will be set to undefined once this subtree fully renders.
+     * Updates a node's properties.
+     *
+     * Called when element props change. Should efficiently update only the
+     * properties that have changed. This is where you implement prop-to-attribute
+     * mapping, event listener binding, and other property synchronization.
+     *
+     * @param data.tag - The element tag
+     * @param data.tagName - String representation of the tag
+     * @param data.node - The node to update
+     * @param data.props - New props object
+     * @param data.oldProps - Previous props object (undefined for initial render)
+     * @param data.scope - Current scope context
+     * @param data.copyProps - Props to skip (used for copying between renderers)
+     * @param data.isHydrating - Whether currently hydrating
+     * @param data.quietProps - Props to not warn about during hydration
+     *
+     * @example
+     * ```typescript
+     * patch: ({ node, props, oldProps }) => {
+     *   for (const [key, value] of Object.entries(props)) {
+     *     if (oldProps?.[key] !== value) {
+     *       if (key.startsWith("on")) {
+     *         node.addEventListener(key.slice(2), value);
+     *       } else {
+     *         node[key] = value;
+     *       }
+     *     }
+     *   }
+     * }
+     * ```
      */
-    fallbackValue: RetainerChild<TNode>;
-    inflightValue: Promise<ElementValue<TNode>> | undefined;
-    onNextValues: Function | undefined;
-    constructor(el: Element);
-}
-/**
- * The retainer equivalent of ElementValue
- */
-type RetainerChild<TNode> = Retainer<TNode> | string | undefined;
-export interface HydrationData<TNode> {
-    props: Record<string, unknown>;
-    children: Array<TNode | string>;
-}
-export interface RendererImpl<TNode, TScope, TRoot extends TNode = TNode, TResult = ElementValue<TNode>> {
-    scope<TTag extends string | symbol>(scope: TScope | undefined, tag: TTag, props: TagProps<TTag>): TScope | undefined;
-    create<TTag extends string | symbol>(tag: TTag, props: TagProps<TTag>, scope: TScope | undefined): TNode;
-    hydrate<TTag extends string | symbol>(tag: TTag, node: TNode | TRoot, props: TagProps<TTag>): HydrationData<TNode> | undefined;
+    patch(data: {
+        tag: string | symbol;
+        tagName: string;
+        node: TNode;
+        props: Record<string, any>;
+        oldProps: Record<string, any> | undefined;
+        scope: TScope | undefined;
+        copyProps: Set<string> | undefined;
+        isHydrating: boolean;
+        quietProps: Set<string> | undefined;
+    }): void;
     /**
-     * Called when an element’s rendered value is exposed via render, schedule,
-     * refresh, refs, or generator yield expressions.
+     * Arranges child nodes within their parent.
      *
-     * @param value - The value of the element being read. Can be a node, a
-     * string, undefined, or an array of nodes and strings, depending on the
-     * element.
+     * Called after child elements are rendered to organize them within their
+     * parent node. Should efficiently insert, move, or remove child nodes to
+     * match the provided children array.
      *
-     * @returns Varies according to the specific renderer subclass. By default,
-     * it exposes the element’s value.
+     * @param data.tag - The parent element tag
+     * @param data.tagName - String representation of the tag
+     * @param data.node - The parent node
+     * @param data.props - The parent element's props
+     * @param data.children - Array of child nodes in correct order
+     * @param data.oldProps - Previous props (for reference)
      *
-     * This is useful for renderers which don’t want to expose their internal
-     * nodes. For instance, the HTML renderer will convert all internal nodes to
-     * strings.
+     * @example
+     * ```typescript
+     * arrange: ({ node, children }) => {
+     *   // Remove existing children
+     *   node.removeChildren();
+     *   // Add new children in order
+     *   for (const child of children) {
+     *     node.addChild(child);
+     *   }
+     * }
+     * ```
      */
-    read(value: ElementValue<TNode>): TResult;
+    arrange(data: {
+        tag: string | symbol;
+        tagName: string;
+        node: TNode;
+        props: Record<string, any>;
+        children: Array<TNode>;
+        oldProps: Record<string, any> | undefined;
+    }): void;
     /**
-     * Called for each string in an element tree.
+     * Removes a node from its parent.
      *
-     * @param text - The string child.
-     * @param scope - The current scope.
+     * Called when an element is being unmounted. Should clean up the node
+     * and remove it from its parent if appropriate.
      *
-     * @returns A string to be passed to arrange.
+     * @param data.node - The node to remove
+     * @param data.parentNode - The parent node
+     * @param data.isNested - Whether this is a nested removal (child of removed element)
      *
-     * Rather than returning Text nodes as we would in the DOM case, for example,
-     * we delay that step for Renderer.prototype.arrange. We do this so that
-     * adjacent strings can be concatenated, and the actual element tree can be
-     * rendered in normalized form.
+     * @example
+     * ```typescript
+     * remove: ({ node, parentNode, isNested }) => {
+     *   // Clean up event listeners, resources, etc.
+     *   node.cleanup?.();
+     *   // Remove from parent unless it's a nested removal
+     *   if (!isNested && parentNode.contains(node)) {
+     *     parentNode.removeChild(node);
+     *   }
+     * }
+     * ```
      */
-    text(text: string, scope: TScope | undefined, hydration: HydrationData<TNode> | undefined): string;
+    remove(data: {
+        node: TNode;
+        parentNode: TNode;
+        isNested: boolean;
+    }): void;
     /**
-     * Called for each Raw element whose value prop is a string.
+     * Reads the final rendered value from an ElementValue.
      *
-     * @param text - The string child.
-     * @param scope - The current scope.
+     * Called to extract the final result from rendered elements. This allows
+     * you to transform the internal node representation into the public API
+     * that users of your renderer will see.
      *
-     * @returns The parsed node or string.
+     * @param value - The ElementValue to read (array, single node, or undefined)
+     * @returns The public representation of the rendered value
+     *
+     * @example
+     * ```typescript
+     * read: (value) => {
+     *   if (Array.isArray(value)) {
+     *     return value.map(node => node.publicAPI);
+     *   }
+     *   return value?.publicAPI;
+     * }
+     * ```
      */
-    raw(value: string | TNode, scope: TScope | undefined, hydration: HydrationData<TNode> | undefined): ElementValue<TNode>;
-    patch<TTag extends string | symbol, TName extends string>(tag: TTag, node: TNode, name: TName, value: unknown, oldValue: unknown, scope: TScope): unknown;
-    arrange<TTag extends string | symbol>(tag: TTag, node: TNode, props: Record<string, unknown>, children: Array<TNode | string>, oldProps: Record<string, unknown> | undefined, oldChildren: Array<TNode | string> | undefined): unknown;
-    dispose<TTag extends string | symbol>(tag: TTag, node: TNode, props: Record<string, unknown>): unknown;
-    flush(root: TRoot): unknown;
+    read(value: ElementValue<TNode>): TResult;
+    /**
+     * Performs final rendering to the root container.
+     *
+     * Called after the entire render cycle is complete. This is where you
+     * trigger the actual rendering/presentation in your target environment
+     * (e.g., calling render() on a canvas, flushing to the screen, etc.).
+     *
+     * @param root - The root container
+     *
+     * @example
+     * ```typescript
+     * finalize: (root) => {
+     *   // Trigger actual rendering
+     *   if (root instanceof PIXIApplication) {
+     *     root.render();
+     *   }
+     * }
+     * ```
+     */
+    finalize(root: TRoot): void;
 }
-declare const _RendererImpl: unique symbol;
 /**
  * An abstract class which is subclassed to render to different target
- * environments. Subclasses will typically call super() with a custom
- * RendererImpl. This class is responsible for kicking off the rendering
- * process and caching previous trees by root.
+ * environments. Subclasses call super() with a custom RenderAdapter object.
+ * This class is responsible for kicking off the rendering process and caching
+ * previous trees by root.
  *
  * @template TNode - The type of the node for a rendering environment.
  * @template TScope - Data which is passed down the tree.
  * @template TRoot - The type of the root for a rendering environment.
  * @template TResult - The type of exposed values.
  */
-export declare class Renderer<TNode extends object = object, TScope = unknown, TRoot extends TNode = TNode, TResult = ElementValue<TNode>> {
+export declare class Renderer<TNode extends object, TScope, TRoot extends TNode | undefined = TNode, TResult = ElementValue<TNode>> {
     /**
      * @internal
      * A weakmap which stores element trees by root.
      */
-    cache: WeakMap<object, Retainer<TNode>>;
-    [_RendererImpl]: RendererImpl<TNode, TScope, TRoot, TResult>;
-    constructor(impl: Partial<RendererImpl<TNode, TScope, TRoot, TResult>>);
+    cache: WeakMap<object, Retainer<TNode, TScope>>;
+    adapter: RenderAdapter<TNode, TScope, TRoot, TResult>;
+    constructor(adapter: Partial<RenderAdapter<TNode, TScope, TRoot, TResult>>);
     /**
      * Renders an element tree into a specific root.
      *
-     * @param children - An element tree. You can render null with a previously
-     * used root to delete the previously rendered element tree from the cache.
-     * @param root - The node to be rendered into. The renderer will cache
-     * element trees per root.
-     * @param bridge - An optional context that will be the ancestor context of all
-     * elements in the tree. Useful for connecting different renderers so that
-     * events/provisions properly propagate. The context for a given root must be
-     * the same or an error will be thrown.
+     * @param children - An element tree. Rendering null deletes cached renders.
+     * @param root - The root to be rendered into. The renderer caches renders
+     * per root.
+     * @param bridge - An optional context that will be the ancestor context of
+     * all elements in the tree. Useful for connecting different renderers so
+     * that events/provisions/errors properly propagate. The context for a given
+     * root must be the same between renders.
      *
      * @returns The result of rendering the children, or a possible promise of
      * the result if the element tree renders asynchronously.
@@ -309,65 +543,65 @@ export declare class Renderer<TNode extends object = object, TScope = unknown, T
     render(children: Children, root?: TRoot | undefined, bridge?: Context | undefined): Promise<TResult> | TResult;
     hydrate(children: Children, root: TRoot, bridge?: Context | undefined): Promise<TResult> | TResult;
 }
-export interface Context extends Crank.Context {
+interface PullController {
+    iterationP: Promise<ChildrenIteratorResult> | undefined;
+    diff: Promise<undefined> | undefined;
+    onChildError: ((err: unknown) => void) | undefined;
 }
-/**
- * An interface which can be extended to provide strongly typed provisions.
- * See Context.prototype.consume and Context.prototype.provide.
- */
-export interface ProvisionMap extends Crank.ProvisionMap {
+interface ScheduleController {
+    promise: Promise<unknown>;
+    onAbort: () => void;
 }
 /**
  * @internal
  * The internal class which holds context data.
  */
-declare class ContextImpl<TNode = unknown, TScope = unknown, TRoot extends TNode = TNode, TResult = unknown> {
-    /** A bitmask. See CONTEXT FLAGS above. */
-    f: number;
-    /** The actual context associated with this impl. */
-    owner: Context<unknown, TResult>;
-    /**
-     * The renderer which created this context.
-     */
-    renderer: RendererImpl<TNode, TScope, TRoot, TResult>;
+declare class ContextState<TNode = unknown, TScope = unknown, TRoot extends TNode | undefined = TNode | undefined, TResult = unknown> {
+    /** The adapter of the renderer which created this context. */
+    adapter: RenderAdapter<TNode, TScope, TRoot, TResult>;
     /** The root node as set by the nearest ancestor portal. */
     root: TRoot | undefined;
     /**
      * The nearest ancestor host or portal retainer.
      *
      * When refresh is called, the host element will be arranged as the last step
-     * of the commit, to make sure the parent’s children properly reflects the
-     * components’s children.
+     * of the commit, to make sure the parent's children properly reflects the
+     * components's childrenk
      */
     host: Retainer<TNode>;
-    /** The parent context impl. */
-    parent: ContextImpl<TNode, TScope, TRoot, TResult> | undefined;
-    /** The value of the scope at the point of element’s creation. */
+    /** The parent context state. */
+    parent: ContextState | undefined;
+    /** The actual context associated with this state. */
+    ctx: Context<unknown, TResult>;
+    /** The value of the scope at the point of element's creation. */
     scope: TScope | undefined;
     /** The internal node associated with this context. */
     ret: Retainer<TNode>;
     /**
-     * The iterator returned by the component function.
+     * Any iterator returned by a component function.
      *
      * Existence of this property implies that the component is a generator
      * component. It is deleted when a component is returned.
      */
     iterator: Iterator<Children, Children | void, unknown> | AsyncIterator<Children, Children | void, unknown> | undefined;
-    inflightBlock: Promise<unknown> | undefined;
-    inflightValue: Promise<ElementValue<TNode>> | undefined;
-    enqueuedBlock: Promise<unknown> | undefined;
-    enqueuedValue: Promise<ElementValue<TNode>> | undefined;
-    onProps: ((props: Record<string, any>) => unknown) | undefined;
-    onPropsRequested: Function | undefined;
-    constructor(renderer: RendererImpl<TNode, TScope, TRoot, TResult>, root: TRoot | undefined, host: Retainer<TNode>, parent: ContextImpl<TNode, TScope, TRoot, TResult> | undefined, scope: TScope | undefined, ret: Retainer<TNode>);
+    inflight: [Promise<undefined>, Promise<undefined>] | undefined;
+    enqueued: [Promise<undefined>, Promise<undefined>] | undefined;
+    pull: PullController | undefined;
+    onPropsProvided: ((props: unknown) => unknown) | undefined;
+    onPropsRequested: (() => unknown) | undefined;
+    index: number;
+    schedule: ScheduleController | undefined;
+    constructor(adapter: RenderAdapter<TNode, TScope, TRoot, TResult>, root: TRoot, host: Retainer<TNode>, parent: ContextState | undefined, scope: TScope | undefined, ret: Retainer<TNode>);
 }
-declare const _ContextImpl: unique symbol;
-type ComponentProps<T> = T extends () => any ? {} : T extends (props: infer U) => any ? U : T;
+export type ComponentProps<T> = T extends () => unknown ? {} : T extends (props: infer U) => unknown ? U : never;
+export type ComponentPropsOrProps<T> = T extends Function ? ComponentProps<T> : T;
+declare const _ContextState: unique symbol;
 /**
  * A class which is instantiated and passed to every component as its this
- * value. Contexts form a tree just like elements and all components in the
- * element tree are connected via contexts. Components can use this tree to
- * communicate data upwards via events and downwards via provisions.
+ * value/second parameter. Contexts form a tree just like elements and all
+ * components in the element tree are connected via contexts. Components can
+ * use this tree to communicate data upwards via events and downwards via
+ * provisions.
  *
  * @template [T=*] - The expected shape of the props passed to the component,
  * or a component function. Used to strongly type the Context iterator methods.
@@ -375,74 +609,86 @@ type ComponentProps<T> = T extends () => any ? {} : T extends (props: infer U) =
  * places such as the return value of refresh and the argument passed to
  * schedule and cleanup callbacks.
  */
-export declare class Context<T = any, TResult = any> implements EventTarget {
+export declare class Context<T = any, TResult = any> extends CustomEventTarget<Context> {
     /**
      * @internal
+     * DO NOT USE READ THIS PROPERTY.
      */
-    [_ContextImpl]: ContextImpl<unknown, unknown, unknown, TResult>;
-    constructor(impl: ContextImpl<unknown, unknown, unknown, TResult>);
+    [_ContextState]: ContextState<unknown, unknown, unknown, TResult>;
+    constructor(state: ContextState<unknown, unknown, unknown, TResult>);
     /**
      * The current props of the associated element.
      */
-    get props(): ComponentProps<T>;
+    get props(): ComponentPropsOrProps<T>;
     /**
      * The current value of the associated element.
      *
      * @deprecated
      */
     get value(): TResult;
-    [Symbol.iterator](): Generator<ComponentProps<T>>;
-    [Symbol.asyncIterator](): AsyncGenerator<ComponentProps<T>>;
+    get isExecuting(): boolean;
+    get isUnmounted(): boolean;
+    [Symbol.iterator](): Generator<ComponentPropsOrProps<T>, undefined>;
+    [Symbol.asyncIterator](): AsyncGenerator<ComponentPropsOrProps<T>, undefined>;
     /**
      * Re-executes a component.
      *
-     * @returns The rendered value of the component or a promise thereof if the
+     * @param callback - Optional callback to execute before refresh
+     * @returns The rendered result of the component or a promise thereof if the
      * component or its children execute asynchronously.
-     *
-     * The refresh method works a little differently for async generator
-     * components, in that it will resume the Context’s props async iterator
-     * rather than resuming execution. This is because async generator components
-     * are perpetually resumed independent of updates, and rely on the props
-     * async iterator to suspend.
      */
-    refresh(): Promise<TResult> | TResult;
+    refresh(callback?: () => unknown): Promise<TResult> | TResult;
     /**
-     * Registers a callback which fires when the component commits. Will only
-     * fire once per callback and update.
+     * Registers a callback which fires when the component's children are
+     * created. Will only fire once per callback and update.
      */
+    schedule(): Promise<TResult>;
     schedule(callback: (value: TResult) => unknown): void;
     /**
-     * Registers a callback which fires when the component’s children are
-     * rendered into the root. Will only fire once per callback and render.
+     * Registers a callback which fires when the component's children are fully
+     * rendered. Will only fire once per callback and update.
      */
+    after(): Promise<TResult>;
+    after(callback: (value: TResult) => unknown): void;
+    /**
+     * @deprecated the flush() method has been renamed to after().
+     */
+    flush(): Promise<TResult>;
     flush(callback: (value: TResult) => unknown): void;
     /**
-     * Registers a callback which fires when the component unmounts. Will only
-     * fire once per callback.
+     * Registers a callback which fires when the component unmounts.
+     *
+     * The callback can be async to defer the unmounting of a component's children.
      */
+    cleanup(): Promise<TResult>;
     cleanup(callback: (value: TResult) => unknown): void;
     consume<TKey extends keyof ProvisionMap>(key: TKey): ProvisionMap[TKey];
     consume(key: unknown): any;
     provide<TKey extends keyof ProvisionMap>(key: TKey, value: ProvisionMap[TKey]): void;
     provide(key: unknown, value: any): void;
-    addEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: boolean | AddEventListenerOptions): void;
-    removeEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: EventListenerOptions | boolean): void;
-    dispatchEvent(ev: Event): boolean;
+    [CustomEventTarget.dispatchEventOnSelf](ev: Event): void;
 }
 /**
- * A map of event type strings to Event subclasses. Can be extended via
- * TypeScript module augmentation to have strongly typed event listeners.
+ * An interface which can be extended to provide strongly typed provisions.
+ * See Context.prototype.consume and Context.prototype.provide.
  */
+export interface ProvisionMap extends Crank.ProvisionMap {
+}
 export interface EventMap extends Crank.EventMap {
-    [type: string]: Event;
 }
-type MappedEventListener<T extends string> = (ev: EventMap[T]) => unknown;
+type MappedEventListener<T extends string> = (ev: Crank.EventMap[T]) => unknown;
 type MappedEventListenerOrEventListenerObject<T extends string> = MappedEventListener<T> | {
     handleEvent: MappedEventListener<T>;
 };
+export interface Context extends Crank.Context {
+    addEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: EventListenerOptions | boolean): void;
+    dispatchEvent<T extends string>(ev: EventMap[T] | Event): boolean;
+}
 declare global {
     namespace Crank {
         interface EventMap {
+            [tag: string]: Event;
         }
         interface ProvisionMap {
         }
@@ -458,32 +704,19 @@ declare global {
             key?: unknown;
             ref?: unknown;
             copy?: unknown;
-            /** @deprecated */
-            ["static"]?: unknown;
-            /** @deprecated */
-            ["crank-key"]?: unknown;
-            /** @deprecated */
-            ["crank-ref"]?: unknown;
-            /** @deprecated */
-            ["crank-static"]?: unknown;
-            /** @deprecated */
-            ["c-key"]?: unknown;
-            /** @deprecated */
-            ["c-ref"]?: unknown;
-            /** @deprecated */
-            ["c-static"]?: unknown;
-            /** @deprecated */
-            $key?: unknown;
-            /** @deprecated */
-            $ref?: unknown;
-            /** @deprecated */
-            $static?: unknown;
+            hydrate?: unknown;
         }
         interface ElementChildrenAttribute {
             children: {};
         }
     }
 }
+/**
+ * A re-export of some Crank exports as the default export.
+ *
+ * Some JSX tools expect things like createElement/Fragment to be defined on
+ * the default export. Prefer using the named exports directly.
+ */
 declare const _default: {
     createElement: typeof createElement;
     Fragment: string;