Convert HTML to HyperScript
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
specs
src
.gitignore
.npmignore
README.md
package.json

README.md

HTML to HyperScript

html-to-hyperscript converts HTML to HyperScript.
Supports both original and hypescript-helpers syntaxes.
Here and below first syntax is referenced as H, second – as HH.

Install

$ npm install html-to-hyperscript

Use

test.js

let {htmlToHs} = require("html-to-hyperscript")

let convert = htmlToHs({tabSize: 4})

console.log(
  convert("<div>foo <span>bar</span></div>")
)

$ babel-node test.js

div([
  `foo `,
  span([`bar`])
])

API

Functions correspond to html-to-hyperscript default export.
Exported function are curried.

htmlToHs :: Opts -> String -> String

Converts HTML string to HyperScript string according to passed options.

Example

> let convert = htmlToHs({})

> convert('<div class="foo"></div>')
'div(".foo")'

> convert('<a rel="stylesheet">public/bundle.css</a>')
'a({\n  "attributes": {\n  "rel": "stylesheet"\n  }\n}, [`public/bundle.css`])'

> convert('<div><span>foo</span></div>')
'div([\n  span([`foo`])\n])'

> let convert = htmlToHs({syntax: "h"})

> convert('<div><span>foo</span></div>')
'h("div", [\n  h("span", [`foo`])\n])'

htmlToHs2 :: Opts -> String -> [String, [String]]

Converts HTML string to HyperScript string according to passed options, keeping a list of used tagnames. Use with HH syntax.

Example

> let [_, usedTagNames] = htmlToHs2({}, "<div><i>italic</i><b>bold #1</b><b>bold #2</b></div>")

> usedTagNames
['b', 'i', 'div']

> `let {${usedTagNames.join(", ")}} = hh(h)`.
'let {b, i, div} = hh(h)'

Opts :: {tabSize :: Number, syntax :: String}

Options to control rendering.

tabSize – number of spaces in "tab". Defaults to 2.

syntax – pass "h" for H syntax, "hh" for HH syntax. Defaults to "hh".

Library comparison

Feature Library
html2hyperscript html2hscript html-to-hyperscript
Parser engine htmlparser2 htmlparser2 parse5
Parsing async async sync
H syntax + + +
HH syntax - - +
Respect whitespace - - +

Dependencies

This repo is made mostly to power a webservice.
So we don't care much about dependencies.

Ramda

Parse5

Web Service

Use html-to-hyperscript.paqmind.com to convert HTML to HyperScript online.

License

MIT