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 html2hyperscript
html2hyperscript legacy_markup_file.html > shiny_new_syntax.js
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:
h("table.sample-html", [ h("tr", [ h("th", [ "Pandas" ]), h("th", [ "Kittens" ]), h("th", [ "Hedgehogs" ]) ]), h("tr", [ h("td", [ "foo" ]), h("td", [ "bar" ]), h("td", [ "baz" ]) ]), h("tr", [ h("td", [ "32" ]), h("td", [ "45" ]), h("td", [ "83" ]) ]), h("tr", [ h("td", [ "onomatopoeia" ]), h("td", [ "schadenfreude" ]), h("td", [ "antidisestablishmentarianism" ]) ]) ])
- some tests