laggingreflex/hyperchain

hyperscript with chaining

hyperchain

hyperscript-like DOM builder with chaining, composition, and reusability. Inspired by hyperscript-helpers.

Features

• Property chaining sets tag-name and class-names

• Template literals sets innerText

• Compose and reuse components (like styled-components)

• Apply CSS Modules (like hyperstyles)

Note: Uses ES6 features (Proxy, Tagged Template Literals), use only where browser/env supports it.

Install

npm i hyperchain

Usage

import { createElement } from 'react'
import hyperchain from 'hyperchain'
const h = hyperchain(createElement, opts)
// or with helpers (available: react, preact)
const h =  require('hyperchain/react')(opts)
const h =  require('hyperchain/preact')(opts)

h.div('hi')          // => <div> hi </div>
h.span('hi')         // => <span> hi </span>
h.p('a', 'b')        // => <p> a b </p>
h.span`hi`           // => <span> hi </span>
h.div({attr:'a'})    // => <div attr="a"></div>
h.div.class('a')     // => <div class="class"> a </div>
h.div.class`a`       // => <div class="class"> a </div>
h.div.some.class()   // => <div class="some class">
h.div.someClass()    // => <div class="someClass">
h.div.someClass()    // => <div class="some-class">   (opts.dashifyClassnames: true)
h.div()              // => <div class="div">          (opts.tagClass: true)
h.div.CSS()          // => <div class="MODULES">      (opts.style: {CSS:'MODULES'})
h.div(1, 0, null, 2) // => <div> 1 2 </div>           (opts.filterFalseyChildren: true)
h.div['#id']()       // => <div id="id"></div>

API

hyperchain(createElement, options)

• createElement [function] JSX/hyperscript reviver function

• options [object]

  • style [object] Uses CSS Modules-compatible styles object to add appropriate classnames. See hyperstyles
  • stylePreserveNames [boolean] Preserves original classnames in addition to CSS Module names replaced by opts.style
  • styleOmitUnused [boolean] Omits classes from elements that aren't listed in opts.style
  • dashifyClassnames [boolean] Turns .className to class-name
  • tagClass [boolean] Adds tag-name as an additional class-name (which is also opts.style aware)
  • filterFalseyChildren [boolean] Filters out falsey children
  • elementMapMap [object] Map tagNames or components to something else
  • keyMap [object] Map keys/attrs to something else

h.tagName[...className]`innerText`
h.tagName[...className](...children)
h.tagName[...className]({...props}, ...children)

• tagName [string] Tag name to use, eg. .div
• className [string] Class name to use, eg. .someClass
• children [array] Child nodes
• props [object] Attributes to set as an object, eg. {id: …}