Hyperaxe NPM | npm.io

HyperAxe

An enchanted hyperscript weapon.

npm install hyperaxe

const { body, h1 } = require('hyperaxe')

body(
  h1('hello world')
)
// => <body><h1>hello world</h1></body>

Usage

Exports all HTML tags.

const { a, img, video } = require('hyperaxe')

a({ href: '#' }, 'click')
// <a href="#">click</a>

img({ src: 'cats.gif', alt: 'lolcats' })
// <img src="cats.gif" alt="lolcats">

video({ src: 'dogs.mp4', autoplay: true })
// <video src="dogs.mp4" autoplay="true"></video>

Default export accepts a tag and returns an element factory.

const x = require('hyperaxe')
const p = x('p')

p('over 9000')
// <p>over 9000</p>

CSS shorthand works too.

const x = require('hyperaxe')
const horse = x('.horse.with-hands')

horse('neigh')
// <div class="horse with-hands">neigh</div>

Makes creating custom components easy.

const x = require('hyperaxe')

const siteNav = (...links) => x('nav.site')(
  links.map(link =>
    x('a.link')({ href: link.href }, link.text)
  )
)

x.body(
  siteNav(
    { href: '#apps', text: 'apps' },
    { href: '#games', text: 'games' }
  )
)
// <body>
//   <nav class="site">
//     <a class="link" href="#apps">apps</a>
//     <a class="link" href="#games">games</a>
//   </nav>
// </body>

Example

Here's a counter increment example using nanochoo:

const { body, button, h1 } = require('hyperaxe')
const nano = require('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

`hyperaxe`

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.

x('.variadic')(
  x('h1')('hi'),
  x('h2')('hello'),
  x('h3')('hey'),
  x('h4')('howdy')
)

Arrays of children also work.

const kids = [
  x('p')('Once upon a time,'),
  x('p')('there was a variadic function,'),
  x('p')('that also accepted arrays.')
]

x('.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.

`hyperaxe[tag]`

All HTML tags are attached to hyperaxe as keys.

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.

const { p } = require('hyperaxe')

p('this is convenient')

You can pass raw HTML by setting the innerHTML property of an element.

const { div } = require('hyperaxe')

div({ innerHTML: '<p>Raw HTML!' })

`hyperaxe.createFactory(h)`

Creates a hyperaxe element factory for a given hyperscript implementation (h).

If you use another implementation than hyperscript proper, you can exclude that dependency by using require('hyperaxe/factory'). For the time being, no other implementations are tested though, so wield at your own peril!

`hyperaxe.getFactory(h)`

Same as createFactory, except it only creates a new factory on the first call and returns a cached version after that.

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.
tape: tap-producing test harness for node and browsers.