Diffs Performance Improvements

packages/desktop/src/pages/layout.tsx

@@ -613,7 +613,7 @@ export default function Layout(props: ParentProps) {
           classList={{
             "relative @container w-12 pb-5 shrink-0 bg-background-base": true,
             "flex flex-col gap-5.5 items-start self-stretch justify-between": true,
-            "border-r border-border-weak-base": true,
+            "border-r border-border-weak-base contain-strict": true,
           }}
           style={{ width: layout.sidebar.opened() ? `${layout.sidebar.width()}px` : undefined }}
         >
@@ -755,7 +755,7 @@ export default function Layout(props: ParentProps) {
             </Tooltip>
           </div>
         </div>
-        <main class="size-full overflow-x-hidden flex flex-col items-start">{props.children}</main>
+        <main class="size-full overflow-x-hidden flex flex-col items-start contain-strict">{props.children}</main>
       </div>
       <Toast.Region />
     </div>

packages/desktop/src/pages/session.tsx

@@ -578,7 +578,10 @@ export default function Page() {
                 </div>
               </Tabs.List>
             </div>
-            <Tabs.Content value="chat" class="@container select-text flex flex-col flex-1 min-h-0 overflow-y-hidden">
+            <Tabs.Content
+              value="chat"
+              class="@container select-text flex flex-col flex-1 min-h-0 overflow-y-hidden contain-strict"
+            >
               <div
                 classList={{
                   "w-full flex-1 min-h-0": true,
@@ -661,7 +664,7 @@ export default function Page() {
                 <Show when={layout.review.state() === "pane" && diffs().length}>
                   <div
                     classList={{
-                      "relative grow pt-3 flex-1 min-h-0 border-l border-border-weak-base": true,
+                      "relative grow pt-3 flex-1 min-h-0 border-l border-border-weak-base contain-strict": true,
                     }}
                   >
                     <SessionReview
@@ -689,7 +692,7 @@ export default function Page() {
               </div>
             </Tabs.Content>
             <Show when={layout.review.state() === "tab" && diffs().length}>
-              <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden">
+              <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden contain-strict">
                 <div
                   classList={{
                     "relative pt-3 flex-1 min-h-0 overflow-hidden": true,

packages/ui/package.json

@@ -5,6 +5,7 @@
   "exports": {
     "./*": "./src/components/*.tsx",
     "./pierre": "./src/pierre/index.ts",
+    "./pierre/*": "./src/pierre/*.ts",
     "./hooks": "./src/hooks/index.ts",
     "./context": "./src/context/index.ts",
     "./context/*": "./src/context/*.tsx",

packages/ui/src/components/diff-ssr.tsx

@@ -1,8 +1,9 @@
-import { FileDiff } from "@pierre/diffs"
+import { DIFFS_TAG_NAME, FileDiff } from "@pierre/diffs"
 import { PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
 import { onCleanup, onMount, Show, splitProps } from "solid-js"
-import { isServer } from "solid-js/web"
+import { Dynamic, isServer } from "solid-js/web"
 import { createDefaultOptions, styleVariables, type DiffProps } from "../pierre"
+import { useWorkerPool } from "../context/worker-pool"
 
 export type SSRDiffProps<T = {}> = DiffProps<T> & {
   preloadedDiff: PreloadMultiFileDiffResult<T>
@@ -12,17 +13,21 @@ export function Diff<T>(props: SSRDiffProps<T>) {
   let container!: HTMLDivElement
   let fileDiffRef!: HTMLElement
   const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
+  const workerPool = useWorkerPool()
 
   let fileDiffInstance: FileDiff<T> | undefined
   const cleanupFunctions: Array<() => void> = []
 
   onMount(() => {
     if (isServer || !props.preloadedDiff) return
-    fileDiffInstance = new FileDiff<T>({
-      ...createDefaultOptions(props.diffStyle),
-      ...others,
-      ...props.preloadedDiff,
-    })
+    fileDiffInstance = new FileDiff<T>(
+      {
+        ...createDefaultOptions(props.diffStyle),
+        ...others,
+        ...props.preloadedDiff,
+      },
+      workerPool,
+    )
     // @ts-expect-error - fileContainer is private but needed for SSR hydration
     fileDiffInstance.fileContainer = fileDiffRef
     fileDiffInstance.hydrate({
@@ -65,11 +70,11 @@ export function Diff<T>(props: SSRDiffProps<T>) {
 
   return (
     <div data-component="diff" style={styleVariables} ref={container}>
-      <diffs-container ref={fileDiffRef} id="ssr-diff">
+      <Dynamic component={DIFFS_TAG_NAME} ref={fileDiffRef} id="ssr-diff">
         <Show when={isServer}>
           <template shadowrootmode="open" innerHTML={props.preloadedDiff.prerenderedHTML} />
         </Show>
-      </diffs-container>
+      </Dynamic>
     </div>
   )
 }

packages/ui/src/components/diff.css

@@ -1,4 +1,6 @@
 [data-component="diff"] {
+  contain: content;
+
   [data-slot="diff-hunk-separator-line-number"] {
     position: sticky;
     left: 0;

packages/ui/src/components/session-review.css

@@ -5,6 +5,7 @@
   height: 100%;
   overflow-y: auto;
   scrollbar-width: none;
+  contain: strict;
   &::-webkit-scrollbar {
     display: none;
   }

packages/ui/src/context/worker-pool.tsx

@@ -0,0 +1,10 @@
+import type { WorkerPoolManager } from "@pierre/diffs/worker"
+import { createSimpleContext } from "./helper"
+
+const ctx = createSimpleContext<WorkerPoolManager | undefined, { pool: WorkerPoolManager | undefined }>({
+  name: "WorkerPool",
+  init: (props) => props.pool,
+})
+
+export const WorkerPoolProvider = ctx.provider
+export const useWorkerPool = ctx.use

packages/ui/src/custom-elements.d.ts

@@ -1,12 +1,15 @@
+import { DIFFS_TAG_NAME } from "@pierre/diffs"
+
 /**
  * TypeScript declaration for the <diffs-container> custom element.
  * This tells TypeScript that <diffs-container> is a valid JSX element in SolidJS.
  * Required for using the @pierre/diffs web component in .tsx files.
  */
+
 declare module "solid-js" {
   namespace JSX {
     interface IntrinsicElements {
-      "diffs-container": HTMLAttributes<HTMLElement>
+      [DIFFS_TAG_NAME]: HTMLAttributes<HTMLElement>
     }
   }
 }

packages/ui/src/pierre/worker.ts

@@ -1,20 +1,28 @@
-import { getOrCreateWorkerPoolSingleton } from "@pierre/diffs/worker"
+import { getOrCreateWorkerPoolSingleton, WorkerPoolManager } from "@pierre/diffs/worker"
 import ShikiWorkerUrl from "@pierre/diffs/worker/worker.js?worker&url"
 
 export function workerFactory(): Worker {
   return new Worker(ShikiWorkerUrl, { type: "module" })
 }
 
-export const workerPool = getOrCreateWorkerPoolSingleton({
-  poolOptions: {
-    workerFactory,
-    // poolSize defaults to 8. More workers = more parallelism but
-    // also more memory. Too many can actually slow things down.
-    // poolSize: 8,
-  },
-  highlighterOptions: {
-    theme: "OpenCode",
-    // Optionally preload languages to avoid lazy-loading delays
-    // langs: ["typescript", "javascript", "css", "html"],
-  },
-})
+export const workerPool: WorkerPoolManager | undefined = (() => {
+  if (typeof window === "undefined") {
+    return undefined
+  }
+  return getOrCreateWorkerPoolSingleton({
+    poolOptions: {
+      workerFactory,
+      // poolSize defaults to 8. More workers = more parallelism but
+      // also more memory. Too many can actually slow things down.
+      // NOTE: 2 is probably better for OpenCode, as I think 8 might be
+      // a bit overkill, especially because Safari has a significantly slower
+      // boot up time for workers
+      poolSize: 2,
+    },
+    highlighterOptions: {
+      theme: "OpenCode",
+      // Optionally preload languages to avoid lazy-loading delays
+      // langs: ["typescript", "javascript", "css", "html"],
+    },
+  })
+})()