hyperfiddle.electric-dom3-props — com.hyperfiddle/electric v3-alpha-4-g9948fc0b

alias->ns clj

attr-alias clj

(attr-alias attr)

Attribute clj

(Attribute node attribute)

(Attribute node attribute value)

Watch an attribute's value for a given DOM node. Only DOM attributes are watchable, not object properties. For instance, to watch an input's value, use an event listener. Use Attributes to watch multiple attributes at once. If value is provided, reactively sets the correponding node's attributeor property to value. On unmount:

• if attribute defines an actual DOM attribute, remove attribute from node.
• if attribute defines an object property, sets it to nil.

Attributes clj

(Attributes node attribute-names)

Take a collection of attribute-names and watch for attribute changes in node. Return a map of {"attribute-name" attribute-value, ...}. Only DOM attributes are watchable, not object properties. For instance, to watch an input's value, use an event listener.

ClassList clj

(ClassList node classes)

Clazz clj

(Clazz node clazz)

DIRECT-ATTRIBUTE clj

DIRECT-ATTRIBUTE-MAP clj

Map of attributes that should be set using element.setAttribute(key, val) instead of element[key] = val. Used by goog.dom.setProperties. Used by set-property!. From https://github.com/google/closure-library/blob/7818ff7dc0b53555a7fb3c3427e6761e88bde3a2/closure/goog/dom/dom.js#L563

LAST-PROPS clj

Due to a bug in both Webkit and FF, input type range's knob renders in the wrong place if value is set after min and max, and max is above 100. Other UI libs circumvent this issue by setting value last.

MapCSeq clj

(MapCSeq Fn cseq)

ordered-props clj

(ordered-props props-map)

Sort props by key to ensure they are applied in a predefined order. See LAST-PROPS.

parse-class clj

(parse-class xs)

Properties clj

(Properties node kvs)

Take a map of attribute or property name to value and sets each onto node. Return nil.

Property clj

(Property node name value)

Set a DOM node's attribute or property to value

props clj macro

(props m)

(props node m)

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.

resolve-attr-alias clj

(resolve-attr-alias attr)

Styles clj

(Styles node kvs)

SVG-NS clj

XLINK-NS clj