dom-script
Create DOM nodes in the browser using a concise API, like hyperscript.
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>See also dom-script running in the browser
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' )
// etcJsonML
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 )