@tanishqkancharla/diffmap 0.1.3

package/src/viewer/ComarkView.tsx

@@ -0,0 +1,209 @@
+import { createElement, type ReactNode, useState } from "react";
+import {
+  Checkbox,
+  colors,
+  monospace,
+  radius,
+  spacing,
+  Table,
+  TableHeader,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+  type TableAlign,
+} from "maui";
+import { style, useStyles } from "purse-styles";
+import type {
+  ViewerDocument,
+  ViewerElement,
+  ViewerNode,
+} from "../parseViewer.js";
+import type { SourceNavigation } from "../annotations.js";
+import { Fence } from "./Fence.tsx";
+import { HtmlPlaceholder } from "./HtmlPlaceholder.tsx";
+import { useViewerMode } from "./viewerMode.ts";
+
+const voidTags = new Set(["img", "hr", "br"]);
+
+export function ComarkView(
+  props: { document: ViewerDocument } & SourceNavigation,
+) {
+  const trustedHtml = useViewerMode() === "local";
+  return (
+    <>
+      {props.document.nodes.map((node, index) =>
+        renderNode(node, index, props, trustedHtml),
+      )}
+    </>
+  );
+}
+
+function renderNode(
+  node: ViewerNode,
+  key: number,
+  navigation: SourceNavigation,
+  trustedHtml: boolean,
+): ReactNode {
+  if (node.type === "text") return node.value;
+  if (node.type === "html") {
+    if (!trustedHtml) {
+      return <HtmlPlaceholder key={key} inline={node.block !== true} />;
+    }
+    if (node.block) {
+      return (
+        <div key={key} dangerouslySetInnerHTML={{ __html: node.source }} />
+      );
+    }
+    return <span key={key} dangerouslySetInnerHTML={{ __html: node.source }} />;
+  }
+  if (node.type === "view") {
+    return <Fence key={key} fence={node.fence} {...navigation} />;
+  }
+  return renderElement(node, key, navigation, trustedHtml);
+}
+
+function renderElement(
+  node: ViewerElement,
+  key: number,
+  navigation: SourceNavigation,
+  trustedHtml: boolean,
+): ReactNode {
+  if (node.tag === "table")
+    return renderTable(node, key, navigation, trustedHtml);
+  const children = node.children.map((child, index) =>
+    renderNode(child, index, navigation, trustedHtml),
+  );
+  if (node.tag === "alert") {
+    return (
+      <blockquote key={key} data-alert={node.attrs.alertType}>
+        {children}
+      </blockquote>
+    );
+  }
+  if (node.tag === "li" && node.attrs.task === true) {
+    return (
+      <TaskListItem key={key} node={node}>
+        {children}
+      </TaskListItem>
+    );
+  }
+  if (node.tag === "code") {
+    return <InlineChip key={key}>{children}</InlineChip>;
+  }
+  if (voidTags.has(node.tag)) {
+    return createElement(node.tag, { key, ...domAttrs(node) });
+  }
+  return createElement(node.tag, { key, ...domAttrs(node) }, children);
+}
+
+function tableElements(node: ViewerElement, tag: string): ViewerElement[] {
+  return node.children.filter(
+    (child): child is ViewerElement =>
+      child.type === "element" && child.tag === tag,
+  );
+}
+
+function tableAlign(node: ViewerElement): TableAlign | undefined {
+  if (node.attrs.align === "left") return "start";
+  if (node.attrs.align === "right") return "end";
+  if (node.attrs.align === "center") return "center";
+  return undefined;
+}
+
+function renderTable(
+  node: ViewerElement,
+  key: number,
+  navigation: SourceNavigation,
+  trustedHtml: boolean,
+) {
+  const headers = tableElements(node, "thead")
+    .flatMap((head) => tableElements(head, "tr"))
+    .flatMap((row) => tableElements(row, "th"));
+  const rows = tableElements(node, "tbody").flatMap((body) =>
+    tableElements(body, "tr"),
+  );
+  return (
+    <Table key={key} aria-label={headers.map(nodeText).join(", ")}>
+      <TableHeader>
+        {headers.map((header, index) => (
+          <TableHead
+            key={index}
+            id={`column-${index}`}
+            isRowHeader={index === 0}
+            align={tableAlign(header)}
+          >
+            {header.children.map((child, i) =>
+              renderNode(child, i, navigation, trustedHtml),
+            )}
+          </TableHead>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {rows.map((row, index) => (
+          <TableRow key={index} id={`row-${index}`} textValue={nodeText(row)}>
+            {tableElements(row, "td").map((cell, i) => (
+              <TableCell key={i} align={tableAlign(cell)}>
+                {cell.children.map((child, j) =>
+                  renderNode(child, j, navigation, trustedHtml),
+                )}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+function TaskListItem(props: { node: ViewerElement; children: ReactNode }) {
+  const [checked, setChecked] = useState(props.node.attrs.checked === true);
+  return (
+    <li
+      id={props.node.attrs.id}
+      className={props.node.attrs.className}
+      data-task=""
+    >
+      <span className="diffmap-task-checkbox">
+        <Checkbox
+          label={nodeText(props.node)}
+          checked={checked}
+          setChecked={setChecked}
+        />
+      </span>
+      {props.children}
+    </li>
+  );
+}
+
+function nodeText(node: ViewerNode): string {
+  if (node.type === "text") return node.value;
+  if (node.type !== "element") return "";
+  return node.children.map(nodeText).join("");
+}
+
+function domAttrs(node: ViewerElement) {
+  return {
+    id: node.attrs.id,
+    href: node.attrs.href,
+    src: node.attrs.src,
+    alt: node.attrs.alt,
+    title: node.attrs.title,
+    className: node.attrs.className,
+    start: node.attrs.start,
+  };
+}
+
+function InlineChip(props: { children?: ReactNode }) {
+  const className = useStyles(inlineCodeClass);
+  return <code className={className}>{props.children}</code>;
+}
+
+const inlineCodeClass = style(
+  monospace,
+  radius.md,
+  spacing.padding({ x: 2, y: 1 }),
+  {
+    backgroundColor: colors.gray[4],
+  },
+);

package/src/viewer/DiffButton.tsx

@@ -0,0 +1,24 @@
+import { Button, GitDiff, backgroundColor } from "maui";
+import { style, useStyles } from "purse-styles";
+
+export function DiffButton(props: { pressed: boolean; onClick?: () => void }) {
+  const className = useStyles(pressedClass);
+  return (
+    <Button
+      className={className}
+      aria-pressed={props.pressed}
+      aria-expanded={props.pressed}
+      aria-controls="source-diff-panel"
+      onClick={props.onClick}
+    >
+      <GitDiff size="sm" />
+      Diff
+    </Button>
+  );
+}
+
+const pressedClass = style({
+  "&[aria-pressed='true']": {
+    backgroundColor: backgroundColor.elementActive,
+  },
+});

package/src/viewer/DoneButton.tsx

@@ -0,0 +1,32 @@
+import { Button, background, colors, iconSizeValues, text } from "maui";
+import { style, useStyles } from "purse-styles";
+import { Check } from "./Check.tsx";
+
+const checkIcon = style({
+  width: iconSizeValues.sm,
+  height: iconSizeValues.sm,
+});
+
+export function DoneButton(props: { onClick?: () => void }) {
+  const checkClass = useStyles(checkIcon);
+  const primaryClass = useStyles(primaryButtonClass);
+  return (
+    <Button className={primaryClass} onClick={props.onClick}>
+      <Check className={checkClass} />
+      Done
+    </Button>
+  );
+}
+
+const primaryButtonClass = style(
+  background.accent,
+  text({ size: "xs", fontWeight: 400, color: "onAccent" }),
+  {
+    "&:hover": {
+      backgroundColor: colors.accent[10],
+    },
+    "&:active": {
+      backgroundColor: colors.accent[11],
+    },
+  },
+);

package/src/viewer/Fence.tsx

@@ -0,0 +1,51 @@
+import { CodeBlock } from "maui";
+import type { Fence as FenceModel } from "../parseFence.js";
+import type { SourceNavigation } from "../annotations.js";
+import { CallStackDiff } from "./CallStackDiff.tsx";
+import { CodeDiff } from "./CodeDiff.tsx";
+import { FileExcerpt } from "./FileExcerpt.tsx";
+import { HtmlBlock } from "./HtmlBlock.tsx";
+import { HtmlPlaceholder } from "./HtmlPlaceholder.tsx";
+import { MermaidBlock } from "./MermaidBlock.tsx";
+import { useViewerMode } from "./viewerMode.ts";
+
+export function Fence(props: { fence: FenceModel } & SourceNavigation) {
+  const fence = props.fence;
+  const trustedHtml = useViewerMode() === "local";
+  if (fence.kind === "mermaid")
+    return (
+      <MermaidBlock
+        source={fence.source}
+        annotations={fence.annotations}
+        selectedAnnotation={props.selectedAnnotation}
+        onSelectAnnotation={props.onSelectAnnotation}
+      />
+    );
+  if (fence.kind === "html") {
+    if (!trustedHtml) return <HtmlPlaceholder />;
+    return <HtmlBlock source={fence.source} />;
+  }
+  if (fence.kind === "source-diff") return undefined;
+  if (fence.kind === "callstack")
+    return (
+      <CallStackDiff
+        lines={fence.lines}
+        selectedAnnotation={props.selectedAnnotation}
+        onSelectAnnotation={props.onSelectAnnotation}
+      />
+    );
+  if (fence.kind === "diff") {
+    return <CodeDiff source={fence.source} path={fence.path} />;
+  }
+  if (fence.kind === "file") {
+    return (
+      <FileExcerpt
+        path={fence.path}
+        start={fence.start}
+        end={fence.end}
+        fallback={fence.source}
+      />
+    );
+  }
+  return <CodeBlock lang={fence.lang}>{fence.source}</CodeBlock>;
+}

package/src/viewer/FileExcerpt.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import { File } from "@pierre/diffs/react";
+import { useTheme } from "maui";
+import { useStyles } from "purse-styles";
+import { pierreFileOptions, pierreShell } from "./pierre.ts";
+import { useViewerMode } from "./viewerMode.ts";
+
+type FileExcerptPayload = {
+  path: string;
+  start: number;
+  end: number;
+  contents: string;
+};
+
+export function FileExcerpt(props: {
+  path: string;
+  start: number;
+  end: number;
+  fallback: string;
+}) {
+  const { resolvedTheme } = useTheme();
+  const shell = useStyles(pierreShell);
+  const excerpt = useFileExcerpt(props);
+  const pierre = pierreFileOptions(resolvedTheme);
+
+  return (
+    <div className={shell} data-file-path={props.path} data-diffmap-kind="file">
+      <File
+        file={{
+          name: props.path,
+          contents: excerpt === undefined ? props.fallback : excerpt.contents,
+        }}
+        disableWorkerPool
+        options={pierre}
+      />
+    </div>
+  );
+}
+
+function useFileExcerpt(input: { path: string; start: number; end: number }) {
+  const [excerpt, setExcerpt] = useState<FileExcerptPayload>();
+  const mode = useViewerMode();
+  useEffect(() => {
+    if (mode === "gist") return;
+    const params = new URLSearchParams({
+      path: input.path,
+      start: String(input.start),
+      end: String(input.end),
+    });
+    void fetch(`/__diffmap/file?${params.toString()}`)
+      .then((response) => {
+        if (!response.ok) return undefined;
+        return response.json();
+      })
+      .then((value) => {
+        if (value === undefined) return;
+        // SAFETY: the diffmap CLI serves FileExcerpt JSON for this route.
+        setExcerpt(value as FileExcerptPayload);
+      })
+      .catch((cause) => {
+        console.warn("diffmap file excerpt failed", cause);
+      });
+  }, [input.path, input.start, input.end, mode]);
+  return excerpt;
+}

package/src/viewer/HtmlBlock.tsx

@@ -0,0 +1,19 @@
+import { radius, shadow, spacing } from "maui";
+import { style, useStyles } from "purse-styles";
+
+export function HtmlBlock(props: { source: string }) {
+  const className = useStyles(styles.shell);
+  return (
+    <div
+      className={className}
+      data-diffmap-kind="html"
+      dangerouslySetInnerHTML={{ __html: props.source }}
+    />
+  );
+}
+
+const styles = {
+  shell: style(radius.md, shadow.subtle, spacing.padding({ all: 4 }), {
+    minWidth: 0,
+  }),
+};

package/src/viewer/HtmlPlaceholder.tsx

@@ -0,0 +1,29 @@
+import { colors, radius, spacing, text } from "maui";
+import { style, useStyles } from "purse-styles";
+
+export function HtmlPlaceholder(props: { inline?: boolean }) {
+  const inline = props.inline === true;
+  const className = useStyles(inline ? styles.inline : styles.block);
+  const copy = "HTML from this gist is not rendered.";
+  if (inline) return <span className={className}>{copy}</span>;
+  return (
+    <aside className={className} data-diffmap-kind="html-disabled">
+      {copy}
+    </aside>
+  );
+}
+
+const styles = {
+  block: style(
+    radius.md,
+    spacing.padding({ all: 4 }),
+    text({ size: "sm", color: "lowContrast" }),
+    {
+      minWidth: 0,
+      backgroundColor: colors.gray[3],
+    },
+  ),
+  inline: style(text({ size: "sm", color: "lowContrast" }), {
+    backgroundColor: colors.gray[3],
+  }),
+};

package/src/viewer/MermaidBlock.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useMemo, useRef } from "react";
+import { backgroundColor, colors, fontFamily } from "maui";
+import { style, useStyles } from "purse-styles";
+import { mermaidSvg } from "../mermaid.js";
+import type { DiagramAnnotation } from "../diagramAnnotations.js";
+import type { SourceNavigation } from "../annotations.js";
+import { linkDiagram } from "./diagramLinks.js";
+
+export function MermaidBlock(
+  props: {
+    source: string;
+    annotations: DiagramAnnotation[];
+  } & SourceNavigation,
+) {
+  const container = useRef<HTMLDivElement>(null);
+  const shell = useStyles(styles.shell);
+  const svg = useMemo(
+    () =>
+      mermaidSvg({
+        source: props.source,
+        bg: backgroundColor.app,
+        fg: colors.gray[12],
+        accent: colors.accent[9],
+        muted: colors.gray[11],
+        surface: backgroundColor.element,
+        border: colors.gray[6],
+        font: fontFamily,
+      }),
+    [props.source],
+  );
+  const linked = useMemo(
+    () => (svg instanceof Error ? svg : linkDiagram(svg, props.annotations)),
+    [svg, props.annotations],
+  );
+  // React replaces innerHTML when this object changes, which drops SVG focus.
+  const html = useMemo(
+    () => ({ __html: linked instanceof Error ? "" : linked }),
+    [linked],
+  );
+  useEffect(() => {
+    if (linked instanceof Error) return;
+    for (const target of container.current!.querySelectorAll(
+      "[data-source-index]",
+    )) {
+      const annotation =
+        props.annotations[Number(target.getAttribute("data-source-index"))]!
+          .annotation;
+      target.setAttribute(
+        "aria-pressed",
+        String(annotation === props.selectedAnnotation),
+      );
+    }
+  }, [linked, props.annotations, props.selectedAnnotation]);
+  if (linked instanceof Error) {
+    return (
+      <div ref={container} className={shell} data-diffmap-kind="mermaid">
+        {linked.message}
+      </div>
+    );
+  }
+  return (
+    <div
+      ref={container}
+      className={shell}
+      data-diffmap-kind="mermaid"
+      onClick={(event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) return;
+        const element = target.closest("[data-source-index]");
+        if (element === null) return;
+        props.onSelectAnnotation(
+          props.annotations[Number(element.getAttribute("data-source-index"))]!
+            .annotation,
+        );
+      }}
+      onKeyDown={(event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        const target = event.target;
+        if (!(target instanceof Element)) return;
+        const element = target.closest("[data-source-index]");
+        if (element === null) return;
+        event.preventDefault();
+        props.onSelectAnnotation(
+          props.annotations[Number(element.getAttribute("data-source-index"))]!
+            .annotation,
+        );
+      }}
+      dangerouslySetInnerHTML={html}
+    />
+  );
+}
+
+const styles = {
+  shell: style({
+    width: "100%",
+    maxHeight: "60vh",
+    overflow: "auto",
+    minWidth: 0,
+    border: 0,
+    boxShadow: "none",
+    "& .source-target": { cursor: "pointer" },
+    "& .source-target:focus, & .source-target:focus-visible": {
+      outline: "none",
+    },
+    "& .source-hit": { pointerEvents: "stroke" },
+    "& .source-node:hover > g > rect, & .source-node:hover > g > polygon": {
+      fill: colors.blue[2],
+      stroke: colors.blue[8],
+      strokeWidth: 2,
+    },
+    "& .source-node:hover text": { fill: colors.blue[10] },
+    "& .source-node[aria-pressed='true'] > g > rect, & .source-node[aria-pressed='true'] > g > polygon":
+      { fill: colors.blue[3], stroke: colors.blue[9], strokeWidth: 2 },
+    "& .source-node[aria-pressed='true'] text": { fill: colors.blue[11] },
+    "& .source-edge:hover > .edge, & .source-edge:hover > .message > line, & .source-edge:hover > .message > polyline, & .source-edge:hover > .class-relationship, & .source-edge:hover > .er-relationship":
+      { stroke: colors.blue[8], strokeWidth: 1.5 },
+    "& .source-edge[aria-pressed='true'] > .edge, & .source-edge[aria-pressed='true'] > .message > line, & .source-edge[aria-pressed='true'] > .message > polyline, & .source-edge[aria-pressed='true'] > .class-relationship, & .source-edge[aria-pressed='true'] > .er-relationship":
+      { stroke: colors.blue[9], strokeWidth: 2 },
+    "& svg": {
+      display: "block",
+      width: "100%",
+      height: "auto",
+      maxHeight: "60vh",
+    },
+  }),
+};