Nightly Pocket Measurement

    hyperaxe

    2.0.1 • Public • Published
    HyperAxe

    HyperAxe

    An enchanted hyperscript weapon.

    npm build downloads

    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.

    See Also

    This library's approach and API are heavily inspired by reaxe.

    Contributing

    Contributors welcome! Please read the contributing guidelines before getting started.

    License

    ISC

    Axe image is from emojidex.

    Install

    npm i hyperaxe

    DownloadsWeekly Downloads

    158

    Version

    2.0.1

    License

    ISC

    Unpacked Size

    15.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • ungoldman