Hello World
Log Event- 1
- 2
- 3
Transforms arrays into virtual dom trees; a terse alternative to JSX and h
Transforms arrays into virtual DOM trees
Find
ha bit repetitive? Not a huge fan of JSX? Love LISP? Code as data and data as code?
This is a tiny recursive factory function that allows you to write terse, declarative representations of virtual DOM trees. It does not try mimic HTML or JSON syntax but instead a series of nested arrays to represent user interfaces.
const tree = h('x', 'y', 'z') ( ['main', [ ['h1', 'Hello World'], ['input', { type: 'range' }], ['button', { onclick: console.log }, 'Log Event'], ]] )
The above call to
hreturns a virtual DOM tree with named attributes that respect the provided schema. Expected output here, would be of the shape
{ x: 'main', y: {}, z: [...] }. A tree like this can be passed as a node to patch, diff and render algorithms exposed by libraries like Hyperapp, Ultradom or Preact.
h('nodeName','attributes','children')
A call to
h(x,y,z)returns a build function that expects a node of type
[0,1,2]where:
0contains a
stringused as the elements tag name (required)
1contains an
objectcontaining element attributes (optional)
2contains an
string|arrayof content or children (optional)
Children are flattened and falsey children are excluded. Numbers passed as children get converted to strings.
npm i ijk
Here is a demo with Hyperapp and Preact.
import { h } from 'ijk'const tree = h('nodeName', 'attributes', 'children')( ['main', [ ['h1', 'Hello World'], ['input', { type: 'range' }], ['button', { onclick: console.log }, 'Log Event'], ['ul', [ ['li', 1], ['li', 2], ['li', 3] ]], false && ['span', 'Hidden'] ]] )
ijk is essentially
hbut with optional props and you only have to call
honce; not every time you want to represent an element in the DOM. This generally means less repetition and one less import in your view files.
const h = h('main', {}, [ h('h1', {}, 'Hello World'), h('input', { type: 'range' }), h('button', { onclick: console.log }, 'Log Event'), h('ul', {}, [ h('li', {}, 1), h('li', {}, 2), h('li', {}, 3), ]), false && h('span', {}, 'Hidden') ])
The main advantages over using JSX is less repetition of tag names and no build step is required.
const jsx =Hello World
Log Event{false && 'Hidden'}
- 1
- 2
- 3
Here is an example that takes advantage of most features and demonstrates components.
import { h } from 'ijk'const Item = data => ['li', data] const Article = ({ title, story, related }) => [ 'article', [ ['h2', title], ['hr'], ['p', story], related.map(Item), ] ]
const Main = ['main', [ ['h1', 'Hello World'], ['input', { type: 'range' }], ['ul', [ ['li', 1], ['li', 2], ['li', 3], ]], ['button', { onclick: console.log }, 'Log Event'], false && ['span', 'Hidden'], Article({ title: 'Some News', story: 'lorem ipsum dolor sit amet', related: [4,5], }) ]]
const tree = h('nodeName', 'attributes', 'children')(Main)