Hullo JS


import { html } from '@hullo/dom'
A dictionary of functions creating a specification for a HTML DOM element. Pick html.[lower case tag name] to access function that creates a specification for an element of that tag.
Function gets max two arguments:
  1. 1.
    [optionally] element specification
  2. 2.
    [optionally] children elements specifications in an array or a stream of such arrays.
Each element specification is an object with few fields
{ [attr:string]: string | Observable<string | undefined> }
Attributes dictionary.
Internally using (get|set|remove)Attribute.
| any
| Observable<any>
Properties of an DOM element.
Internally using element[prop] to set a value.
| (event:Event) => any
| Observer<Event>
Registers a listener for event event. An observer will also receive complete signal upon element removal from DOM.
| string
| Observable<string|undefined>
Sets up a style for an element or a subscription of style property values.
(element: HTMLElement) => any
Function is called upon mounting an element to a DOM tree and is provided a reference to that element.
(element: HTMLElement) => any
Function called after the element is removed from the DOM tree. As ref is provided with the element reference.
"immediate" | "self" | "branch"
Should the component updates be confirmed asynchronously using requestAnimationFrame.
  • immediate - no
  • self - yes, but only this element
  • branch - yes, this element and all beneath until specified otherwise
The html.* functions return DOMElement structure that second argument of html.*, svg.* and mount can consist of. Second argument can be composed also from strings which will be responsible of creation Text nodes.
{ attrs: { class: "importante" } },
["strings can be children"]
However, for performance reasons, as props application is cheaper than structure reconciliation, in case of node that should have single Text node as a child, textContent is preferred.
attrs: { class: "importante" },
props: { textContent: "strings can be children" }
For the same reason it would be beneficial in case of dynamic text nodes mixed with some HTML elements should (if possible) be wrapped in spans with textContent pointed to a stream of these texts.