html-to-hyperscript

0.8.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i html-to-hyperscript

Weekly Downloads

21

Version

0.8.0

License

MIT

Last publish

Collaborators

  • ivan-kleshnin