h-html

A library to quickly create virtual nodes for Composi using HTML tag names instead of Composi's h function. It enables you to use a simpler syntax for hyperscript using tag names. This is a great choice for those who do not like using JSX for defining component markup.

Installation

Open your terminal and cd to your project. Then run:

npm i -D h-html

Call Singature

All tag methods take two arguments:

1. An object for properties/attributes
2. A child or array of children

If the tag has no properties, just provide an empty object: {}. You could also pass null, but two curly braces is shorter.

In the example below we pass an empty object for properties and a string as the child.

h1({}, 'The Title')

This will result in:

<h1>The Title</h1>

Here we give the tag a class and a title attribute:

h1({class: 'main-title', title: 'This is the title'}, 'The Title')

This will result in:

<h1 class='main-title' title='This is the title'>The Title</h1>

Import All Tags

Since this uses ES6 imports, if you need to use a lot of tags, you can simplify the import using an alias:

import * as tag from 'h-html'

function title(message) {
  return tag.nav(
    {},
    tag.h1({}, 'The Title')
  )
}

function list() {
  return tag.ul(
    {class: 'list'},
    [
      tag.li({}, 'Item One'),
      tag.li({}, 'Item Two'),
      tag.li({}, 'Item Three')
    ]
  )
}

Use with Composi

After installing h-html you can start using it with Composi. Below is an example:

import {h, render} from 'composi'
import {div, nav, h1, ul, li} from 'h-html'

// Define the title:
function title(message) {
  return nav({}, h1({}, `Hello, ${message}!`))
}
// Render the tag:
render(title('World'), 'header')

//******//
// List //
//******//

// Data for list component:
const fruits = ['Apples', 'Oranges', 'Bananas']

// Create list items:
function listItems(data) {
  return data.map(item => li({}, item))
}

// Define list component.
// Pass it listItems function:
function list(data) {
  return ul(
    {class: 'list'},
    listItems(data)
  )
}

// Render list:
render(list(fruits), 'section')

Notice how we had to break out the list items as a separate function. With JSX you can include an array with map inside curly braces. With hyperscript functions you need to define a separate function to do that. That's because h is expecting either a primitive value as a child (string, number, boolean), or an array of children.

ES6

You could refactor the above example to use ES6 arrow functions for more concise code:

import {h, render} from 'composi'
import {div, nav, h1, ul, li} from 'h-html'

// Define the title:
const title = message => nav({}, h1({}, `Hello ${message}`))

// Render the tag:
render(title('World'), 'header')

//******//
// List //
//******//

// Data for list component:
const fruits = ['Apples', 'Oranges', 'Bananas']

// Create list items:
const listItems = data => data.map(item => li({}, item))

// Define list component.
// Pass it listItems function.
const list = data => ul(
  {class: 'list'},
  listItems(data)
)

// Render list:
render(list(fruits), 'section')