create-dom-tree v1.0.1
create-dom-tree
Create DOM elements fast with a convenient syntax
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', 'create-dom-tree'),
h2('#subtitle', 'Create a DOM tree with ease'),
button({ href: 'http://ghub.io/create-dom-tree' }, 'Open'),
ul(['simple', 'functional', 'fast'].map(key => li(key)))
])
Features
- Create complex DOM trees with ease
- Weights only ~1.2kb in size
- Functional utilities can be used since it's just functions
- Works perfectly with morphdom or nanomorph
Installation
> npm install create-dom-tree
Usage
const { div, h1, a } = require('create-dom-tree')
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 create-dom-tree
.
const { div, h1, p, button } = require('create-dom-tree')
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 element like choo or inu.
Use without helper functions
If you want, you can fall back to the traditional createElement(tag, attributes, children)
instead of the exposed helper functions.
const { h } = require('create-dom-tree')
// -> 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
SVG Support
As of writing this, there is no SVG support yet. This is on the roadmap
Syntax comparison
While the syntax differences are subtle, as the the tree grows, these small differences can influence visual noise by a lot.
Helper functions or create-dom-tree
ul('.items', items.map((item) => li(item.text)))
Hyperscript
This traditional syntax is also available through createElement
from this module.
h('ul.items', items.map((item) => li(item.text)))
JSX
This syntax is a non-standard language addition popularized by facebook. Each tag
gets converted into a function call.
<ul class='items'>
{items.map((item) => <li>{item.title}</li>)}
</ul>
Template strings
This syntax was popularized by substack and is used by yo-yo, inu and choo. They all utilize hyperx under the hood.
yo`<ul>
${items.map((item) => yo`<li>${item}</li>`)}
</ul>`
External tools
- html-to-hyperscript - Webservice to convert HTML to hyperscript
Tests
Tests are written using JSDOM.
> npm test
License
The icon in the title was created by Daniel Bruce under the Creative Commons Attribution-Share Alike 3.0 Unported License