domlette

🍳 DOMlette - miniscule DOM generation library

DOMlette is a very small (300B) library for when you need to generate DOM from JavaScript. It is aimed at situations where new DOM nodes are being created, and as such, is not appropiate for frequently re-rendered UI. For such tasks, consider Preact or React.

API

h

Takes an an array of elements and outputs a node with the appropriate children attached

Parameters

• $0 {Array} the {Domlette} to turn into a {Node}
• $0 [0] name {String} this is the node name such as 'div', 'a' or 'p'
• $0 [1] attrs {Object} these are the attributes of the object you want to set.
• $0 [2] children {Array} an array of {Domlette} or {String} to append as children
• $0 [3] onMount {function} a callback to be called with the node reference once the node has been added to its parent

Returns Node a DOM Node created from the {Domlette} passed in

mount

Mount an {Array} of {Domlette}s to the parent node

Parameters

• parent {Node} the parent node to append to
• elements {Array} the Domlettes to append to the parent

Example

let hiddenNode = null;

mount(document.body, [
  ['div', { class: 'container' }, [
    ['style', {}, ['.hidden{ display: none }']],
    ['h1', {}, ['Title']],
    ['p', {}, [
      'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
      'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, ',
      'when an unknown printer took a galley of type and scrambled it to make a type ',
      'specimen book. It has survived not only five centuries, but also the leap into ',
      'electronic typesetting, remaining essentially unchanged. It was popularised in ',
      'the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, ',
      'and more recently with desktop publishing software like Aldus PageMaker including ',
      'versions of Lorem Ipsum.'
    ]],
    ['ul', {}, [
      ['li', {}, ['Item 1']],
      ['li', {}, ['Item 2']],
      ['li', {}, ['...']],
    ]],
    ['div', { class : 'hidden' }, ['This is a dynamic element'], (e) => { hiddenNode = e }],
    ['button', { onclick : () => { hiddenNode.classList.toggle('hidden') } }, ['Toggle']],
  ]]
]);

See example on Codepen

Changelog

1.0.2 (2017-03-10)

<a name="1.0.1">fixed hinting error for es6 version</a>