Composition / foldkit-composition/foldkit

RenderContext

interface · packages/composition/src/foldkit/index.ts:54

interface RenderContext<B extends AnyBlock, Message> {
  readonly id: NodeId
  readonly props: PropsOf<B>
  readonly regions: {
    readonly [R in keyof B['regions']]: ReadonlyArray<Html>
  }
  readonly h: HtmlBuilder<Message>
  readonly mode: Mode
  readonly appearance: Readonly<Record<string, AppearanceChoice>>
  readonly on: (event: string) => Option.Option<Message>
  readonly data: unknown
  readonly field: (
    key: TextKey<PropsOf<B>>,
    options?: {
      readonly label?: string
      readonly multiline?: boolean
    },
  ) => Html | string
}

What a Block's view is drawn from.

Members

RenderContext.id

property · packages/composition/src/foldkit/index.ts:55

readonly id: NodeId

RenderContext.props

property · packages/composition/src/foldkit/index.ts:56

readonly props: PropsOf<B>

RenderContext.regions

property · packages/composition/src/foldkit/index.ts:62

readonly regions: {
  readonly [R in keyof B['regions']]: ReadonlyArray<Html>
}

Each Region's children, already drawn, in order. In edit mode an empty Region holds one element marked data-composition-region, where an author can see the Region and drop into it.

RenderContext.h

property · packages/composition/src/foldkit/index.ts:63

readonly h: HtmlBuilder<Message>

RenderContext.mode

property · packages/composition/src/foldkit/index.ts:64

readonly mode: Mode

RenderContext.appearance

property · packages/composition/src/foldkit/index.ts:70

readonly appearance: Readonly<Record<string, AppearanceChoice>>

The node's appearance choices its Block offers, by axis; a stored choice the Block does not offer is left out. A look draws them: HeroLook.draw({ appearance, h }).

RenderContext.on

property · packages/composition/src/foldkit/index.ts:76

readonly on: (event: string) => Option.Option<Message>

The Message the action this node gives event makes, such as a button's on('press'); none when it gives none. Stored input never runs: it is decoded by the action's Schema first.

RenderContext.data

property · packages/composition/src/foldkit/index.ts:81

readonly data: unknown

What the page's reads hold for this node, from the render option data; undefined when there is none. A Query Block reads it with rows(data).

RenderContext.field

property · packages/composition/src/foldkit/index.ts:89

readonly field: (
  key: TextKey<PropsOf<B>>,
  options?: {
    readonly label?: string
    readonly multiline?: boolean
  },
) => Html | string

A text prop, drawn so an editor can edit it in place: in view mode the text alone; in edit mode a span marked data-composition-field, which is contenteditable while the render option editing names it. label is its accessible name while it is edited, by default the prop's name spaced; multiline lets it break lines.