stax-monorepo
    Preparing search index...

    Interface IControlCtx<A>

    Context interface for control flow operations. Abstracts SSR/Hydration/Client differences behind a unified API.

    interface IControlCtx<A> {
        addSlot: <E, R>(
            key: string,
            render: (
                ctx: { index: Signal.Signal<number>; item: Signal.Signal<unknown> },
            ) => Element<A, E, R>,
            options?: {
                atIndex?: number;
                initialIndex?: number;
                initialItem?: unknown;
                staggerStartAt?: number;
                totalItems?: number;
            },
        ) => Effect<SlotEntry<A>, E, R>;
        beginSync: () => Effect<void>;
        defaultContainer: Element<A, never, never>;
        endSync: () => Effect<void, never, Scope>;
        finalizeContainer: () => Effect<void>;
        fork: () => Effect<IControlCtx<A>>;
        getContainer: <E, R>(create?: () => Element<A, E, R>) => Element<A, E, R>;
        getSlot: (key: string) => Effect<SlotEntry<A> | undefined>;
        getSlotKeys: () => Effect<readonly string[]>;
        moveSlot: (key: string, toIndex: number) => Effect<void>;
        removeSlot: (key: string) => Effect<void, never, Scope>;
        subscribe: <V, E, R>(
            readable: Readable.Readable<V>,
            handler: (value: V) => Effect<void, E, R>,
        ) => Effect<void, E, Scope | R>;
    }

    Type Parameters

    • A

      The element type (e.g., HTMLElement | SVGElement for DOM)

      Package split:

      • packages/core: Interface definition, reconcile function, thin wrappers
      • packages/dom: Live implementations (Client, Hydration, SSR)
    Index
    addSlot beginSync defaultContainer endSync finalizeContainer fork getContainer getSlot getSlotKeys moveSlot removeSlot subscribe
    addSlot: <E, R>(
        key: string,
        render: (
            ctx: { index: Signal.Signal<number>; item: Signal.Signal<unknown> },
        ) => Element<A, E, R>,
        options?: {
            atIndex?: number;
            initialIndex?: number;
            initialItem?: unknown;
            staggerStartAt?: number;
            totalItems?: number;
        },
    ) => Effect<SlotEntry<A>, E, R>

    Add a new slot to the container. Creates item/index signals internally and passes them to render callback. Handles enter animations in client mode.

    beginSync: () => Effect<void>

    Bracket the start of a reconcile batch. Called by reconcile before any removeSlot / addSlot / moveSlot in the batch fires.

    The Client implementation uses this to snapshot each existing slot's bounding rect for FLIP reorder animation. Hydration and SSR treat it as a no-op.

    defaultContainer: Element<A, never, never>

    Default container element. Each environment provides its own implementation. e.g., DOM uses $.div({ style: "display: contents" })

    endSync: () => Effect<void, never, Scope>

    Bracket the end of a reconcile batch. Called by reconcile after every removeSlot / addSlot / moveSlot in the batch has completed and the DOM is in its post-batch shape.

    The Client implementation re-measures each still-present slot's bounding rect, computes the delta against the beginSync snapshot, and forks the FLIP invert-then-release animation for any slot that moved. Hydration and SSR treat it as a no-op.

    Requires Scope.Scope — Client mode forks the FLIP release into the ambient scope so container unmount interrupts an in-flight animation.

    finalizeContainer: () => Effect<void>

    Signal that the container's initial children have been processed. In hydration mode, this pops the container from the traversal stack so sibling elements are found correctly. No-op in client/SSR mode.

    fork: () => Effect<IControlCtx<A>>

    Create a child context with isolated state. Each control function (when, match, each) calls this to get its own container and slots, preventing conflicts when nested or used with collect.

    getContainer: <E, R>(create?: () => Element<A, E, R>) => Element<A, E, R>

    Get or create the container element.

    • SSR: calls create(), adds hydration markers
    • Hydration: finds existing container, falls back to create()
    • Client: calls create()

    Uses defaultContainer if create is not provided.

    getSlot: (key: string) => Effect<SlotEntry<A> | undefined>

    Get a slot by its key.

    getSlotKeys: () => Effect<readonly string[]>

    Get all current slot keys. Reads from DOM in hydration mode.

    moveSlot: (key: string, toIndex: number) => Effect<void>

    Move a slot to a new index position. Noop in SSR mode.

    removeSlot: (key: string) => Effect<void, never, Scope>

    Remove a slot from the container. Noop in SSR, handles exit animations in client mode.

    Requires Scope.Scope — Client mode forks the exit animation into the ambient scope so removeSlot can return before it finishes, and so container unmount interrupts an in-flight exit.

    subscribe: <V, E, R>(
        readable: Readable.Readable<V>,
        handler: (value: V) => Effect<void, E, R>,
    ) => Effect<void, E, Scope | R>

    Subscribe to a Readable and run handler on each change. Noop in SSR, forks stream subscription in client/hydration.

    Requires Scope.Scope — Client/Hydration modes fork the stream into the ambient scope so container unmount cancels it.

    Settings
    Member Visibility

    On This Page
    Properties