Hydration Performance Improvements

[amadeus]

Thru a convo with the Linear folks, I became aware of some gnarly page load issues on Safari. Most of this was due to the fact that we don't use the WorkerPool on diffs.com.

Mostly this is due to the somewhat focused/limited nature of that API (it looks you into one specific theme/dark/light setup and lineDiffType.

It also also had me do a bit of a deep dive into overall component hydration and I found a few areas that we could tighten up and harden.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pierrejs-diff-demo	Ready	Preview	Mar 27, 2026 6:45am
pierrejs-docs	Ready	Preview	Mar 27, 2026 6:45am

[Copilot]

Pull request overview

Improves client hydration/page-load performance (notably Safari) by leaning on WorkerPoolManager for AST/highlighter work when available, hardening the hydrate path, and updating the docs site to preload/standardize themes and opt out of WorkerPool when live option changes require it.

Changes:

• Adjust renderers’ hydration behavior to only preload ASTs when a WorkerPool is active, and refactor component hydration into clearer hydrateElements/hydrationSetup phases.
• Add disableWorkerPool to React APIs to selectively opt out of WorkerPool usage for dynamic option changes (themes/lineDiffType).
• Update docs app to provide WorkerPool context, preload the highlighter, and standardize examples on DEFAULT_THEMES + themeType.

Reviewed changes

Copilot reviewed 36 out of 36 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/diffs/src/renderers/FileRenderer.ts	Stops non-worker hydrate from kicking off async highlight; only preloads AST via WorkerPool.
packages/diffs/src/renderers/DiffHunksRenderer.ts	Same as above for diff hunks rendering/hydration.
packages/diffs/src/react/utils/useUnresolvedFileInstance.ts	Threads disableWorkerPool through instance creation.
packages/diffs/src/react/utils/useFileInstance.ts	Threads disableWorkerPool through instance creation.
packages/diffs/src/react/utils/useFileDiffInstance.ts	Threads disableWorkerPool through instance creation.
packages/diffs/src/react/types.ts	Exposes disableWorkerPool?: boolean on React FileProps.
packages/diffs/src/react/WorkerPoolContext.tsx	Avoids instance counting when no pool is created (SSR/no-window).
packages/diffs/src/react/UnresolvedFile.tsx	Adds disableWorkerPool prop and forwards it to the hook.
packages/diffs/src/react/PatchDiff.tsx	Adds disableWorkerPool prop and forwards it to the hook.
packages/diffs/src/react/MultiFileDiff.tsx	Adds disableWorkerPool prop and forwards it to the hook.
packages/diffs/src/react/FileDiff.tsx	Adds disableWorkerPool prop and forwards it to the hook.
packages/diffs/src/react/File.tsx	Adds disableWorkerPool prop and forwards it to the hook.
packages/diffs/src/components/UnresolvedFile.ts	Reuses base hydration helpers (hydrateElements/hydrationSetup) instead of custom DOM scanning.
packages/diffs/src/components/FileDiff.ts	Refactors hydrate path; separates DOM discovery vs setup; minor attribute checks tweak.
packages/diffs/src/components/File.ts	Refactors hydrate path; adds syncCodeNodeFromPre helper; ensures renderer options set for header mode.
apps/docs/components/WorkerPoolContext.tsx	Makes pool/highlighter options configurable; expands default language set.
apps/docs/components/PreloadHighlighter.tsx	New client component to preload Shiki highlighter on mount.
apps/docs/app/page.tsx	Wraps home page with WorkerPool context; tweaks example preload options.
apps/docs/app/layout.tsx	Adds PreloadHighlighter to layout for earlier client-side warmup.
apps/docs/app/docs/page.tsx	Updates merge-conflict demo preload options (themeType system).
apps/docs/app/diff-examples/SplitUnified/constants.ts	Switches examples to DEFAULT_THEMES + explicit themeType.
apps/docs/app/diff-examples/SplitUnified/SplitUnified.tsx	Initializes state from preloaded options; forwards options more directly.
apps/docs/app/diff-examples/ShikiThemes/constants.ts	Switches example theme config to DEFAULT_THEMES.
apps/docs/app/diff-examples/ShikiThemes/ShikiThemes.tsx	Disables WorkerPool for live theme switching without full-page changes.
apps/docs/app/diff-examples/MergeConflict/constants.ts	Switches merge-conflict example to DEFAULT_THEMES.
apps/docs/app/diff-examples/MergeConflict/MergeConflict.tsx	Adds “system” theme option and border styling logic for it.
apps/docs/app/diff-examples/LineSelection/constants.ts	Switches example theme config to DEFAULT_THEMES.
apps/docs/app/diff-examples/FontStyles/constants.ts	Switches example theme config to DEFAULT_THEMES + explicit themeType.
apps/docs/app/diff-examples/DiffStyles/constants.ts	Switches example theme config to DEFAULT_THEMES + explicit themeType.
apps/docs/app/diff-examples/DiffStyles/DiffStyles.tsx	Renames state to lineDiffType; disables WorkerPool for live line-diff switching.
apps/docs/app/diff-examples/CustomHunkSeparators/constants.ts	Switches example theme config to DEFAULT_THEMES + explicit themeType.
apps/docs/app/diff-examples/CustomHunkSeparators/CustomHunkSeparators.tsx	Simplifies prerenderedHTML handling for the MultiFileDiff branch.
apps/docs/app/diff-examples/CustomHeader/constants.ts	Switches example theme config to DEFAULT_THEMES.
apps/docs/app/diff-examples/CustomHeader/CustomHeader.tsx	Updates header render props wiring (but see review comment).
apps/docs/app/diff-examples/ArbitraryFiles/constants.ts	Switches example theme config to DEFAULT_THEMES + explicit themeType.
apps/docs/app/diff-examples/Annotations/constants.ts	Switches annotation examples to DEFAULT_THEMES + explicit themeType.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.