Decorations v3

apps/demo/src/codeViewDemo.ts

@@ -36,21 +36,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 {
@@ -87,8 +87,8 @@ export function renderDemoCodeView(
   setupCodeViewWrapper(wrapper);
 
   const items = createCodeViewItems(parsedPatches);
-  let viewer: CodeView<CodeViewCommentMetadata>;
-  const options: CodeViewOptions<CodeViewCommentMetadata> = {
+  let viewer: CodeView<CodeViewCommentMetadata, undefined>;
+  const options: CodeViewOptions<CodeViewCommentMetadata, undefined> = {
     theme,
     themeType,
     diffStyle,

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,
@@ -49,8 +51,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;
@@ -244,6 +246,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',
@@ -268,7 +271,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         // expandUnchanged: true,
 
         // Hover Decoration Snippets
-        enableGutterUtility: true,
+        // enableGutterUtility: true,
         // onGutterUtilityClick(event) {
         //   console.log('onGutterUtilityClick', event);
         // },
@@ -436,6 +439,7 @@ function renderDiff(parsedPatches: ParsedPatch[], manager?: WorkerPoolManager) {
         fileDiff,
         lineAnnotations: fileAnnotations,
         fileContainer,
+        decorations: DECORATIONS_DIFF,
       });
       diffInstances.push(instance);
       hunkIndex++;
@@ -729,6 +733,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,
@@ -799,7 +862,7 @@ if (renderFileButton != null) {
       // },
 
       // Hover Decoration Snippets
-      enableGutterUtility: true,
+      // enableGutterUtility: true,
       // onGutterUtilityClick(event) {
       //   console.log('onGutterUtilityClick', event);
       // },
@@ -864,6 +927,7 @@ if (renderFileButton != null) {
       file,
       lineAnnotations: FAKE_LINE_ANNOTATIONS,
       fileContainer,
+      decorations: DECORATIONS,
     });
     fileInstances.push(instance);
   });
@@ -888,7 +952,7 @@ if (renderFileConflictButton != null) {
         overflow: wrap ? 'wrap' : 'scroll',
         renderAnnotation,
         enableLineSelection: true,
-        enableGutterUtility: true,
+        // enableGutterUtility: true,
         maxContextLines: 4,
 
         // Token Testing Helpers
@@ -974,15 +1038,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/diffshub/app/_components/CodeViewWrapper.tsx

@@ -47,7 +47,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 {
@@ -80,7 +80,7 @@ interface CodeViewWrapperProps {
   lineNumbers: boolean;
   scrollRef: RefObject<HTMLDivElement | null>;
   themeType: ThemeTypes;
-  viewerRef: RefObject<CodeViewHandle<CommentMetadata> | null>;
+  viewerRef: RefObject<CodeViewHandle<CommentMetadata, undefined> | null>;
   initialItems: CodeViewItem<CommentMetadata>[];
   onLineLinkChange(selection: CodeViewLineSelection | null): void;
   onViewerReady(): void;
@@ -144,7 +144,7 @@ export const CodeViewWrapper = memo(function CodeViewWrapper({
   );
 
   const handleViewerRef = useStableCallback(
-    (viewer: CodeViewHandle<CommentMetadata> | null) => {
+    (viewer: CodeViewHandle<CommentMetadata, undefined> | null) => {
       viewerRef.current = viewer;
       if (viewer != null) {
         onViewerReady();
@@ -429,7 +429,7 @@ export const CodeViewWrapper = memo(function CodeViewWrapper({
 
   // 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.
@@ -457,7 +457,7 @@ export const CodeViewWrapper = memo(function CodeViewWrapper({
         onLineSelectionEnd(range, context) {
           handleLineSelectionEnd(range, context.item);
         },
-      }) satisfies CodeViewOptions<CommentMetadata>,
+      }) satisfies CodeViewOptions<CommentMetadata, undefined>,
     [
       diffIndicators,
       diffStyle,

apps/diffshub/app/_components/ReviewUI.tsx

@@ -118,7 +118,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 handlePatchLoadStart = useCallback(() => {
     setFileTreeOverlayOpen(false);
   }, []);

apps/diffshub/app/_components/usePatchLoader.ts

@@ -58,7 +58,7 @@ interface UsePatchLoaderOptions {
   domain?: 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 applyCodeViewLineHashTarget(
-  viewer: CodeViewHandle<CommentMetadata>,
+  viewer: CodeViewHandle<CommentMetadata, undefined>,
   target: CodeViewLineHashTarget
 ): boolean {
   const item = viewer.getItem(target.itemId);
@@ -566,7 +566,7 @@ function applyCodeViewLineHashTarget(
 }
 
 function applyCodeViewItemIdRename(
-  viewer: CodeViewHandle<CommentMetadata> | null,
+  viewer: CodeViewHandle<CommentMetadata, undefined> | null,
   rename: CodeViewItemIdRename
 ): void {
   viewer?.updateItemId(rename.oldId, rename.newId);

apps/docs/components/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