mojule-h
v0.3.0
Published
A bit like hyperscript, but for mojule-dom
Downloads
2
Readme
mojule-h
Create mojule-dom virtual nodes using a concise API, like hyperscript.
This is an implementation of
html-script using an adapter over
mojule-dom. To use this syntax in the browser, see
dom-script, or to use it with some other
structure, eg some virtual DOM or whatever, see the
html-script readme
Example
'use strict'
const H = require( 'mojule-h' )
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 mojule-h
const H = require( 'mojule-h' )
// 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>other types
All other values are converted to a string via String( value )
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( 'mojule-h' )
const jsonML = require( './path/to/some/data.json' )
const dom = H.fromJsonML( jsonML )