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++"
  }),
  // will update every time buttons are pressed
  () => `${state.a} + ${state.b.c} = ${state.a + state.b.c}`
])

onDomReady(() => document.body.append(exampleApp));

Website: helium-ui.tech

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", [
  // All the ways you can pass className, Props, and Innards
  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" ]) // <--- must be array or else will be treated as class name
  ]),


  // Various different ways to supply innards
  div("InnardsTypes", [
    div("AnyHtmlElement"),
    document.createElement("div"),
    "text",
    42,
    0,                          // adds "0"
    false, null, undefined, "", // all add nothing,
    [
      ["nested", "arrays"],
      'flatten',
      [
        [div("Wacky")]
      ]
    ],
    () => ["a"],
    () => "a",
    () => {
      return () => "functions can return functions"
    },
    { hackableHTML: "<div>Don't put user generated data in these!</div>"}
  ]),
   

  // All of the different props
  div("AllProps", {
    // will create "AllProps additionalClass" as className
    class: "additionalClass",
    // have the class "classA" only when state.a equals 1
    ddxClass: () => state.a === 1 && "classA",
    title: "for tooltip hover",
    style: { background: "red" },

    // will show up as <div draggable="true"/>
    attr: {
      draggable: "true"
    },
    // will set the returned HTMLDivElement.someVal to 123
    this: {
      someVal: 123
    },
    ref: (ref: HTMLDivElement) => console.log(ref.className),
    // for keeping some part of the element in sync with state without re-creating it
    ddx: (ref) => ref.style.left = state.a + "px",

    // if you want to stop processing when element is not on page
    onFreeze: ({currentTarget}) => console.log("Removed from page", currentTarget),
    onUnfreeze: ({currentTarget}) => console.log("Added to page", currentTarget),

    // event listeners
    on: {
      load: (ev) => console.log(`Load event`)
    },
    onPush: null,               // a click or tap
    onTouch: null,              // mousedown or touch
    onToucherMove: null,        // mousemove or touch move
    onToucherEnterExit: null,   // mouse enter/exit or touch
    onKeyDown: null,
    onHoverChange: null,

    // same as innards above, but can be passed in as a props argument
    innards: [
      span("Child1"),
      "some text",
      span("Child2"),
    ]
  }),  
]);


// -------------- OTHER STUFF ----------------

// watches for url changes, then updates routeState.id if one matches
const routeState = new HeliumRouteState<"home" | "profile">({
  home: { test: "/" },
  profile: { test: "/profile" }
});


const linkNode = anchor({ 
  // href can be derived.
  href: () => routeState.getUrlForRoute("profile"),
  innards: "Go to profile"
});

// anchors a deriver to an HTMLElement
deriveDomAnchored(linkNode, () => {
  console.log(`linkNode is currently on page and routeState.id is "${routeState.id}"`)
});

// state will stay the same between page refreshes
syncWithLocalStorage("StateID", state as any);