Decorations v3

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 FileDiffOptions,
   type FileOptions,
@@ -42,8 +44,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;
@@ -200,6 +202,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         | FileDiff<LineCommentMetadata>
         | VirtualizedFileDiff<LineCommentMetadata>;
       const options: FileDiffOptions<LineCommentMetadata> = {
+        expandUnchanged: true,
         theme: DEMO_THEME,
         themeType,
         diffStyle: unified ? 'unified' : 'split',
@@ -224,7 +227,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         // expandUnchanged: true,
 
         // Hover Decoration Snippets
-        enableGutterUtility: true,
+        // enableGutterUtility: true,
         // onGutterUtilityClick(event) {
         //   console.log('onGutterUtilityClick', event);
         // },
@@ -392,6 +395,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         fileDiff,
         lineAnnotations: fileAnnotations,
         fileContainer,
+        decorations: DECORATIONS_DIFF,
       });
       diffInstances.push(instance);
       hunkIndex++;
@@ -657,6 +661,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,
@@ -727,7 +790,7 @@ if (renderFileButton != null) {
       // },
 
       // Hover Decoration Snippets
-      enableGutterUtility: true,
+      // enableGutterUtility: true,
       // onGutterUtilityClick(event) {
       //   console.log('onGutterUtilityClick', event);
       // },
@@ -792,6 +855,7 @@ if (renderFileButton != null) {
       file,
       lineAnnotations: FAKE_LINE_ANNOTATIONS,
       fileContainer,
+      decorations: DECORATIONS,
     });
     fileInstances.push(instance);
   });
@@ -816,7 +880,7 @@ if (renderFileConflictButton != null) {
         overflow: wrap ? 'wrap' : 'scroll',
         renderAnnotation,
         enableLineSelection: true,
-        enableGutterUtility: true,
+        // enableGutterUtility: true,
         maxContextLines: 4,
 
         // Token Testing Helpers
@@ -902,15 +966,15 @@ function createCollapsedToggle(
 
 // 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/docs/app/diff-examples/CustomHunkSeparators/CustomHunkSeparators.tsx

@@ -195,7 +195,7 @@ export function CustomHunkSeparators({
       return;
     }
 
-    const options: FileDiffOptions<undefined> = {
+    const options: FileDiffOptions<undefined, undefined> = {
       ...(prerenderedDiff.options ?? {}),
       expansionLineCount: 5,
       hunkSeparators: (hunkData, instance) =>

apps/docs/app/docs/DocsCodeExample.tsx

@@ -12,20 +12,21 @@ import { IconBrandGithub } from '@pierre/icons';
 import { CopyCodeButton } from './CopyCodeButton';
 import { cn } from '@/lib/utils';
 
-interface DocsCodeExampleProps<LAnnotation> {
+interface DocsCodeExampleProps<LAnnotation, LDecoration> {
   file: FileContents;
-  options?: FileOptions<LAnnotation>;
+  options?: FileOptions<LAnnotation, LDecoration>;
   annotations?: LineAnnotation<LAnnotation>[];
   prerenderedHTML?: string;
-  style?: FileProps<LAnnotation>['style'];
+  style?: FileProps<LAnnotation, LDecoration>['style'];
   className?: string | undefined;
   /** Optional link to the source file on GitHub */
   href?: string;
 }
 
-export function DocsCodeExample<LAnnotation = undefined>(
-  props: DocsCodeExampleProps<LAnnotation>
-) {
+export function DocsCodeExample<
+  LAnnotation = undefined,
+  LDecoration = undefined,
+>(props: DocsCodeExampleProps<LAnnotation, LDecoration>) {
   const { href, ...rest } = props;
   return (
     <File

apps/docs/app/docs/Styling/constants.ts

@@ -39,14 +39,12 @@ export const STYLING_CODE_GLOBAL: PreloadFileOptions<undefined> = {
   --diffs-addition-color-override: yellow;
   --diffs-modified-color-override: purple;
 
-  /* Line selection colors - customize the highlighting when users
-   * select lines via enableLineSelection. These support light-dark()
-   * for automatic theme adaptation. */
+  /* Line selection colors - customize the staged selection tint that gets
+   * mixed into selected rows and their gutter/number cells. These support
+   * light-dark() for automatic theme adaptation. */
   --diffs-selection-color-override: rgb(37, 99, 235);
   --diffs-bg-selection-override: rgba(147, 197, 253, 0.28);
   --diffs-bg-selection-number-override: rgba(96, 165, 250, 0.55);
-  --diffs-bg-selection-background-override: rgba(96, 165, 250, 0.2);
-  --diffs-bg-selection-number-background-override: rgba(59, 130, 246, 0.4);
 
   /* Some basic variables for tweaking the layouts of some of the built in
    * components */

packages/diffs/src/components/AdvancedVirtualizedFileDiff.ts

@@ -27,7 +27,8 @@ let instanceId = -1;
 
 export class AdvancedVirtualizedFileDiff<
   LAnnotation = undefined,
-> extends FileDiff<LAnnotation> {
+  LDecoration = undefined,
+> extends FileDiff<LAnnotation, LDecoration> {
   override readonly __id: string = `virtualized-file-diff:${++instanceId}`;
 
   public unifiedTop: number;
@@ -41,7 +42,9 @@ export class AdvancedVirtualizedFileDiff<
 
   constructor(
     { unifiedTop, splitTop, fileDiff }: PositionProps,
-    options: FileDiffOptions<LAnnotation> = { theme: DEFAULT_THEMES },
+    options: FileDiffOptions<LAnnotation, LDecoration> = {
+      theme: DEFAULT_THEMES,
+    },
     metrics?: Partial<VirtualFileMetrics>,
     workerManager?: WorkerPoolManager | undefined
   ) {
@@ -217,8 +220,8 @@ export class AdvancedVirtualizedFileDiff<
   }
 }
 
-function getSpecs<LAnnotation>(
-  instance: AdvancedVirtualizedFileDiff<LAnnotation>,
+function getSpecs<LAnnotation, LDecoration>(
+  instance: AdvancedVirtualizedFileDiff<LAnnotation, LDecoration>,
   type: 'split' | 'unified' = 'split'
 ) {
   if (type === 'split') {

packages/diffs/src/components/AdvancedVirtualizer.ts

@@ -14,22 +14,25 @@ import type { FileDiffOptions } from './FileDiff';
 const ENABLE_RENDERING = true;
 const OVERSCROLL_SIZE = 500;
 
-interface RenderedItems<LAnnotations> {
-  instance: AdvancedVirtualizedFileDiff<LAnnotations>;
+interface RenderedItems<LAnnotations, LDecoration> {
+  instance: AdvancedVirtualizedFileDiff<LAnnotations, LDecoration>;
   element: HTMLElement;
 }
 
-export class AdvancedVirtualizer<LAnnotations = undefined> {
+export class AdvancedVirtualizer<
+  LAnnotations = undefined,
+  LDecoration = undefined,
+> {
   static __STOP = false;
   static __lastScrollPosition = 0;
 
   public type = 'advanced';
-  private files: AdvancedVirtualizedFileDiff<LAnnotations>[] = [];
+  private files: AdvancedVirtualizedFileDiff<LAnnotations, LDecoration>[] = [];
   private totalHeightUnified = 0;
   private totalHeightSplit = 0;
   private rendered: Map<
-    AdvancedVirtualizedFileDiff<LAnnotations>,
-    RenderedItems<LAnnotations>
+    AdvancedVirtualizedFileDiff<LAnnotations, LDecoration>,
+    RenderedItems<LAnnotations, LDecoration>
   > = new Map();
 
   private containerOffset = 0;
@@ -44,7 +47,7 @@ export class AdvancedVirtualizer<LAnnotations = undefined> {
 
   constructor(
     private container: HTMLElement,
-    private fileOptions: FileDiffOptions<LAnnotations> = {
+    private fileOptions: FileDiffOptions<LAnnotations, LDecoration> = {
       theme: DEFAULT_THEMES,
       // FIXME(amadeus): Fix selected lines crashing when scroll out of the window
       enableLineSelection: true,
@@ -103,7 +106,10 @@ export class AdvancedVirtualizer<LAnnotations = undefined> {
   addFiles(parsedPatches: ParsedPatch[]): void {
     for (const patch of parsedPatches) {
       for (const fileDiff of patch.files) {
-        const vFileDiff = new AdvancedVirtualizedFileDiff<LAnnotations>(
+        const vFileDiff = new AdvancedVirtualizedFileDiff<
+          LAnnotations,
+          LDecoration
+        >(
           {
             unifiedTop: this.totalHeightUnified,
             splitTop: this.totalHeightSplit,
@@ -164,8 +170,12 @@ export class AdvancedVirtualizer<LAnnotations = undefined> {
       }
     }
     let prevElement: HTMLElement | undefined;
-    let firstInstance: AdvancedVirtualizedFileDiff<LAnnotations> | undefined;
-    let lastInstance: AdvancedVirtualizedFileDiff<LAnnotations> | undefined;
+    let firstInstance:
+      | AdvancedVirtualizedFileDiff<LAnnotations, LDecoration>
+      | undefined;
+    let lastInstance:
+      | AdvancedVirtualizedFileDiff<LAnnotations, LDecoration>
+      | undefined;
     for (const instance of this.files) {
       // We can stop iterating when we get to elements after the window
       if (getInstanceSpecs(instance, diffStyle).top > bottom) {
@@ -272,7 +282,9 @@ export class AdvancedVirtualizer<LAnnotations = undefined> {
   };
 }
 
-function cleanupRenderedItem<LAnnotations>(item: RenderedItems<LAnnotations>) {
+function cleanupRenderedItem<LAnnotations, LDecoration>(
+  item: RenderedItems<LAnnotations, LDecoration>
+) {
   item.instance.cleanUp(true);
   item.element.remove();
   item.element.innerHTML = '';
@@ -281,8 +293,8 @@ function cleanupRenderedItem<LAnnotations>(item: RenderedItems<LAnnotations>) {
   }
 }
 
-function getInstanceSpecs<LAnnotations>(
-  instance: AdvancedVirtualizedFileDiff<LAnnotations>,
+function getInstanceSpecs<LAnnotations, LDecoration>(
+  instance: AdvancedVirtualizedFileDiff<LAnnotations, LDecoration>,
   diffStyle: 'split' | 'unified' = 'split'
 ) {
   if (diffStyle === 'split') {