This is an implementation of html-script using an adapter over the real DOM (or JSDOM etc., see below) - to use this API with a different backing structure, eg some virtual DOM or whatever, see the html-script readme

Example

'use strict'

const H = require( 'dom-script' )

const {
  document, documentType, text, comment, documentFragment, element,
  html, head, body, meta, title, div, p, strong, input
} = H

const dom =
  document(
    documentType('html'),
    html(
      head(
        meta({charset:'utf-8'}),
        title('Hello World!')
      ),
      body(
        comment('Whose line is it anyway?'),
        div({id:'main'},
          p('The quick brown fox jumps over the ',strong('lazy dog')),
          input({type:'text',name:'firstName',placeholder:'Alex'})
        ),
        comment('Fragment not (usually) necessary but make sure it works'),
        documentFragment(
          comment('Text not necessary but etc.'),
          p(text('lol '),'wut')
        ),
        comment('But what if it is not in the spec?'),
        element('customtag',{class:'kk'},
          p('OK that works for me')
        )
      )
    )
  )

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <!--Whose line is it anyway?-->
    <div id="main">
      <p>The quick brown fox jumps over the <strong>lazy dog</strong></p>
      <input type="text" name="firstName" placeholder="Alex" />
    </div>
    <!--Fragment not (usually) necessary but make sure it works-->
    <!--Text not necessary but etc.-->
    <p>lol wut</p>
    <!--But what if it is not in the spec?-->
    <customtag class="kk">
      <p>OK that works for me</p>
    </customtag>
  </body>
</html>

Installation and usage

npm install dom-script

const H = require( 'dom-script' )

// now destructure out the functions you want - alternatively, use H.div etc.
const { div, p, comment, element } = H

// any objects passed will be treated as attributes
// <div id="main"></div>
const main = div( { id: 'main' } )

// any strings passed will be treated as text nodes
// <p>Hello world!</p>
const hello = p( 'Hello world!' )

// non-element nodes also supported
// <!--Hello world!-->
const helloComment = comment( 'Hello world!' )

// any nodes passed will be appended to the parent
// <div><p>Hello</p><p>World</p></div>
const nested =
  div(
    p( 'Hello' ),
    p( 'World' )
  )

// stick in the real DOM
document.body.appendChild( nested )

// if html-script doesn't have the element you want
// <custom id="myCustom">Hello world!</custom>
const custom =
  element( 'custom', { id: 'myCustom' },
    'Hello world!'
  )

Attributes

An object passed to a dom-script function is treated as though it were an attribute map for the node. For the most part, it is expected to be a simple map of attribute name to attribute value, and the value is expected to be a string, with some exceptions listed below.

const nameField =
  div(
    label( { for: 'firstName' }, 'First Name' ),
    input( { type: 'text', name: 'firstName' } )
  )

<div>
  <label for="firstName">First Name</label>
  <input type="text" name="firstName" />
</div>

boolean attributes

To make working with boolean attributes easier, any attribute that has a boolean value will be treated as though the boolean attribute is present on the node if the value is true, and absent if the value is false:

div(
  input( { type: 'radio', checked: true } ),
  input( { type: 'radio', checked: false } )
)

<div>
  <input type="radio" checked />
  <input type="radio" />
</div>

style

Either a string, or an object of name value pairs:

div(
  p( { style: 'font-family: sans-serif' }, 'Hello' ),
  p( { style: { 'font-family': 'sans-serif', 'font-size': '1rem' }, 'World' )
)

<div>
  <p style="font-family: sans-serif">Hello</p>
  <p style="font-family: sans-serif; font-size: 1rem;">World</p>
</div>

data

An attribute named data with an object value will be treated similarly to the dataSet property on DOM nodes, that is, the object keys will be converted from camelCase to dash-style with a data- prefix. This makes it easy to use your existing models to set data attributes without having to first mangle the names:

div( { data: { firstName: 'Nik', lastName: 'Coughlin' } } )

<div data-first-name="Nik" data-last-name="Coughlin"></div>

functions

If an attribute value is a function and the name starts with 'on', it's considered to be an event handler:

div( { onclick: e => window.alert( 'Clicked!' ) }
  p( 'Hello world!' )
)

other types

All other values are converted to a string via String( value )

Using with JSDOM or other DOM compatible interfaces

Get an instance of document using whatever technique the interface supports, then call dom-script as a function with that document instance.

So instead of:

const H = require( 'dom-script' )

Do this:

const H = require( 'dom-script' )( document )

With JSDOM this would look something like:

const document = require( 'jsdom' ).jsdom( '<html></html>' )
const H = require( 'dom-script' )( document )

const { div } = H

div( 'Hello World' )
// etc

JsonML

Because JsonML is a convenient format for transportation and persistence, a helper method is provided to populate your DOM from JsonML data:

const H = require( 'dom-script' )
const jsonML = require( './path/to/some/data.json' )

const dom = H.fromJsonML( jsonML )

FAQs

What is dom-script?

Is dom-script well maintained?

Package last updated on 01 Mar 2017

Did you know?

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

dom-script