@eeue56/coed/build/coed.d.ts

Write HTML in pure TS

import { Maybe } from "@eeue56/ts-core";
export declare type Tag = "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" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "object" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "pre" | "progress" | "q" | "rb" | "rp" | "rt" | "rtc" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "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";
declare type None = {
    kind: "none";
};
declare type StringAttribute = {
    kind: "string";
    key: string;
    value: string;
};
declare type StyleAttribute = {
    kind: "style";
    key: string;
    value: string;
};
declare type NumberAttribute = {
    kind: "number";
    key: string;
    value: string;
};
declare type BooleanAttribute = {
    kind: "boolean";
    key: string;
    value: boolean;
};
/**
Used to represent the different types of attributes possible.
*/
export declare type Attribute = None | StringAttribute | NumberAttribute | StyleAttribute | BooleanAttribute;
/**
Creates a class attribute - classes are combined by the html creator, so you can use it like:
```
html.div([ ], [ class_("one"), class_("two") ], [ ])
```
*/
export declare function class_(str: string): Attribute;
/**
Creates a style attribute - styles are combined by the html creator, so you can use it like:
```
html.div([ ], [ style_("color", "red"), style_("background-color", "blue") ], [ ])
```
*/
export declare function style_(key: string, value: string): Attribute;
/**
An empty attribute - filtered by the html creator on creation. This is useful if you have a tenary
operator, e.g:
```
html.div([ ], [ somethingTruthy ? none() : class_("something") ], [ ])
```
*/
export declare function none(): Attribute;
/**
Create an attribute with a given key and value. This is set via `setAttribute` at runtime.
*/
export declare function attribute(key: string, value: string): Attribute;
/**
Create an attribute with a given key and value. This is set via `setAttribute` at runtime.
*/
export declare function booleanAttribute(key: string, value: boolean): Attribute;
/**
Every event has a `name`, like `click`, and a tagger which produces a message of the right type
*/
export declare type Event<Msg> = {
    name: string;
    tagger(data: any): Msg;
};
/**
Creates an event handler for passing to a html node
*/
export declare function on<Msg>(name: string, tagger: (data: any) => Msg, stopPropagation?: boolean, preventDefault?: boolean): Event<Msg>;
/**
Special-cased input handler
*/
export declare function onInput<Msg>(tagger: (data: string) => Msg): Event<Msg>;
declare type TextNode = {
    kind: "text";
    text: string;
};
declare type RegularNode<Msg> = {
    kind: "regular";
    tag: Tag;
    events: Event<Msg>[];
    attributes: Attribute[];
    children: HtmlNode<Msg>[];
    _eventListeners: any[];
};
declare type VoidNode<Msg> = {
    kind: "void";
    tag: Tag;
    events: Event<Msg>[];
    attributes: Attribute[];
    _eventListeners: any[];
};
/**
A HtmlNode is either a text, like:
```
html.text("hello world")
```
Or html, like:
```
html.div([ ], [ ], [ ])
```
*/
export declare type HtmlNode<Msg> = TextNode | RegularNode<Msg> | VoidNode<Msg>;
/**
Creates a text node
*/
export declare function text(str: string): TextNode;
/**
Creates a html node with a given tag name, any events, any attributes and any children.
*/
export declare function node<Msg>(tag: Tag, events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): RegularNode<Msg>;
/**
Creates a void html node with a given tag name, any events, any attributes.
*/
export declare function voidNode<Msg>(tag: Tag, events: Event<Msg>[], attributes: Attribute[]): VoidNode<Msg>;
/**
Renders a HtmlNode tree as a string.
*/
export declare function render<Msg>(node: HtmlNode<Msg>, depth?: number): string;
/**
Render a node without whitespace
*/
export declare function flatRender<Msg>(node: HtmlNode<Msg>): string;
/**
Hydrates a root from a given program. Program must have root set as the string "hydration"
*/
export declare function hydrate<Model, Msg>(program: RunningProgram<Model, Msg>, root: Element): void;
/**
Attaches event listeners to nodes
*/
export declare function hydrateNode<Msg>(node: HtmlNode<Msg>, listener: (msg: Msg) => void, root: Element): void;
/**
Builds a HTMLElement tree from a HtmlNode tree, with event triggers being sent to the runner via the listener
This function should not be needed by most usage.
*/
export declare function buildTree<Msg>(listener: (msg: Msg) => void, node: HtmlNode<Msg>): HTMLElement | Text;
/**
Triggers the event by name, passing it the payload provided.
This function is useful for testing but not much else
 */
export declare function triggerEvent<Msg>(eventName: string, payload: any, node: HtmlNode<Msg>): Maybe.Maybe<Msg>;
/**
Converts a `HtmlNode` of type `A` to a `HtmlNode` of type `B`, including children.
*/
export declare function map<A, B>(tagger: (a: A) => B, tree: HtmlNode<A>): HtmlNode<B>;
/**
Every Coed program follows the model-view-update (MVU) pattern made popular on the frontend by Elm.
An initial model is given, which is passed to the view function which then populates the `root` element.
Any events triggered within the view will use the `update` function to create a new model.
Async updates can be handled via the optional `send` callback within the update function.
*/
export declare type Program<Model, Msg> = {
    initialModel: Model;
    view(model: Model): HtmlNode<Msg>;
    update(msg: Msg, model: Model, send?: (msg: Msg) => void): Model;
    root: HTMLElement | "hydration";
};
/**
Every running program can be interacted with via `send`.
For example you may want to start a program but send some data to it after loading a network request.
*/
export declare type RunningProgram<Model, Msg> = {
    program: Program<Model, Msg>;
    send: (msg: Msg) => void;
};
/**
Takes in a program, sets it up and runs it as a main loop
*/
export declare function program<Model, Msg>(program: Program<Model, Msg>): RunningProgram<Model, Msg>;
export declare function a<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function abbr<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function address<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function area<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function article<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function aside<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function audio<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function b<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function base<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function bdi<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function bdo<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function blockquote<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function body<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function br<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function button<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function canvas<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function caption<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function cite<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function code<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function col<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function colgroup<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function data<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function datalist<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function dd<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function del<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function details<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function dfn<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function dialog<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function div<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function dl<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function dt<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function em<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function embed<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function fieldset<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function figure<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function footer<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function form<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function h1<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function h2<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function h3<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function h4<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function h5<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function h6<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function head<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function header<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function hgroup<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function hr<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function html<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function i<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function iframe<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function img<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function input<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function ins<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function kbd<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function keygen<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function label<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function legend<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function li<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function link<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function main<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function map_<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function mark<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function menu<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function menuitem<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function meta<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function meter<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function nav<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function noscript<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function object<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function ol<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function optgroup<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function option<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function output<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function p<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function param<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function pre<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function progress<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function q<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function rb<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function rp<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function rt<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function rtc<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function ruby<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function s<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function samp<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function script<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function section<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function select<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function small<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function source<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function span<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function strong<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function style<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function sub<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function summary<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function sup<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function table<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function tbody<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function td<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function template<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function textarea<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function tfoot<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function th<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function thead<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function time<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function title<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function tr<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function track<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export declare function u<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function ul<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function var_<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function video<Msg>(events: Event<Msg>[], attributes: Attribute[], children: HtmlNode<Msg>[]): HtmlNode<Msg>;
export declare function wbr<Msg>(events: Event<Msg>[], attributes: Attribute[]): HtmlNode<Msg>;
export {};