VDOM representation in hiccup
Simple UI building with hiccup nested data structure
npm common js
npm i @zaeny/hiccupvar {render, toHiccup, toString} = require('@zaeny/hiccup');note please use your favorite cdn
- unpkg -
https://www.unpkg.com/@zaeny/hiccup@1.0.2/dist/index.js - jsdelivr -
https://fastly.jsdelivr.net/gh/azizzaeny/hiccup@main/dist/index.js
in browser common js
<script src="https://cdn.jsdelivr.net/gh/azizzaeny/hiccup@main/dist/index.js"></script>in browser es5 global vars
<script src="https://cdn.jsdelivr.net/gh/azizzaeny/hiccup@main/dist/index.def.js"></script>in browser es6
<script type="module" src="https://cdn.jsdelivr.net/gh/azizzaeny/hiccup@main/dist/index.es6.js"></script>in browser es6 import
import {render, toHiccup, toString} from 'https://cdn.jsdelivr.net/gh/azizzaeny/hiccup@main/dist/index.es6.js';browser es6 import function
var assignVar = (global) => res => Object.assign(global, { hiccup: res.default });
import("https://cdn.jsdelivr.net/gh/azizzaeny/hiccup@main/dist/index.es6.js").then(assignVar(window));var component = (props) => (["div", "container", ["div", {class: "w-10"}, "look iam hiccup"]]);
// render(<<hiccup>>, <<elementContainer>>
render(component(), document.body );
// more children example
render(
["div", {class: "container"},
["p", {class: "leading"}, "Hi"],
["p", {}, "my name is hiccup"]
],
document.body
);
toHiccup('<div>hai</div>'); // ["div", {}, "hai"]
toString(["div", {class: "foo bar"}, ["div", {}, "hail"]]); // <div class="foo bar"><div>hail</div></div>createElement(hnode),
render(container, hnode)
toHiccup(str)
toString(hnode) - Composable - Collection of functions to solve programming problem
- [1.0.0] add
createElement,render,toHiccup - [1.0.1] add
svgrendering in renderNode - [1.0.2] add
toStringto render html string - [1.0.3] seperate
toStringto its own file