fix: make react-diff-viewer-continued optional in benchmark app

Author: Zhang-JiahangH

README.md

@@ -107,6 +107,8 @@ pnpm benchmark
 
 > If Playwright Chromium is missing, the script will auto-run `pnpm exec playwright install chromium` once.
 
+> `react-diff-viewer-continued` is optional in the benchmark app. If missing locally, benchmark falls back to `react-diff-viewer` for that case.
+
 Output files:
 
 - `benchmark-results/results.json`

apps/benchmark/src/main.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import ReactDiffViewer from 'react-diff-viewer';
-import ReactDiffViewerContinued from 'react-diff-viewer-continued';
 import { Diff, Hunk, parseDiff } from 'react-diff-view';
 import 'react-diff-view/style/index.css';
 import { DiffViewer } from 'react-virtualized-diff';
@@ -23,13 +22,24 @@ type BenchmarkResult = {
   userAgent: string;
 };
 
+type DiffViewerLikeProps = {
+  oldValue: string;
+  newValue: string;
+  splitView: boolean;
+  showDiffOnly: boolean;
+};
+
+type DiffViewerLikeComponent = React.ComponentType<DiffViewerLikeProps>;
+
 declare global {
   interface Window {
     __BENCHMARK_DONE__?: boolean;
     __BENCHMARK_RESULT__?: BenchmarkResult;
   }
 }
 
+const CONTINUED_PKG = 'react-diff-viewer-continued';
+
 const defaultParams: BenchmarkParams = {
   lib: 'virtualized-diff-viewer',
   lines: 1000,
@@ -97,6 +107,27 @@ function App() {
   const params = React.useMemo(parseParams, []);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [payload] = React.useState(() => generateTexts(params.lines));
+  const [continuedViewer, setContinuedViewer] = React.useState<DiffViewerLikeComponent>(() => ReactDiffViewer);
+
+  React.useEffect(() => {
+    let mounted = true;
+
+    import(/* @vite-ignore */ CONTINUED_PKG)
+      .then((mod: unknown) => {
+        if (!mounted) return;
+        const loaded = ((mod as { default?: DiffViewerLikeComponent }).default ?? mod) as DiffViewerLikeComponent;
+        if (loaded) {
+          setContinuedViewer(() => loaded);
+        }
+      })
+      .catch(() => {
+        console.warn(`[benchmark] Optional dependency not found: ${CONTINUED_PKG}. Falling back to react-diff-viewer.`);
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
 
   React.useEffect(() => {
     const markDone = async () => {
@@ -158,8 +189,9 @@ function App() {
       />
     );
   } else if (params.lib === 'react-diff-viewer-continued') {
+    const ContinuedViewer = continuedViewer;
     viewer = (
-      <ReactDiffViewerContinued
+      <ContinuedViewer
         oldValue={payload.oldText}
         newValue={payload.newText}
         splitView