helium-ui
Based on helium-sdx, utilizes Source Derivation (SDx) to create, mutate, and structure HTMLElements in the DOM.
import {div, Sourcify, onDomReady, button} from "helium-ui";
const state = Sourcify({
a: 1,
b: {
c: 2
}
});
const exampleApp = div("Example", [
button("ButtonA", { onPush: () => state.a++}, "a++"),
button({
class: "ButtonC",
onPush: () => state.b.c++,
innards: "c++"
}),
() => `${state.a} + ${state.b.c} = ${state.a + state.b.c}`
])
onDomReady(() => document.body.append(exampleApp));
Quick Reference Example (QRE)
Here's most of the general functionality
import {
Sourcify, div, span, HeliumRouteState,
anchor, deriveDomAnchored, syncWithLocalStorage
} from "helium-ui";
const state = Sourcify({
a: 1
})
const app = div("App", [
div("FormatTypes", [
span("MyClass"),
span("MyClass", { id: null }),
span("MyClass", "child text"),
span("MyClass", { id: null }, ["child text"]),
span("MyClass", { id: null }, "child text"),
span({ id: null }),
span({ id: null }, "child text"),
span([ "child text" ])
]),
div("InnardsTypes", [
div("AnyHtmlElement"),
document.createElement("div"),
"text",
42,
0,
false, null, undefined, "",
[
["nested", "arrays"],
'flatten',
[
[div("Wacky")]
]
],
() => ["a"],
() => "a",
() => {
return () => "functions can return functions"
},
{ hackableHTML: "<div>Don't put user generated data in these!</div>"}
]),
div("AllProps", {
class: "additionalClass",
ddxClass: () => state.a === 1 && "classA",
title: "for tooltip hover",
style: { background: "red" },
attr: {
draggable: "true"
},
this: {
someVal: 123
},
ref: (ref: HTMLDivElement) => console.log(ref.className),
ddx: (ref) => ref.style.left = state.a + "px",
onFreeze: ({currentTarget}) => console.log("Removed from page", currentTarget),
onUnfreeze: ({currentTarget}) => console.log("Added to page", currentTarget),
on: {
load: (ev) => console.log(`Load event`)
},
onPush: null,
onTouch: null,
onToucherMove: null,
onToucherEnterExit: null,
onKeyDown: null,
onHoverChange: null,
innards: [
span("Child1"),
"some text",
span("Child2"),
]
}),
]);
const routeState = new HeliumRouteState<"home" | "profile">({
home: { test: "/" },
profile: { test: "/profile" }
});
const linkNode = anchor({
href: () => routeState.getUrlForRoute("profile"),
innards: "Go to profile"
});
deriveDomAnchored(linkNode, () => {
console.log(`linkNode is currently on page and routeState.id is "${routeState.id}"`)
});
syncWithLocalStorage("StateID", state as any);