3.0 KiB

Raw Blame History

Uhm

Minimal JavaScript UI Builder

Uhm, is an experimental composable UI builder that takes ideas from early hyperapp design, but does not stick to strict Elm Architecture.

Uhm, because you should think about, ah, NOT using it.

Features

Real DOM
Non-destructive (re)Rendering
Supports tagged html syntax via xhtm
No Build System
No Over Engineering
~6kb minified / ~3kb gzip

NOTE: experimenting with different builds, sizes may vary

Install

Via JSDelivr CDN

import {app,h} from "https://cdn.jsdelivr.net/gh/n2geoff/uhm/dist/uhm.min.js";

Overview

Uhm only has 3 exported functions, app(), h() and html, and the later is optional.

app(mount, {opts})

The app() builder function takes two arguments, the mount point as a selector or element, and the opts object made of:

Input:

Property	Default	Description
`state`	`{}`	initial data state
`actions`	`{key: (state) => {}}`	function object passed to view
`view`	`(state, actions) => null`	function that takes state and actions and returns valid dom

Output:

Interface with internal state for utility expansion

Property	Description
`state`	internal state object
`update()`	function to render dom state

!IMPORTANT: long running operations require manual update() called

h(tag, attrs, [...children])

The h() is a hypertext build utility that provides a way to build out your view DOM, but you can build your view using html or even jsx, really any method you like as long as it returns valid DOM.

return h("h3", ${greeting});

html

Instead of returning hypertext to build your dom, you can use regular html

return html`<h3>Hello ${greeting}</h3>`;

Example

    <div id="app"></div>
    <script type="module">
        import {app, h} from "./uhm.min.js";

        const myapp = app("#app", {
            state: {name: "[Your Name Here]", job: "Developer"},
            view(state, actions) {
                return h("main", [
                    h("strong", `Greeting from ${state.name}`),
                    h("div", `Your local ${state.job}`),
                    h("div", {id: "test"}, [
                        h("h1", "Uhm, Hello"),
                        h("p", 21),
                        h("hr")
                    ])
                ]);
            }
        });
    </script>

Notes

WORK-IN-PROGRESS

TODO

Rethink State Management, might be ok

3.0 KiB Raw Blame History

Uhm