@zaeny/hiccup

VDOM representation in hiccup

Simple UI building with hiccup nested data structure

• Geting Started
• Usage
• API
• Related work
• Changes

Getting started

npm common js

npm i @zaeny/hiccup

var {render, toHiccup, toString} = require('@zaeny/hiccup');

note please use your favorite cdn

• unpkg -https://www.unpkg.com/@zaeny/[email protected]/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));

usage

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>

Api

createElement(hnode),
render(container, hnode)
toHiccup(str)
toString(hnode) 

Related work

• Composable - Collection of functions to solve programming problem

Changes

• [1.0.0] add createElement, render, toHiccup
• [1.0.1] add svg rendering in renderNode
• [1.0.2] add toString to render html string
• [1.0.3] seperate toString to its own file
• [1.0.5] add global hiccup script, fix homepage repository