Example
src/index.html
<!-- include a reset (recommended) --> styled-system for HDOM
src/styles.js
See and example of a theme-spec complaint theme here
const theme_styler THEME =
src/components/button.js
const x_btn_bhvr = console // a HOF that takes a config and returns an HDOM node functionconst button_x = { cfg = tag: "a" tag_noop: "span" ...cfg // allow user-defined spec-compliant overrides (e.g., tagActive for route link) const hash = // the returned hdom node fn with user-provided arbitrary context object return attrs && attrsdisabled ? cfgtag_noop class: hash style: "background-color": ctxthemecolorsmuted || "gray" cursor: "default" ...attrs ...children // inline theme-derived overrides : typeof attrs !== "object" ? cfgtag class: hash ... attrs ...children : cfgtag class: hash ... ...attrs ...children} const button = // also accepts ["buttons", "simple"]
src/index.js
// ⚠ declare button before using in-site (prevent re-registration on RAF)const btn_outline = const outlined_button = btn_outline i++ // add button behavior in-situ `clicks: ` const app = "div" style: padding: "20px" "div" button "👀 console" button disabled: true "sorry"
See live example