@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/lib/markdown-renderer.ts

@@ -0,0 +1,178 @@
+import MarkdownIt from "markdown-it";
+import type { BundledLanguage, BundledTheme, HighlighterGeneric } from "shiki";
+import { type Heading, parseMarkdownHeadings } from "./headings";
+import { renderMermaidBlocks } from "./mermaid-renderer";
+
+const SHIKI_LANGUAGES: BundledLanguage[] = [
+  "bash",
+  "css",
+  "diff",
+  "go",
+  "graphql",
+  "javascript",
+  "json",
+  "jsx",
+  "markdown",
+  "python",
+  "rust",
+  "sql",
+  "tsx",
+  "typescript",
+  "yaml",
+];
+
+const SHIKI_THEME: BundledTheme = "one-dark-pro";
+
+let shikiInstance: HighlighterGeneric<BundledLanguage, BundledTheme> | null =
+  null;
+let shikiPromise: Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> | null = null;
+
+export async function getShiki(): Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> {
+  if (shikiInstance) return shikiInstance;
+  if (shikiPromise) return shikiPromise;
+
+  shikiPromise = import("shiki").then(async ({ createHighlighter }) => {
+    const highlighter = await createHighlighter({
+      themes: [SHIKI_THEME],
+      langs: SHIKI_LANGUAGES,
+    });
+    shikiInstance = highlighter;
+    return highlighter;
+  });
+
+  return shikiPromise;
+}
+
+function createMarkdownRenderer(
+  shiki: HighlighterGeneric<BundledLanguage, BundledTheme>,
+): MarkdownIt {
+  const md = new MarkdownIt({
+    html: true, // Allow raw HTML (matches rehype-raw behavior)
+    linkify: true,
+    typographer: false,
+    highlight(code: string, lang: string): string {
+      if (lang === "mermaid") {
+        return `<pre><code class="language-mermaid">${md.utils.escapeHtml(code)}</code></pre>`;
+      }
+
+      const language = normalizeLanguage(lang);
+
+      if (language && shiki.getLoadedLanguages().includes(language)) {
+        return shiki.codeToHtml(code, {
+          lang: language,
+          theme: SHIKI_THEME,
+        });
+      }
+
+      return `<pre class="shiki"><code>${md.utils.escapeHtml(code)}</code></pre>`;
+    },
+  });
+
+  return md;
+}
+
+function normalizeLanguage(lang: string): BundledLanguage | undefined {
+  const aliases: Record<string, BundledLanguage> = {
+    sh: "bash",
+    shell: "bash",
+    js: "javascript",
+    ts: "typescript",
+    py: "python",
+    rs: "rust",
+    yml: "yaml",
+    md: "markdown",
+  };
+  const normalized = lang.toLowerCase().trim();
+  if (SHIKI_LANGUAGES.includes(normalized as BundledLanguage)) {
+    return normalized as BundledLanguage;
+  }
+  return aliases[normalized];
+}
+
+function injectHeadingIds(html: string, headings: Heading[]): string {
+  let headingIdx = 0;
+
+  return html.replace(
+    /<(h[1-6])([^>]*)>([\s\S]*?)<\/\1>/gi,
+    (match, tag: string, attrs: string, content: string) => {
+      if (headingIdx >= headings.length) return match;
+
+      const heading = headings[headingIdx];
+      headingIdx++;
+
+      if (/\bid\s*=/.test(attrs)) return match;
+
+      return `<${tag} id="${heading.id}"${attrs}>${content}</${tag}>`;
+    },
+  );
+}
+
+interface RenderResult {
+  html: string;
+  headings: Heading[];
+}
+
+const MERMAID_BLOCK_RE =
+  /<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g;
+
+function unescapeHtml(str: string): string {
+  return str
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"');
+}
+
+async function replaceMermaidBlocks(html: string): Promise<string> {
+  MERMAID_BLOCK_RE.lastIndex = 0;
+  const matches: { fullMatch: string; code: string; index: number }[] = [];
+
+  let match: RegExpExecArray | null = MERMAID_BLOCK_RE.exec(html);
+  while (match !== null) {
+    matches.push({
+      fullMatch: match[0],
+      code: unescapeHtml(match[1]),
+      index: match.index,
+    });
+    match = MERMAID_BLOCK_RE.exec(html);
+  }
+
+  if (matches.length === 0) return html;
+
+  const codes = matches.map((m) => m.code);
+  const svgs = await renderMermaidBlocks(codes);
+
+  // Replace in reverse order to preserve string indices
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const svg = svgs[i];
+    if (svg !== null) {
+      const { fullMatch, index, code } = matches[i];
+      const encodedSource = encodeURIComponent(code);
+      const replacement = `<div class="mermaid-container" data-mermaid-source="${encodedSource}">${svg}</div>`;
+      html =
+        html.slice(0, index) +
+        replacement +
+        html.slice(index + fullMatch.length);
+    }
+  }
+
+  return html;
+}
+
+export async function renderMarkdown(content: string): Promise<RenderResult> {
+  const shiki = await getShiki();
+  const md = createMarkdownRenderer(shiki);
+
+  const headings = parseMarkdownHeadings(content);
+
+  let html = md.render(content);
+
+  html = injectHeadingIds(html, headings);
+  html = await replaceMermaidBlocks(html);
+
+  return { html, headings };
+}

package/src/lib/mermaid-config.ts

@@ -0,0 +1,38 @@
+export const MERMAID_THEME = {
+  fontSize: "16px",
+  primaryColor: "rgba(245, 222, 160, 0.8)",
+  primaryTextColor: "#3f3f46",
+  primaryBorderColor: "#c9a84a",
+  secondaryColor: "rgba(168, 196, 228, 0.6)",
+  secondaryTextColor: "#3f3f46",
+  secondaryBorderColor: "#5b7fa8",
+  tertiaryColor: "rgba(170, 210, 170, 0.6)",
+  tertiaryTextColor: "#3f3f46",
+  tertiaryBorderColor: "#5a9a62",
+  background: "#ffffff",
+  mainBkg: "#ffffff",
+  textColor: "#3f3f46",
+  lineColor: "#a1a1aa",
+  nodeBkg: "rgba(245, 222, 160, 0.6)",
+  nodeBorder: "#c9a84a",
+  clusterBkg: "rgba(250, 250, 250, 0.8)",
+  clusterBorder: "#e4e4e7",
+  actorBkg: "rgba(168, 196, 228, 0.5)",
+  actorBorder: "#5b7fa8",
+  actorTextColor: "#3f3f46",
+  signalColor: "#3f3f46",
+  signalTextColor: "#3f3f46",
+  noteBkgColor: "rgba(245, 222, 160, 0.5)",
+  noteBorderColor: "#c9a84a",
+  noteTextColor: "#3f3f46",
+} as const;
+
+export function getMermaidInitConfig() {
+  return {
+    startOnLoad: false,
+    theme: "base" as const,
+    securityLevel: "strict" as const,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    themeVariables: MERMAID_THEME,
+  };
+}

package/src/lib/mermaid-renderer.ts

@@ -0,0 +1,162 @@
+interface PendingRequest {
+  resolve: (svg: string) => void;
+  reject: (err: Error) => void;
+  timer: ReturnType<typeof setTimeout>;
+}
+
+const RENDER_TIMEOUT_MS = 15_000;
+const MAX_CONSECUTIVE_ERRORS = 3;
+
+let worker: Worker | null = null;
+let workerReady: Promise<void> | null = null;
+const pendingRequests = new Map<string, PendingRequest>();
+let requestCounter = 0;
+let consecutiveErrors = 0;
+
+function resetWorker(
+  reason: Error,
+  currentWorker: Worker | null = worker,
+): void {
+  if (currentWorker) currentWorker.terminate();
+  if (worker === currentWorker) {
+    worker = null;
+    workerReady = null;
+  }
+  for (const [, pending] of pendingRequests) {
+    clearTimeout(pending.timer);
+    pending.reject(reason);
+  }
+  pendingRequests.clear();
+}
+
+function createWorker(): { worker: Worker; ready: Promise<void> } {
+  const w = new Worker(new URL("./mermaid-worker.ts", import.meta.url).href, {
+    type: "module",
+  });
+
+  const ready = new Promise<void>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      w.removeEventListener("message", onReady);
+      w.removeEventListener("error", onStartupError);
+      w.terminate();
+      if (worker === w) {
+        worker = null;
+        workerReady = null;
+      }
+      reject(new Error("Mermaid worker failed to start within 30s"));
+    }, 30_000);
+
+    function onStartupError(event: ErrorEvent) {
+      clearTimeout(timeout);
+      w.removeEventListener("message", onReady);
+      w.removeEventListener("error", onStartupError);
+      w.terminate();
+      if (worker === w) {
+        worker = null;
+        workerReady = null;
+      }
+      reject(new Error(`Mermaid worker failed to start: ${event.message}`));
+    }
+
+    function onReady(event: MessageEvent) {
+      if (event.data?.type === "ready") {
+        clearTimeout(timeout);
+        w.removeEventListener("message", onReady);
+        w.removeEventListener("error", onStartupError);
+        resolve();
+      }
+    }
+    w.addEventListener("message", onReady);
+    w.addEventListener("error", onStartupError);
+  });
+
+  w.addEventListener("message", (event: MessageEvent) => {
+    const { id, svg, error } = event.data;
+    if (!id) return;
+
+    const pending = pendingRequests.get(id);
+    if (!pending) return;
+
+    clearTimeout(pending.timer);
+    pendingRequests.delete(id);
+
+    if (error) {
+      consecutiveErrors++;
+      pending.reject(new Error(error));
+    } else {
+      consecutiveErrors = 0;
+      pending.resolve(svg);
+    }
+  });
+
+  w.addEventListener("error", (event) => {
+    resetWorker(new Error(`Worker error: ${event.message}`), w);
+  });
+
+  return { worker: w, ready };
+}
+
+async function ensureWorker(): Promise<Worker> {
+  if (worker && workerReady) {
+    await workerReady;
+
+    if (consecutiveErrors >= MAX_CONSECUTIVE_ERRORS) {
+      resetWorker(
+        new Error("Mermaid worker restarted after repeated render failures"),
+      );
+      consecutiveErrors = 0;
+    }
+  }
+
+  if (!worker) {
+    const result = createWorker();
+    worker = result.worker;
+    workerReady = result.ready;
+    await workerReady;
+  }
+
+  return worker;
+}
+
+async function renderMermaidSvg(code: string): Promise<string> {
+  const w = await ensureWorker();
+
+  const id = `req-${++requestCounter}`;
+  const diagramId = `mermaid-ssr-${requestCounter}`;
+
+  return new Promise<string>((resolve, reject) => {
+    const timer = setTimeout(() => {
+      pendingRequests.delete(id);
+      resetWorker(
+        new Error(`Mermaid render timed out after ${RENDER_TIMEOUT_MS}ms`),
+        w,
+      );
+      reject(
+        new Error(`Mermaid render timed out after ${RENDER_TIMEOUT_MS}ms`),
+      );
+    }, RENDER_TIMEOUT_MS);
+
+    pendingRequests.set(id, { resolve, reject, timer });
+
+    w.postMessage({ id, code, diagramId });
+  });
+}
+
+export async function renderMermaidBlocks(
+  blocks: string[],
+): Promise<(string | null)[]> {
+  const results: (string | null)[] = [];
+  for (const code of blocks) {
+    try {
+      const svg = await renderMermaidSvg(code);
+      results.push(svg);
+    } catch {
+      results.push(null);
+    }
+  }
+  return results;
+}
+
+export function disposeMermaidWorker(): void {
+  resetWorker(new Error("Mermaid worker disposed"));
+}

package/src/lib/mermaid-worker.ts

@@ -0,0 +1,60 @@
+/// <reference lib="webworker" />
+
+import { JSDOM } from "jsdom";
+import { getMermaidInitConfig } from "./mermaid-config";
+
+const dom = new JSDOM(
+  '<!DOCTYPE html><html><body><div id="mermaid-container"></div></body></html>',
+  {
+    url: "http://localhost",
+    pretendToBeVisual: true,
+    contentType: "text/html",
+  },
+);
+
+const g = globalThis as Record<string, unknown>;
+g.window = dom.window;
+g.document = dom.window.document;
+g.navigator = dom.window.navigator;
+g.DOMParser = dom.window.DOMParser;
+g.XMLSerializer = dom.window.XMLSerializer;
+g.HTMLElement = dom.window.HTMLElement;
+g.SVGElement = (dom.window as unknown as Record<string, unknown>).SVGElement;
+
+const mermaid = (await import("mermaid")).default;
+mermaid.initialize(getMermaidInitConfig());
+
+interface RenderRequest {
+  id: string;
+  code: string;
+  diagramId: string;
+}
+
+function resetBody() {
+  const body = dom.window.document.body;
+  while (body.firstChild) body.removeChild(body.firstChild);
+  const container = dom.window.document.createElement("div");
+  container.id = "mermaid-container";
+  body.appendChild(container);
+}
+
+let renderQueue: Promise<void> = Promise.resolve();
+
+self.onmessage = (event: MessageEvent<RenderRequest>) => {
+  const { id, code, diagramId } = event.data;
+
+  renderQueue = renderQueue.then(async () => {
+    try {
+      resetBody();
+      const { svg } = await mermaid.render(diagramId, code);
+      self.postMessage({ id, svg });
+    } catch (err) {
+      self.postMessage({
+        id,
+        error: err instanceof Error ? err.message : String(err),
+      });
+    }
+  });
+};
+
+self.postMessage({ type: "ready" });

package/src/lib/positions.ts

@@ -1,11 +1,8 @@
+import type { Highlighter } from "./highlight/highlighter";
 import { resolveMarginNotePositions } from "./margin-layout";
 
 type Listener = () => void;
 
-/**
- * Positions managed outside React. Scroll-invariant — only recalculates
- * on highlight mutation (MutationObserver) and resize.
- */
 export class Positions {
   private relative = new Map<string, number>();
   private absolute = new Map<string, number>();
@@ -16,39 +13,44 @@ export class Positions {
   private listeners = new Set<Listener>();
   private root: HTMLElement | null = null;
   private container: HTMLElement | null = null;
+  private highlighter: Highlighter | null = null;
   private resizeRaf: number | null = null;
-  private mutationRaf: number | null = null;
-  private observer: MutationObserver | null = null;
+  private cacheRaf: number | null = null;
+  private unsubCache: (() => void) | null = null;
 
-  attach(root: HTMLElement, container: HTMLElement) {
+  attach(root: HTMLElement, container: HTMLElement, highlighter: Highlighter) {
     this.root = root;
     this.container = container;
+    this.highlighter = highlighter;
     window.addEventListener("resize", this.onResize);
 
-    this.observer = new MutationObserver(() => {
-      if (this.mutationRaf !== null) return;
-      this.mutationRaf = requestAnimationFrame(() => {
-        this.mutationRaf = null;
+    this.unsubCache = highlighter.onCacheInvalidated(() => {
+      if (this.cacheRaf !== null) return;
+      this.cacheRaf = requestAnimationFrame(() => {
+        this.cacheRaf = null;
         this.cache();
       });
     });
-    this.observer.observe(root, { childList: true, subtree: true });
   }
 
   detach() {
     window.removeEventListener("resize", this.onResize);
     if (this.resizeRaf !== null) cancelAnimationFrame(this.resizeRaf);
-    if (this.mutationRaf !== null) cancelAnimationFrame(this.mutationRaf);
+    if (this.cacheRaf !== null) cancelAnimationFrame(this.cacheRaf);
     this.resizeRaf = null;
-    this.mutationRaf = null;
-    this.observer?.disconnect();
-    this.observer = null;
+    this.cacheRaf = null;
+    this.unsubCache?.();
+    this.unsubCache = null;
     this.root = null;
     this.container = null;
+    this.highlighter = null;
   }
 
   cache() {
-    if (!this.root || !this.container) return;
+    if (!this.root || !this.container || !this.highlighter) return;
+
+    const highlightedIds = this.highlighter.getHighlightedIds();
+    if (highlightedIds.length === 0) return;
 
     const ref = this.container.getBoundingClientRect();
     const scrollY = window.scrollY;
@@ -56,13 +58,10 @@ export class Positions {
     this.relative.clear();
     this.absolute.clear();
 
-    for (const mark of this.root.querySelectorAll("mark[data-comment-id]")) {
-      const id = mark.getAttribute("data-comment-id");
-      if (!id || this.relative.has(id)) continue;
-
-      const rect = mark.getBoundingClientRect();
-      this.relative.set(id, rect.top - ref.top);
-      this.absolute.set(id, rect.top + scrollY);
+    const positions = this.highlighter.getPositions(ref);
+    for (const [id, relTop] of positions) {
+      this.relative.set(id, relTop);
+      this.absolute.set(id, relTop + ref.top + scrollY);
     }
 
     const snap: Record<string, number> = {};
@@ -71,6 +70,7 @@ export class Positions {
 
     this.apply();
     this.notify();
+    this.exposeReady();
   }
 
   setIds(ids: string[]) {
@@ -147,4 +147,11 @@ export class Positions {
   private notify() {
     for (const fn of this.listeners) fn();
   }
+
+  private exposeReady() {
+    if (typeof window !== "undefined") {
+      (window as unknown as Record<string, unknown>).__readitPositionsReady =
+        performance.now();
+    }
+  }
 }