DOM List Monad
Inspired by JQuery, Zest provides a monadic interface for interacting with the DOM.
Event listener:
import $ from "@dashkite/zest"
await $.ready
$ "button"
.listen()
.click()
.intercept()
.apply -> console.log "button clicked!"Diff-based update:
$ "heading"
.render "<h1>Hello, World</h1>"Constructs a unitary Zest with the given element.
Parses the HTML and constructs a Zest with the resulting NodeLIst.
Selects the given elements and constructs a Zest. Takes an optional root element.
Constructs a Zest with the Nodes produced by the iterable.
Constructs a Zest with the Nodes produced by the generator.
Constructs a unitary Zest based on the event target, if any, otherwise constructs an empty Zest.
Constructs an empty Zest.
Returns the elements of the Zest object as an array.
Returns the first element of the Zest object or undefined.
Returns the last element of the Zest object or undefined.
Given: a function that takes and returns an DOM node, map applies the function to each Zest element, and returns a new Zest containing the results.
The attributes property returns a proxy for an Attributes object bound to the Zest.
From there, you can manipulate the attributes of the Zest elements.
$ "button"
.attributes
.get "name"The classes property returns a Classes object bound to the Zest.
From there, you can manipulate the class attribute of the Zest elements.
$ "button"
.classes
.toggle "default"The data property returns a proxy for a DataSet object bound to the Zest.
From there, you can manipulate the dataset properties of the Zest elements.
The dataset property returns the DOM dataset property of the first element in the Zest.
The form property returns a Form object bound to the Zest.
From there, you can access the form data properties of the Zest elements.
The id property returns the DOM dataset property of the first element in the Zest.