On this pageFunctions
Html
/**
* Captures the current boundary's dispatcher and wraps each attribute
* so handlers inside it route through that boundary's wrapping chain at
* event-fire time, even when the attribute is later spread into a
* parent's element in a different boundary.
*
* Submodels call this when publishing attribute groups to a consumer's
* `toView` slot callback:
*
* ```ts
* // Inside a SubmodelView running in the child's boundary:
* return viewInputs.toView({
* checkbox: childAttributes([
* h.OnClick(Toggled()),
* h.Role('checkbox'),
* ]),
* ...
* })
* ```
*
* Without this binding step the consumer's element constructor would
* process `h.OnClick(Toggled())` using the parent's dispatcher (because
* the consumer's `toView` runs in the parent's boundary), bypassing the
* Submodel's `toParentMessage`.
*/
<Attribute>(attributes: readonly Array<Attribute>): readonly Array<Readonly<{
__childAttribute: true
attribute: unknown
dispatch: DispatchSync
}>>/**
* Creates a keyed memoization map for view functions rendered in a loop. Each
* key gets its own independent cache slot. On each render, only entries whose
* function reference, dispatch, or arguments have changed by reference are
* recomputed.
*
* Like `createLazy`, each key's cached VNode must be rendered at a single
* position in the tree. If the same item needs to appear in multiple
* positions, create one keyed lazy per position.
*/
(): (key: string, fn: (args: Args) => VNode | null, args: Args) => VNode | null/**
* Creates a memoization slot for a view function. On each render, if the
* function reference, dispatch, and all arguments are referentially equal
* (`===`) to the previous call, the cached VNode is returned without
* re-running the view function. Snabbdom's `patchVnode` short-circuits when
* it sees the same VNode reference, so both VNode construction and subtree
* diffing are skipped.
*
* Dispatch is part of the cache key because event handlers in the cached
* VNode close over the dispatch active when the VNode was built. Returning
* a VNode built under a different dispatch would silently misroute every
* event from that subtree.
*
* The cached VNode must be rendered at a single position in the tree.
* Snabbdom tracks the real DOM through each VNode's mutable `.elm` field
* and assumes one VNode per position. Rendering the same cached VNode at
* two positions causes patches to collide and can duplicate or misplace
* DOM nodes. If the same content needs to appear in multiple positions,
* create one slot per position.
*/
(): (fn: (args: Args) => VNode | null, args: Args) => VNode | null/**
* Union of all HTML, SVG, and MathML attributes a virtual DOM element can carry.
*
* When a Submodel publishes attribute groups to a consumer's `toView`
* slot, those attributes are wrapped via childAttributes into
* ChildAttribute, a distinct type that carries the Submodel's
* own dispatcher. Element constructors accept the union
* `ReadonlyArray<Attribute<Message> | ChildAttribute>`, so consumers
* can spread published bundles directly into their own attribute
* arrays.
*/
type Attribute = Data.TaggedEnum<{
Accept: {
value: string
}
Accesskey: {
value: string
}
Action: {
value: string
}
Allow: {
value: string
}
AllowDrop: {}
Alt: {
value: string
}
AriaActiveDescendant: {
value: string
}
AriaAtomic: {
value: boolean
}
AriaAutocomplete: {
value: string
}
AriaBusy: {
value: boolean
}
AriaChecked: {
value: boolean | "mixed"
}
AriaColcount: {
value: number
}
AriaColindex: {
value: number
}
AriaColspan: {
value: number
}
AriaControls: {
value: string
}
AriaCurrent: {
value: string
}
AriaDescribedBy: {
value: string
}
AriaDescription: {
value: string
}
AriaDetails: {
value: string
}
AriaDisabled: {
value: boolean
}
AriaErrorMessage: {
value: string
}
AriaExpanded: {
value: boolean
}
AriaFlowto: {
value: string
}
AriaHasPopup: {
value: string
}
AriaHidden: {
value: boolean
}
AriaInvalid: {
value: boolean
}
AriaKeyshortcuts: {
value: string
}
AriaLabel: {
value: string
}
AriaLabelledBy: {
value: string
}
AriaLevel: {
value: number
}
AriaLive: {
value: string
}
AriaModal: {
value: boolean
}
AriaMultiSelectable: {
value: boolean
}
AriaOrientation: {
value: string
}
AriaOwns: {
value: string
}
AriaPlaceholder: {
value: string
}
AriaPosinset: {
value: number
}
AriaPressed: {
value: string
}
AriaReadonly: {
value: boolean
}
AriaRelevant: {
value: string
}
AriaRequired: {
value: boolean
}
AriaRoleDescription: {
value: string
}
AriaRowcount: {
value: number
}
AriaRowindex: {
value: number
}
AriaRowspan: {
value: number
}
AriaSelected: {
value: boolean
}
AriaSetsize: {
value: number
}
AriaSort: {
value: string
}
AriaValuemax: {
value: number
}
AriaValuemin: {
value: number
}
AriaValuenow: {
value: number
}
AriaValuetext: {
value: string
}
Attribute: {
key: string
value: string
}
Autocapitalize: {
value: string
}
Autocomplete: {
value: string
}
Autocorrect: {
value: string
}
Autofocus: {
value: boolean
}
Autoplay: {
value: boolean
}
Charset: {
value: string
}
Checked: {
value: boolean
}
CiteAttr: {
value: string
}
Class: {
value: string
}
ClipRule: {
value: string
}
Cols: {
value: number
}
Colspan: {
value: number
}
ContentAttr: {
value: string
}
Contenteditable: {
value: string
}
Controls: {
value: boolean
}
Crossorigin: {
value: string
}
Cx: {
value: string
}
Cy: {
value: string
}
D: {
value: string
}
DataAttribute: {
key: string
value: string
}
Datetime: {
value: string
}
Decoding: {
value: string
}
Dir: {
value: string
}
Disabled: {
value: boolean
}
Download: {
value: string
}
Draggable: {
value: boolean
}
Enctype: {
value: string
}
EnterKeyHint: {
value: string
}
Fetchpriority: {
value: string
}
Fill: {
value: string
}
FillRule: {
value: string
}
For: {
value: string
}
Formaction: {
value: string
}
FormAttr: {
value: string
}
Formenctype: {
value: string
}
Formmethod: {
value: string
}
Formnovalidate: {
value: boolean
}
Formtarget: {
value: string
}
Headers: {
value: string
}
Height: {
value: string
}
Hidden: {
value: boolean
}
High: {
value: number
}
Href: {
value: string
}
Hreflang: {
value: string
}
HttpEquiv: {
value: string
}
Id: {
value: string
}
Inert: {
value: boolean
}
InnerHTML: {
value: string
}
InputMode: {
value: string
}
Integrity: {
value: string
}
Ismap: {
value: boolean
}
Key: {
value: string
}
LabelAttr: {
value: string
}
Lang: {
value: string
}
List: {
value: string
}
Loading: {
value: string
}
Loop: {
value: boolean
}
Low: {
value: number
}
Max: {
value: string
}
Maxlength: {
value: number
}
Method: {
value: string
}
Min: {
value: string
}
Minlength: {
value: number
}
Multiple: {
value: boolean
}
Muted: {
value: boolean
}
Name: {
value: string
}
Novalidate: {
value: boolean
}
OnAnimationEnd: {
message: Message
}
OnAnimationIteration: {
message: Message
}
OnAnimationStart: {
message: Message
}
OnBlur: {
message: Message
}
OnCancel: {
message: Message
}
OnChange: {
f: (value: string) => Message
}
OnClick: {
message: Message
}
OnClickFocus: {
focusSelector: string
message: Message
}
OnContextMenu: {
message: Message
}
OnCopy: {
message: Message
}
OnCustomEvent: {
f: (event: CustomEvent<any>) => Message
name: string
}
OnCut: {
message: Message
}
OnDoubleClick: {
message: Message
}
OnDrag: {
message: Message
}
OnDragEnd: {
message: Message
}
OnDragEnter: {
message: Message
}
OnDragLeave: {
message: Message
}
OnDragOver: {
message: Message
}
OnDragStart: {
message: Message
}
OnDrop: {
message: Message
}
OnDropFiles: {
f: (files: ReadonlyArray<File>) => Message
}
OnEnded: {
message: Message
}
OnError: {
message: Message
}
OnFileChange: {
f: (files: ReadonlyArray<File>) => Message
}
OnFocus: {
message: Message
}
OnInput: {
f: (value: string) => Message
}
OnKeyDown: {
f: (key: string, modifiers: KeyboardModifiers) => Message
}
OnKeyDownPreventDefault: {
f: (key: string, modifiers: KeyboardModifiers) => Option.Option<Message>
}
OnKeyPress: {
f: (key: string, modifiers: KeyboardModifiers) => Message
}
OnKeyUp: {
f: (key: string, modifiers: KeyboardModifiers) => Message
}
OnKeyUpPreventDefault: {
f: (key: string, modifiers: KeyboardModifiers) => Option.Option<Message>
}
OnLoad: {
message: Message
}
OnMount: {
action: MountAction<Message, any>
}
OnMouseDown: {
message: Message
}
OnMouseEnter: {
message: Message
}
OnMouseLeave: {
message: Message
}
OnMouseMove: {
message: Message
}
OnMouseOut: {
message: Message
}
OnMouseOver: {
message: Message
}
OnMouseUp: {
message: Message
}
OnPaste: {
message: Message
}
OnPause: {
message: Message
}
OnPlay: {
message: Message
}
OnPointerDown: {
f: (pointerType: string, button: number, screenX: number, screenY: number, timeStamp: number, clientX: number, clientY: number) => Option.Option<Message>
}
OnPointerLeave: {
f: (pointerType: string) => Option.Option<Message>
}
OnPointerMove: {
f: (screenX: number, screenY: number, pointerType: string) => Option.Option<Message>
}
OnPointerUp: {
f: (screenX: number, screenY: number, pointerType: string, timeStamp: number) => Option.Option<Message>
}
OnReset: {
message: Message
}
OnScroll: {
f: (scrollTop: number) => Message
}
OnSelect: {
message: Message
}
OnSubmit: {
message: Message
}
OnTimeUpdate: {
message: Message
}
OnToggle: {
f: (isOpen: boolean) => Message
}
OnTouchCancel: {
message: Message
}
OnTouchEnd: {
message: Message
}
OnTouchMove: {
message: Message
}
OnTouchStart: {
message: Message
}
OnTransitionEnd: {
message: Message
}
OnVolumeChange: {
message: Message
}
OnWheel: {
message: Message
}
Opacity: {
value: string
}
Open: {
value: boolean
}
Optimum: {
value: number
}
Pattern: {
value: string
}
Ping: {
value: string
}
Placeholder: {
value: string
}
Playsinline: {
value: boolean
}
Points: {
value: string
}
Popover: {
value: string
}
Popovertarget: {
value: string
}
Popovertargetaction: {
value: string
}
Poster: {
value: string
}
Preload: {
value: string
}
Prop: {
key: string
value: unknown
}
R: {
value: string
}
Readonly: {
value: boolean
}
Referrerpolicy: {
value: string
}
Rel: {
value: string
}
Required: {
value: boolean
}
Reversed: {
value: boolean
}
Role: {
value: string
}
Rows: {
value: number
}
Rowspan: {
value: number
}
Sandbox: {
value: string
}
Scope: {
value: string
}
Selected: {
value: boolean
}
Size: {
value: number
}
Sizes: {
value: string
}
Span: {
value: number
}
Spellcheck: {
value: boolean
}
Src: {
value: string
}
Srcdoc: {
value: string
}
Srcset: {
value: string
}
Start: {
value: number
}
Step: {
value: string
}
Stroke: {
value: string
}
StrokeDasharray: {
value: string
}
StrokeDashoffset: {
value: string
}
StrokeLinecap: {
value: string
}
StrokeLinejoin: {
value: string
}
StrokeWidth: {
value: string
}
Style: {
value: Record<string, string>
}
Tabindex: {
value: number
}
Target: {
value: string
}
Title: {
value: string
}
Transform: {
value: string
}
Translate: {
value: string
}
Type: {
value: string
}
Usemap: {
value: string
}
Value: {
value: string
}
ViewBox: {
value: string
}
Width: {
value: string
}
Wrap: {
value: string
}
X: {
value: string
}
X1: {
value: string
}
X2: {
value: string
}
Xmlns: {
value: string
}
Y: {
value: string
}
Y1: {
value: string
}
Y2: {
value: string
}
}>/**
* An attribute carrying a handler that dispatches through a Submodel
* boundary's wrapping chain. Published by Submodels (typically Foldkit's
* `Ui.*` primitives) for a parent to spread into its own element
* attribute arrays. The parent does not know or care which child
* produced these; the runtime routes each handler through the
* originating Submodel's wrap chain at event-fire time.
*
* Created via childAttributes. Element constructors accept
* `ChildAttribute` alongside `Attribute<Message>` in their attribute
* arrays.
*/
type ChildAttribute = Readonly<{
__childAttribute: true
attribute: unknown
dispatch: DispatchSync
}>/**
* A view's complete output for the runtime: title, body, and optional document
* metadata. The runtime applies `title` to `document.title`, syncs `canonical`
* to `<link rel="canonical">` (creating it if absent), syncs `ogUrl` to
* `<meta property="og:url">` (creating it if absent), and patches `body` into
* the application container.
*
* When `canonical` is omitted, it defaults to the current URL (origin +
* pathname + search). When `ogUrl` is omitted, it falls back to `canonical`.
*/
type Document = Readonly<{
body: Html
canonical: string
ogUrl: string
title: string
}>/**
* A virtual DOM element. Constructed synchronously by the element factories
* returned from html. The runtime patches a `VNode` (or `null` to
* render nothing) into the application container.
*/
type Html = VNode | null/** Modifier key state extracted from a `KeyboardEvent`. */
type KeyboardModifiers = Readonly<{
altKey: boolean
ctrlKey: boolean
metaKey: boolean
shiftKey: boolean
}>/** Union of all valid HTML, SVG, and MathML tag names. */
type TagName = "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "object" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "portal" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "svg" | "switch" | "symbol" | "text" | "textPath" | "tspan" | "use" | "view" | "annotation" | "annotation-xml" | "math" | "maction" | "menclose" | "merror" | "mfenced" | "mfrac" | "mglyph" | "mi" | "mlabeledtr" | "mlongdiv" | "mmultiscripts" | "mn" | "mo" | "mover" | "mpadded" | "mphantom" | "mprescripts" | "mroot" | "mrow" | "ms" | "mscarries" | "mscarry" | "msgroup" | "msline" | "mspace" | "msqrt" | "msrow" | "mstack" | "mstyle" | "msub" | "msubsup" | "msup" | "mtable" | "mtd" | "mtext" | "mtr" | "munder" | "munderover" | "semantics"