hypel

hypel
=====

[![npm][1]][2] [![install size][3]][4]

[1]: https://img.shields.io/npm/v/hypel "hypel npm, badge"
[2]: https://www.npmjs.com/package/hypel "hypel npm, link"
[3]: https://packagephobia.now.sh/badge?p=hypel "hypel size, badge"
[4]: https://packagephobia.now.sh/result?p=hypel "hypel size, link"

hypel creates dom elements with vanilla javascript
``javascript
div('#app', [
h1('hello everybody'),
ul('#bestest-menu', items.map(item => (
li('#item-'+item.id, attrs(item.id), item.title))))
])
`

hypel is used with vdom implementations such as react or inferno. A compact example,
` javascript
import hypel from 'hypel'
import { h } from 'inferno-hyperscript'
import { render } from 'inferno'

const { div, span, a } = hypel(h)

render(
div('#container.two.classes', {
// note: syntax for classNames, attributes and other
// details differ depending upon virtual-dom library
on: { click: () => console.log('go') }
}, [
span('.bold', 'This is bold'), ' and this is just normal text ',
a('.link', { props: { href: "/foo" } }, 'now go places!')
]), document.getElementById('container'))
//


`

$3

hypel includes a hook feature, so that tag function arguments can be transformed through a hook. (try it out to see how it works)
`javascript
const tags = hypel(h, args => transformArgs(args))
``

--------------------------------------------

$3

Credit to Ossi Hanhinen and his hyperscript-helpers package. This package was created from hyperscrpt-helpers when that package was no longer maintaind and incompatible with the esm-bundling strategy I used.

This package adds to the original hyperscript-helpers in these ways,
* exports an esm module and declares "module" type in the package.json,
* exports a single file,
* uses node-native test-runner,
* examples demonstrate more vdom packages; snabbdom, inferno and react,
* adds a hook feature,
* adds github ci for tests,
* smaller package size

[0]: https://bumblehead.com "bumblehead"

!scrounge