@git-diff-view/react 0.1.3 → 0.1.5

package/src/components/DiffSplitContentLineWrap.tsx

@@ -7,7 +7,6 @@ import {
   borderColorName,
   expandLineNumberColorName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { SplitSide } from "..";
 
@@ -33,13 +32,13 @@ const InternalDiffSplitLine = ({
 
   const newLine = diffFile.getSplitRightLine(index);
 
-  const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine?.lineNumber);
+  const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine?.lineNumber ?? -1);
 
-  const oldPlainLine = diffFile.getOldPlainLine(oldLine.lineNumber);
+  const oldPlainLine = diffFile.getOldPlainLine(oldLine.lineNumber ?? -1);
 
-  const newSyntaxLine = diffFile.getNewSyntaxLine(newLine?.lineNumber);
+  const newSyntaxLine = diffFile.getNewSyntaxLine(newLine?.lineNumber ?? -1);
 
-  const newPlainLine = diffFile.getNewPlainLine(newLine.lineNumber);
+  const newPlainLine = diffFile.getNewPlainLine(newLine.lineNumber ?? -1);
 
   const hasDiff = !!oldLine?.diff || !!newLine?.diff;
 
@@ -84,7 +83,7 @@ const InternalDiffSplitLine = ({
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
                 index={index}
-                lineNumber={oldLine.lineNumber}
+                lineNumber={oldLine.lineNumber ?? -1}
                 side={SplitSide.old}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
@@ -104,7 +103,7 @@ const InternalDiffSplitLine = ({
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
                 index={index}
-                lineNumber={oldLine.lineNumber}
+                lineNumber={oldLine.lineNumber ?? -1}
                 side={SplitSide.old}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
@@ -115,7 +114,7 @@ const InternalDiffSplitLine = ({
             <DiffContent
               enableWrap={true}
               diffFile={diffFile}
-              rawLine={oldLine.value}
+              rawLine={oldLine.value || ""}
               diffLine={oldLine.diff}
               plainLine={oldPlainLine}
               syntaxLine={oldSyntaxLine}
@@ -148,7 +147,7 @@ const InternalDiffSplitLine = ({
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
                 index={index}
-                lineNumber={newLine.lineNumber}
+                lineNumber={newLine.lineNumber ?? -1}
                 side={SplitSide.new}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
@@ -168,7 +167,7 @@ const InternalDiffSplitLine = ({
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
                 index={index}
-                lineNumber={newLine.lineNumber}
+                lineNumber={newLine.lineNumber ?? -1}
                 side={SplitSide.new}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}

package/src/components/DiffSplitExtendLineNormal.tsx

@@ -49,7 +49,7 @@ const InternalDiffSplitExtendLine = ({
     renderExtendLine?.({
       diffFile,
       side,
-      lineNumber: currentLineNumber,
+      lineNumber: currentLineNumber ?? -1,
       data: currentExtend?.data,
       onUpdate: diffFile.notifyAll,
     });
@@ -119,8 +119,8 @@ export const DiffSplitExtendLine = ({
   const { oldLineExtend, newLineExtend } = useDiffContext(
     React.useCallback(
       (s) => ({
-        oldLineExtend: s.extendData?.oldFile?.[oldLine?.lineNumber],
-        newLineExtend: s.extendData?.newFile?.[newLine?.lineNumber],
+        oldLineExtend: s.extendData?.oldFile?.[oldLine?.lineNumber ?? -1],
+        newLineExtend: s.extendData?.newFile?.[newLine?.lineNumber ?? -1],
       }),
       [oldLine?.lineNumber, newLine?.lineNumber]
     )

package/src/components/DiffSplitExtendLineWrap.tsx

@@ -36,7 +36,7 @@ const InternalDiffSplitExtendLine = ({
     renderExtendLine?.({
       diffFile,
       side: SplitSide.old,
-      lineNumber: oldLine.lineNumber,
+      lineNumber: oldLine.lineNumber ?? -1,
       data: oldLineExtend.data,
       onUpdate: diffFile.notifyAll,
     });
@@ -46,7 +46,7 @@ const InternalDiffSplitExtendLine = ({
     renderExtendLine?.({
       diffFile,
       side: SplitSide.new,
-      lineNumber: newLine.lineNumber,
+      lineNumber: newLine.lineNumber ?? -1,
       data: newLineExtend.data,
       onUpdate: diffFile.notifyAll,
     });
@@ -105,8 +105,8 @@ export const DiffSplitExtendLine = ({
   const { oldLineExtend, newLineExtend } = useDiffContext(
     React.useCallback(
       (s) => ({
-        oldLineExtend: s.extendData?.oldFile?.[oldLine?.lineNumber],
-        newLineExtend: s.extendData?.newFile?.[newLine?.lineNumber],
+        oldLineExtend: s.extendData?.oldFile?.[oldLine?.lineNumber ?? -1],
+        newLineExtend: s.extendData?.newFile?.[newLine?.lineNumber ?? -1],
       }),
       [oldLine?.lineNumber, newLine?.lineNumber]
     )

package/src/components/DiffSplitHunkLineNormal.tsx

@@ -6,7 +6,6 @@ import {
   hunkContentBGName,
   hunkContentColorName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { DiffModeEnum, SplitSide } from "..";
 import { useSyncHeight } from "../hooks/useSyncHeight";

package/src/components/DiffSplitHunkLineWrap.tsx

@@ -6,7 +6,6 @@ import {
   hunkContentColorName,
   borderColorName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { DiffModeEnum } from "..";
 

package/src/components/DiffSplitView.tsx

@@ -1,5 +1,4 @@
 import { memo, useEffect, useMemo, useRef } from "react";
-import * as React from "react";
 
 import { DiffSplitViewNormal } from "./DiffSplitViewNormal";
 import { DiffSplitViewWrap } from "./DiffSplitViewWrap";

package/src/components/DiffSplitViewNormal.tsx

@@ -10,6 +10,7 @@ import {
 } from "@git-diff-view/utils";
 import { Fragment, memo, useEffect, useRef } from "react";
 import * as React from "react";
+// @ts-ignore
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 
 import { useTextWidth } from "../hooks/useTextWidth";
@@ -84,9 +85,9 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
 
   const ref2 = useRef<HTMLDivElement>(null);
 
-  const ref = useRef<HTMLStyleElement>();
+  const ref = useRef<HTMLStyleElement>(null);
 
-  const tempRef = useRef<SplitSide>();
+  const tempRef = useRef<SplitSide>(undefined);
 
   const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
 
@@ -119,7 +120,7 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
 
   const width = Math.max(40, _width + 25);
 
-  const setStyle = (side: SplitSide) => {
+  const setStyle = (side?: SplitSide) => {
     if (!ref.current) return;
     if (!side) {
       ref.current.textContent = "";
@@ -130,7 +131,7 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
   };
 
   const onMouseDown: MouseEventHandler<HTMLTableSectionElement> = (e) => {
-    let ele = e.target;
+    let ele: Element | null = e.target as Element;
 
     // need remove all the selection
     if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
@@ -146,11 +147,11 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
 
     while (ele && ele instanceof HTMLElement) {
       const state = ele.getAttribute("data-state");
-      const side = ele.getAttribute("data-side");
+      const side = ele.getAttribute("data-side") as unknown as SplitSide;
       if (side) {
-        if (tempRef.current !== SplitSide[side]) {
-          tempRef.current = SplitSide[side];
-          setStyle(SplitSide[side]);
+        if (tempRef.current !== (SplitSide[side] as unknown as SplitSide)) {
+          tempRef.current = SplitSide[side] as unknown as SplitSide;
+          setStyle(SplitSide[side] as unknown as SplitSide);
           removeAllSelection();
         }
       }
@@ -188,8 +189,8 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
         <DiffSplitViewTable
           side={SplitSide.old}
           diffFile={diffFile}
-          enableAddWidget={enableAddWidget}
-          enableHighlight={enableHighlight}
+          enableAddWidget={!!enableAddWidget}
+          enableHighlight={!!enableHighlight}
           onMouseDown={onMouseDown}
         />
       </div>
@@ -208,8 +209,8 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
         <DiffSplitViewTable
           side={SplitSide.new}
           diffFile={diffFile}
-          enableAddWidget={enableAddWidget}
-          enableHighlight={enableHighlight}
+          enableAddWidget={!!enableAddWidget}
+          enableHighlight={!!enableHighlight}
           onMouseDown={onMouseDown}
         />
       </div>

package/src/components/DiffSplitViewWrap.tsx

@@ -2,8 +2,8 @@
 import { type DiffFile, getSplitContentLines } from "@git-diff-view/core";
 import { diffAsideWidthName, diffFontSizeName, getDiffIdFromElement, removeAllSelection } from "@git-diff-view/utils";
 import { Fragment, memo, useMemo, useRef } from "react";
-import * as React from "react";
 // SEE https://github.com/facebook/react/pull/25231
+// @ts-ignore
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 
 import { SplitSide } from "..";
@@ -24,7 +24,7 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
 
   const ref = useRef<HTMLStyleElement>(null);
 
-  const tempRef = useRef<SplitSide>();
+  const tempRef = useRef<SplitSide>(undefined);
 
   const { fontSize, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
     fontSize: s.fontSize,
@@ -45,7 +45,7 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
 
   const lines = getSplitContentLines(diffFile);
 
-  const setStyle = (side: SplitSide) => {
+  const setStyle = (side?: SplitSide) => {
     if (!ref.current) return;
     if (!side) {
       ref.current.textContent = "";
@@ -57,7 +57,7 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
   };
 
   const onMouseDown: MouseEventHandler<HTMLTableSectionElement> = (e) => {
-    let ele = e.target;
+    let ele: Element | null = e.target as Element;
 
     // need remove all the selection
     if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
@@ -73,11 +73,11 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
 
     while (ele && ele instanceof HTMLElement) {
       const state = ele.getAttribute("data-state");
-      const side = ele.getAttribute("data-side");
+      const side = ele.getAttribute("data-side") as unknown as SplitSide;
       if (side) {
-        if (tempRef.current !== SplitSide[side]) {
-          tempRef.current = SplitSide[side];
-          setStyle(SplitSide[side]);
+        if (tempRef.current !== (SplitSide[side] as unknown as SplitSide)) {
+          tempRef.current = SplitSide[side] as unknown as SplitSide;
+          setStyle(SplitSide[side] as unknown as SplitSide);
           removeAllSelection();
         }
       }
@@ -133,8 +133,8 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
                   index={line.index}
                   lineNumber={line.lineNumber}
                   diffFile={diffFile}
-                  enableAddWidget={enableAddWidget}
-                  enableHighlight={enableHighlight}
+                  enableAddWidget={!!enableAddWidget}
+                  enableHighlight={!!enableHighlight}
                 />
                 <DiffSplitWidgetLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />
                 <DiffSplitExtendLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />

package/src/components/DiffSplitWidgetLineNormal.tsx

@@ -54,7 +54,7 @@ const InternalDiffSplitWidgetLine = ({
     renderWidgetLine?.({
       diffFile,
       side,
-      lineNumber: currentLine.lineNumber,
+      lineNumber: currentLine.lineNumber ?? -1,
       onClose: () => setWidget({}),
     });
 
@@ -62,7 +62,7 @@ const InternalDiffSplitWidgetLine = ({
     selector: `div[data-line="${lineNumber}-widget-content"]`,
     wrapper: `tr[data-line="${lineNumber}-widget"]`,
     side: SplitSide[currentHasWidget ? side : otherSide],
-    enable: hasWidget && typeof renderWidgetLine === "function",
+    enable: !!hasWidget && typeof renderWidgetLine === "function",
   });
 
   const width = useDomWidth({

package/src/components/DiffSplitWidgetLineWrap.tsx

@@ -39,11 +39,21 @@ const InternalDiffSplitWidgetLine = ({
 
   const oldWidgetRendered =
     oldLineWidget &&
-    renderWidgetLine?.({ diffFile, side: SplitSide.old, lineNumber: oldLine.lineNumber, onClose: () => setWidget({}) });
+    renderWidgetLine?.({
+      diffFile,
+      side: SplitSide.old,
+      lineNumber: oldLine.lineNumber ?? -1,
+      onClose: () => setWidget({}),
+    });
 
   const newWidgetRendered =
     newLineWidget &&
-    renderWidgetLine?.({ diffFile, side: SplitSide.new, lineNumber: newLine.lineNumber, onClose: () => setWidget({}) });
+    renderWidgetLine?.({
+      diffFile,
+      side: SplitSide.new,
+      lineNumber: newLine.lineNumber ?? -1,
+      onClose: () => setWidget({}),
+    });
 
   if (!renderWidgetLine) return null;
 

package/src/components/DiffUnifiedContentLine.tsx

@@ -11,7 +11,6 @@ import {
   plainLineNumberColorName,
   expandLineNumberColorName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { SplitSide } from "..";
 
@@ -268,7 +267,7 @@ const InternalDiffUnifiedLine = ({
             <DiffUnifiedAddWidget
               index={index}
               diffFile={diffFile}
-              lineNumber={unifiedLine.newLineNumber}
+              lineNumber={unifiedLine.newLineNumber ?? -1}
               side={SplitSide.new}
               onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
               onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber, side })}

package/src/components/DiffUnifiedExtendLine.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { useCallback } from "react";
 
 import { SplitSide } from "..";
@@ -47,7 +46,7 @@ const InternalDiffUnifiedExtendLine = ({
             renderExtendLine?.({
               diffFile,
               side: SplitSide.old,
-              lineNumber: unifiedItem.oldLineNumber,
+              lineNumber: unifiedItem.oldLineNumber ?? -1,
               data: oldLineExtend.data,
               onUpdate: diffFile.notifyAll,
             })}
@@ -57,7 +56,7 @@ const InternalDiffUnifiedExtendLine = ({
             renderExtendLine?.({
               diffFile,
               side: SplitSide.new,
-              lineNumber: unifiedItem.newLineNumber,
+              lineNumber: unifiedItem.newLineNumber ?? -1,
               data: newLineExtend.data,
               onUpdate: diffFile.notifyAll,
             })}
@@ -85,8 +84,8 @@ export const DiffUnifiedExtendLine = ({
   const { oldLineExtend, newLineExtend } = useDiffContext(
     useCallback(
       (s) => ({
-        oldLineExtend: s.extendData?.oldFile?.[unifiedItem?.oldLineNumber],
-        newLineExtend: s.extendData?.newFile?.[unifiedItem?.newLineNumber],
+        oldLineExtend: s.extendData?.oldFile?.[unifiedItem?.oldLineNumber ?? -1],
+        newLineExtend: s.extendData?.newFile?.[unifiedItem?.newLineNumber ?? -1],
       }),
       [unifiedItem.oldLineNumber, unifiedItem.newLineNumber]
     )

package/src/components/DiffUnifiedHunkLine.tsx

@@ -6,7 +6,6 @@ import {
   hunkLineNumberBGName,
   plainLineNumberColorName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
 import { useDiffViewContext } from "./DiffViewContext";

package/src/components/DiffUnifiedView.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { getUnifiedContentLine, SplitSide } from "@git-diff-view/core";
 import { diffFontSizeName, removeAllSelection, diffAsideWidthName, getDiffIdFromElement } from "@git-diff-view/utils";
-import * as React from "react";
 import { Fragment, memo, useEffect, useMemo, useRef } from "react";
+// @ts-ignore
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 
 import { useTextWidth } from "../hooks/useTextWidth";
@@ -23,7 +23,7 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
 
   const ref = useRef<HTMLStyleElement>(null);
 
-  const tempRef = useRef<SplitSide>();
+  const tempRef = useRef<SplitSide>(undefined);
 
   const useDiffContextRef = useRef(useDiffContext);
 
@@ -66,7 +66,7 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
 
   const lines = getUnifiedContentLine(diffFile);
 
-  const setStyle = (side: SplitSide) => {
+  const setStyle = (side?: SplitSide) => {
     if (!ref.current) return;
     if (!side) {
       ref.current.textContent = "";
@@ -77,7 +77,7 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
   };
 
   const onMouseDown: MouseEventHandler<HTMLTableSectionElement> = (e) => {
-    let ele = e.target;
+    let ele: Element | null = e.target as Element;
 
     // need remove all the selection
     if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
@@ -149,21 +149,21 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
                     index={item.index}
                     lineNumber={item.lineNumber}
                     diffFile={diffFile}
-                    enableWrap={enableWrap}
-                    enableHighlight={enableHighlight}
-                    enableAddWidget={enableAddWidget}
+                    enableWrap={!!enableWrap}
+                    enableHighlight={!!enableHighlight}
+                    enableAddWidget={!!enableAddWidget}
                   />
                   <DiffUnifiedWidgetLine
                     index={item.index}
                     lineNumber={item.lineNumber}
                     diffFile={diffFile}
-                    enableWrap={enableWrap}
+                    enableWrap={!!enableWrap}
                   />
                   <DiffUnifiedExtendLine
                     index={item.index}
                     lineNumber={item.lineNumber}
                     diffFile={diffFile}
-                    enableWrap={enableWrap}
+                    enableWrap={!!enableWrap}
                   />
                 </Fragment>
               ))}

package/src/components/DiffUnifiedWidgetLine.tsx

@@ -55,10 +55,10 @@ const InternalDiffUnifiedWidgetLine = ({
         <div className="diff-line-widget-wrapper sticky left-0 z-[1]" style={{ width }}>
           {(enableWrap ? true : width > 0) &&
             oldWidget &&
-            renderWidgetLine?.({ diffFile, side: SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })}
+            renderWidgetLine?.({ diffFile, side: SplitSide.old, lineNumber: unifiedItem.oldLineNumber ?? -1, onClose })}
           {(enableWrap ? true : width > 0) &&
             newWidget &&
-            renderWidgetLine?.({ diffFile, side: SplitSide.new, lineNumber: unifiedItem.newLineNumber, onClose })}
+            renderWidgetLine?.({ diffFile, side: SplitSide.new, lineNumber: unifiedItem.newLineNumber ?? -1, onClose })}
         </div>
       </td>
     </tr>

package/src/components/DiffView.tsx

@@ -3,7 +3,6 @@
 import { DiffFile, _cacheMap, SplitSide, highlighter as buildInHighlighter } from "@git-diff-view/core";
 import { diffFontSizeName, DiffModeEnum } from "@git-diff-view/utils";
 import { memo, useEffect, useMemo, forwardRef, useImperativeHandle, useRef } from "react";
-import * as React from "react";
 
 import { useIsMounted } from "../hooks/useIsMounted";
 import { useUnmount } from "../hooks/useUnmount";
@@ -16,7 +15,7 @@ import { createDiffConfigStore } from "./tools";
 
 import type { createDiffWidgetStore } from "./tools";
 import type { DiffHighlighter, DiffHighlighterLang } from "@git-diff-view/core";
-import type { CSSProperties, ForwardedRef, ReactNode, RefObject } from "react";
+import type { CSSProperties, ForwardedRef, JSX, ReactNode, RefObject } from "react";
 
 _cacheMap.name = "@git-diff-view/react";
 
@@ -90,7 +89,7 @@ type DiffViewProps_2<T> = Omit<DiffViewProps<T>, "data"> & {
 const InternalDiffView = <T extends unknown>(
   props: Omit<DiffViewProps<T>, "data" | "registerHighlighter"> & {
     isMounted: boolean;
-    wrapperRef?: RefObject<HTMLDivElement>;
+    wrapperRef: RefObject<HTMLDivElement | null>;
   }
 ) => {
   const {
@@ -111,7 +110,7 @@ const InternalDiffView = <T extends unknown>(
     isMounted,
   } = props;
 
-  const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
+  const diffFileId = useMemo(() => diffFile!.getId(), [diffFile]);
 
   // performance optimization
   const useDiffContext = useMemo(
@@ -160,15 +159,15 @@ const InternalDiffView = <T extends unknown>(
     }
 
     if (diffViewAddWidget !== enableAddWidget) {
-      setEnableAddWidget(diffViewAddWidget);
+      setEnableAddWidget(!!diffViewAddWidget);
     }
 
     if (diffViewHighlight !== enableHighlight) {
-      setEnableHighlight(diffViewHighlight);
+      setEnableHighlight(!!diffViewHighlight);
     }
 
     if (diffViewWrap !== enableWrap) {
-      setEnableWrap(diffViewWrap);
+      setEnableWrap(!!diffViewWrap);
     }
 
     if (extendData) {
@@ -211,7 +210,9 @@ const InternalDiffView = <T extends unknown>(
   ]);
 
   useEffect(() => {
-    useDiffContext.getReadonlyState().setDom(wrapperRef?.current);
+    if (wrapperRef?.current) {
+      useDiffContext.getReadonlyState().setDom(wrapperRef?.current);
+    }
   }, [useDiffContext, wrapperRef]);
 
   const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
@@ -221,9 +222,9 @@ const InternalDiffView = <T extends unknown>(
       <div
         className="diff-tailwindcss-wrapper"
         data-component="git-diff-view"
-        data-theme={diffFile._getTheme() || "light"}
+        data-theme={diffFile!._getTheme() || "light"}
         data-version={__VERSION__}
-        data-highlighter={diffFile._getHighlighterName()}
+        data-highlighter={diffFile!._getHighlighterName()}
         ref={wrapperRef}
       >
         <div
@@ -238,10 +239,10 @@ const InternalDiffView = <T extends unknown>(
             className={"diff-view-wrapper" + (className ? ` ${className}` : "")}
             style={style}
           >
-            {diffViewMode & DiffModeEnum.Split ? (
-              <DiffSplitView diffFile={diffFile} />
+            {diffViewMode! & DiffModeEnum.Split ? (
+              <DiffSplitView diffFile={diffFile!} />
             ) : (
-              <DiffUnifiedView diffFile={diffFile} />
+              <DiffUnifiedView diffFile={diffFile!} />
             )}
           </div>
         </div>
@@ -250,11 +251,11 @@ const InternalDiffView = <T extends unknown>(
   );
 };
 
-const MemoedInternalDiffView = memo(InternalDiffView);
+const MemoedInternalDiffView = memo(InternalDiffView) as typeof InternalDiffView;
 
 const DiffViewWithRef = <T extends unknown>(
   props: DiffViewProps<T>,
-  ref: ForwardedRef<{ getDiffFileInstance: () => DiffFile }>
+  ref: ForwardedRef<{ getDiffFileInstance: () => DiffFile | null }>
 ) => {
   const { registerHighlighter, data, diffViewTheme, diffFile: _diffFile, ...restProps } = props;
 
@@ -282,9 +283,11 @@ const DiffViewWithRef = <T extends unknown>(
 
   const diffFileRef = useRef(diffFile);
 
-  const wrapperRef = useRef<HTMLDivElement>();
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
+  // eslint-disable-next-line react-hooks/refs
   if (diffFileRef.current && diffFileRef.current !== diffFile) {
+    // eslint-disable-next-line react-hooks/refs
     diffFileRef.current.clear?.();
     diffFileRef.current = diffFile;
   }
@@ -371,14 +374,17 @@ const DiffViewWithRef = <T extends unknown>(
 };
 
 // type helper function
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function ReactDiffView<T>(
-  props: DiffViewProps_1<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }> }
+  props: DiffViewProps_1<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile | null }> }
 ): JSX.Element;
 function ReactDiffView<T>(
-  props: DiffViewProps_2<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }> }
+  props: DiffViewProps_2<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile | null }> }
 ): JSX.Element;
-function ReactDiffView<T>(props: DiffViewProps<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }> }) {
-  return <DiffViewWithRef {...props} />;
+function ReactDiffView<T>(
+  _props: DiffViewProps<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile | null }> }
+) {
+  return <></>;
 }
 
 const InnerDiffView = forwardRef(DiffViewWithRef);

package/src/components/DiffViewContext.ts

@@ -4,6 +4,8 @@ import type { createDiffConfigStore } from "./tools";
 
 export const DiffViewContext = createContext<{
   useDiffContext: ReturnType<typeof createDiffConfigStore>;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
 }>(null);
 
 DiffViewContext.displayName = "DiffViewContext";