{filename} {isDiff ? ( ) : ( <> ``` ### `src/components/viewership/code-block/highlight.ts` ```ts /** * Build-time helpers for CodeBlock: a JS/TS/JSON tokenizer and a unified * line diff with word-level pieces. * * Adapted from Beautiful UI CodeBlock (MIT, © 2026 Shane Levine). */ export type Language = "ts" | "js" | "json" | "text"; export type TokenKind = "keyword" | "string" | "number" | "fn" | "key" | "comment"; export type Token = { text: string; kind?: TokenKind }; /** A run of code within a diff row; `change` marks a word-level add/del. */ export type CodePiece = { text: string; change?: "add" | "del" }; /** One row of a unified diff: old/new line numbers, its kind, and its pieces. */ export type DiffRow = { old: number | null; cur: number | null; type: "ctx" | "add" | "del"; pieces: CodePiece[]; }; const JS_KEYWORDS = new Set([ "import", "from", "export", "default", "async", "function", "const", "let", "var", "await", "return", "if", "else", "for", "while", "new", "throw", "try", "catch", "null", "true", "false", "undefined", "type", "interface", "as", "of", "in", "class", "extends", "switch", "case", "break", "continue", "this", "typeof", "satisfies", ]); const JS_TOKEN = /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*'|`(?:\\.|[^`\\])*`)|(\b\d+(?:\.\d+)?\b)|([A-Za-z_$][\w$]*)/g; const JSON_TOKEN = /("(?:\\.|[^"\\\n])*")|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|\b(true|false|null)\b/g; /** Infer a language from a filename extension. */ export function languageFor(filename = ""): Language { const ext = filename.split(".").pop()?.toLowerCase() ?? ""; if (ext === "json" || ext === "jsonc") return "json"; if (["js", "mjs", "cjs", "jsx"].includes(ext)) return "js"; return "ts"; } /** Tokenize source text. Unmatched text becomes plain (kind-less) tokens. */ export function tokenize(text: string, language: Language = "ts"): Token[] { if (language === "text") return [{ text }]; const out: Token[] = []; let last = 0; const push = (t: string, kind?: TokenKind) => { if (!t) return; const prev = out[out.length - 1]; if (!kind && prev && !prev.kind) prev.text += t; else out.push({ text: t, kind }); }; const re = new RegExp(language === "json" ? JSON_TOKEN : JS_TOKEN); for (const m of text.matchAll(re)) { const idx = m.index ?? 0; const rest = text.slice(idx + m[0].length); push(text.slice(last, idx)); if (language === "json") { if (m[1]) push(m[1], /^\s*:/.test(rest) ? "key" : "string"); else if (m[2]) push(m[2], "number"); else push(m[0], "keyword"); } else if (m[1]) push(m[1], "comment"); else if (m[2]) push(m[2], "string"); else if (m[3]) push(m[3], "number"); else if (m[4] && JS_KEYWORDS.has(m[4])) push(m[4], "keyword"); else if (m[4] && /^\s*\(/.test(rest)) push(m[4], "fn"); else push(m[0]); last = idx + m[0].length; } push(text.slice(last)); return out; } /** Tokenize a whole listing, then split it into per-line token arrays * (so block comments and template strings may span lines). */ export function tokenizeLines(text: string, language: Language = "ts"): Token[][] { const lines: Token[][] = [[]]; for (const tok of tokenize(text, language)) { tok.text.split("\n").forEach((part, i) => { if (i > 0) lines.push([]); if (part) lines[lines.length - 1].push({ text: part, kind: tok.kind }); }); } return lines; } /* ── diff ── */ function lcsTable(a: T[], b: T[]): number[][] { const t = Array.from({ length: a.length + 1 }, () => new Array(b.length + 1).fill(0)); for (let i = a.length - 1; i >= 0; i--) for (let j = b.length - 1; j >= 0; j--) t[i][j] = a[i] === b[j] ? t[i + 1][j + 1] + 1 : Math.max(t[i + 1][j], t[i][j + 1]); return t; } type Op = { type: "ctx" | "add" | "del"; value: T; ai: number; bi: number }; function diffSeq(a: T[], b: T[]): Op[] { const t = lcsTable(a, b); const ops: Op[] = []; let i = 0; let j = 0; while (i < a.length && j < b.length) { if (a[i] === b[j]) ops.push({ type: "ctx", value: a[i], ai: i++, bi: j++ }); else if (t[i + 1][j] >= t[i][j + 1]) ops.push({ type: "del", value: a[i], ai: i++, bi: -1 }); else ops.push({ type: "add", value: b[j], ai: -1, bi: j++ }); } while (i < a.length) ops.push({ type: "del", value: a[i], ai: i++, bi: -1 }); while (j < b.length) ops.push({ type: "add", value: b[j], ai: -1, bi: j++ }); return ops; } const WORD = /"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`[^`]*`|[\w$]+|\s+|[^\w$\s]/g; /** Word-level pieces for a removed/added line pair. Returns null when the * lines share too little to make a highlight meaningful. */ function wordPieces(before: string, after: string): [CodePiece[], CodePiece[]] | null { const a = before.match(WORD) ?? []; const b = after.match(WORD) ?? []; const ops = diffSeq(a, b); const common = ops.filter((o) => o.type === "ctx").reduce((n, o) => n + o.value.trim().length, 0); const longest = Math.max(before.trim().length, after.trim().length, 1); if (common / longest < 0.4) return null; const build = (side: "del" | "add") => { const pieces: CodePiece[] = []; const kept = ops.filter((o) => o.type === "ctx" || o.type === side); kept.forEach((o, k) => { let changed = o.type === side; // whitespace sandwiched between two changes joins the highlight if (!changed && /^\s+$/.test(o.value) && kept[k - 1]?.type === side && kept[k + 1]?.type === side) changed = true; const prev = pieces[pieces.length - 1]; const change = changed ? side : undefined; if (prev && prev.change === change) prev.text += o.value; else pieces.push({ text: o.value, change }); }); return pieces; }; return [build("del"), build("add")]; } /** Unified diff of two texts, with word-level highlights on paired lines. */ export function diffLines(before: string, after: string): DiffRow[] { const ops = diffSeq(before.split("\n"), after.split("\n")); const rows: DiffRow[] = []; let k = 0; while (k < ops.length) { const op = ops[k]; if (op.type === "ctx") { rows.push({ old: op.ai + 1, cur: op.bi + 1, type: "ctx", pieces: [{ text: op.value }] }); k++; continue; } // a hunk: every consecutive del/add, rendered dels-then-adds const dels: Op[] = []; const adds: Op[] = []; while (k < ops.length && ops[k].type !== "ctx") (ops[k].type === "del" ? dels : adds).push(ops[k++]); const pairs = dels.map((d, i) => (adds[i] ? wordPieces(d.value, adds[i].value) : null)); dels.forEach((d, i) => rows.push({ old: d.ai + 1, cur: null, type: "del", pieces: pairs[i]?.[0] ?? [{ text: d.value }] }), ); adds.forEach((a, i) => rows.push({ old: null, cur: a.bi + 1, type: "add", pieces: pairs[i]?.[1] ?? [{ text: a.value }] }), ); } return rows; } ```