Decorations v3

apps/demo/src/codeViewDemo.ts

@@ -40,21 +40,21 @@ interface CodeViewDraftCommentMetadata {
 
 interface CodeViewDemoInstance {
   instance: CodeView<CodeViewCommentMetadata>;
-  options: CodeViewOptions<CodeViewCommentMetadata>;
+  options: CodeViewOptions<CodeViewCommentMetadata, undefined>;
 }
 
 type CodeViewDemoAnnotation =
   | DiffLineAnnotation<CodeViewCommentMetadata>
   | LineAnnotation<CodeViewCommentMetadata>;
 
 type CodeViewDiffStyle = NonNullable<
-  CodeViewOptions<CodeViewCommentMetadata>['diffStyle']
+  CodeViewOptions<CodeViewCommentMetadata, undefined>['diffStyle']
 >;
 type CodeViewOverflow = NonNullable<
-  CodeViewOptions<CodeViewCommentMetadata>['overflow']
+  CodeViewOptions<CodeViewCommentMetadata, undefined>['overflow']
 >;
 type CodeViewThemeType = NonNullable<
-  CodeViewOptions<CodeViewCommentMetadata>['themeType']
+  CodeViewOptions<CodeViewCommentMetadata, undefined>['themeType']
 >;
 
 interface RenderDemoCodeViewOptions {
@@ -93,7 +93,7 @@ export function renderDemoCodeView(
   setupCodeViewWrapper(wrapper);
 
   const items = createCodeViewItems(parsedPatches);
-  const options: CodeViewOptions<CodeViewCommentMetadata> = {
+  const options: CodeViewOptions<CodeViewCommentMetadata, undefined> = {
     // __devOnlyValidateItemHeights: true,
     theme,
     themeType,

apps/demo/src/main.ts

@@ -1,9 +1,11 @@
 import {
   DEFAULT_THEMES,
+  type DiffDecorationItem,
   DIFFS_TAG_NAME,
   type DiffsThemeNames,
   File,
   type FileContents,
+  type FileDecorationItem,
   FileDiff,
   type FileDiffContentsLoader,
   type FileDiffOptions,
@@ -60,8 +62,8 @@ import {
   renderDiffAnnotation,
 } from './utils/renderAnnotation';
 
-// FAKE_DIFF_LINE_ANNOTATIONS.length = 0;
-// FAKE_LINE_ANNOTATIONS.length = 0;
+FAKE_DIFF_LINE_ANNOTATIONS.length = 0;
+FAKE_LINE_ANNOTATIONS.length = 0;
 const DEMO_THEME: DiffsThemeNames | ThemesType = DEFAULT_THEMES;
 const WORKER_POOL = true;
 const VIRTUALIZE = true;
@@ -418,6 +420,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
       const fileAnnotations = patchAnnotations[hunkIndex];
       let isEditing = false;
       const options: FileDiffOptions<LineCommentMetadata> = {
+        expandUnchanged: true,
         theme: DEMO_THEME,
         themeType,
         diffStyle: unified ? 'unified' : 'split',
@@ -476,7 +479,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         // expandUnchanged: true,
 
         // Hover Decoration Snippets
-        enableGutterUtility: true,
+        // enableGutterUtility: true,
         // onGutterUtilityClick(event) {
         //   console.log('onGutterUtilityClick', event);
         // },
@@ -646,6 +649,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         fileDiff,
         lineAnnotations: fileAnnotations,
         fileContainer,
+        decorations: DECORATIONS_DIFF,
       });
       diffInstances.push(instance);
       hunkIndex++;
@@ -944,6 +948,65 @@ const fileExample: FileContents | Promise<FileContents> = (() => {
   };
 })();
 
+const DECORATIONS: FileDecorationItem[] = [
+  {
+    lineNumber: 1,
+    bar: true,
+    /* color: 'red' */
+  },
+  {
+    lineNumber: 2,
+    endLineNumber: 4,
+    background: true,
+    /* color: 'blue' */
+  },
+  {
+    lineNumber: 5,
+    endLineNumber: 11,
+    bar: true,
+    // background: '#123456',
+    // color: 'orange',
+  },
+];
+
+const DECORATIONS_DIFF: DiffDecorationItem[] = [
+  {
+    lineNumber: 2,
+    endLineNumber: 6,
+    side: 'additions',
+    bar: true,
+    // color: 'red',
+    background: 'red',
+  },
+  {
+    lineNumber: 5,
+    endLineNumber: 6,
+    side: 'additions',
+    bar: true,
+    background: true,
+  },
+  {
+    lineNumber: 7,
+    side: 'additions',
+    bar: true,
+    background: true,
+  },
+  {
+    lineNumber: 9,
+    endLineNumber: 15,
+    side: 'additions',
+    bar: true,
+    background: true,
+  },
+  {
+    lineNumber: 12,
+    endLineNumber: 15,
+    side: 'additions',
+    bar: true,
+    background: true,
+  },
+];
+
 const fileConflict: FileContents = {
   name: 'file.ts',
   contents: FILE_CONFLICT,
@@ -1140,7 +1203,7 @@ if (renderFileButton != null) {
       // },
 
       // Hover Decoration Snippets
-      enableGutterUtility: true,
+      // enableGutterUtility: true,
       // onGutterUtilityClick(event) {
       //   console.log('onGutterUtilityClick', event);
       // },
@@ -1207,6 +1270,7 @@ if (renderFileButton != null) {
       file,
       lineAnnotations: FAKE_LINE_ANNOTATIONS,
       fileContainer,
+      decorations: DECORATIONS,
     });
     fileInstances.push(instance);
   });
@@ -1238,7 +1302,7 @@ if (renderFileConflictButton != null) {
             }
           : null),
         enableLineSelection: true,
-        enableGutterUtility: true,
+        // enableGutterUtility: true,
         maxContextLines: 4,
 
         // Token Testing Helpers
@@ -1351,15 +1415,15 @@ function createToggle(
 
 // For quick testing diffs
 // FAKE_DIFF_LINE_ANNOTATIONS.length = 0;
-// (() => {
-//   const oldFile = {
-//     name: 'file_old.ts',
-//     contents: FILE_OLD,
-//   };
-//   const newFile = {
-//     name: 'file_new.ts',
-//     contents: FILE_NEW,
-//   };
-//   const parsed = parseDiffFromFile(oldFile, newFile);
-//   renderDiff([{ files: [parsed] }], poolManager);
-// })();
+(() => {
+  const oldFile = {
+    name: 'file_old.ts',
+    contents: FILE_OLD,
+  };
+  const newFile = {
+    name: 'file_new.ts',
+    contents: FILE_NEW,
+  };
+  const parsed = parseDiffFromFile(oldFile, newFile);
+  renderDiff([{ files: [parsed] }], poolManager);
+})();

apps/diffshub/components/DiffsHubSidebar.tsx

@@ -71,7 +71,7 @@ interface DiffsHubSidebarProps {
   source: DiffsHubFileTreeSource;
   streaming: boolean;
   themeCycle: ThemeCycleControls;
-  viewerRef: RefObject<CodeViewHandle<CommentMetadata> | null>;
+  viewerRef: RefObject<CodeViewHandle<CommentMetadata, undefined> | null>;
 }
 
 export const DiffsHubSidebar = memo(function DiffsHubSidebar({

apps/diffshub/components/DiffsHubViewer.tsx

@@ -40,7 +40,7 @@ function getNextItemVersion(item: CodeViewItem<CommentMetadata>): number {
 }
 
 function updateViewerDiffItem(
-  viewer: CodeViewHandle<CommentMetadata>,
+  viewer: CodeViewHandle<CommentMetadata, undefined>,
   itemId: string,
   updateItem: (item: CodeViewDiffItem<CommentMetadata>) => boolean
 ): CodeViewDiffItem<CommentMetadata> | undefined {
@@ -73,7 +73,7 @@ interface DiffsHubViewerProps {
   lineNumbers: boolean;
   scrollRef: RefObject<HTMLDivElement | null>;
   themeType: ThemeTypes;
-  viewerRef: RefObject<CodeViewHandle<CommentMetadata> | null>;
+  viewerRef: RefObject<CodeViewHandle<CommentMetadata, undefined> | null>;
   initialItems: CodeViewItem<CommentMetadata>[];
   loadDiffFiles?: FileDiffContentsLoader;
   onLineLinkChange(selection: CodeViewLineSelection | null): void;
@@ -139,7 +139,7 @@ export const DiffsHubViewer = memo(function DiffsHubViewer({
   );
 
   const handleViewerRef = useStableCallback(
-    (viewer: CodeViewHandle<CommentMetadata> | null) => {
+    (viewer: CodeViewHandle<CommentMetadata, undefined> | null) => {
       viewerRef.current = viewer;
       if (viewer != null) {
         onViewerReady();
@@ -424,7 +424,7 @@ export const DiffsHubViewer = memo(function DiffsHubViewer({
 
   // NOTE(amadeus): For some insane reason, the react compiler did not know how
   // to properly memoize this, so we pulled it into a `useMemo` for safety...
-  const options: CodeViewOptions<CommentMetadata> = useMemo(
+  const options: CodeViewOptions<CommentMetadata, undefined> = useMemo(
     () =>
       ({
         // Use this to validate itemMetrics when changing layout with unsafeCSS.
@@ -453,7 +453,7 @@ export const DiffsHubViewer = memo(function DiffsHubViewer({
         onLineSelectionEnd(range, context) {
           handleLineSelectionEnd(range, context.item);
         },
-      }) satisfies CodeViewOptions<CommentMetadata>,
+      }) satisfies CodeViewOptions<CommentMetadata, undefined>,
     [
       diffIndicators,
       diffStyle,

apps/diffshub/components/ReviewUI.tsx

@@ -135,7 +135,9 @@ function ReviewUIInner({ domain, initialUrl, path }: ReviewUIProps) {
   });
 
   const scrollRef = useRef<HTMLDivElement>(null);
-  const viewerRef = useRef<CodeViewHandle<CommentMetadata> | null>(null);
+  const viewerRef = useRef<CodeViewHandle<CommentMetadata, undefined> | null>(
+    null
+  );
   const loadDiffFiles = useMemo(
     () =>
       domain == null && hasGitHubToken

apps/diffshub/components/ThemedCodeView.tsx

@@ -13,7 +13,7 @@ import type { DiffThemeInput } from '@/lib/theme/diffThemeProps';
 
 type ThemedCodeViewComponent = <LAnnotation = undefined>(
   props: CodeViewProps<LAnnotation> & {
-    ref?: Ref<CodeViewHandle<LAnnotation>>;
+    ref?: Ref<CodeViewHandle<LAnnotation, undefined>>;
     theme?: DiffThemeInput;
   }
 ) => React.JSX.Element;
@@ -27,7 +27,7 @@ export const ThemedCodeView: ThemedCodeViewComponent = <
   theme,
   ...props
 }: CodeViewProps<LAnnotation> & {
-  ref?: Ref<CodeViewHandle<LAnnotation>>;
+  ref?: Ref<CodeViewHandle<LAnnotation, undefined>>;
   theme?: DiffThemeInput;
 }): React.JSX.Element => {
   const diffTheme = useDiffThemeProps(theme);

apps/diffshub/components/ThemedFile.tsx

@@ -7,9 +7,10 @@ import { useDiffThemeProps } from './useDiffThemeProps';
 import { useWorkerDiffTheme } from './useWorkerDiffTheme';
 import type { DiffThemeInput } from '@/lib/theme/diffThemeProps';
 
-interface ThemedFileProps<
-  LAnnotation = undefined,
-> extends FileProps<LAnnotation> {
+interface ThemedFileProps<LAnnotation = undefined> extends FileProps<
+  LAnnotation,
+  undefined
+> {
   // Names-now override (omitted => follow the provider/source).
   theme?: DiffThemeInput;
 }
@@ -33,7 +34,7 @@ export function ThemedFile<LAnnotation = undefined>({
     [diffTheme, options]
   );
   return (
-    <File<LAnnotation>
+    <File<LAnnotation, undefined>
       {...props}
       disableWorkerPool={disableWorkerPool}
       options={themedOptions}

apps/diffshub/components/ThemedFileDiff.tsx

@@ -7,9 +7,10 @@ import { useDiffThemeProps } from './useDiffThemeProps';
 import { useWorkerDiffTheme } from './useWorkerDiffTheme';
 import type { DiffThemeInput } from '@/lib/theme/diffThemeProps';
 
-interface ThemedFileDiffProps<
-  LAnnotation = undefined,
-> extends FileDiffProps<LAnnotation> {
+interface ThemedFileDiffProps<LAnnotation = undefined> extends FileDiffProps<
+  LAnnotation,
+  undefined
+> {
   // Names-now override (omitted => follow the provider/source).
   theme?: DiffThemeInput;
 }
@@ -33,7 +34,7 @@ export function ThemedFileDiff<LAnnotation = undefined>({
     [diffTheme, options]
   );
   return (
-    <FileDiff<LAnnotation>
+    <FileDiff<LAnnotation, undefined>
       {...props}
       disableWorkerPool={disableWorkerPool}
       options={themedOptions}

apps/diffshub/components/WorkerPoolStatus.tsx

@@ -36,7 +36,7 @@ class AutoScrollTester<LAnnotation> {
   private direction = 1;
 
   constructor(
-    private viewerRef: RefObject<CodeViewHandle<LAnnotation> | null>,
+    private viewerRef: RefObject<CodeViewHandle<LAnnotation, undefined> | null>,
     private onStateChange?: (running: boolean) => unknown
   ) {}
 
@@ -102,7 +102,7 @@ interface WorkerPoolStatusProps {
   expanded: boolean;
   onToggle(): void;
   themeCycle: ThemeCycleControls;
-  viewerRef: RefObject<CodeViewHandle<CommentMetadata> | null>;
+  viewerRef: RefObject<CodeViewHandle<CommentMetadata, undefined> | null>;
 }
 
 export const WorkerPoolStatus = memo(function WorkerPoolStatus({
@@ -146,7 +146,7 @@ interface StatsDisplayProps {
   onToggle(): void;
   stats: WorkerStats;
   themeCycle: ThemeCycleControls;
-  viewerRef: RefObject<CodeViewHandle<CommentMetadata> | null>;
+  viewerRef: RefObject<CodeViewHandle<CommentMetadata, undefined> | null>;
 }
 
 // Map worker pool status to a single icon component + color so the legend row

apps/diffshub/components/usePatchLoader.ts

@@ -60,7 +60,7 @@ interface UsePatchLoaderOptions {
   githubTokenVersion?: number | string;
   onLoadStart(): void;
   path: string;
-  viewerRef: RefObject<CodeViewHandle<CommentMetadata> | null>;
+  viewerRef: RefObject<CodeViewHandle<CommentMetadata, undefined> | null>;
 }
 
 interface UsePatchLoaderResult {
@@ -529,7 +529,7 @@ function getLineHashApplyKey(viewerKey: number, hash: string): string {
 }
 
 function applyDiffsHubLineHashTarget(
-  viewer: CodeViewHandle<CommentMetadata>,
+  viewer: CodeViewHandle<CommentMetadata, undefined>,
   target: DiffsHubLineHashTarget
 ): boolean {
   const item = viewer.getItem(target.itemId);
@@ -566,7 +566,7 @@ function applyDiffsHubLineHashTarget(
 }
 
 function applyDiffsHubItemIdRename(
-  viewer: CodeViewHandle<CommentMetadata> | null,
+  viewer: CodeViewHandle<CommentMetadata, undefined> | null,
   rename: DiffsHubItemIdRename
 ): void {
   viewer?.updateItemId(rename.oldId, rename.newId);

apps/diffshub/lib/test/reactOverrides.test.tsx

@@ -100,7 +100,7 @@ describe('React themed component overrides', () => {
   test('ThemedCodeView preserves caller themeType while applying the active theme pair', async () => {
     const container = document.createElement('div');
     document.body.append(container);
-    const codeViewRef = createRef<CodeViewHandle<undefined>>();
+    const codeViewRef = createRef<CodeViewHandle<undefined, undefined>>();
     let root: Root | undefined;
 
     await act(async () => {