Automatically translate old HTML markup into the new Hyperscript markup embeddable directly inside your component Javascript code.
Use this for hand-converting legacy project source code (e.g. AngularJS templates): care is taken to preserve original whitespace and even comments. For dynamic serving and CI builds check out https://github.com/alexmingoia/jsx-transform instead.
npm install -g @nerevu/html2hs
html2hs file.html [file2.html ...]
cat file.html | html2hs
See Hyperscript library: https://github.com/dominictarr/hyperscript
Also useful for virtual DOM Hyperscript-like syntax: https://github.com/Matt-Esch/virtual-dom
HTML goes in:
<table class="sample-html">
<tr>
<th>Pandas</th>
<th>Kittens</th>
<th>Hedgehogs</th>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
<tr>
<td>32</td>
<td>45</td>
<td>83</td>
</tr>
<tr>
<td>onomatopoeia</td>
<td>schadenfreude</td>
<td>antidisestablishmentarianism</td>
</tr>
</table>Hyperscript-like JS syntax comes out:
m("table.sample-html", [
m("tr", [
m("th", "Pandas"),
m("th", "Kittens"),
m("th", "Hedgehogs")
]),
m("tr", [
m("td", "foo"),
m("td", "bar"),
m("td", "baz")
]),
m("tr", [
m("td", "32"),
m("td", "45"),
m("td", "83")
]),
m("tr", [
m("td", "onomatopoeia"),
m("td", "schadenfreude"),
m("td", "antidisestablishmentarianism")
])
])