New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

domlette

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

domlette

Miniscule DOM creation library

  • 1.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

🍳 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

FAQs

Package last updated on 10 Mar 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc