神刀安全网

create-dom-tree – Module to create DOM elements with ease

create-dom-tree

create-dom-tree - Module to create DOM elements with ease Create a DOM tree with ease.

create-dom-tree - Module to create DOM elements with ease create-dom-tree - Module to create DOM elements with ease create-dom-tree - Module to create DOM elements with ease create-dom-tree - Module to create DOM elements with ease create-dom-tree - Module to create DOM elements with ease

This module is intended for use in conjunction withmorphdom but can be used in any DOM-like environment. It’s an alternative tobel orhyperx for those who want to build their DOM trees without template strings or JSX.

h('div', [   h1('.bold', 'create-dom-tree'),   h2('#subtitle', 'Create a DOM tree with ease'),   button({ href: 'http://ghub.io/create-dom-tree' }, 'Open') ])

Features

  • Create complex DOM trees with ease
  • Weights only ~1kb in size
  • Functional utilities can be used since it’s just functions
  • Works perfectly withmorphdom

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>  */

Comparison

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

<ul class='items'>   {items.map((item) => <li>{item.title}</li>)} </ul>

Guide

Eachelement 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)

Each argument is optional allowing you to create DOM trees really fast. At least one argument needs to be present however.

  • 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 children

Events

You can write your events inline:

button({ onClick: () => console.log('button has been clicked!') }, 'Click Here')

They can be written however you like: onClick , onclick , ONCLICK etc.

Lifecycle hooks

This is not the concern of this module and should live in higher-level modules likeyo-yo orinu. If you feel like it should,open an issue to discuss.

createElement()

If you want, you can fall back to the traditional createElement(tag, attributes, children) instead of the exposed helper functions.

const { createElement } = require('create-dom-tree') const h = createElement  const node = h('h1', 'text')  console.log(node.outerHTML) /*   * ->  * <h1>text</h1>  */

SVG Support

As of writing this, there is no SVG support yet. This is on theroadmap

External tools

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

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:

  • Noobservable support
  • No default div tag since it’s not needed withhyperscript-helpers
createElement('text') // -> doesn't generate <div>Text</div>
  • Nocontext

Tests

> 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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » create-dom-tree – Module to create DOM elements with ease

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址