a2dom

a2dom README

Overview

a2dom is a small utility function to convert array into DOM.

Example

Simple example:

let a2dom = require('./a2dom.js');
let html1 = a2dom(['a', {href: '/'}, 'home']);
console.log(html1);
        //=> '<a href="/">home</a>'

Nested example:

let a2dom = require('./a2dom.js');
let html2 = a2dom(
  ['table'
  , ['tbody', {"class": "user-list"}
    , ['tr', {id: 'user-100', "class": 'user'}
      , ['td', 100], ['td', 'Alice']
      ]
    , ['tr', {id: 'user-200', "class": 'user'}
      , ['td', 100], ['td', 'Bob']
      ]
    ]
  ]
);
console.log(html2);
        //=> '<table>
        //      <tbody>
        //        <tr id="user-100" class="user">
        //          <td>100</td><td>Alice</td>
        //        </tr>
        //        <tr id="user-200" class="user">
        //          <td>200</td><td>Bob</td>
        //        </tr>
        //      </tbody>
        //    </table>'

Loop example:

let a2dom = require('./a2dom.js');
let context = {
  items: ['Alice', 'Bob', 'Charlice']
}
let html3 = a2dom(
  ['ul'
  , function(arr) {   // function representing loop
      for (let x of context.items) {
        arr.push(['li', x]);
      }
    }
  ]
);
console.log(html3);
        //=> '<ul>
        //      <li>Alice</li>
        //      <li>Bob</li>
        //      <li>Charlie</li>
        //    </ul>'

/// or
let html4 = a2dom(
  ['ul'
  , ...(function*() {  // generator with spread operator
      for (let x of context.items) {
        yield ['li', x];
      }
    })()
  ]
);
console.log(html4);

License

MIT License

Copyright

copyright(c) 2018 Kauplan Agency all rights reserved.