Upgrade react-diff-view and adjust for typing

package.json

@@ -49,7 +49,7 @@
         "npm-package-arg": "^10.1.0",
         "pacote": "^15.1.1",
         "react": "^18.2.0",
-        "react-diff-view": "^2.5.0",
+        "react-diff-view": "^3.0.0",
         "react-div-100vh": "^0.7.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.7.1",
@@ -66,7 +66,6 @@
         "@types/npm-package-arg": "^6.1.1",
         "@types/pacote": "^11.1.5",
         "@types/react": "^18.0.28",
-        "@types/react-diff-view": "./types/react-diff-view",
         "@types/react-dom": "^18.0.11",
         "@types/semver": "^7.3.13",
         "@types/validate-npm-package-name": "^4.0.0",

src/components/Diff/DiffFile/DiffFile.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "@chakra-ui/react";
 import type { Result as NpaResult } from "npm-package-arg";
 import { useCallback, useMemo, useState } from "react";
-import type { Change, File, ViewType } from "react-diff-view";
+import type { ChangeData, DiffProps, FileData } from "react-diff-view";
 import "react-diff-view/style/index.css";
 import { Diff } from "^/components/react-diff-view";
 import {
@@ -17,10 +17,12 @@ import DiffPlaceholder from "./DiffPlaceholder";
 const FILES_TO_RENDER = 2 ** 6;
 const CHANGES_TO_RENDER = 2 ** 7;
 
+type ViewType = NonNullable<DiffProps["viewType"]>;
+
 interface DiffFileProps extends CollapsableBorderBoxProps {
     a: NpaResult;
     b: NpaResult;
-    file: File;
+    file: FileData;
     viewType: ViewType;
     index: number;
 }
@@ -46,7 +48,7 @@ const DiffFile = forwardRef<DiffFileProps, typeof CollapsableBorderBox>(
         );
 
         const generateAnchorID = useCallback(
-            ({ lineNumber, oldLineNumber }: Change) =>
+            ({ lineNumber, oldLineNumber }: ChangeData) =>
                 `${type === "delete" ? oldPath : newPath}-L${
                     lineNumber ?? oldLineNumber
                 }`,

src/components/Diff/DiffFile/DiffFileHeader.tsx

@@ -8,7 +8,7 @@ import {
 } from "@chakra-ui/react";
 import type { Result as NpaResult } from "npm-package-arg";
 import { FunctionComponent } from "react";
-import type { File } from "react-diff-view";
+import type { FileData } from "react-diff-view";
 import ServiceIcon from "^/components/ServiceIcon";
 import { Tooltip } from "^/components/theme";
 import { unpkg } from "^/lib/Services";
@@ -17,7 +17,7 @@ import type { CountedChanges } from "^/lib/utils/countChanges";
 export interface DiffFileHeaderProps extends StackProps {
     a: NpaResult;
     b: NpaResult;
-    file: File;
+    file: FileData;
     countedChanges: CountedChanges;
 }
 

src/components/Diff/DiffFiles.tsx

@@ -1,14 +1,14 @@
 import { Box } from "@chakra-ui/react";
 import type { Result as NpaResult } from "npm-package-arg";
 import { FunctionComponent } from "react";
-import { File, ViewType } from "react-diff-view";
+import { DiffProps, FileData } from "react-diff-view";
 import DiffFileComponent from "./DiffFile";
 
 interface DiffFilesProps {
     a: NpaResult;
     b: NpaResult;
-    files: File[];
-    viewType: ViewType;
+    files: FileData[];
+    viewType: NonNullable<DiffProps["viewType"]>;
 }
 
 const DiffFiles: FunctionComponent<DiffFilesProps> = ({

src/components/DiffIntro/DiffIntro.tsx

@@ -9,8 +9,7 @@ import {
     Text,
 } from "@chakra-ui/react";
 import type { Result as NpaResult } from "npm-package-arg";
-import type { File } from "react-diff-view";
-import { ViewType } from "react-diff-view";
+import type { DiffProps, FileData } from "react-diff-view";
 import { B, Span } from "^/components/theme";
 import { BundlephobiaResults } from "^/lib/api/bundlephobia";
 import { PackagephobiaResults } from "^/lib/api/packagephobia";
@@ -28,11 +27,11 @@ import ViewTypeSwitch from "./ViewTypeSwitch";
 export interface DiffIntroProps extends FlexProps {
     a: NpaResult;
     b: NpaResult;
-    files: File[];
+    files: FileData[];
     packagephobiaResults: PackagephobiaResults | null;
     bundlephobiaResults: BundlephobiaResults | null;
     options: DiffOptions;
-    viewType: ViewType;
+    viewType: NonNullable<DiffProps["viewType"]>;
 }
 
 const DiffIntro = forwardRef<DiffIntroProps, "h2">(

src/components/DiffIntro/ViewTypeSwitch.tsx

@@ -6,14 +6,14 @@ import {
     forwardRef,
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { ViewType } from "react-diff-view";
+import type { DiffProps } from "react-diff-view";
 import { DIFF_TYPE_PARAM_NAME } from "^/pages/[...parts]";
 import { NextLink } from "../theme";
 
 export interface ViewTypeButtonProps extends ButtonProps {
     title: string;
-    viewType: ViewType;
-    currentViewType: ViewType;
+    viewType: NonNullable<DiffProps["viewType"]>;
+    currentViewType: NonNullable<DiffProps["viewType"]>;
 }
 
 const ViewTypeButton = forwardRef<ViewTypeButtonProps, typeof Button>(
@@ -45,7 +45,7 @@ const ViewTypeButton = forwardRef<ViewTypeButtonProps, typeof Button>(
 );
 
 export interface ViewTypeSwitchProps extends ButtonGroupProps {
-    currentViewType: ViewType;
+    currentViewType: NonNullable<DiffProps["viewType"]>;
 }
 
 const ViewTypeSwitch = forwardRef<ViewTypeSwitchProps, typeof ButtonGroup>(

src/pages/[...parts].tsx

@@ -3,9 +3,9 @@ import { GetServerSideProps, NextPage } from "next";
 import { useRouter } from "next/router";
 import npa, { Result as NpaResult } from "npm-package-arg";
 import { ParsedUrlQuery } from "querystring";
-import { memo, useMemo, useState } from "react";
-import type { File } from "react-diff-view";
-import { parseDiff, ViewType } from "react-diff-view";
+import { memo, useMemo } from "react";
+import type { DiffProps } from "react-diff-view";
+import { parseDiff } from "react-diff-view";
 import DiffFiles from "^/components/Diff/DiffFiles";
 import DiffIntro from "^/components/DiffIntro";
 import ErrorBox from "^/components/ErrorBox";
@@ -39,7 +39,7 @@ export const DIFF_TYPE_PARAM_NAME = "diff";
 
 interface Params extends ParsedUrlQuery {
     parts: string | string[];
-    [DIFF_TYPE_PARAM_NAME]: ViewType;
+    [DIFF_TYPE_PARAM_NAME]: NonNullable<DiffProps["viewType"]>;
 }
 
 export const getServerSideProps: GetServerSideProps<Props, Params> = async ({
@@ -155,7 +155,9 @@ const DiffPage: NextPage<Props> = ({ error, result }) => {
     // the component will re-render. This means it will _always_ render twice
     // even when it shouldn't have to.
     // We work around this by memoizing the rendering of the component.
-    const defaultViewType = useBreakpointValue<ViewType>(
+    const defaultViewType = useBreakpointValue<
+        NonNullable<DiffProps["viewType"]>
+    >(
         {
             base: "unified",
             lg: "split",
@@ -270,7 +272,7 @@ const DiffPageContent = ({
     packagephobiaResults: PackagephobiaResults | null;
     bundlephobiaResults: BundlephobiaResults | null;
     options: DiffOptions;
-    viewType: ViewType;
+    viewType: NonNullable<DiffProps["viewType"]>;
 }) => (
     <>
         <DiffIntro