caret / apps / playground / src / components / poolDebugView.ts

import { h, Pool, t, VNode } from "@caret-js/core";

export function renderPoolDebugView(pool: Pool): VNode {
  let vNodes: VNode[] = [];
  for (const [tokenId, tokenValue] of pool.tokens.entries()) {
    vNodes.push(
      h(
        "div",
        {
          style: `border: 1px solid black; background: #fffa; padding: 4px; opacity: ${tokenValue.deleted ? 0.3 : 1};`,
        },
        h("div", { style: "font: 10px monospace;" }, t(tokenId)),
        h("div", { style: "font-weight: bold;" }, t(tokenValue.type)),
        h(
          "table",
          { style: "width: 100%; border: 1px solid black; margin: 4px 0;" },
          h(
            "tbody",
            {},
            h(
              "tr",
              { style: "border: 1px solid black; padding: 4px;" },
              h(
                "td",
                {
                  style: "font: 9px monospace; text-align: center;",
                  colspan: "2",
                },
                t(tokenValue.origin.dot),
              ),
            ),
            h(
              "tr",
              {},
              h(
                "td",
                {
                  colspan: "2",
                  style: "font: 10px monospace; text-align: left;",
                },
                t(`← ${tokenValue.origin.left}`),
              ),
            ),
            h(
              "tr",
              {},
              h(
                "td",
                {
                  colspan: "2",
                  style: "font: 10px monospace; text-align: right;",
                },
                t(`${tokenValue.origin.right} →`),
              ),
            ),
          ),
        ),
        h("div", { style: "margin-top: 8px;" }, t("Props:")),
        h(
          "ul",
          { style: "padding-left: 24px; margin: 4px 0;" },
          ...[...tokenValue.props.entries()].map(([propName, propValue]) => {
            return h(
              "li",
              {},
              h("div", { style: "font: 9px monospace;" }, t(propValue.dot)),
              h(
                "pre",
                { style: "margin: 0;" },
                t(`${propName}: ${JSON.stringify(propValue.value)}`),
              ),
            );
          }),
        ),
      ),
    );
  }

  return h(
    "div",
    {
      style:
        "display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 16px; padding: 16px; background: lightblue;",
    },
    ...vNodes,
    // Show cursor info
    !pool.selection &&
      h(
        "div",
        {
          style:
            "grid-column: 1 / -1; background: #0005; border: 1px solid #000a; padding: 4px;",
        },
        t(`No selection`),
      ),
    pool.selection &&
      h(
        "div",
        {
          style:
            "grid-column: 1 / -1; background: #f88a; border: 1px solid darkred; padding: 4px;",
        },
        t(
          `Head: ← ${pool.selection.head.left} | ${pool.selection.head.right} →`,
        ),
      ),
    pool.selection &&
      h(
        "div",
        {
          style:
            "grid-column: 1 / -1; background: #0005; border: 1px solid black; padding: 4px;",
        },
        t(
          `Anchor: ← ${pool.selection.anchor.left} | ${pool.selection.anchor.right} →`,
        ),
      ),
  );
}