Composition / foldkit-composition/foldkit

Stateful

namespace · packages/composition/src/foldkit/index.ts:546

const Stateful = { sync, views, html }

A page's stateful nodes, as a placed collection holds them: one Bundle per node, keyed by its id, the parent's own Model.

In the guides

Members

Stateful.sync

function · packages/composition/src/foldkit/index.ts:553

sync<Parent, ParentMessage, R, Model, B extends AnyBlock>(
  collection: StatefulCollection<Parent, ParentMessage, R, Model>,
  catalog: Catalog,
  block: B,
  pages: {
    readonly before: Document | undefined
    readonly after: Document
  },
  prepare: (model: Model, props: PropsOf<B>) => Model,
): Update.Step<Parent, ParentMessage, R>

The Step that keeps collection in step with a page's nodes of block, from the page it showed (before, undefined at first) to the one it shows now: a new node is added, its Model prepared from its props, a gone one removed, and one whose props changed started again with the new ones.

Stateful.views

function · packages/composition/src/foldkit/index.ts:584

views<Parent, ParentMessage>(
  collection: Pick<
    StatefulCollection<Parent, ParentMessage, never, unknown>,
    'view'
  >,
  catalog: Catalog,
  block: AnyBlock,
  document: Document,
  parent: Parent,
  h: HtmlBuilder<ParentMessage>,
): Readonly<Record<string, Html>>

Each of a page's nodes of block, drawn by its item, by id: for Renderer.render's data.

Stateful.html

function · packages/composition/src/foldkit/index.ts:600

html(data: unknown): Html

A stateful node's drawn Bundle, from the data views gave it; nothing until it is placed.