feat(git): render diffs with @pierre/diffs (diffs.com)

antfubot · antfubot · commit 207006622d2b · 2026-07-08T23:46:49.000Z
Replace the git plugin's line-prefix `&lt;pre&gt;` patch renderer with the
Shiki-based diffs.com library, giving syntax-highlighted, per-file diffs
in both the working-tree/staged diff panel and the multi-file commit
details view. The diff theme tracks the app's light/dark toggle.
diff --git a/plugins/git/package.json b/plugins/git/package.json
@@ -52,6 +52,7 @@
   },
   "devDependencies": {
     "@antfu/design": "catalog:frontend",
+    "@pierre/diffs": "catalog:frontend",
     "@radix-ui/react-scroll-area": "catalog:frontend",
     "@radix-ui/react-separator": "catalog:frontend",
     "@radix-ui/react-slot": "catalog:frontend",
diff --git a/plugins/git/src/client/components/theme.ts b/plugins/git/src/client/components/theme.ts
@@ -49,3 +49,24 @@ export function useTheme() {
 
   return { theme, toggle }
 }
+
+/**
+ * The color scheme currently applied to the document, tracked by observing the
+ * `.dark` class on `<html>`. Unlike {@link useTheme}, this reacts to toggles
+ * made anywhere in the app (or by Storybook), so Shiki-themed surfaces like the
+ * diff viewer stay in step with the rest of the UI regardless of who flipped it.
+ */
+export function useColorScheme(): Theme {
+  const [scheme, setScheme] = useState<Theme>('dark')
+
+  useEffect(() => {
+    const root = document.documentElement
+    const read = () => setScheme(root.classList.contains('dark') ? 'dark' : 'light')
+    read()
+    const observer = new MutationObserver(read)
+    observer.observe(root, { attributes: true, attributeFilter: ['class'] })
+    return () => observer.disconnect()
+  }, [])
+
+  return scheme
+}
diff --git a/plugins/git/src/client/components/views/diff-panel-view.tsx b/plugins/git/src/client/components/views/diff-panel-view.tsx
@@ -1,8 +1,13 @@
 'use client'
 
+import type { FileDiffOptions } from '@pierre/diffs'
 import type { ReactNode } from 'react'
 import type { GitDiff } from '../../../index'
+import { parsePatchFiles } from '@pierre/diffs'
+import { FileDiff } from '@pierre/diffs/react'
+import { useMemo } from 'react'
 import { cn } from '../../lib/utils'
+import { useColorScheme } from '../theme'
 import { Badge } from '../ui/badge'
 import { IconButton } from '../ui/button'
 import { Icon } from '../ui/icon'
@@ -21,39 +26,53 @@ export interface DiffPanelViewProps {
   patchSlot?: ReactNode
 }
 
-function patchLineClass(line: string): string {
-  if (line.startsWith('@@'))
-    return 'color-active'
-  if (line.startsWith('+') && !line.startsWith('+++'))
-    return 'text-success'
-  if (line.startsWith('-') && !line.startsWith('---'))
-    return 'text-error'
-  if (line.startsWith('diff ') || line.startsWith('index ') || line.startsWith('+++') || line.startsWith('---'))
-    return 'color-muted font-semibold'
-  return 'color-base'
+// Shiki themes for the diff renderer, chosen to sit alongside the @antfu/design
+// surfaces; @pierre/diffs picks light vs. dark from `themeType`.
+const DIFF_THEME = { light: 'vitesse-light', dark: 'vitesse-dark' } as const
+
+/** Split a unified/git patch into its per-file diffs, tolerant of truncation. */
+function parsePatch(patch: string) {
+  try {
+    return parsePatchFiles(patch).flatMap(p => p.files)
+  }
+  catch {
+    return []
+  }
 }
 
 /**
- * Pure renderer for a unified patch. Set `scroll={false}` to render inline
- * (no inner scroll area) when the patch already sits in a scrolling parent.
+ * Renders a unified git patch with `@pierre/diffs` (diffs.com) — Shiki syntax
+ * highlighting, per-file headers, and a theme synced to the app. Set
+ * `scroll={false}` to render inline (no inner scroll area) when the patch
+ * already sits in a scrolling parent.
  */
 export function DiffPatchView({ patch, loading, truncated, scroll = true }: { patch: string | null, loading: boolean, truncated: boolean, scroll?: boolean }) {
+  const scheme = useColorScheme()
+  const files = useMemo(() => (patch ? parsePatch(patch) : []), [patch])
+  const options = useMemo<FileDiffOptions<undefined>>(() => ({
+    theme: DIFF_THEME,
+    themeType: scheme,
+    diffStyle: 'unified',
+    diffIndicators: 'classic',
+  }), [scheme])
+
   if (loading)
     return <Skeleton className="h-40 w-full" />
-  if (!patch)
+  if (!patch || files.length === 0)
     return <p className="color-muted p-3 text-sm">No textual diff available (binary or unchanged).</p>
+
   const body = (
     <>
-      <pre className="font-mono text-xs leading-relaxed">
-        {patch.split('\n').map((line, i) => (
-          <div key={i} className={cn('px-3 whitespace-pre', patchLineClass(line))}>{line || ' '}</div>
+      <div className="flex flex-col text-sm [&>*+*]:border-t [&>*+*]:border-base">
+        {files.map((file, i) => (
+          <FileDiff key={file.name || i} fileDiff={file} options={options} disableWorkerPool />
         ))}
-      </pre>
+      </div>
       {truncated && <p className="text-warning px-3 py-1 text-xs">Patch truncated.</p>}
     </>
   )
   if (!scroll)
-    return <div className="overflow-x-auto py-1">{body}</div>
+    return <div>{body}</div>
   return <ScrollArea className="h-72 w-full">{body}</ScrollArea>
 }
 
@@ -154,7 +173,6 @@ export function DiffPanelView(props: DiffPanelViewProps) {
 
           {selected && (
             <div className="overflow-hidden rounded-md border">
-              <div className="bg-secondary border-b px-3 py-1 font-mono text-xs">{selected}</div>
               {patchSlot}
             </div>
           )}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -19,6 +19,7 @@ strictPeerDependencies: false
 trustPolicy: no-downgrade
 trustPolicyExclude:
   - tinyexec@1.2.2
+  - '@pierre/theme@1.1.0'
 packages:
   - packages/*
   - plugins/*
@@ -77,6 +78,7 @@ catalogs:
   frontend:
     '@antfu/design': ^0.2.1
     '@iconify-json/ph': ^1.2.2
+    '@pierre/diffs': ^1.2.12
     '@radix-ui/react-scroll-area': ^1.2.14
     '@radix-ui/react-separator': ^1.1.11
     '@radix-ui/react-slot': ^1.3.0
