@peaske7/readit 0.3.0-rc.0 → 0.3.0-rc.2

package/src/lib/markdown-renderer.test.ts

@@ -1,154 +0,0 @@
-import { JSDOM } from "jsdom";
-import { describe, expect, it } from "vitest";
-import { renderMarkdown } from "./markdown-renderer";
-
-const SAMPLE_MARKDOWN = `# Hello World
-
-This is a paragraph with **bold** and *italic* text.
-
-## Code Example
-
-\`\`\`typescript
-function hello() {
-  return "world";
-}
-\`\`\`
-
-Some text after the code block.
-
-- Item 1
-- Item 2
-- Item 3
-
-### Table
-
-| Name | Value |
-|------|-------|
-| foo  | bar   |
-| baz  | qux   |
-
-> A blockquote with some text.
-
-Final paragraph.
-`;
-
-const SAMPLE_WITH_MERMAID = `# Diagrams
-
-\`\`\`mermaid
-graph TD
-  A --> B
-\`\`\`
-
-After mermaid.
-`;
-
-describe("renderMarkdown", () => {
-  it("renders basic markdown to HTML", async () => {
-    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
-
-    expect(html).toContain("<h1");
-    expect(html).toContain("Hello World");
-    expect(html).toContain("<strong>bold</strong>");
-    expect(html).toContain("<em>italic</em>");
-    expect(html).toContain("<h2");
-    expect(html).toContain("Code Example");
-    expect(html).toContain("<h3");
-    expect(html).toContain("Table");
-  });
-
-  it("extracts headings with correct IDs", async () => {
-    const { headings } = await renderMarkdown(SAMPLE_MARKDOWN);
-
-    expect(headings).toEqual([
-      { id: "hello-world", text: "Hello World", level: 1 },
-      { id: "code-example", text: "Code Example", level: 2 },
-      { id: "table", text: "Table", level: 3 },
-    ]);
-  });
-
-  it("injects heading IDs into HTML", async () => {
-    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
-
-    expect(html).toContain('id="hello-world"');
-    expect(html).toContain('id="code-example"');
-    expect(html).toContain('id="table"');
-  });
-
-  it("syntax-highlights code blocks with shiki", async () => {
-    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
-
-    expect(html).toContain("shiki");
-    expect(html).toContain("hello");
-    expect(html).toContain("world");
-  });
-
-  it("leaves mermaid blocks for client-side hydration", async () => {
-    const { html } = await renderMarkdown(SAMPLE_WITH_MERMAID);
-
-    expect(html).toContain('class="language-mermaid"');
-    expect(html).toContain("graph TD");
-    expect(html).not.toMatch(/class="shiki[^"]*"[^>]*>.*graph TD/s);
-  });
-
-  it("renders GFM tables", async () => {
-    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
-
-    expect(html).toContain("<table>");
-    expect(html).toContain("<th>");
-    expect(html).toContain("foo");
-  });
-
-  it("renders lists", async () => {
-    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
-
-    expect(html).toContain("<ul>");
-    expect(html).toContain("<li>");
-    expect(html).toContain("Item 1");
-  });
-
-  it("renders blockquotes", async () => {
-    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
-
-    expect(html).toContain("<blockquote>");
-    expect(html).toContain("A blockquote with some text.");
-  });
-
-  it("handles duplicate headings", async () => {
-    const md = `## Section\n\n## Section\n\n## Section\n`;
-    const { headings } = await renderMarkdown(md);
-
-    expect(headings).toEqual([
-      { id: "section", text: "Section", level: 2 },
-      { id: "section-1", text: "Section", level: 2 },
-      { id: "section-2", text: "Section", level: 2 },
-    ]);
-  });
-});
-
-describe("text offset conformance", () => {
-  it("rendered HTML has proper block structure for text offset extraction", async () => {
-    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
-
-    const dom = new JSDOM(html);
-    const doc = dom.window.document;
-
-    const paragraphs = doc.querySelectorAll("p");
-    expect(paragraphs.length).toBeGreaterThan(0);
-
-    const h1 = doc.querySelector("h1");
-    expect(h1?.id).toBe("hello-world");
-    expect(h1?.textContent).toBe("Hello World");
-
-    const pres = doc.querySelectorAll("pre");
-    expect(pres.length).toBeGreaterThan(0);
-
-    const lis = doc.querySelectorAll("li");
-    expect(lis.length).toBe(3);
-
-    const trs = doc.querySelectorAll("tr");
-    expect(trs.length).toBeGreaterThan(0);
-
-    const blockquote = doc.querySelector("blockquote");
-    expect(blockquote).not.toBeNull();
-  });
-});

package/src/lib/markdown-renderer.ts

@@ -1,178 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,162 +0,0 @@
-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

@@ -1,60 +0,0 @@
-/// <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" });