https://github.com/arccoza/hyperscript-html
A fast, simple, hyperscript implementation for generating HTML.
https://github.com/arccoza/hyperscript-html
fast generator html html5 hyperscript lightweight micro simple small terse tiny
Last synced: 2 months ago
JSON representation
A fast, simple, hyperscript implementation for generating HTML.
- Host: GitHub
- URL: https://github.com/arccoza/hyperscript-html
- Owner: arccoza
- License: mit
- Created: 2017-08-12T17:52:46.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-03-23T23:52:43.000Z (over 3 years ago)
- Last Synced: 2025-04-07T01:50:39.405Z (6 months ago)
- Topics: fast, generator, html, html5, hyperscript, lightweight, micro, simple, small, terse, tiny
- Language: JavaScript
- Homepage:
- Size: 134 KB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[travis]: https://travis-ci.org/arccoza/hyperscript-html
[travis-img]: https://travis-ci.org/arccoza/hyperscript-html.svg
# hyperscript-html [![Travis Build Status][travis-img]][travis]
Hyperscript-html provides a simple, fast, and lightweight hyperscript function to generate HTML.
## Example
### Input
```js
var {HyperScript, wrap} = require('hyperscript-html')
// import {HyperScript, wrap} from 'hyperscript-html' // If you're using es modules.
var h = HyperScript()
var html =
h('div#id.cls.cls2[attr1=val1][style=background-color:#ff0000; position:relative]',
h('h1', {class: ['title']}, 'The Title'),
h('p.content', 'The content'),
)
```
### Input with wrapped elements
```js
var {HyperScript, wrap} = require('hyperscript-html')
// import {HyperScript, wrap} from 'hyperscript-html' // If you're using es modules.
var {div, h1, p} = wrap({div: 'div', h1: 'h1', p: 'p'})
var html =
div({id: 'id', class: ['cls', 'cls2'], style: {backgroundColor: '#ff0000', position: 'relative'}},
h1({class: ['title']}, 'The Title'),
p({class: ['content']}, 'The content'),
)
```
### Output
```html
The Title
The content
```
## API
### HyperScript([options])
The `hyperscript` constructor, takes optional options object argument, returns a `hyperscript` function.
```js
var h = HyperScript()
// or with options
var h = HyperScript({tab:'\t', nl:'\n', attrsNewLine:true, prettyPrint:true,
flexibleArgs:true, voidElements:true, shortHand:true})
```
### hyperscript(tag[, attrs[, ...children]])
The `hyperscript` function returned from the `HyperScript` constructor, takes a required tag name (eg. `'div'`), and optional attributes object, and optional children. The children can be added as an array or multiple arguments, or a combination of arrays and arguments.
```js
// tag
h('div')
// tag and attributes
h('div', {id: 'id', class: ['cls']})
// If the `shortHand` option is `true` (default),
// you can supply a CSS selector like string for the tag
// and the values will be extracted to their respective attributes.
h('div#id.cls[attr1=val][attr2]')
// tag with child arguments
h('div', 'hello', h('b', 'world'))
// tag with child array
h('div', ['hello', h('b', 'world')])
// tag with attributes and child arguments
h('div', {class: ['cls']}, 'hello', h('b', 'world'))
```
### wrap(elements[, options])
The wrap function creates shorthand `hyperscript` functions. It takes an object of elements with mapping `function name : element tag` (eg. `{div: 'div', BOX: 'div}`), and an optional options object (the same options that `HyperScript` takes). It returns an object of bound shorthand hyperscript functions.
```js
var {box, h1, p} = wrap({box: 'div', h1: 'h1', p: 'p'})
box(
h1('Title'),
p('Content'),
)
```
### options object
**Option** | **Default value** | **Description**
---:|:---|:---
`tab` | `'\t'` | What to use as the tab.
`nl` | `'\n'` | What to use as the line break.
`prettyPrint` | `true` | Format the HTML output nicely with newlines and tabs, set to `false` for faster rendering.
`attrsNewLine` | `true` | Put attributes on a new line when `prettyPrint` is `true`.
`shortHand` | `true`, always `false` for `wrap` fn | Use CSS like selector syntax in tag names for shorthand id, class and attributes values. Set to `false` for faster rendering.
`voidElements` | `true` | Leave the closing tag off of empty void elements.
`flexibleArgs` | `true` | Make the hyperscript functions interface flexible, if `false` you must provide a value for attributes argument or `null` if you supply children (eg. `h('div', null, 'child text')`.