heya-dom

    1.0.3 • Public • Published

    dom

    Build status Dependencies devDependencies NPM version

    heya-dom is used on browser to simplify DOM-related tasks, especially construction, and modification of DOM.

    Following modules are provided:

    • create — largely based on venerable Dojo. Includes creating DOM nodes with optional namespaces, setting attributes, properties, styles, and similar helpers.
    • build — a Virtual DOM-inspired utility to create DOM fragments in one go using a simple array-based structure.
    • hyperscript — an alternative for build, a minimalistic implementation of Dominic Tarr's hyperscript. It is there mostly to reuse existing tooling, and existing code created for other implementations.
    • fromHtml — a helper to instantiate HTML snippets as DocumentFragment.

    Examples

    We want to create the following simple list:

    <ul data-sort="asc">
      <li>one</li>
      <li class="x">two</li>
      <li>three</li>
    </ul>

    Let's do it with create() (low-level):

    var root = create('ul', {'data-sort': 'asc'});
    create('li',   {$: {innerHTML: 'one'}},   root);
    create('li.x', {$: {innerHTML: 'two'}},   root);
    create('li',   {$: {innerHTML: 'three'}}, root);

    Let's do it with build():

    var root = build(['ul', {'data-sort': 'asc'},
      ['li', 'one'], ['li.x', 'two'], ['li', 'three']]);

    Let's do it with hyperscript():

    var h = hyperscript;
     
    var root = h('ul', {dataset: {sort: 'asc'}},
      h('li', 'one'), h('li.x', 'two'), h('li', 'three'));

    Let's do it with fromHtml():

    var root = fromHtml(
      '<ul data-sort="asc">' +
        '<li>one</li>' +
        '<li class="x">two</li>' +
        '<li>three</li>' +
      '</ul>'
    );

    How to install

    With npm:

    npm install --save heya-dom

    With bower:

    bower install --save heya-dom

    How to use

    heya-dom can be installed with npm or bower with files available from node_modules/ or bower_components/. By default, it uses AMD:

    define(['heya-dom/build'], function (build) {
      document.body.appendChild(build([
        'p', 'Hello, world!'
      ]));
    });

    But it can be loaded with <script> tag from dist/:

    <script src='node_modules/heya-dom/dist/build.js'></script>

    And used with globals like in examples above:

    document.body.appendChild(heya.dom.build([
      'p', 'Hello, world!'
    ]));

    See How to include for more details.

    Documentation

    All documentation can be found in project's wiki.

    Versions

    • 1.0.3 — Refreshed dependencies.
    • 1.0.2 — Consistently added options and dollar escapes.
    • 1.0.1 — Cosmetic change: removed the missing main module.
    • 1.0.0 — The initial public release as heya-dom.

    License

    BSD or AFL — your choice.

    Install

    npm i heya-dom

    DownloadsWeekly Downloads

    1

    Version

    1.0.3

    License

    BSD-3-Clause

    Last publish

    Collaborators

    • elazutkin