@tsplc/debug 0.0.0-stage → 0.2.17

package/src/ui/dom.ts

@@ -0,0 +1,168 @@
+import type { DeviceState } from "../api.ts";
+import type { DebugDevice, SourceRange } from "../manifest.ts";
+import {
+  formatReadAt,
+  formatValue,
+  recordLocation,
+  sourceLocation,
+  valueStateLabels,
+} from "./format.ts";
+import type { Store, Topic } from "./store.ts";
+import type { TreeNode } from "./tree.ts";
+
+type Child = Node | string | null | undefined | false;
+type Attribute = string | number | boolean | undefined | ((event: Event) => void);
+
+export const h = <K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  attributes: Record<string, Attribute> = {},
+  ...children: Child[]
+): HTMLElementTagNameMap[K] => {
+  const element = document.createElement(tag);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === undefined || value === false) continue;
+    if (typeof value === "function") element.addEventListener(name.slice(2), value);
+    else element.setAttribute(name, value === true ? "" : String(value));
+  }
+  return fill(element, ...children);
+};
+
+/** Replaces an element's children, skipping the absent ones. */
+export const fill = <E extends Element>(element: E, ...children: Child[]) => {
+  element.replaceChildren(...children.filter((child): child is Node | string => Boolean(child)));
+  return element;
+};
+
+/** A page: built once per route, then told which store topics changed each frame. */
+export interface View {
+  element: HTMLElement;
+  update(topics: Set<Topic>): void;
+  dispose?(): void;
+}
+
+export const empty = (text: string) => h("p", { class: "empty" }, text);
+
+const locationLink = (
+  { label, href }: { label: string; href?: string },
+  title: string,
+  text?: string,
+) =>
+  href
+    ? h("a", { class: "src", href, title: `Open ${title} in VS Code` }, text ?? label)
+    : h("span", { class: "src", title }, text ?? label);
+
+export const sourceLink = (store: Store, range: SourceRange, text?: string) => {
+  const location = sourceLocation(store.manifest, store.session.projectRoot, range);
+  return locationLink(location, location.label, text);
+};
+
+/** A telemetry record's `source`, a project-relative `file:line`. */
+export const recordSourceLink = (store: Store, source: string) =>
+  locationLink(recordLocation(store.session.projectRoot, source), source);
+
+const variableHref = (path: string) => `#/variables?path=${encodeURIComponent(path)}`;
+
+export const pathLink = (path: string, text: Node | string = path) =>
+  h("a", { class: "path", href: variableHref(path), title: `Show ${path} in Variables` }, text);
+
+/** A path that wraps only between its segments. */
+export const wrappingPath = (path: string) =>
+  h("span", {}, ...path.split(/(?=[.[])/).flatMap((segment) => [h("wbr"), segment]));
+
+const setText = (element: HTMLElement, text: string) => {
+  if (element.textContent !== text) element.textContent = text;
+};
+const setClass = (element: HTMLElement, name: string) => {
+  if (element.className !== name) element.className = name;
+};
+
+/** A variable's value and its quality and age, kept current by `update()` from the store. */
+export class LiveValue {
+  readonly value = h("span");
+  readonly meta = h("span");
+
+  constructor(
+    private readonly store: Store,
+    readonly node: TreeNode,
+  ) {
+    this.update();
+  }
+
+  /** Whether the stream should carry this path. */
+  get subscribed() {
+    return this.node.readable && !this.node.constant;
+  }
+
+  update() {
+    const { node, store } = this;
+    if (node.constant)
+      return this.show(
+        "constant",
+        formatValue(store.manifest, node.type, node.constant.value),
+        "constant",
+      );
+    if (!node.readable)
+      return this.show(
+        "unavailable",
+        "—",
+        "not readable",
+        "This build can't read it from the controller",
+      );
+    const { sample, state } = store.live(node.path);
+    if (!sample) return this.show("unavailable", "—", "not read", "Not read yet");
+    const meta =
+      state === "unavailable" || state === "bad"
+        ? valueStateLabels[state]
+        : `${valueStateLabels[state]} · ${formatReadAt(sample.receivedAt)}`;
+    this.show(
+      state,
+      formatValue(store.manifest, node.type, sample.value),
+      meta,
+      `${sample.status}\nread ${sample.receivedAt}`,
+    );
+  }
+
+  private show(state: string, value: string, meta: string, title?: string) {
+    setClass(this.value, `value s-${state}`);
+    setClass(this.meta, `meta s-${state}`);
+    setText(this.value, value);
+    setText(this.meta, meta);
+    if (title !== undefined && this.meta.title !== title) this.meta.title = title;
+  }
+}
+
+export type Health = "ok" | "fault" | "stale" | "unknown";
+
+interface HealthView {
+  health: Health;
+  text: string;
+  detail: string;
+}
+
+/**
+ * A device's health as far as its driver reported it: "unknown" without a health target, "needs
+ * login" while nothing can read it, never "OK" by default.
+ */
+export const deviceHealth = (store: Store, device: DebugDevice): HealthView => {
+  const state: DeviceState | undefined = store.devices.get(device.id);
+  const { connection } = store.session;
+  if (!device.health)
+    return {
+      health: "unknown",
+      text: "unknown",
+      detail: "This build reads no health for this device",
+    };
+  if (connection.state === "unavailable")
+    return { health: "unknown", text: "needs login", detail: connection.error ?? "" };
+  if (!state || state.health.state === "unknown")
+    return { health: "unknown", text: "unknown", detail: "The driver's state has not been read" };
+  const { health } = state;
+  const detail = [health.name, health.message].filter(Boolean).join(" · ");
+  if (health.state === "stale") return { health: "stale", text: "stale", detail };
+  if (!store.connected || health.quality !== "good")
+    return { health: "stale", text: `stale, was ${health.state}`, detail };
+  return { health: health.state, text: health.state === "ok" ? "OK" : health.state, detail };
+};
+
+export const healthBadge = (health: HealthView) =>
+  h("span", { class: `badge h-${health.health}`, title: health.detail }, health.text);