byre/web/src/dom.ts

type Child = Node | string | number | null | undefined | false;

type Props<K extends keyof HTMLElementTagNameMap> = Partial<Omit<HTMLElementTagNameMap[K], "style" | "dataset">> & {
  class?: string;
  style?: string;
  data?: Record<string, string>;
};

export function h<K extends keyof HTMLElementTagNameMap>(tag: K, props: Props<K> = {}, ...children: Child[]): HTMLElementTagNameMap[K] {
  const el = document.createElement(tag);
  const { class: className, style, data, ...rest } = props;

  if (className) {
    el.className = className;
  }
  if (style) {
    el.setAttribute("style", style);
  }
  for (const [key, value] of Object.entries(data ?? {})) {
    el.dataset[key] = value;
  }
  Object.assign(el, rest);

  append(el, ...children);
  return el;
}

export function append(el: Node, ...children: Child[]): void {
  for (const child of children) {
    if (child === null || child === undefined || child === false) {
      continue;
    }
    el.appendChild(typeof child === "object" ? child : document.createTextNode(String(child)));
  }
}

export function replace(el: Element, ...children: Child[]): void {
  el.replaceChildren();
  append(el, ...children);
}

export function ago(iso: string): string {
  const seconds = Math.round((Date.now() - Date.parse(iso)) / 1000);
  if (seconds < 60) {
    return "just now";
  }
  if (seconds < 3600) {
    return `${Math.floor(seconds / 60)}m ago`;
  }
  if (seconds < 86400) {
    return `${Math.floor(seconds / 3600)}h ago`;
  }
  return `${Math.floor(seconds / 86400)}d ago`;
}

export function errorText(err: unknown): string {
  return err instanceof Error ? err.message : String(err);
}

function modal(text: string, buttons: { label: string; value: string; class?: string }[]): Promise<string> {
  const actions = buttons.map((b) => h("button", { type: "submit", value: b.value, class: b.class ?? "" }, b.label));
  const dialog = h("dialog", { class: "modal" }, h("form", { method: "dialog" }, h("p", { class: "modal-text" }, text), h("div", { class: "modal-actions" }, ...actions)));
  document.body.append(dialog);
  return new Promise((resolve) => {
    dialog.onclose = () => {
      dialog.remove();
      resolve(dialog.returnValue);
    };
    dialog.showModal();
    actions.at(-1)?.focus();
  });
}

export async function showAlert(text: string): Promise<void> {
  await modal(text, [{ label: "OK", value: "ok", class: "primary" }]);
}

export async function showConfirm(text: string, action: string, danger = false): Promise<boolean> {
  const value = await modal(text, [
    { label: "Cancel", value: "cancel" },
    { label: action, value: "ok", class: danger ? "danger-primary" : "primary" },
  ]);
  return value === "ok";
}