hyperfiddle.electric-dom3 — com.hyperfiddle/electric v3-alpha-7-gf499d2d1

->text clj

(->text elem)

a clj macro

(a & body)

abbr clj macro

(abbr & body)

address clj macro

(address & body)

area clj macro

(area & body)

article clj macro

(article & body)

aside clj macro

(aside & body)

audio clj macro

(audio & body)

b clj macro

(b & body)

bdi clj macro

(bdi & body)

bdo clj macro

(bdo & body)

blockquote clj macro

(blockquote & body)

br clj macro

(br & body)

button clj macro

(button & body)

canvas clj macro

(canvas & body)

cite clj macro

(cite & body)

code clj macro

(code & body)

col clj macro

(col & body)

colgroup clj macro

(colgroup & body)

Comment clj

(Comment arg)

Mount a DOM Comment in current node, containing stringified arg. Return arg.

comment clj macro

(comment & args)

Mount a DOM Comment in current node for each argument in args. Each Comment node will contain the stringified argument. Return last argument as in do.

data clj macro

(data & body)

datalist clj macro

(datalist & body)

dd clj macro

(dd & body)

The <dd> HTML element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).

del clj macro

(del & body)

details clj macro

(details & body)

dfn clj macro

(dfn & body)

dialog clj macro

(dialog & body)

div clj macro

(div & body)

dl clj macro

(dl & body)

The <dl> HTML element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

dt clj macro

(dt & body)

The <dt> HTML element specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.

element clj macro

(element tag & body)

Mount a new DOM Element of type tag in the current node and run body in the context of the new Element.

  (dom/element :div (dom/text "content"))

element* clj

(element* tag forms)

(element* ns tag forms)

em clj macro

(em & body)

embed clj macro

(embed & body)

fieldset clj macro

(fieldset & body)

figure clj macro

(figure & body)

Focused? clj

(Focused?)

(Focused? node)

footer clj macro

(footer & body)

fork clj

(fork flow)

(fork n flow)

form clj macro

(form & body)

h1 clj macro

(h1 & body)

h2 clj macro

(h2 & body)

h3 clj macro

(h3 & body)

h4 clj macro

(h4 & body)

h5 clj macro

(h5 & body)

h6 clj macro

(h6 & body)

header clj macro

(header & body)

hgroup clj macro

(hgroup & body)

hr clj macro

(hr & body)

i clj macro

(i & body)

iframe clj macro

(iframe & body)

img clj macro

(img & body)

input clj macro

(input & body)

ins clj macro

(ins & body)

itemprop clj macro

(itemprop & body)

kbd clj macro

(kbd & body)

label clj macro

(label & body)

legend clj macro

(legend & body)

li clj macro

(li & body)

link clj macro

(link & body)

main clj macro

(main & body)

mark clj macro

(mark & body)

math clj macro

(math & body)

menu clj macro

(menu & body)

meter clj macro

(meter & body)

mount-items clj

MouseDown? clj

(MouseDown?)

(MouseDown? node)

nav clj macro

(nav & body)

node clj

noscript clj macro

(noscript & body)

object clj macro

(object & body)

ol clj macro

(ol & body)

On clj

(On event-type)

(On event-type f)

(On event-type f init-v)

(On event-type f init-v opts)

(On node event-type f init-v opts)

OnAll clj

(OnAll event-type)

(OnAll event-type f)

(OnAll event-type f opts)

(OnAll event-type f opts concurrency-factor)

(OnAll node event-type f opts concurrency-factor)

optgroup clj macro

(optgroup & body)

option clj macro

(option & body)

output clj macro

(output & body)

p clj macro

(p & body)

patch-nodelist clj

(patch-nodelist element diff)

Take a DOM element, an incseq's diff and patch the diff over the element's children list (a NodeList), applying additions, replacements, removals and reordering of children. Must be called exactly once per element and exactly once per diff.

perform-additions! clj

(perform-additions! element {:keys [degree grow permutation change]})

Take a DOM element and an incseq's diff. Perform addition of new child elements into element.

perform-adds-and-replacements! clj

(perform-adds-and-replacements! element diff)

Take a DOM element and an incseq's diff. Perform additions of new child elements and replacement of existing ones. Replacement is not moving, replacement means replace existing children by new children at the same, respective locations.

perform-removals! clj

(perform-removals! element {:keys [permutation degree shrink]})

Take a DOM element and an incseq's diff. Must be called after perform-additions!. Will remove all deleted child elements from the element's childlist. Return the remaining permutations map to perform (reorders) after removals.

perform-removals-and-reorders! clj

(perform-removals-and-reorders! element diff)

Take a DOM element and an incseq's diff. Perform removal of extra (deleted) elements, and reordering of remaining elements. Must be called after perform-adds-and-replacements!.

perform-reorders! clj

(perform-reorders! element {:keys []} permutations)

Take a DOM element, an incseq diff and a map of permutations describing how to reorder child elements of element, and perform reordering of those child elements. permutations must be the return value of perform-removals!.

perform-replacements! clj

(perform-replacements! element {:keys [permutation]} remaining-changes)

Take a DOM element, an incseq's diff and a map of index -> value representing the remaining changes after additions have been performed (return value of perform-additions!). For each change, will punch new values in, at their respective indices, overwriting existing ones. Replacements are not reorders, see perform-reorders!.

picture clj macro

(picture & body)

pre clj macro

(pre & body)

progress clj macro

(progress & body)

props clj macro

(props attributes)

(props node attributes)

Take a map of HTML attributes to values and reactively sets each of them onto a given DOM node. Default node is the one in scope.

Example:

  (dom/div (dom/props {:id "my-div", :class ["foo"], :style {:background-color :red}}))

• A value of nil will remove the attribute.
• Attribute names are case-insensitive, like in HTML.
• Attribute inherits the node's namespace (e.g. SVG vs HTML attributes)
• :class, setting the CSS class, can be a string or a collection of strings.
• :style, setting inline CSS styles, supports setting CSS variables (e.g. {:--my-color :red})
  • for more complex styles (e.g. pseudo-classes, pseudo-elements, keyframes) use Electric-CSS.

Note props will decide if an attribute is set as an HTML attribute or as a DOM object property. For instance:

• An input's :value is set through the node.value property.
• :list (input's datalist) can only be set by attribute, as the corresponding property is readonly.
• :class doesn't set the "class" HTML attribute, but efficiently manipulates the node's .classList property.
• :style doesn't set the "style" HTML attribute, but efficiently manipulates the CSSStyleDeclaration object under the .style property.
• etc.

q clj macro

(q & body)

ruby clj macro

(ruby & body)

s clj macro

(s & body)

samp clj macro

(samp & body)

script clj macro

(script & body)

section clj macro

(section & body)

select clj macro

(select & body)

slot clj macro

(slot & body)

small clj macro

(small & body)

span clj macro

(span & body)

strong clj macro

(strong & body)

style clj macro

(style & body)

sub clj macro

(sub & body)

summary clj macro

(summary & body)

sup clj macro

(sup & body)

table clj macro

(table & body)

tbody clj macro

(tbody & body)

td clj macro

(td & body)

template clj macro

(template & body)

text clj macro

(text & args)

Mount a DOM TextNode in current node for each argument in args. Each TextNode will contain the stringified argument. Return last argument as in do.

Text clj

(Text arg)

Mount a DOM TextNode in current node, containing stringified arg. Return arg.

textarea clj macro

(textarea & body)

texts clj

(texts coll)

th clj macro

(th & body)

thead clj macro

(thead & body)

time clj macro

(time & body)

tr clj macro

(tr & body)

u clj macro

(u & body)

ul clj macro

(ul & body)

var clj macro

(var & body)

video clj macro

(video & body)

wbr clj macro

(wbr & body)

With clj

(With element Body)

Run Body in provided DOM element, attaching and managing children inside it. One would use With instead of WithElement to mount an Electric DOM UI inside an existing DOM Element, typically libraries integration.

WithElement clj

(WithElement tag Body)

(WithElement ns tag Body)

Mount a new DOM Element of type tag in the current node and run Body in the context of the new Element.