elementx

Create DOM elements with a convenient syntax, supporting a unidirectional infrastructure

This module is an alternative to jsx or template strings for those who want to build up their DOM trees using plain function composition.

div([
  h1('.bold', 'elementx'),
  h2('#subtitle', 'Create a DOM tree with ease'),
  button({ href: 'http://ghub.io/elementx' }, 'Open'),
  ul(['simple', 'functional', 'fast'].map(key => li(key)))
])

Features

• Supports SVG
• Supports boolean attributes like autofocus: true
• Weights only 2.8kb minified and gzipped
• Functional utilities can be used since it's just functions
• Can be used with diffing libraries like morphdom or nanomorph for a unidirectional infrastructure

Installation

> npm install elementx

Usage

const { div, h1, a } = require('elementx')

const tree = div('.container.p2#js-root', [
  h1('.title', 'This is a title'),
  div({ style: 'background-color: red;' }, [
    a({ href: 'http://github.com' }, 'Github')
  ])
])

console.log(tree.outerHTML)
/*
 * ->
 * <div class="full-width p2">
 *   <h1>Some text</h1>
 *   <div style="background-color: red;">
 *     <a href="http://github.com">Github</a>
 *   </div>
 * </div>
 */

Guide

Each element in the DOM is exposed as a function when requiring elementx.

const { div, h1, p, button } = require('elementx')

These functions have the following syntax:

tag(selector, attributes, children)

All arguments are optional with at least one argument needing to be present. This kind of function overloading allows you to iterate on your DOM structure really fast and reduce visual noise.

• selector can be .title to append a class or #id to give the element an id. These can be mixed as you might expect: #id.title.pad.red
• attributes is an object of dom attributes: { href: '#header' }
• children can be a string for a text node or an array of nodes

Lifecycle hooks

This module aims to be just the element creation layer. It can be used with any view framework using DOM as their base abstraction. Some frameworks include choo](https://github.com/ahdinosaur/inu) or inu.

Use without helper functions

Sometimes you need to fall back to the traditional createElement(tag, attributes, children) (aliased to h) for example svg tags.

const { h } = require('elementx')
// -> or { createElement }

const node = h('h1', 'text')

console.log(node.outerHTML)
/* 
 * ->
 * <h1>text</h1>
 */

Differences from hyperscript

This module is a lot smaller because its focused on only creating DOM elements. Feel free to built upon this if you feel like needing any of the following features:

• No observable support
• No default div tag since it's not needed with hyperscript-helpers

createElement('text') // -> doesn't generate <div>Text</div>

• No context

External tools

• html-to-hyperscript - Webservice to convert HTML to hyperscript

Tests

Tests are written using JSDOM.

> npm test

License

MIT

_{The icon in the title was created by Daniel Bruce under the Creative Commons Attribution-Share Alike 3.0 Unported License}