From 80b0a93d64190ff5ad2fab24717607546c781026 Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Tue, 23 Sep 2025 11:41:11 -0500 Subject: wip: desktop file updates --- packages/app/src/components/code.tsx | 1943 ++++++++++++---------------------- 1 file changed, 686 insertions(+), 1257 deletions(-) (limited to 'packages/app/src/components/code.tsx') diff --git a/packages/app/src/components/code.tsx b/packages/app/src/components/code.tsx index 4eed5814e..f76bf5e2e 100644 --- a/packages/app/src/components/code.tsx +++ b/packages/app/src/components/code.tsx @@ -1,15 +1,6 @@ -import { bundledLanguages, codeToHtml, type ShikiTransformer } from "shiki" -import { - createResource, - splitProps, - Suspense, - type ComponentProps, - createEffect, - onMount, - onCleanup, - createMemo, -} from "solid-js" -import { useLocal } from "@/context" +import { bundledLanguages, type BundledLanguage, type ShikiTransformer } from "shiki" +import { splitProps, type ComponentProps, createEffect, onMount, onCleanup, createMemo, createResource } from "solid-js" +import { useLocal, useShiki } from "@/context" import { getFileExtension, getNodeOffsetInLine, getSelectionInContainer } from "@/utils" interface Props extends ComponentProps<"div"> { @@ -17,1342 +8,780 @@ interface Props extends ComponentProps<"div"> { path: string } -function transformerUnifiedDiff(): ShikiTransformer { - const kinds = new Map() - const meta = new Map() - let isDiff = false - - return { - name: "unified-diff", - preprocess(input) { - kinds.clear() - meta.clear() - isDiff = false - - const ls = input.split(/\r?\n/) - const out: Array = [] - let oldNo = 0 - let newNo = 0 - let inHunk = false - - for (let i = 0; i < ls.length; i++) { - const s = ls[i] - - const m = s.match(/^@@\s*-(\d+)(?:,(\d+))?\s+\+(\d+)(?:,(\d+))?\s*@@/) - if (m) { - isDiff = true - inHunk = true - oldNo = parseInt(m[1], 10) - newNo = parseInt(m[3], 10) - continue - } - - if ( - /^diff --git /.test(s) || - /^Index: /.test(s) || - /^--- /.test(s) || - /^\+\+\+ /.test(s) || - /^[=]{3,}$/.test(s) || - /^\*{3,}$/.test(s) || - /^\\ No newline at end of file$/.test(s) - ) { - isDiff = true - continue - } - - if (!inHunk) { - out.push(s) - continue - } - - if (/^\+/.test(s)) { - out.push(s) - const ln = out.length - kinds.set(ln, "add") - meta.set(ln, { new: newNo, sign: "+" }) - newNo++ - continue - } - - if (/^-/.test(s)) { - out.push(s) - const ln = out.length - kinds.set(ln, "remove") - meta.set(ln, { old: oldNo, sign: "-" }) - oldNo++ - continue - } +export function Code(props: Props) { + const ctx = useLocal() + const highlighter = useShiki() + const [local, others] = splitProps(props, ["class", "classList", "code", "path"]) + const lang = createMemo(() => getFileExtension(local.path)) - if (/^ /.test(s)) { - out.push(s) - const ln = out.length - kinds.set(ln, "context") - meta.set(ln, { old: oldNo, new: newNo }) - oldNo++ - newNo++ - continue - } + let container: HTMLDivElement | undefined + let isProgrammaticSelection = false - // fallback in hunks - out.push(s) - } + const [html] = createResource(async () => { + if (!highlighter.getLoadedLanguages().includes(lang())) { + await highlighter.loadLanguage(lang() as BundledLanguage) + } + return highlighter.codeToHtml(local.code || "", { + lang: lang() && lang() in bundledLanguages ? lang() : "text", + theme: "opencode", + transformers: [transformerUnifiedDiff(), transformerDiffGroups()], + }) as string + }) - return out.join("\n") - }, - code(node) { - if (isDiff) this.addClassToHast(node, "code-diff") - }, - pre(node) { - if (isDiff) this.addClassToHast(node, "code-diff") - }, - line(node, line) { - if (!isDiff) return - const kind = kinds.get(line) - if (!kind) return + onMount(() => { + if (!container) return - const m = meta.get(line) || {} + let ticking = false + const onScroll = () => { + if (!container) return + if (ctx.file.active()?.path !== local.path) return + if (ticking) return + ticking = true + requestAnimationFrame(() => { + ticking = false + ctx.file.scroll(local.path, container!.scrollTop) + }) + } - this.addClassToHast(node, "diff-line") - this.addClassToHast(node, `diff-${kind}`) - node.properties = node.properties || {} - ;(node.properties as any)["data-diff"] = kind - if (m.old != undefined) (node.properties as any)["data-old"] = String(m.old) - if (m.new != undefined) (node.properties as any)["data-new"] = String(m.new) + const onSelectionChange = () => { + if (!container) return + if (isProgrammaticSelection) return + if (ctx.file.active()?.path !== local.path) return + const d = getSelectionInContainer(container) + if (!d) return + const p = ctx.file.node(local.path)?.selection + if (p && p.startLine === d.sl && p.endLine === d.el && p.startChar === d.sch && p.endChar === d.ech) return + ctx.file.select(local.path, { startLine: d.sl, startChar: d.sch, endLine: d.el, endChar: d.ech }) + } - const oldSpan = { - type: "element", - tagName: "span", - properties: { className: ["diff-oldln"] }, - children: [{ type: "text", value: m.old != undefined ? String(m.old) : " " }], - } - const newSpan = { - type: "element", - tagName: "span", - properties: { className: ["diff-newln"] }, - children: [{ type: "text", value: m.new != undefined ? String(m.new) : " " }], + const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control" + const onKeyDown = (e: KeyboardEvent) => { + if (ctx.file.active()?.path !== local.path) return + const ae = document.activeElement as HTMLElement | undefined + const tag = (ae?.tagName || "").toLowerCase() + const inputFocused = !!ae && (tag === "input" || tag === "textarea" || ae.isContentEditable) + if (inputFocused) return + if (e.getModifierState(MOD) && e.key.toLowerCase() === "a") { + e.preventDefault() + if (!container) return + const element = container.querySelector("code") as HTMLElement | undefined + if (!element) return + const lines = Array.from(element.querySelectorAll(".line")) + if (!lines.length) return + const r = document.createRange() + const last = lines[lines.length - 1] + r.selectNodeContents(last) + const lastLen = r.toString().length + ctx.file.select(local.path, { startLine: 1, startChar: 0, endLine: lines.length, endChar: lastLen }) } + } - if (kind === "add" || kind === "remove" || kind === "context") { - const first = (node.children && (node.children as any[])[0]) as any - if (first && first.type === "element" && first.children && first.children.length > 0) { - const t = first.children[0] - if (t && t.type === "text" && typeof t.value === "string" && t.value.length > 0) { - const ch = t.value[0] - if (ch === "+" || ch === "-" || ch === " ") t.value = t.value.slice(1) - } - } - } + container.addEventListener("scroll", onScroll) + document.addEventListener("selectionchange", onSelectionChange) + document.addEventListener("keydown", onKeyDown) - const signSpan = { - type: "element", - tagName: "span", - properties: { className: ["diff-sign"] }, - children: [{ type: "text", value: (m as any).sign || " " }], - } + onCleanup(() => { + container?.removeEventListener("scroll", onScroll) + document.removeEventListener("selectionchange", onSelectionChange) + document.removeEventListener("keydown", onKeyDown) + }) + }) - // @ts-expect-error hast typing across versions - node.children = [oldSpan, newSpan, signSpan, ...(node.children || [])] - }, - } -} + // Restore scroll position from store when content is ready + createEffect(() => { + const content = html() + if (!container || !content) return + const top = ctx.file.node(local.path)?.scrollTop + if (top !== undefined && container.scrollTop !== top) container.scrollTop = top + }) -function transformerDiffGroups(): ShikiTransformer { - let group = -1 - let inGroup = false - return { - name: "diff-groups", - pre() { - group = -1 - inGroup = false - }, - line(node) { - const props = (node.properties || {}) as any - const kind = props["data-diff"] as string | undefined - if (kind === "add" || kind === "remove") { - if (!inGroup) { - group += 1 - inGroup = true - } - ;(node.properties as any)["data-chgrp"] = String(group) - } else { - inGroup = false + // Sync selection from store -> DOM + createEffect(() => { + const content = html() + if (!container || !content) return + if (ctx.file.active()?.path !== local.path) return + const codeEl = container.querySelector("code") as HTMLElement | undefined + if (!codeEl) return + const target = ctx.file.node(local.path)?.selection + const current = getSelectionInContainer(container) + const sel = window.getSelection() + if (!sel) return + if (!target) { + if (current) { + isProgrammaticSelection = true + sel.removeAllRanges() + queueMicrotask(() => { + isProgrammaticSelection = false + }) } - }, - } -} - -function applyDiffFolding( - root: HTMLElement, - context = 3, - options?: { expanded?: string[]; onExpand?: (key: string) => void; side?: "left" | "right" }, -) { - if (!root.classList.contains("code-diff")) return - - // Cleanup: unwrap previous collapsed blocks and remove toggles - const blocks = Array.from(root.querySelectorAll(".diff-collapsed-block")) - for (const block of blocks) { - const p = block.parentNode - if (!p) { - block.remove() - continue + return } - while (block.firstChild) p.insertBefore(block.firstChild, block) - block.remove() - } - const toggles = Array.from(root.querySelectorAll(".diff-collapsed")) - for (const t of toggles) t.remove() + const matches = !!( + current && + current.sl === target.startLine && + current.sch === target.startChar && + current.el === target.endLine && + current.ech === target.endChar + ) + if (matches) return + const lines = Array.from(codeEl.querySelectorAll(".line")) + if (lines.length === 0) return + let sIdx = Math.max(0, target.startLine - 1) + let eIdx = Math.max(0, target.endLine - 1) + let sChar = Math.max(0, target.startChar || 0) + let eChar = Math.max(0, target.endChar || 0) + if (sIdx > eIdx || (sIdx === eIdx && sChar > eChar)) { + const ti = sIdx + sIdx = eIdx + eIdx = ti + const tc = sChar + sChar = eChar + eChar = tc + } + if (eChar === 0 && eIdx > sIdx) { + eIdx = eIdx - 1 + eChar = Number.POSITIVE_INFINITY + } + if (sIdx >= lines.length) return + if (eIdx >= lines.length) eIdx = lines.length - 1 + const s = getNodeOffsetInLine(lines[sIdx], sChar) ?? { node: lines[sIdx], offset: 0 } + const e = getNodeOffsetInLine(lines[eIdx], eChar) ?? { node: lines[eIdx], offset: lines[eIdx].childNodes.length } + const range = document.createRange() + range.setStart(s.node, s.offset) + range.setEnd(e.node, e.offset) + isProgrammaticSelection = true + sel.removeAllRanges() + sel.addRange(range) + queueMicrotask(() => { + isProgrammaticSelection = false + }) + }) - const lines = Array.from(root.querySelectorAll(".diff-line")) - if (lines.length === 0) return + // Build/toggle split layout and apply folding (both unified and split) + createEffect(() => { + const content = html() + if (!container || !content) return + const view = ctx.file.view(local.path) - const n = lines.length - const isChange = lines.map((l) => l.dataset["diff"] === "add" || l.dataset["diff"] === "remove") - const isContext = lines.map((l) => l.dataset["diff"] === "context") - if (!isChange.some(Boolean)) return + const pres = Array.from(container.querySelectorAll("pre")) + if (pres.length === 0) return + const originalPre = pres[0] - const visible = new Array(n).fill(false) as boolean[] - for (let i = 0; i < n; i++) if (isChange[i]) visible[i] = true - for (let i = 0; i < n; i++) { - if (isChange[i]) { - const s = Math.max(0, i - context) - const e = Math.min(n - 1, i + context) - for (let j = s; j <= e; j++) if (isContext[j]) visible[j] = true + const split = container.querySelector(".diff-split") + if (view === "diff-split") { + applySplitDiff(container) + const next = container.querySelector(".diff-split") + if (next) next.style.display = "" + originalPre.style.display = "none" + } else { + if (split) split.style.display = "none" + originalPre.style.display = "" } - } - type Range = { start: number; end: number } - const ranges: Range[] = [] - let i = 0 - while (i < n) { - if (!visible[i] && isContext[i]) { - let j = i - while (j + 1 < n && !visible[j + 1] && isContext[j + 1]) j++ - ranges.push({ start: i, end: j }) - i = j + 1 + const expanded = ctx.file.folded(local.path) + if (view === "diff-split") { + const left = container.querySelector(".diff-split pre:nth-child(1) code") + const right = container.querySelector(".diff-split pre:nth-child(2) code") + if (left) + applyDiffFolding(left, 3, { expanded, onExpand: (key) => ctx.file.unfold(local.path, key), side: "left" }) + if (right) + applyDiffFolding(right, 3, { expanded, onExpand: (key) => ctx.file.unfold(local.path, key), side: "right" }) } else { - i++ + const code = container.querySelector("pre code") + if (code) + applyDiffFolding(code, 3, { + expanded, + onExpand: (key) => ctx.file.unfold(local.path, key), + }) } + }) + + // Highlight groups + scroll coupling + const clearHighlights = () => { + if (!container) return + container.querySelectorAll(".diff-selected").forEach((el) => el.classList.remove("diff-selected")) } - for (const r of ranges) { - const start = lines[r.start] - const end = lines[r.end] - const count = r.end - r.start + 1 - const minCollapse = 20 - if (count < minCollapse) { - continue + const applyHighlight = (idx: number, scroll?: boolean) => { + if (!container) return + const view = ctx.file.view(local.path) + if (view === "raw") return + + clearHighlights() + + const nodes: HTMLElement[] = [] + if (view === "diff-split") { + const left = container.querySelector(".diff-split pre:nth-child(1) code") + const right = container.querySelector(".diff-split pre:nth-child(2) code") + if (left) + nodes.push(...Array.from(left.querySelectorAll(`[data-chgrp="${idx}"][data-diff="remove"]`))) + if (right) + nodes.push(...Array.from(right.querySelectorAll(`[data-chgrp="${idx}"][data-diff="add"]`))) + } else { + const code = container.querySelector("pre code") + if (code) nodes.push(...Array.from(code.querySelectorAll(`[data-chgrp="${idx}"]`))) } - // Wrap the entire collapsed chunk (including trailing newline) so it takes no space - const block = document.createElement("span") - block.className = "diff-collapsed-block" - start.parentElement?.insertBefore(block, start) + for (const n of nodes) n.classList.add("diff-selected") + if (scroll && nodes.length) nodes[0].scrollIntoView({ block: "center", behavior: "smooth" }) + } - let cur: Node | undefined = start - while (cur) { - const next: Node | undefined = cur.nextSibling || undefined - block.appendChild(cur) - if (cur === end) { - // Also move the newline after the last line into the block - if (next && next.nodeType === Node.TEXT_NODE && (next.textContent || "").startsWith("\n")) { - block.appendChild(next) - } - break - } - cur = next + const countGroups = () => { + if (!container) return 0 + const code = container.querySelector("pre code") + if (!code) return 0 + const set = new Set() + for (const el of Array.from(code.querySelectorAll(".diff-line[data-chgrp]"))) { + const v = el.getAttribute("data-chgrp") + if (v != undefined) set.add(v) } + return set.size + } - block.style.display = "none" - const row = document.createElement("span") - row.className = "line diff-collapsed" - row.setAttribute("data-kind", "collapsed") - row.setAttribute("data-count", String(count)) - row.setAttribute("tabindex", "0") - row.setAttribute("role", "button") + let lastIdx: number | undefined = undefined + let lastView: string | undefined + let lastContent: string | undefined + let lastRawIdx: number | undefined = undefined + createEffect(() => { + const content = html() + if (!container || !content) return + const view = ctx.file.view(local.path) + const raw = ctx.file.changeIndex(local.path) + if (raw === undefined) return + const total = countGroups() + if (total <= 0) return + const next = ((raw % total) + total) % total - const oldln = document.createElement("span") - oldln.className = "diff-oldln" - oldln.textContent = " " + const navigated = lastRawIdx !== undefined && lastRawIdx !== raw - const newln = document.createElement("span") - newln.className = "diff-newln" - newln.textContent = " " + if (next !== raw) { + ctx.file.setChangeIndex(local.path, next) + applyHighlight(next, true) + } else { + if (lastView !== view || lastContent !== content) applyHighlight(next) + if ((lastIdx !== undefined && lastIdx !== next) || navigated) applyHighlight(next, true) + } - const sign = document.createElement("span") - sign.className = "diff-sign" - sign.textContent = "…" + lastRawIdx = raw + lastIdx = next + lastView = view + lastContent = content + }) - const label = document.createElement("span") - label.textContent = `show ${count} unchanged line${count > 1 ? "s" : ""}` + return ( +
{ + container = el + }} + innerHTML={html()} + class=" + font-mono text-xs tracking-wide overflow-y-auto no-scrollbar h-full + [&]:[counter-reset:line] + [&_pre]:focus-visible:outline-none + [&_pre]:overflow-x-auto [&_pre]:no-scrollbar + [&_code]:min-w-full [&_code]:inline-block [&_code]:pb-40 + [&_.tab]:relative + [&_.tab::before]:content['⇥'] + [&_.tab::before]:absolute + [&_.tab::before]:opacity-0 + [&_.space]:relative + [&_.space::before]:content-['·'] + [&_.space::before]:absolute + [&_.space::before]:opacity-0 + [&_.line]:inline-block [&_.line]:w-full + [&_.line]:hover:bg-background-element + [&_.line::before]:sticky [&_.line::before]:left-0 + [&_.line::before]:w-12 [&_.line::before]:pr-4 + [&_.line::before]:z-10 + [&_.line::before]:bg-background-panel + [&_.line::before]:text-text-muted/60 + [&_.line::before]:text-right [&_.line::before]:inline-block + [&_.line::before]:select-none + [&_.line::before]:[counter-increment:line] + [&_.line::before]:content-[counter(line)] + [&_code.code-diff_.line::before]:content-[''] + [&_code.code-diff_.line::before]:w-0 + [&_code.code-diff_.line::before]:pr-0 + [&_.diff-split_code.code-diff::before]:w-10 + [&_.diff-split_.diff-newln]:left-0 + [&_.diff-oldln]:sticky [&_.diff-oldln]:left-0 + [&_.diff-oldln]:w-10 [&_.diff-oldln]:pr-2 + [&_.diff-oldln]:z-40 + [&_.diff-oldln]:text-text-muted/60 + [&_.diff-oldln]:text-right [&_.diff-oldln]:inline-block + [&_.diff-oldln]:select-none + [&_.diff-oldln]:bg-background-panel + [&_.diff-newln]:sticky [&_.diff-newln]:left-10 + [&_.diff-newln]:w-10 [&_.diff-newln]:pr-2 + [&_.diff-newln]:z-40 + [&_.diff-newln]:text-text-muted/60 + [&_.diff-newln]:text-right [&_.diff-newln]:inline-block + [&_.diff-newln]:select-none + [&_.diff-newln]:bg-background-panel + [&_.diff-add]:bg-success/20! + [&_.diff-add.diff-selected]:bg-success/50! + [&_.diff-add_.diff-oldln]:bg-success! + [&_.diff-add_.diff-oldln]:text-background-panel! + [&_.diff-add_.diff-newln]:bg-success! + [&_.diff-add_.diff-newln]:text-background-panel! + [&_.diff-remove]:bg-error/20! + [&_.diff-remove.diff-selected]:bg-error/50! + [&_.diff-remove_.diff-newln]:bg-error! + [&_.diff-remove_.diff-newln]:text-background-panel! + [&_.diff-remove_.diff-oldln]:bg-error! + [&_.diff-remove_.diff-oldln]:text-background-panel! + [&_.diff-sign]:inline-block [&_.diff-sign]:px-2 [&_.diff-sign]:select-none + [&_.diff-blank]:bg-background-element + [&_.diff-blank_.diff-oldln]:bg-background-element + [&_.diff-blank_.diff-newln]:bg-background-element + [&_.diff-collapsed]:block! [&_.diff-collapsed]:w-full [&_.diff-collapsed]:relative + [&_.diff-collapsed]:cursor-pointer [&_.diff-collapsed]:select-none + [&_.diff-collapsed]:bg-info/20 [&_.diff-collapsed]:hover:bg-info/40! + [&_.diff-collapsed]:text-info/80 [&_.diff-collapsed]:hover:text-info + [&_.diff-collapsed]:text-xs + [&_.diff-collapsed_.diff-oldln]:bg-info! + [&_.diff-collapsed_.diff-newln]:bg-info! + " + classList={{ + ...(local.classList || {}), + [local.class ?? ""]: !!local.class, + }} + {...others} + >
+ ) +} - const key = `o${start.dataset["old"] || ""}-${end.dataset["old"] || ""}:n${start.dataset["new"] || ""}-${end.dataset["new"] || ""}` +function transformerUnifiedDiff(): ShikiTransformer { + const kinds = new Map() + const meta = new Map() + let isDiff = false - const show = (record = true) => { - if (record) options?.onExpand?.(key) - const p = block.parentNode - if (p) { - while (block.firstChild) p.insertBefore(block.firstChild, block) - block.remove() - } - row.remove() - } + return { + name: "unified-diff", + preprocess(input) { + kinds.clear() + meta.clear() + isDiff = false - row.addEventListener("click", () => show(true)) - row.addEventListener("keydown", (ev) => { - if (ev.key === "Enter" || ev.key === " ") { - ev.preventDefault() - show(true) - } - }) + const ls = input.split(/\r?\n/) + const out: Array = [] + let oldNo = 0 + let newNo = 0 + let inHunk = false - block.parentElement?.insertBefore(row, block) - if (!options?.side || options.side === "left") row.appendChild(oldln) - if (!options?.side || options.side === "right") row.appendChild(newln) - row.appendChild(sign) - row.appendChild(label) + for (let i = 0; i < ls.length; i++) { + const s = ls[i] - if (options?.expanded && options.expanded.includes(key)) { - show(false) - } - } -} + const m = s.match(/^@@\s*-(\d+)(?:,(\d+))?\s+\+(\d+)(?:,(\d+))?\s*@@/) + if (m) { + isDiff = true + inHunk = true + oldNo = parseInt(m[1], 10) + newNo = parseInt(m[3], 10) + continue + } -function applySplitDiff(container: HTMLElement) { - const pres = Array.from(container.querySelectorAll("pre")) - if (pres.length === 0) return - const originalPre = pres[0] - const originalCode = originalPre.querySelector("code") as HTMLElement | undefined - if (!originalCode || !originalCode.classList.contains("code-diff")) return + if ( + /^diff --git /.test(s) || + /^Index: /.test(s) || + /^--- /.test(s) || + /^\+\+\+ /.test(s) || + /^[=]{3,}$/.test(s) || + /^\*{3,}$/.test(s) || + /^\\ No newline at end of file$/.test(s) + ) { + isDiff = true + continue + } - // Rebuild split each time to match current content - const existing = container.querySelector(".diff-split") - if (existing) existing.remove() + if (!inHunk) { + out.push(s) + continue + } - const grid = document.createElement("div") - grid.className = "diff-split grid grid-cols-2 gap-x-6" + if (/^\+/.test(s)) { + out.push(s) + const ln = out.length + kinds.set(ln, "add") + meta.set(ln, { new: newNo, sign: "+" }) + newNo++ + continue + } - const makeColumn = () => { - const pre = document.createElement("pre") - pre.className = originalPre.className - const code = document.createElement("code") - code.className = originalCode.className - pre.appendChild(code) - return { pre, code } - } + if (/^-/.test(s)) { + out.push(s) + const ln = out.length + kinds.set(ln, "remove") + meta.set(ln, { old: oldNo, sign: "-" }) + oldNo++ + continue + } - const left = makeColumn() - const right = makeColumn() + if (/^ /.test(s)) { + out.push(s) + const ln = out.length + kinds.set(ln, "context") + meta.set(ln, { old: oldNo, new: newNo }) + oldNo++ + newNo++ + continue + } - // Helpers - const cloneSide = (line: HTMLElement, side: "old" | "new"): HTMLElement => { - const clone = line.cloneNode(true) as HTMLElement - const oldln = clone.querySelector(".diff-oldln") - const newln = clone.querySelector(".diff-newln") - if (side === "old") { - if (newln) newln.remove() - } else { - if (oldln) oldln.remove() - } - return clone - } + // fallback in hunks + out.push(s) + } - const blankLine = (side: "old" | "new", kind: "add" | "remove"): HTMLElement => { - const span = document.createElement("span") - span.className = "line diff-line diff-blank" - span.setAttribute("data-diff", kind) - const ln = document.createElement("span") - ln.className = side === "old" ? "diff-oldln" : "diff-newln" - ln.textContent = " " - span.appendChild(ln) - return span - } + return out.join("\n") + }, + code(node) { + if (isDiff) this.addClassToHast(node, "code-diff") + }, + pre(node) { + if (isDiff) this.addClassToHast(node, "code-diff") + }, + line(node, line) { + if (!isDiff) return + const kind = kinds.get(line) + if (!kind) return - const lines = Array.from(originalCode.querySelectorAll(".diff-line")) - let i = 0 - while (i < lines.length) { - const cur = lines[i] - const kind = cur.dataset["diff"] + const m = meta.get(line) || {} - if (kind === "context") { - left.code.appendChild(cloneSide(cur, "old")) - left.code.appendChild(document.createTextNode("\n")) - right.code.appendChild(cloneSide(cur, "new")) - right.code.appendChild(document.createTextNode("\n")) - i++ - continue - } + this.addClassToHast(node, "diff-line") + this.addClassToHast(node, `diff-${kind}`) + node.properties = node.properties || {} + ;(node.properties as any)["data-diff"] = kind + if (m.old != undefined) (node.properties as any)["data-old"] = String(m.old) + if (m.new != undefined) (node.properties as any)["data-new"] = String(m.new) - if (kind === "remove") { - // Batch consecutive removes and following adds, then pair - const removes: HTMLElement[] = [] - const adds: HTMLElement[] = [] - let j = i - while (j < lines.length && lines[j].dataset["diff"] === "remove") { - removes.push(lines[j]) - j++ + const oldSpan = { + type: "element", + tagName: "span", + properties: { className: ["diff-oldln"] }, + children: [{ type: "text", value: m.old != undefined ? String(m.old) : " " }], } - let k = j - while (k < lines.length && lines[k].dataset["diff"] === "add") { - adds.push(lines[k]) - k++ + const newSpan = { + type: "element", + tagName: "span", + properties: { className: ["diff-newln"] }, + children: [{ type: "text", value: m.new != undefined ? String(m.new) : " " }], } - const pairs = Math.min(removes.length, adds.length) - for (let p = 0; p < pairs; p++) { - left.code.appendChild(cloneSide(removes[p], "old")) - left.code.appendChild(document.createTextNode("\n")) - right.code.appendChild(cloneSide(adds[p], "new")) - right.code.appendChild(document.createTextNode("\n")) - } - for (let p = pairs; p < removes.length; p++) { - left.code.appendChild(cloneSide(removes[p], "old")) - left.code.appendChild(document.createTextNode("\n")) - right.code.appendChild(blankLine("new", "remove")) - right.code.appendChild(document.createTextNode("\n")) - } - for (let p = pairs; p < adds.length; p++) { - left.code.appendChild(blankLine("old", "add")) - left.code.appendChild(document.createTextNode("\n")) - right.code.appendChild(cloneSide(adds[p], "new")) - right.code.appendChild(document.createTextNode("\n")) + if (kind === "add" || kind === "remove" || kind === "context") { + const first = (node.children && (node.children as any[])[0]) as any + if (first && first.type === "element" && first.children && first.children.length > 0) { + const t = first.children[0] + if (t && t.type === "text" && typeof t.value === "string" && t.value.length > 0) { + const ch = t.value[0] + if (ch === "+" || ch === "-" || ch === " ") t.value = t.value.slice(1) + } + } } - i = k - continue - } - - if (kind === "add") { - // Run of adds not preceded by removes - const adds: HTMLElement[] = [] - let j = i - while (j < lines.length && lines[j].dataset["diff"] === "add") { - adds.push(lines[j]) - j++ - } - for (let p = 0; p < adds.length; p++) { - left.code.appendChild(blankLine("old", "add")) - left.code.appendChild(document.createTextNode("\n")) - right.code.appendChild(cloneSide(adds[p], "new")) - right.code.appendChild(document.createTextNode("\n")) + const signSpan = { + type: "element", + tagName: "span", + properties: { className: ["diff-sign"] }, + children: [{ type: "text", value: (m as any).sign || " " }], } - i = j - continue - } - // Any other kind: mirror as context - left.code.appendChild(cloneSide(cur, "old")) - left.code.appendChild(document.createTextNode("\n")) - right.code.appendChild(cloneSide(cur, "new")) - right.code.appendChild(document.createTextNode("\n")) - i++ + // @ts-expect-error hast typing across versions + node.children = [oldSpan, newSpan, signSpan, ...(node.children || [])] + }, } +} - grid.appendChild(left.pre) - grid.appendChild(right.pre) - container.appendChild(grid) +function transformerDiffGroups(): ShikiTransformer { + let group = -1 + let inGroup = false + return { + name: "diff-groups", + pre() { + group = -1 + inGroup = false + }, + line(node) { + const props = (node.properties || {}) as any + const kind = props["data-diff"] as string | undefined + if (kind === "add" || kind === "remove") { + if (!inGroup) { + group += 1 + inGroup = true + } + ;(node.properties as any)["data-chgrp"] = String(group) + } else { + inGroup = false + } + }, + } } -export function Code(props: Props) { - const ctx = useLocal() - const [local, others] = splitProps(props, ["class", "classList", "code", "path"]) - const lang = createMemo(() => getFileExtension(local.path)) +function applyDiffFolding( + root: HTMLElement, + context = 3, + options?: { expanded?: string[]; onExpand?: (key: string) => void; side?: "left" | "right" }, +) { + if (!root.classList.contains("code-diff")) return + + // Cleanup: unwrap previous collapsed blocks and remove toggles + const blocks = Array.from(root.querySelectorAll(".diff-collapsed-block")) + for (const block of blocks) { + const p = block.parentNode + if (!p) { + block.remove() + continue + } + while (block.firstChild) p.insertBefore(block.firstChild, block) + block.remove() + } + const toggles = Array.from(root.querySelectorAll(".diff-collapsed")) + for (const t of toggles) t.remove() - let container: HTMLDivElement | undefined - let isProgrammaticSelection = false + const lines = Array.from(root.querySelectorAll(".diff-line")) + if (lines.length === 0) return - const [html] = createResource( - () => [local.code, lang()], - async ([code, lang]) => { - return (await codeToHtml(code || "", { - lang: lang && lang in bundledLanguages ? lang : "text", - theme: { - colors: { - "actionBar.toggledBackground": "var(--theme-background-element)", - "activityBarBadge.background": "var(--theme-accent)", - "checkbox.border": "var(--theme-border)", - "editor.background": "transparent", - "editor.foreground": "var(--theme-text)", - "editor.inactiveSelectionBackground": "var(--theme-background-element)", - "editor.selectionHighlightBackground": "var(--theme-border-active)", - "editorIndentGuide.activeBackground1": "var(--theme-border-subtle)", - "editorIndentGuide.background1": "var(--theme-border-subtle)", - "input.placeholderForeground": "var(--theme-text-muted)", - "list.activeSelectionIconForeground": "var(--theme-text)", - "list.dropBackground": "var(--theme-background-element)", - "menu.background": "var(--theme-background-panel)", - "menu.border": "var(--theme-border)", - "menu.foreground": "var(--theme-text)", - "menu.selectionBackground": "var(--theme-primary)", - "menu.separatorBackground": "var(--theme-border)", - "ports.iconRunningProcessForeground": "var(--theme-success)", - "sideBarSectionHeader.background": "transparent", - "sideBarSectionHeader.border": "var(--theme-border-subtle)", - "sideBarTitle.foreground": "var(--theme-text-muted)", - "statusBarItem.remoteBackground": "var(--theme-success)", - "statusBarItem.remoteForeground": "var(--theme-text)", - "tab.lastPinnedBorder": "var(--theme-border-subtle)", - "tab.selectedBackground": "var(--theme-background-element)", - "tab.selectedForeground": "var(--theme-text-muted)", - "terminal.inactiveSelectionBackground": "var(--theme-background-element)", - "widget.border": "var(--theme-border)", - }, - displayName: "opencode", - name: "opencode", - semanticHighlighting: true, - semanticTokenColors: { - customLiteral: "var(--theme-syntax-function)", - newOperator: "var(--theme-syntax-operator)", - numberLiteral: "var(--theme-syntax-number)", - stringLiteral: "var(--theme-syntax-string)", - }, - tokenColors: [ - { - scope: [ - "meta.embedded", - "source.groovy.embedded", - "string meta.image.inline.markdown", - "variable.legacy.builtin.python", - ], - settings: { - foreground: "var(--theme-text)", - }, - }, - { - scope: "emphasis", - settings: { - fontStyle: "italic", - }, - }, - { - scope: "strong", - settings: { - fontStyle: "bold", - }, - }, - { - scope: "header", - settings: { - foreground: "var(--theme-markdown-heading)", - }, - }, - { - scope: "comment", - settings: { - foreground: "var(--theme-syntax-comment)", - }, - }, - { - scope: "constant.language", - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: [ - "constant.numeric", - "variable.other.enummember", - "keyword.operator.plus.exponent", - "keyword.operator.minus.exponent", - ], - settings: { - foreground: "var(--theme-syntax-number)", - }, - }, - { - scope: "constant.regexp", - settings: { - foreground: "var(--theme-syntax-operator)", - }, - }, - { - scope: "entity.name.tag", - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: ["entity.name.tag.css", "entity.name.tag.less"], - settings: { - foreground: "var(--theme-syntax-operator)", - }, - }, - { - scope: "entity.other.attribute-name", - settings: { - foreground: "var(--theme-syntax-variable)", - }, - }, - { - scope: [ - "entity.other.attribute-name.class.css", - "source.css entity.other.attribute-name.class", - "entity.other.attribute-name.id.css", - "entity.other.attribute-name.parent-selector.css", - "entity.other.attribute-name.parent.less", - "source.css entity.other.attribute-name.pseudo-class", - "entity.other.attribute-name.pseudo-element.css", - "source.css.less entity.other.attribute-name.id", - "entity.other.attribute-name.scss", - ], - settings: { - foreground: "var(--theme-syntax-operator)", - }, - }, - { - scope: "invalid", - settings: { - foreground: "var(--theme-error)", - }, - }, - { - scope: "markup.underline", - settings: { - fontStyle: "underline", - }, - }, - { - scope: "markup.bold", - settings: { - fontStyle: "bold", - foreground: "var(--theme-markdown-strong)", - }, - }, - { - scope: "markup.heading", - settings: { - fontStyle: "bold", - foreground: "var(--theme-markdown-heading)", - }, - }, - { - scope: "markup.italic", - settings: { - fontStyle: "italic", - }, - }, - { - scope: "markup.strikethrough", - settings: { - fontStyle: "strikethrough", - }, - }, - { - scope: "markup.inserted", - settings: { - foreground: "var(--theme-diff-added)", - }, - }, - { - scope: "markup.deleted", - settings: { - foreground: "var(--theme-diff-removed)", - }, - }, - { - scope: "markup.changed", - settings: { - foreground: "var(--theme-diff-context)", - }, - }, - { - scope: "punctuation.definition.quote.begin.markdown", - settings: { - foreground: "var(--theme-markdown-block-quote)", - }, - }, - { - scope: "punctuation.definition.list.begin.markdown", - settings: { - foreground: "var(--theme-markdown-list-enumeration)", - }, - }, - { - scope: "markup.inline.raw", - settings: { - foreground: "var(--theme-markdown-code)", - }, - }, - { - scope: "punctuation.definition.tag", - settings: { - foreground: "var(--theme-syntax-punctuation)", - }, - }, - { - scope: ["meta.preprocessor", "entity.name.function.preprocessor"], - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: "meta.preprocessor.string", - settings: { - foreground: "var(--theme-syntax-string)", - }, - }, - { - scope: "meta.preprocessor.numeric", - settings: { - foreground: "var(--theme-syntax-number)", - }, - }, - { - scope: "meta.structure.dictionary.key.python", - settings: { - foreground: "var(--theme-syntax-variable)", - }, - }, - { - scope: "meta.diff.header", - settings: { - foreground: "var(--theme-diff-hunk-header)", - }, - }, - { - scope: "storage", - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: "storage.type", - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: ["storage.modifier", "keyword.operator.noexcept"], - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: ["string", "meta.embedded.assembly"], - settings: { - foreground: "var(--theme-syntax-string)", - }, - }, - { - scope: "string.tag", - settings: { - foreground: "var(--theme-syntax-string)", - }, - }, - { - scope: "string.value", - settings: { - foreground: "var(--theme-syntax-string)", - }, - }, - { - scope: "string.regexp", - settings: { - foreground: "var(--theme-syntax-operator)", - }, - }, - { - scope: [ - "punctuation.definition.template-expression.begin", - "punctuation.definition.template-expression.end", - "punctuation.section.embedded", - ], - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: ["meta.template.expression"], - settings: { - foreground: "var(--theme-text)", - }, - }, - { - scope: [ - "support.type.vendored.property-name", - "support.type.property-name", - "source.css variable", - "source.coffee.embedded", - ], - settings: { - foreground: "var(--theme-syntax-variable)", - }, - }, - { - scope: "keyword", - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: "keyword.control", - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: "keyword.operator", - settings: { - foreground: "var(--theme-syntax-operator)", - }, - }, - { - scope: [ - "keyword.operator.new", - "keyword.operator.expression", - "keyword.operator.cast", - "keyword.operator.sizeof", - "keyword.operator.alignof", - "keyword.operator.typeid", - "keyword.operator.alignas", - "keyword.operator.instanceof", - "keyword.operator.logical.python", - "keyword.operator.wordlike", - ], - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: "keyword.other.unit", - settings: { - foreground: "var(--theme-syntax-number)", - }, - }, - { - scope: ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"], - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: "support.function.git-rebase", - settings: { - foreground: "var(--theme-syntax-variable)", - }, - }, - { - scope: "constant.sha.git-rebase", - settings: { - foreground: "var(--theme-syntax-number)", - }, - }, - { - scope: [ - "storage.modifier.import.java", - "variable.language.wildcard.java", - "storage.modifier.package.java", - ], - settings: { - foreground: "var(--theme-text)", - }, - }, - { - scope: "variable.language", - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: [ - "entity.name.function", - "support.function", - "support.constant.handlebars", - "source.powershell variable.other.member", - "entity.name.operator.custom-literal", - ], - settings: { - foreground: "var(--theme-syntax-function)", - }, - }, - { - scope: [ - "support.class", - "support.type", - "entity.name.type", - "entity.name.namespace", - "entity.other.attribute", - "entity.name.scope-resolution", - "entity.name.class", - "storage.type.numeric.go", - "storage.type.byte.go", - "storage.type.boolean.go", - "storage.type.string.go", - "storage.type.uintptr.go", - "storage.type.error.go", - "storage.type.rune.go", - "storage.type.cs", - "storage.type.generic.cs", - "storage.type.modifier.cs", - "storage.type.variable.cs", - "storage.type.annotation.java", - "storage.type.generic.java", - "storage.type.java", - "storage.type.object.array.java", - "storage.type.primitive.array.java", - "storage.type.primitive.java", - "storage.type.token.java", - "storage.type.groovy", - "storage.type.annotation.groovy", - "storage.type.parameters.groovy", - "storage.type.generic.groovy", - "storage.type.object.array.groovy", - "storage.type.primitive.array.groovy", - "storage.type.primitive.groovy", - ], - settings: { - foreground: "var(--theme-syntax-type)", - }, - }, - { - scope: [ - "meta.type.cast.expr", - "meta.type.new.expr", - "support.constant.math", - "support.constant.dom", - "support.constant.json", - "entity.other.inherited-class", - "punctuation.separator.namespace.ruby", - ], - settings: { - foreground: "var(--theme-syntax-type)", - }, - }, - { - scope: [ - "keyword.control", - "source.cpp keyword.operator.new", - "keyword.operator.delete", - "keyword.other.using", - "keyword.other.directive.using", - "keyword.other.operator", - "entity.name.operator", - ], - settings: { - foreground: "var(--theme-syntax-operator)", - }, - }, - { - scope: [ - "variable", - "meta.definition.variable.name", - "support.variable", - "entity.name.variable", - "constant.other.placeholder", - ], - settings: { - foreground: "var(--theme-syntax-variable)", - }, - }, - { - scope: ["variable.other.constant", "variable.other.enummember"], - settings: { - foreground: "var(--theme-syntax-variable)", - }, - }, - { - scope: ["meta.object-literal.key"], - settings: { - foreground: "var(--theme-syntax-variable)", - }, - }, - { - scope: [ - "support.constant.property-value", - "support.constant.font-name", - "support.constant.media-type", - "support.constant.media", - "constant.other.color.rgb-value", - "constant.other.rgb-value", - "support.constant.color", - ], - settings: { - foreground: "var(--theme-syntax-string)", - }, - }, - { - scope: [ - "punctuation.definition.group.regexp", - "punctuation.definition.group.assertion.regexp", - "punctuation.definition.character-class.regexp", - "punctuation.character.set.begin.regexp", - "punctuation.character.set.end.regexp", - "keyword.operator.negation.regexp", - "support.other.parenthesis.regexp", - ], - settings: { - foreground: "var(--theme-syntax-string)", - }, - }, - { - scope: [ - "constant.character.character-class.regexp", - "constant.other.character-class.set.regexp", - "constant.other.character-class.regexp", - "constant.character.set.regexp", - ], - settings: { - foreground: "var(--theme-syntax-operator)", - }, - }, - { - scope: ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"], - settings: { - foreground: "var(--theme-syntax-operator)", - }, - }, - { - scope: "keyword.operator.quantifier.regexp", - settings: { - foreground: "var(--theme-syntax-operator)", - }, - }, - { - scope: ["constant.character", "constant.other.option"], - settings: { - foreground: "var(--theme-syntax-keyword)", - }, - }, - { - scope: "constant.character.escape", - settings: { - foreground: "var(--theme-syntax-operator)", - }, - }, - { - scope: "entity.name.label", - settings: { - foreground: "var(--theme-text-muted)", - }, - }, - ], - type: "dark", - }, - transformers: [transformerUnifiedDiff(), transformerDiffGroups()], - })) as string - }, - ) + const n = lines.length + const isChange = lines.map((l) => l.dataset["diff"] === "add" || l.dataset["diff"] === "remove") + const isContext = lines.map((l) => l.dataset["diff"] === "context") + if (!isChange.some(Boolean)) return - onMount(() => { - if (!container) return + const visible = new Array(n).fill(false) as boolean[] + for (let i = 0; i < n; i++) if (isChange[i]) visible[i] = true + for (let i = 0; i < n; i++) { + if (isChange[i]) { + const s = Math.max(0, i - context) + const e = Math.min(n - 1, i + context) + for (let j = s; j <= e; j++) if (isContext[j]) visible[j] = true + } + } - let ticking = false - const onScroll = () => { - if (!container) return - if (ctx.file.active()?.path !== local.path) return - if (ticking) return - ticking = true - requestAnimationFrame(() => { - ticking = false - ctx.file.scroll(local.path, container!.scrollTop) - }) + type Range = { start: number; end: number } + const ranges: Range[] = [] + let i = 0 + while (i < n) { + if (!visible[i] && isContext[i]) { + let j = i + while (j + 1 < n && !visible[j + 1] && isContext[j + 1]) j++ + ranges.push({ start: i, end: j }) + i = j + 1 + } else { + i++ } + } - const onSelectionChange = () => { - if (!container) return - if (isProgrammaticSelection) return - if (ctx.file.active()?.path !== local.path) return - const d = getSelectionInContainer(container) - if (!d) return - const p = ctx.file.node(local.path)?.selection - if (p && p.startLine === d.sl && p.endLine === d.el && p.startChar === d.sch && p.endChar === d.ech) return - ctx.file.select(local.path, { startLine: d.sl, startChar: d.sch, endLine: d.el, endChar: d.ech }) + for (const r of ranges) { + const start = lines[r.start] + const end = lines[r.end] + const count = r.end - r.start + 1 + const minCollapse = 20 + if (count < minCollapse) { + continue } - const MOD = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform) ? "Meta" : "Control" - const onKeyDown = (e: KeyboardEvent) => { - if (ctx.file.active()?.path !== local.path) return - const ae = document.activeElement as HTMLElement | undefined - const tag = (ae?.tagName || "").toLowerCase() - const inputFocused = !!ae && (tag === "input" || tag === "textarea" || ae.isContentEditable) - if (inputFocused) return - if (e.getModifierState(MOD) && e.key.toLowerCase() === "a") { - e.preventDefault() - if (!container) return - const element = container.querySelector("code") as HTMLElement | undefined - if (!element) return - const lines = Array.from(element.querySelectorAll(".line")) - if (!lines.length) return - const r = document.createRange() - const last = lines[lines.length - 1] - r.selectNodeContents(last) - const lastLen = r.toString().length - ctx.file.select(local.path, { startLine: 1, startChar: 0, endLine: lines.length, endChar: lastLen }) + // Wrap the entire collapsed chunk (including trailing newline) so it takes no space + const block = document.createElement("span") + block.className = "diff-collapsed-block" + start.parentElement?.insertBefore(block, start) + + let cur: Node | undefined = start + while (cur) { + const next: Node | undefined = cur.nextSibling || undefined + block.appendChild(cur) + if (cur === end) { + // Also move the newline after the last line into the block + if (next && next.nodeType === Node.TEXT_NODE && (next.textContent || "").startsWith("\n")) { + block.appendChild(next) + } + break } + cur = next } - container.addEventListener("scroll", onScroll) - document.addEventListener("selectionchange", onSelectionChange) - document.addEventListener("keydown", onKeyDown) + block.style.display = "none" + const row = document.createElement("span") + row.className = "line diff-collapsed" + row.setAttribute("data-kind", "collapsed") + row.setAttribute("data-count", String(count)) + row.setAttribute("tabindex", "0") + row.setAttribute("role", "button") - onCleanup(() => { - container?.removeEventListener("scroll", onScroll) - document.removeEventListener("selectionchange", onSelectionChange) - document.removeEventListener("keydown", onKeyDown) - }) - }) + const oldln = document.createElement("span") + oldln.className = "diff-oldln" + oldln.textContent = " " - // Restore scroll position from store when content is ready - createEffect(() => { - const content = html() - if (!container || !content) return - const top = ctx.file.node(local.path)?.scrollTop - if (top !== undefined && container.scrollTop !== top) container.scrollTop = top - }) + const newln = document.createElement("span") + newln.className = "diff-newln" + newln.textContent = " " - // Sync selection from store -> DOM - createEffect(() => { - const content = html() - if (!container || !content) return - if (ctx.file.active()?.path !== local.path) return - const codeEl = container.querySelector("code") as HTMLElement | undefined - if (!codeEl) return - const target = ctx.file.node(local.path)?.selection - const current = getSelectionInContainer(container) - const sel = window.getSelection() - if (!sel) return - if (!target) { - if (current) { - isProgrammaticSelection = true - sel.removeAllRanges() - queueMicrotask(() => { - isProgrammaticSelection = false - }) - } - return - } - const matches = !!( - current && - current.sl === target.startLine && - current.sch === target.startChar && - current.el === target.endLine && - current.ech === target.endChar - ) - if (matches) return - const lines = Array.from(codeEl.querySelectorAll(".line")) - if (lines.length === 0) return - let sIdx = Math.max(0, target.startLine - 1) - let eIdx = Math.max(0, target.endLine - 1) - let sChar = Math.max(0, target.startChar || 0) - let eChar = Math.max(0, target.endChar || 0) - if (sIdx > eIdx || (sIdx === eIdx && sChar > eChar)) { - const ti = sIdx - sIdx = eIdx - eIdx = ti - const tc = sChar - sChar = eChar - eChar = tc - } - if (eChar === 0 && eIdx > sIdx) { - eIdx = eIdx - 1 - eChar = Number.POSITIVE_INFINITY - } - if (sIdx >= lines.length) return - if (eIdx >= lines.length) eIdx = lines.length - 1 - const s = getNodeOffsetInLine(lines[sIdx], sChar) ?? { node: lines[sIdx], offset: 0 } - const e = getNodeOffsetInLine(lines[eIdx], eChar) ?? { node: lines[eIdx], offset: lines[eIdx].childNodes.length } - const range = document.createRange() - range.setStart(s.node, s.offset) - range.setEnd(e.node, e.offset) - isProgrammaticSelection = true - sel.removeAllRanges() - sel.addRange(range) - queueMicrotask(() => { - isProgrammaticSelection = false - }) - }) + const sign = document.createElement("span") + sign.className = "diff-sign" + sign.textContent = "…" - // Build/toggle split layout and apply folding (both unified and split) - createEffect(() => { - const content = html() - if (!container || !content) return - const view = ctx.file.view(local.path) + const label = document.createElement("span") + label.textContent = `show ${count} unchanged line${count > 1 ? "s" : ""}` - const pres = Array.from(container.querySelectorAll("pre")) - if (pres.length === 0) return - const originalPre = pres[0] + const key = `o${start.dataset["old"] || ""}-${end.dataset["old"] || ""}:n${start.dataset["new"] || ""}-${end.dataset["new"] || ""}` - const split = container.querySelector(".diff-split") - if (view === "diff-split") { - applySplitDiff(container) - const next = container.querySelector(".diff-split") - if (next) next.style.display = "" - originalPre.style.display = "none" - } else { - if (split) split.style.display = "none" - originalPre.style.display = "" + const show = (record = true) => { + if (record) options?.onExpand?.(key) + const p = block.parentNode + if (p) { + while (block.firstChild) p.insertBefore(block.firstChild, block) + block.remove() + } + row.remove() } - const expanded = ctx.file.folded(local.path) - if (view === "diff-split") { - const left = container.querySelector(".diff-split pre:nth-child(1) code") - const right = container.querySelector(".diff-split pre:nth-child(2) code") - if (left) - applyDiffFolding(left, 3, { expanded, onExpand: (key) => ctx.file.unfold(local.path, key), side: "left" }) - if (right) - applyDiffFolding(right, 3, { expanded, onExpand: (key) => ctx.file.unfold(local.path, key), side: "right" }) - } else { - const code = container.querySelector("pre code") - if (code) - applyDiffFolding(code, 3, { - expanded, - onExpand: (key) => ctx.file.unfold(local.path, key), - }) - } - }) + row.addEventListener("click", () => show(true)) + row.addEventListener("keydown", (ev) => { + if (ev.key === "Enter" || ev.key === " ") { + ev.preventDefault() + show(true) + } + }) - // Highlight groups + scroll coupling - const clearHighlights = () => { - if (!container) return - container.querySelectorAll(".diff-selected").forEach((el) => el.classList.remove("diff-selected")) + block.parentElement?.insertBefore(row, block) + if (!options?.side || options.side === "left") row.appendChild(oldln) + if (!options?.side || options.side === "right") row.appendChild(newln) + row.appendChild(sign) + row.appendChild(label) + + if (options?.expanded && options.expanded.includes(key)) { + show(false) + } } +} - const applyHighlight = (idx: number, scroll?: boolean) => { - if (!container) return - const view = ctx.file.view(local.path) - if (view === "raw") return +function applySplitDiff(container: HTMLElement) { + const pres = Array.from(container.querySelectorAll("pre")) + if (pres.length === 0) return + const originalPre = pres[0] + const originalCode = originalPre.querySelector("code") as HTMLElement | undefined + if (!originalCode || !originalCode.classList.contains("code-diff")) return - clearHighlights() + // Rebuild split each time to match current content + const existing = container.querySelector(".diff-split") + if (existing) existing.remove() - const nodes: HTMLElement[] = [] - if (view === "diff-split") { - const left = container.querySelector(".diff-split pre:nth-child(1) code") - const right = container.querySelector(".diff-split pre:nth-child(2) code") - if (left) - nodes.push(...Array.from(left.querySelectorAll(`[data-chgrp="${idx}"][data-diff="remove"]`))) - if (right) - nodes.push(...Array.from(right.querySelectorAll(`[data-chgrp="${idx}"][data-diff="add"]`))) + const grid = document.createElement("div") + grid.className = "diff-split grid grid-cols-2 gap-x-6" + + const makeColumn = () => { + const pre = document.createElement("pre") + pre.className = originalPre.className + const code = document.createElement("code") + code.className = originalCode.className + pre.appendChild(code) + return { pre, code } + } + + const left = makeColumn() + const right = makeColumn() + + // Helpers + const cloneSide = (line: HTMLElement, side: "old" | "new"): HTMLElement => { + const clone = line.cloneNode(true) as HTMLElement + const oldln = clone.querySelector(".diff-oldln") + const newln = clone.querySelector(".diff-newln") + if (side === "old") { + if (newln) newln.remove() } else { - const code = container.querySelector("pre code") - if (code) nodes.push(...Array.from(code.querySelectorAll(`[data-chgrp="${idx}"]`))) + if (oldln) oldln.remove() } + return clone + } - for (const n of nodes) n.classList.add("diff-selected") - if (scroll && nodes.length) nodes[0].scrollIntoView({ block: "center", behavior: "smooth" }) + const blankLine = (side: "old" | "new", kind: "add" | "remove"): HTMLElement => { + const span = document.createElement("span") + span.className = "line diff-line diff-blank" + span.setAttribute("data-diff", kind) + const ln = document.createElement("span") + ln.className = side === "old" ? "diff-oldln" : "diff-newln" + ln.textContent = " " + span.appendChild(ln) + return span } - const countGroups = () => { - if (!container) return 0 - const code = container.querySelector("pre code") - if (!code) return 0 - const set = new Set() - for (const el of Array.from(code.querySelectorAll(".diff-line[data-chgrp]"))) { - const v = el.getAttribute("data-chgrp") - if (v != undefined) set.add(v) + const lines = Array.from(originalCode.querySelectorAll(".diff-line")) + let i = 0 + while (i < lines.length) { + const cur = lines[i] + const kind = cur.dataset["diff"] + + if (kind === "context") { + left.code.appendChild(cloneSide(cur, "old")) + left.code.appendChild(document.createTextNode("\n")) + right.code.appendChild(cloneSide(cur, "new")) + right.code.appendChild(document.createTextNode("\n")) + i++ + continue } - return set.size - } - let lastIdx: number | undefined = undefined - let lastView: string | undefined - let lastContent: string | undefined - let lastRawIdx: number | undefined = undefined - createEffect(() => { - const content = html() - if (!container || !content) return - const view = ctx.file.view(local.path) - const raw = ctx.file.changeIndex(local.path) - if (raw === undefined) return - const total = countGroups() - if (total <= 0) return - const next = ((raw % total) + total) % total + if (kind === "remove") { + // Batch consecutive removes and following adds, then pair + const removes: HTMLElement[] = [] + const adds: HTMLElement[] = [] + let j = i + while (j < lines.length && lines[j].dataset["diff"] === "remove") { + removes.push(lines[j]) + j++ + } + let k = j + while (k < lines.length && lines[k].dataset["diff"] === "add") { + adds.push(lines[k]) + k++ + } - const navigated = lastRawIdx !== undefined && lastRawIdx !== raw + const pairs = Math.min(removes.length, adds.length) + for (let p = 0; p < pairs; p++) { + left.code.appendChild(cloneSide(removes[p], "old")) + left.code.appendChild(document.createTextNode("\n")) + right.code.appendChild(cloneSide(adds[p], "new")) + right.code.appendChild(document.createTextNode("\n")) + } + for (let p = pairs; p < removes.length; p++) { + left.code.appendChild(cloneSide(removes[p], "old")) + left.code.appendChild(document.createTextNode("\n")) + right.code.appendChild(blankLine("new", "remove")) + right.code.appendChild(document.createTextNode("\n")) + } + for (let p = pairs; p < adds.length; p++) { + left.code.appendChild(blankLine("old", "add")) + left.code.appendChild(document.createTextNode("\n")) + right.code.appendChild(cloneSide(adds[p], "new")) + right.code.appendChild(document.createTextNode("\n")) + } - if (next !== raw) { - ctx.file.setChangeIndex(local.path, next) - applyHighlight(next, true) - } else { - if (lastView !== view || lastContent !== content) applyHighlight(next) - if ((lastIdx !== undefined && lastIdx !== next) || navigated) applyHighlight(next, true) + i = k + continue } - lastRawIdx = raw - lastIdx = next - lastView = view - lastContent = content - }) + if (kind === "add") { + // Run of adds not preceded by removes + const adds: HTMLElement[] = [] + let j = i + while (j < lines.length && lines[j].dataset["diff"] === "add") { + adds.push(lines[j]) + j++ + } + for (let p = 0; p < adds.length; p++) { + left.code.appendChild(blankLine("old", "add")) + left.code.appendChild(document.createTextNode("\n")) + right.code.appendChild(cloneSide(adds[p], "new")) + right.code.appendChild(document.createTextNode("\n")) + } + i = j + continue + } - return ( - -
{ - container = el - }} - innerHTML={html()} - class=" - font-mono text-xs tracking-wide overflow-y-auto no-scrollbar h-full - [&]:[counter-reset:line] - [&_pre]:focus-visible:outline-none - [&_pre]:overflow-x-auto [&_pre]:no-scrollbar - [&_code]:min-w-full [&_code]:inline-block [&_code]:pb-40 - [&_.tab]:relative - [&_.tab::before]:content['⇥'] - [&_.tab::before]:absolute - [&_.tab::before]:opacity-0 - [&_.space]:relative - [&_.space::before]:content-['·'] - [&_.space::before]:absolute - [&_.space::before]:opacity-0 - [&_.line]:inline-block [&_.line]:w-full - [&_.line]:hover:bg-background-element - [&_.line::before]:sticky [&_.line::before]:left-0 - [&_.line::before]:w-12 [&_.line::before]:pr-4 - [&_.line::before]:z-10 - [&_.line::before]:bg-background-panel - [&_.line::before]:text-text-muted/60 - [&_.line::before]:text-right [&_.line::before]:inline-block - [&_.line::before]:select-none - [&_.line::before]:[counter-increment:line] - [&_.line::before]:content-[counter(line)] - [&_code.code-diff_.line::before]:content-[''] - [&_code.code-diff_.line::before]:w-0 - [&_code.code-diff_.line::before]:pr-0 - [&_.diff-split_code.code-diff::before]:w-10 - [&_.diff-split_.diff-newln]:left-0 - [&_.diff-oldln]:sticky [&_.diff-oldln]:left-0 - [&_.diff-oldln]:w-10 [&_.diff-oldln]:pr-2 - [&_.diff-oldln]:z-40 - [&_.diff-oldln]:text-text-muted/60 - [&_.diff-oldln]:text-right [&_.diff-oldln]:inline-block - [&_.diff-oldln]:select-none - [&_.diff-oldln]:bg-background-panel - [&_.diff-newln]:sticky [&_.diff-newln]:left-10 - [&_.diff-newln]:w-10 [&_.diff-newln]:pr-2 - [&_.diff-newln]:z-40 - [&_.diff-newln]:text-text-muted/60 - [&_.diff-newln]:text-right [&_.diff-newln]:inline-block - [&_.diff-newln]:select-none - [&_.diff-newln]:bg-background-panel - [&_.diff-add]:bg-success/20! - [&_.diff-add.diff-selected]:bg-success/50! - [&_.diff-add_.diff-oldln]:bg-success! - [&_.diff-add_.diff-oldln]:text-background-panel! - [&_.diff-add_.diff-newln]:bg-success! - [&_.diff-add_.diff-newln]:text-background-panel! - [&_.diff-remove]:bg-error/20! - [&_.diff-remove.diff-selected]:bg-error/50! - [&_.diff-remove_.diff-newln]:bg-error! - [&_.diff-remove_.diff-newln]:text-background-panel! - [&_.diff-remove_.diff-oldln]:bg-error! - [&_.diff-remove_.diff-oldln]:text-background-panel! - [&_.diff-sign]:inline-block [&_.diff-sign]:px-2 [&_.diff-sign]:select-none - [&_.diff-blank]:bg-background-element - [&_.diff-blank_.diff-oldln]:bg-background-element - [&_.diff-blank_.diff-newln]:bg-background-element - [&_.diff-collapsed]:block! [&_.diff-collapsed]:w-full [&_.diff-collapsed]:relative - [&_.diff-collapsed]:cursor-pointer [&_.diff-collapsed]:select-none - [&_.diff-collapsed]:bg-info/20 [&_.diff-collapsed]:hover:bg-info/40! - [&_.diff-collapsed]:text-info/80 [&_.diff-collapsed]:hover:text-info - [&_.diff-collapsed]:text-xs - [&_.diff-collapsed_.diff-oldln]:bg-info! - [&_.diff-collapsed_.diff-newln]:bg-info! - " - classList={{ - ...(local.classList || {}), - [local.class ?? ""]: !!local.class, - }} - {...others} - /> - - ) + // Any other kind: mirror as context + left.code.appendChild(cloneSide(cur, "old")) + left.code.appendChild(document.createTextNode("\n")) + right.code.appendChild(cloneSide(cur, "new")) + right.code.appendChild(document.createTextNode("\n")) + i++ + } + + grid.appendChild(left.pre) + grid.appendChild(right.pre) + container.appendChild(grid) } -- cgit v1.2.3