Hydration Performance Improvements

apps/docs/app/diff-examples/Annotations/constants.ts

@@ -1,4 +1,5 @@
 import {
+  DEFAULT_THEMES,
   type DiffLineAnnotation,
   type FileContents,
   parseDiffFromFile,
@@ -69,7 +70,8 @@ def verify_token(token: str) -> Optional[dict]:
 `,
     },
     options: {
-      theme: 'pierre-dark',
+      theme: DEFAULT_THEMES,
+      themeType: 'dark',
       diffStyle: 'unified',
       unsafeCSS: CustomScrollbarCSS,
     },
@@ -141,7 +143,8 @@ export const ACCEPT_REJECT_EXAMPLE: PreloadFileDiffOptions<AcceptRejectMetadata>
   {
     fileDiff: parseDiffFromFile(ACCEPT_REJECT_OLD_FILE, ACCEPT_REJECT_NEW_FILE),
     options: {
-      theme: 'pierre-dark',
+      theme: DEFAULT_THEMES,
+      themeType: 'dark',
       diffStyle: 'unified',
     },
     annotations: ACCEPT_REJECT_ANNOTATIONS,

apps/docs/app/diff-examples/ArbitraryFiles/constants.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_THEMES } from '@pierre/diffs';
 import type { PreloadMultiFileDiffOptions } from '@pierre/diffs/ssr';
 
 import { CustomScrollbarCSS } from '@/components/CustomScrollbarCSS';
@@ -19,7 +20,8 @@ export const ARBITRARY_DIFF_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
 `,
   },
   options: {
-    theme: 'pierre-dark',
+    theme: DEFAULT_THEMES,
+    themeType: 'dark',
     diffStyle: 'unified',
     unsafeCSS: CustomScrollbarCSS,
   },

apps/docs/app/diff-examples/CustomHeader/CustomHeader.tsx

@@ -72,31 +72,23 @@ export function CustomHeader({ prerenderedDiff }: CustomHeaderProps) {
               }
             : undefined
         }
-        renderHeaderPrefix={
-          headerMode === 'metadata'
-            ? () => {
-                return (
-                  <HeaderPrefix
-                    toggleCollapsed={toggleCollapsed}
-                    collapsed={collapsed}
-                  />
-                );
-              }
-            : undefined
-        }
-        renderHeaderMetadata={
-          headerMode === 'metadata'
-            ? () => {
-                return (
-                  <ViewedButton
-                    isViewed={isViewed}
-                    onClick={toggleViewed}
-                    className="mr-[-8px]"
-                  />
-                );
-              }
-            : undefined
-        }
+        renderHeaderPrefix={() => {
+          return (
+            <HeaderPrefix
+              toggleCollapsed={toggleCollapsed}
+              collapsed={collapsed}
+            />
+          );
+        }}
+        renderHeaderMetadata={() => {
+          return (
+            <ViewedButton
+              isViewed={isViewed}
+              onClick={toggleViewed}
+              className="mr-[-8px]"
+            />
+          );
+        }}
       />
     </div>
   );

apps/docs/app/diff-examples/CustomHeader/constants.ts

@@ -1,4 +1,4 @@
-import { type FileContents } from '@pierre/diffs';
+import { DEFAULT_THEMES, type FileContents } from '@pierre/diffs';
 import type { PreloadMultiFileDiffOptions } from '@pierre/diffs/ssr';
 
 import { CustomScrollbarCSS } from '@/components/CustomScrollbarCSS';
@@ -68,7 +68,7 @@ export const CUSTOM_HEADER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
   oldFile: CUSTOM_HEADER_OLD_FILE,
   newFile: CUSTOM_HEADER_NEW_FILE,
   options: {
-    theme: { dark: 'pierre-dark', light: 'pierre-light' },
+    theme: DEFAULT_THEMES,
     themeType: 'dark',
     diffStyle: 'split',
     disableBackground: false,

apps/docs/app/diff-examples/CustomHunkSeparators/CustomHunkSeparators.tsx

@@ -254,11 +254,6 @@ export function CustomHunkSeparators({
       ) : (
         <MultiFileDiff
           {...prerenderedDiff}
-          prerenderedHTML={
-            hunkSeparators === initialSeparator
-              ? prerenderedDiff.prerenderedHTML
-              : undefined
-          }
           className="overflow-hidden rounded-lg border dark:border-neutral-800"
           options={{
             ...prerenderedDiff.options,

apps/docs/app/diff-examples/CustomHunkSeparators/constants.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_THEMES } from '@pierre/diffs';
 import type { PreloadMultiFileDiffOptions } from '@pierre/diffs/ssr';
 
 import { CustomScrollbarCSS } from '@/components/CustomScrollbarCSS';
@@ -61,7 +62,8 @@ export const CUSTOM_HUNK_SEPARATORS_EXAMPLE: PreloadMultiFileDiffOptions<undefin
       contents: createTaskSummarySource('new'),
     },
     options: {
-      theme: 'pierre-dark',
+      theme: DEFAULT_THEMES,
+      themeType: 'dark',
       diffStyle: 'split',
       expansionLineCount: 5,
       hunkSeparators: 'line-info',

apps/docs/app/diff-examples/DiffStyles/DiffStyles.tsx

@@ -52,13 +52,14 @@ const diffStyleOptions = [
 interface DiffStylesProps {
   prerenderedDiff: PreloadMultiFileDiffResult<undefined>;
 }
+
 export function DiffStyles({
   prerenderedDiff: { options, ...props },
 }: DiffStylesProps) {
   const [diffIndicators, setDiffStyle] = useState<'classic' | 'bars' | 'none'>(
     'bars'
   );
-  const [lineDiffStyle, setLineDiffStyle] = useState<
+  const [lineDiffType, setLineDiffType] = useState<
     'word-alt' | 'word' | 'char' | 'none'
   >('word-alt');
   const [disableBackground, setDisableBackground] = useState(false);
@@ -110,8 +111,8 @@ export function DiffStyles({
               >
                 <IconCodeStyleInline />
                 {}
-                {diffStyleOptions.find((opt) => opt.value === lineDiffStyle)
-                  ?.label ?? lineDiffStyle}
+                {diffStyleOptions.find((opt) => opt.value === lineDiffType)
+                  ?.label ?? lineDiffType}
                 <IconChevronSm className="text-muted-foreground ml-auto" />
               </Button>
             </DropdownMenuTrigger>
@@ -123,11 +124,11 @@ export function DiffStyles({
               {diffStyleOptions.map((option) => (
                 <DropdownMenuItem
                   key={option.value}
-                  onClick={() => setLineDiffStyle(option.value)}
-                  selected={lineDiffStyle === option.value}
+                  onClick={() => setLineDiffType(option.value)}
+                  selected={lineDiffType === option.value}
                   className="flex items-start gap-2 py-2"
                 >
-                  {lineDiffStyle === option.value ? (
+                  {lineDiffType === option.value ? (
                     <IconCheck className="mt-[1px]" />
                   ) : (
                     <div className="h-4 w-4" />
@@ -213,14 +214,14 @@ export function DiffStyles({
         className="diff-container"
         options={{
           ...options,
-          theme: 'pierre-dark',
-          diffStyle: 'split',
           diffIndicators,
           disableBackground,
-          overflow: overflow,
-          lineDiffType: lineDiffStyle,
+          overflow,
+          lineDiffType,
           disableLineNumbers,
         }}
+        // Because we need to change lineDiffType, we can't use the WorkerPool
+        disableWorkerPool
       />
     </div>
   );

apps/docs/app/diff-examples/DiffStyles/constants.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_THEMES } from '@pierre/diffs';
 import type { PreloadMultiFileDiffOptions } from '@pierre/diffs/ssr';
 
 import { CustomScrollbarCSS } from '@/components/CustomScrollbarCSS';
@@ -45,7 +46,8 @@ pub fn main() !void {
 `,
   },
   options: {
-    theme: 'pierre-dark',
+    theme: DEFAULT_THEMES,
+    themeType: 'dark',
     diffStyle: 'split',
     overflow: 'wrap',
     disableLineNumbers: false,

apps/docs/app/diff-examples/FontStyles/constants.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_THEMES } from '@pierre/diffs';
 import type { PreloadMultiFileDiffOptions } from '@pierre/diffs/ssr';
 
 import { CustomScrollbarCSS } from '@/components/CustomScrollbarCSS';
@@ -131,7 +132,8 @@ func (c *Cache) onEviction(key string, value interface{}) {
 `,
   },
   options: {
-    theme: 'pierre-dark',
+    theme: DEFAULT_THEMES,
+    themeType: 'dark',
     diffStyle: 'unified',
     unsafeCSS: CustomScrollbarCSS,
   },

apps/docs/app/diff-examples/LineSelection/constants.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_THEMES } from '@pierre/diffs';
 import type { PreloadMultiFileDiffOptions } from '@pierre/diffs/ssr';
 
 import { CustomScrollbarCSS } from '@/components/CustomScrollbarCSS';
@@ -118,7 +119,7 @@ public:
 `,
   },
   options: {
-    theme: { dark: 'pierre-dark', light: 'pierre-light' },
+    theme: DEFAULT_THEMES,
     themeType: 'dark',
     diffStyle: 'split',
     disableBackground: false,

apps/docs/app/diff-examples/MergeConflict/MergeConflict.tsx

@@ -5,7 +5,12 @@ import {
   type UnresolvedFileReactOptions,
 } from '@pierre/diffs/react';
 import type { PreloadUnresolvedFileResult } from '@pierre/diffs/ssr';
-import { IconColorDark, IconColorLight, IconRefresh } from '@pierre/icons';
+import {
+  IconColorAuto,
+  IconColorDark,
+  IconColorLight,
+  IconRefresh,
+} from '@pierre/icons';
 import { useMemo, useState } from 'react';
 
 import { FeatureHeader } from '../FeatureHeader';
@@ -21,8 +26,14 @@ export function MergeConflict({ prerenderedFile }: MergeConflictProps) {
   const [hasResolved, setHasResolved] = useState(false);
 
   const [themeType, setThemeType] = useState<'light' | 'dark' | 'system'>(
-    () => prerenderedFile.options?.themeType ?? 'dark'
+    () => prerenderedFile.options?.themeType ?? 'system'
   );
+  const borderClass =
+    themeType === 'light'
+      ? 'border-neutral-200'
+      : themeType === 'dark'
+        ? 'border-neutral-800'
+        : 'border-neutral-200 dark:border-neutral-800';
 
   // NOTE(amadeus): These server render APIs definitely suck, and it's
   // something we need to take a pass at.  Curious if it's something Nicolas
@@ -70,8 +81,14 @@ export function MergeConflict({ prerenderedFile }: MergeConflictProps) {
         </Button>
         <ButtonGroup
           value={themeType}
-          onValueChange={(value) => setThemeType(value as 'light' | 'dark')}
+          onValueChange={(value) =>
+            setThemeType(value as 'light' | 'dark' | 'system')
+          }
         >
+          <ButtonGroupItem value="system">
+            <IconColorAuto />
+            Auto
+          </ButtonGroupItem>
           <ButtonGroupItem value="light">
             <IconColorLight />
             Light
@@ -103,7 +120,7 @@ export function MergeConflict({ prerenderedFile }: MergeConflictProps) {
           file={prerenderedFile.file}
           options={options}
           prerenderedHTML={prerenderedFile.prerenderedHTML}
-          className={`overflow-hidden rounded-lg border ${themeType === 'light' ? 'border-neutral-200' : 'border-neutral-800'}`}
+          className={`overflow-hidden rounded-lg border ${borderClass}`}
           // NOTE(amadeus): Test code, I need to better solve the whole server/vanilla/custom js thing with react
           // renderMergeConflictUtility={(action, getInstance) => {
           //   return (

apps/docs/app/diff-examples/MergeConflict/constants.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_THEMES } from '@pierre/diffs';
 import type { PreloadUnresolvedFileOptions } from '@pierre/diffs/ssr';
 
 import { CustomScrollbarCSS } from '@/components/CustomScrollbarCSS';
@@ -95,8 +96,8 @@ export async function validateSession(token: string): Promise<Session | null> {
 `,
   },
   options: {
+    theme: DEFAULT_THEMES,
     themeType: 'dark',
-    theme: { light: 'pierre-light', dark: 'pierre-dark' },
     overflow: 'wrap',
     diffIndicators: 'none',
     unsafeCSS: CustomScrollbarCSS,

apps/docs/app/diff-examples/ShikiThemes/ShikiThemes.tsx

@@ -222,10 +222,13 @@ export function ShikiThemes({
         {...props}
         className="overflow-hidden rounded-lg border dark:border-neutral-800"
         options={{
-          diffStyle: 'split',
-          themeType: selectedColorMode,
+          ...options,
           theme: { dark: selectedDarkTheme, light: selectedLightTheme },
+          themeType: selectedColorMode,
         }}
+        // WorkerPool is disabled because we need to be able to change themes
+        // without changing our whole page
+        disableWorkerPool
       />
       <PierreThemeFootnote />
     </div>

apps/docs/app/diff-examples/ShikiThemes/constants.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_THEMES } from '@pierre/diffs';
 import type { PreloadMultiFileDiffOptions } from '@pierre/diffs/ssr';
 
 import { CustomScrollbarCSS } from '@/components/CustomScrollbarCSS';
@@ -37,7 +38,7 @@ fn add(a: i32, b: i32) -> i32 {
   },
   options: {
     diffStyle: 'split',
-    theme: { dark: 'pierre-dark', light: 'pierre-light' },
+    theme: DEFAULT_THEMES,
     unsafeCSS: CustomScrollbarCSS,
     enableLineSelection: true,
   },

apps/docs/app/diff-examples/SplitUnified/SplitUnified.tsx

@@ -15,7 +15,9 @@ interface SplitUnifiedProps {
 export function SplitUnified({
   prerenderedDiff: { options, ...props },
 }: SplitUnifiedProps) {
-  const [diffStyle, setDiffStyle] = useState<'split' | 'unified'>('split');
+  const [diffStyle, setDiffStyle] = useState<'split' | 'unified'>(
+    options?.diffStyle ?? 'split'
+  );
   return (
     <div className="scroll-mt-20 space-y-5" id="layout">
       <FeatureHeader
@@ -39,10 +41,7 @@ export function SplitUnified({
       <MultiFileDiff
         {...props}
         className="diff-container"
-        options={{
-          theme: options?.theme ?? 'pierre-dark',
-          diffStyle,
-        }}
+        options={{ ...options, diffStyle }}
       />
     </div>
   );

apps/docs/app/diff-examples/SplitUnified/constants.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_THEMES } from '@pierre/diffs';
 import type { PreloadMultiFileDiffOptions } from '@pierre/diffs/ssr';
 
 import { CustomScrollbarCSS } from '@/components/CustomScrollbarCSS';
@@ -143,7 +144,8 @@ export function createHunkSeparator() {
 `,
   },
   options: {
-    theme: 'pierre-dark',
+    theme: DEFAULT_THEMES,
+    themeType: 'dark',
     diffStyle: 'split',
     unsafeCSS: CustomScrollbarCSS,
   },

apps/docs/app/docs/page.tsx

@@ -139,7 +139,13 @@ export default function DocsPage() {
 async function MergeConflictDemoSection() {
   return (
     <MergeConflict
-      prerenderedFile={await preloadUnresolvedFile(MERGE_CONFLICT_EXAMPLE)}
+      prerenderedFile={await preloadUnresolvedFile({
+        ...MERGE_CONFLICT_EXAMPLE,
+        options: {
+          ...MERGE_CONFLICT_EXAMPLE.options,
+          themeType: 'system',
+        },
+      })}
     />
   );
 }