html-to-hyperscript
v0.8.0
Published
Convert HTML to HyperScript (both common syntaxes)
Downloads
46
Readme
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
Dependencies
This repo is made mostly to power a webservice. So we don't care much about dependencies.
Web Service
Use html-to-hyperscript.paqmind.com to convert HTML to HyperScript online.
License
MIT