elmtree v0.0.28

A simple TypeScript library for easily creating an interactive UI. It is meant to be as close as to vanilla JS/TS as possible.

It requires no bundler, transpiler, or CLI. It can be used with TypeScript or plain JS.

Basic Clock Example

import { BloomRoot, UseCascade, div } from "elmtree";
const { runCascade, addToElment } = UseCascade();
BloomRoot(
  div(
    "clock",
    [],
    [
      addToElment(
        (elm: HTMLDivElement) =>
          (elm.innerText = `${new Date().toLocaleTimeString()}`)
      ),
    ]
  )
);
setInterval(() => {
  runCascade();
}, 1000);

Basic Component Example

import { ElmTreeData, div, button, Component, AddClass } from "elmtree";
export const ItemList = <T>(props: {
  format: (data: T) => ElmTreeData;
  getButtons: (data: T) => {
    text: string;
    onClick: Function;
  }[];
  claasses: string[];
}) =>
  Component({
    addons: [AddClass([`item=list`, ...props.claasses])],
    generate: (items: T[]) =>
      items.map((node) =>
        div("item-list-item", [
          ...props.format(node),
          div("item-list-buttons", [
            props
              .getButtons(node)
              .map((b) =>
                button(b.text, b.onClick, [AddClass(["item-list-button"])])
              ),
          ]),
        ])
      ),
  });

//using it
type SaveData = {
  name: string;
  version: string;
};
const [component, setItems] = ItemList<SaveData>({
  format(data) {
    return [
      title("h3", data.name, "item-list-title"),
      paragraph(`version: ${data.version}`, "item-list-description"),
    ];
  },
  getButtons(data) {
    return [
      {
        text: "Play",
        onClick() {
          SaveScreenState.saveId = data.name;
          SCREEN_STATE.screen = "confirm-play-save";
        },
      },
      {
        text: "Delete",
        onClick() {
          SaveScreenState.saveId = data.name;
          SCREEN_STATE.screen = "confirm-delete-save";
        },
      },
    ];
  },
  claasses: ["save-screen-list"],
});

BloomRoot(component);

const saves = await AppDataBase.getAllSaves();
setItems(
  Object.keys(saves).map((saveId) => {
    return { name: saveId, version: saves[saveId] };
  })
);

Form Builder Example

import { GetForm } from "elmtree";
const bind = {rand:0,title:""};
GetForm({
  inputBind: bind,
  elements: [
    {
      type: "text-input",
      label: "Title",
      bindTo: "title",
    },
    {
      type: "text-input",
      label: "Random Number",
      bindTo: "rand",
    },
    {
      type: "button",
      text: "Create",
      onClick: async () => {
        console.log(bind);
        if (bind.title && bind.rand) {
         //commit
        }
      },
    },
  ],
}),