Enchanted hyperscript weapon.
npm install hyperaxe
An enchanted hyperscript weapon.
[![npm][npm-image]][npm-url]
[![build][build-image]][build-url]
[![downloads][downloads-image]][npm-url]
[npm-image]: https://img.shields.io/npm/v/hyperaxe.svg
[npm-url]: https://www.npmjs.com/package/hyperaxe
[build-image]: https://github.com/ungoldman/hyperaxe/actions/workflows/tests.yml/badge.svg
[build-url]: https://github.com/ungoldman/hyperaxe/actions/workflows/tests.yml
[downloads-image]: https://img.shields.io/npm/dm/hyperaxe.svg
``sh`
npm install hyperaxe
`js
import { body, h1 } from 'hyperaxe'
body(
h1('hello world')
)
// =>
Usage
Exports all HTML tags.
`js
import { a, img, video } from 'hyperaxe'a({ href: '#' }, 'click')
// click
img({ src: 'cats.gif', alt: 'lolcats' })
// 
video({ src: 'dogs.mp4', autoplay: true })
//
`Default export accepts a tag and returns an element factory.
`js
import h from 'hyperaxe'
const p = h('p')p('over 9000')
//
over 9000
`CSS shorthand works too.
`js
import h from 'hyperaxe'
const horse = h('.horse.with-hands')horse('neigh')
//
neigh
`Makes creating custom components easy.
`js
import h, { body } from 'hyperaxe'const siteNav = (...links) => h('nav.site')(
links.map(link =>
h('a.link')({ href: link.href }, link.text)
)
)
body(
siteNav(
{ href: '#apps', text: 'apps' },
{ href: '#games', text: 'games' }
)
)
//
//
//
`Example
nanochoo:`js
import { body, button, h1 } from 'hyperaxe'
import nano from 'nanochoo'const app = nano()
app.use(store)
app.view(view)
app.mount('body')
function view (state, emit) {
return body(
h1(
count is ${state.count}),
button({ onclick }, 'Increment')
) function onclick () {
emit('increment', 1)
}
}
function store (state, emitter) {
state.count = 0
emitter.on('increment', function (count) {
state.count += count
emitter.emit('render')
})
}
`API
$3
`js
hyperaxe(tag) => ([props], [...children]) => HTMLElement
`-
tag _string_ - valid HTML tag name or CSS shorthand (required)
- props _object_ - HTML attributes (optional)
- children _node, string, number, array_ - child nodes or primitives (optional)Returns a function that creates HTML elements.
The factory is variadic, so any number of children are accepted.
`js
h('.variadic')(
h('h1')('hi'),
h('h2')('hello'),
h('h3')('hey'),
h('h4')('howdy')
)
`Arrays of children also work.
`js
const kids = [
h('p')('Once upon a time,'),
h('p')('there was a variadic function,'),
h('p')('that also accepted arrays.')
]h('.arrays')(kids)
`In a browser context, the object returned by the factory is an
HTMLElement object. In a server (node) context, the object returned is an instance of html-element. In both contexts, the stringified HTML is accessible via the outerHTML attribute.$3
All HTML tags are available as named exports.
They return the same function as described above, with the
tag argument prefilled.Think of it as a kind of partial application.
The main motivation for doing this is convenience.
`js
import { p } from 'hyperaxe'p('this is convenient')
`You can pass raw HTML by setting the
innerHTML property of an element.`javascript
import { div } from 'hyperaxe'div({ innerHTML: '
Raw HTML!' })
`$3
Creates a
hyperaxe element factory for a given hyperscript implementation (h).Available as a named export:
import { createFactory } from 'hyperaxe'If you use another implementation than
hyperscript proper, you can exclude that dependency by using import { createFactory } from 'hyperaxe/factory.js'. For the time being, no other implementations are tested though, so wield at your own peril!$3
Same as
createFactory, except it only creates a new factory on the first call and returns a cached version after that.Available as a named export:
import { getFactory } from 'hyperaxe'Enchantments
- Summons DOM nodes.
- +1 vs. virtual DOM nodes.
- Grants Haste.
Dependencies
- html-tags: List of standard HTML tags.
- hyperscript: Create HyperText with JavaScript, on client or server.
Dev Dependencies
- standard: JavaScript Standard Style.
- standard-version: Replacement for
npm version` with automatic CHANGELOG generation.This library's approach and API are heavily inspired by reaxe.
Contributors welcome! Please read the contributing guidelines before getting started.
Axe image is from emojidex.