Skip to main content
Foldkit
On this pageFunctions

Html

Functions

createKeyedLazy

functionsource

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 or arguments have changed by reference are recomputed.

(): (key: string, fn: (args: Args) => Html, args: Args) => Html

createLazy

functionsource

Creates a memoization slot for a view function. On each render, if the function reference 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.

(): (fn: (args: Args) => Html, args: Args) => Html

html

functionsource

Factory that returns all HTML, SVG, and MathML element constructors, attribute constructors, a keyed helper for keyed elements, and empty for rendering nothing.

Types

Attribute

typesource

Union of all HTML, SVG, and MathML attributes a virtual DOM element can carry.

type Attribute = Data.TaggedEnum<{
  Accept: {
    value: string
  }
  Action: {
    value: string
  }
  Alt: {
    value: string
  }
  AriaActiveDescendant: {
    value: string
  }
  AriaBusy: {
    value: boolean
  }
  AriaChecked: {
    value: boolean
  }
  AriaControls: {
    value: string
  }
  AriaCurrent: {
    value: string
  }
  AriaDescribedBy: {
    value: string
  }
  AriaDisabled: {
    value: boolean
  }
  AriaErrorMessage: {
    value: string
  }
  AriaExpanded: {
    value: boolean
  }
  AriaHasPopup: {
    value: string
  }
  AriaHidden: {
    value: boolean
  }
  AriaInvalid: {
    value: boolean
  }
  AriaLabel: {
    value: string
  }
  AriaLabelledBy: {
    value: string
  }
  AriaLive: {
    value: string
  }
  AriaModal: {
    value: boolean
  }
  AriaMultiSelectable: {
    value: boolean
  }
  AriaOrientation: {
    value: string
  }
  AriaPressed: {
    value: string
  }
  AriaRequired: {
    value: boolean
  }
  AriaRoleDescription: {
    value: string
  }
  AriaSelected: {
    value: boolean
  }
  AriaSort: {
    value: string
  }
  Attribute: {
    key: string
    value: string
  }
  Autocapitalize: {
    value: string
  }
  Autocomplete: {
    value: string
  }
  Autocorrect: {
    value: string
  }
  Autofocus: {
    value: boolean
  }
  Checked: {
    value: boolean
  }
  Class: {
    value: string
  }
  ClipRule: {
    value: string
  }
  Cols: {
    value: number
  }
  Cx: {
    value: string
  }
  Cy: {
    value: string
  }
  D: {
    value: string
  }
  DataAttribute: {
    key: string
    value: string
  }
  Dir: {
    value: string
  }
  Disabled: {
    value: boolean
  }
  Download: {
    value: string
  }
  Enctype: {
    value: string
  }
  EnterKeyHint: {
    value: string
  }
  Fill: {
    value: string
  }
  FillRule: {
    value: string
  }
  For: {
    value: string
  }
  Height: {
    value: string
  }
  Hidden: {
    value: boolean
  }
  Href: {
    value: string
  }
  Id: {
    value: string
  }
  InnerHTML: {
    value: string
  }
  InputMode: {
    value: string
  }
  Key: {
    value: string
  }
  Lang: {
    value: string
  }
  Max: {
    value: string
  }
  Maxlength: {
    value: number
  }
  Method: {
    value: string
  }
  Min: {
    value: string
  }
  Minlength: {
    value: number
  }
  Multiple: {
    value: boolean
  }
  Name: {
    value: string
  }
  Novalidate: {
    value: boolean
  }
  OnBlur: {
    message: Message
  }
  OnCancel: {
    message: Message
  }
  OnChange: {
    f: (value: string) => Message
  }
  OnClick: {
    message: Message
  }
  OnCopy: {
    message: Message
  }
  OnCut: {
    message: Message
  }
  OnDblClick: {
    message: Message
  }
  OnDestroy: {
    f: (element: Element) => void
  }
  OnFocus: {
    message: Message
  }
  OnInput: {
    f: (value: string) => Message
  }
  OnInsert: {
    f: (element: Element) => void
  }
  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>
  }
  OnMouseDown: {
    message: Message
  }
  OnMouseEnter: {
    message: Message
  }
  OnMouseLeave: {
    message: Message
  }
  OnMouseMove: {
    message: Message
  }
  OnMouseOut: {
    message: Message
  }
  OnMouseOver: {
    message: Message
  }
  OnMouseUp: {
    message: Message
  }
  OnPaste: {
    message: Message
  }
  OnPointerDown: {
    f: (pointerType: string, button: number, screenX: number, screenY: number, timeStamp: 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: {
    message: Message
  }
  OnSubmit: {
    message: Message
  }
  OnToggle: {
    f: (isOpen: boolean) => Message
  }
  OnWheel: {
    message: Message
  }
  Opacity: {
    value: string
  }
  Open: {
    value: boolean
  }
  Pattern: {
    value: string
  }
  Placeholder: {
    value: string
  }
  Points: {
    value: string
  }
  R: {
    value: string
  }
  Readonly: {
    value: boolean
  }
  Rel: {
    value: string
  }
  Required: {
    value: boolean
  }
  Role: {
    value: string
  }
  Rows: {
    value: number
  }
  Selected: {
    value: boolean
  }
  Size: {
    value: number
  }
  Spellcheck: {
    value: boolean
  }
  Src: {
    value: string
  }
  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
  }
  Type: {
    value: string
  }
  Value: {
    value: string
  }
  ViewBox: {
    value: string
  }
  Width: {
    value: string
  }
  X: {
    value: string
  }
  X1: {
    value: string
  }
  X2: {
    value: string
  }
  Xmlns: {
    value: string
  }
  Y: {
    value: string
  }
  Y1: {
    value: string
  }
  Y2: {
    value: string
  }
}>

Html

typesource

A virtual DOM element represented as an Effect that produces a VNode.

type Html = Effect.Effect<VNode | null, never, Dispatch>

KeyboardModifiers

typesource

Modifier key state extracted from a KeyboardEvent.

type KeyboardModifiers = Readonly<{
  altKey: boolean
  ctrlKey: boolean
  metaKey: boolean
  shiftKey: boolean
}>

TagName

typesource

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"