lukejacksonn/ ijk

JavaScript

vdom

preact

hyperapp

hyperscript

View on GitHub

Need help with ijk?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

lukejacksonn

459 Stars

13 Forks

MIT License

73 Commits

2 Opened issues

Description

Transforms arrays into virtual dom trees; a terse alternative to JSX and h

Services available

Need anything else?

Contributors list

Luke Jackson lukejacksonn

# 39,538

CSS

hyperap...

elm

Svelte

60 commits

Jorge Bucaran jorgebucaran

# 3,966

Shell

fish-sh...

vdom

elm

3 commits

James Yang futurist

# 85,186

HTML

TypeScr...

hypersc...

lodash

2 commits

crazy4groovy crazy4groovy

# 184,824

TypeScr...

hyperap...

hypersc...

Redux

1 commit

Readme

ijk

Transforms arrays into virtual DOM trees

Find

a 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

returns 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.

Schemas

Hyperapp / Ultradom / Preact:
```
h('nodeName','attributes','children')
```

Signature

A call to

h(x,y,z)

returns a build function that expects a node of type

[0,1,2]

where:

Index
```
0
```
contains a
```
string
```
used as the elements tag name (required)
Index
```
1
```
contains an
```
object
```
containing element attributes (optional)
Index
```
2
```
contains an
```
string|array
```
of content or children (optional)

Children are flattened and falsey children are excluded. Numbers passed as children get converted to strings.

Installation

npm i ijk

Usage

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']
  ]]
)

Comparison

ijk is essentially

but with optional props and you only have to call

once; 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
    
      1
      2
      3
    
    {false && 'Hidden'}

Advanced

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)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.