@git-diff-view/react 0.0.26 → 0.0.28

package/src/components/v2/DiffSplitHunkLineWrap_v2.tsx

@@ -0,0 +1,326 @@
+import { composeLen, type DiffFile } from "@git-diff-view/core";
+import {
+  diffAsideWidthName,
+  hunkLineNumberBGName,
+  plainLineNumberColorName,
+  hunkContentBGName,
+  hunkContentColorName,
+  borderColorName,
+} from "@git-diff-view/utils";
+import * as React from "react";
+
+import { ExpandUp, ExpandDown, ExpandAll } from "../DiffExpand";
+import { DiffModeEnum } from "../DiffView";
+import { useDiffViewContext } from "../DiffViewContext";
+
+const DiffSplitHunkLineGitHub = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const currentHunk = diffFile.getSplitHunkLine(index);
+
+  const expandEnabled = diffFile.getExpandEnabled();
+
+  const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
+
+  const isExpandAll =
+    currentHunk &&
+    currentHunk.splitInfo &&
+    currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
+
+  const isFirstLine = currentHunk && currentHunk.isFirst;
+
+  const isLastLine = currentHunk && currentHunk.isLast;
+
+  return (
+    <div data-line={`${lineNumber}-hunk`} data-state="hunk" className="diff-line diff-line-hunk flex">
+      <div
+        className="diff-line-hunk-action flex w-[1%] min-w-[40px] select-none flex-col items-center justify-center p-[1px]"
+        style={{
+          backgroundColor: `var(${hunkLineNumberBGName})`,
+          color: `var(${plainLineNumberColorName})`,
+          width: `var(${diffAsideWidthName})`,
+          minWidth: `var(${diffAsideWidthName})`,
+          maxWidth: `var(${diffAsideWidthName})`,
+        }}
+      >
+        {couldExpand ? (
+          isFirstLine ? (
+            <button
+              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand Up"
+              data-title="Expand Up"
+              onClick={() => diffFile.onSplitHunkExpand("up", index)}
+            >
+              <ExpandUp className="fill-current" />
+            </button>
+          ) : isLastLine ? (
+            <button
+              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand Down"
+              data-title="Expand Down"
+              onClick={() => diffFile.onSplitHunkExpand("down", index)}
+            >
+              <ExpandDown className="fill-current" />
+            </button>
+          ) : isExpandAll ? (
+            <button
+              className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand All"
+              data-title="Expand All"
+              onClick={() => diffFile.onSplitHunkExpand("all", index)}
+            >
+              <ExpandAll className="fill-current" />
+            </button>
+          ) : (
+            <>
+              <button
+                className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                title="Expand Down"
+                data-title="Expand Down"
+                onClick={() => diffFile.onSplitHunkExpand("down", index)}
+              >
+                <ExpandDown className="fill-current" />
+              </button>
+              <button
+                className="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                title="Expand Up"
+                data-title="Expand Up"
+                onClick={() => diffFile.onSplitHunkExpand("up", index)}
+              >
+                <ExpandUp className="fill-current" />
+              </button>
+            </>
+          )
+        ) : (
+          <div className="min-h-[28px]">&ensp;</div>
+        )}
+      </div>
+      <div
+        className="diff-line-hunk-content flex w-full items-center px-[10px]"
+        style={{ backgroundColor: `var(${hunkContentBGName})`, color: `var(${hunkContentColorName})` }}
+      >
+        {currentHunk.splitInfo?.plainText || currentHunk.text}
+      </div>
+    </div>
+  );
+};
+
+const DiffSplitHunkLineGitLab = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const currentHunk = diffFile.getSplitHunkLine(index);
+
+  const expandEnabled = diffFile.getExpandEnabled();
+
+  const couldExpand = expandEnabled && currentHunk && currentHunk.splitInfo;
+
+  const isExpandAll =
+    currentHunk &&
+    currentHunk.splitInfo &&
+    currentHunk.splitInfo.endHiddenIndex - currentHunk.splitInfo.startHiddenIndex < composeLen;
+
+  const isFirstLine = currentHunk && currentHunk.isFirst;
+
+  const isLastLine = currentHunk && currentHunk.isLast;
+
+  return (
+    <div data-line={`${lineNumber}-hunk`} data-state="hunk" className="diff-line diff-line-hunk flex">
+      <div
+        className="diff-line-hunk-action flex w-[1%] min-w-[40px] select-none flex-col items-center justify-center p-[1px]"
+        style={{
+          backgroundColor: `var(${hunkLineNumberBGName})`,
+          color: `var(${plainLineNumberColorName})`,
+          width: `var(${diffAsideWidthName})`,
+          minWidth: `var(${diffAsideWidthName})`,
+          maxWidth: `var(${diffAsideWidthName})`,
+        }}
+      >
+        {couldExpand ? (
+          isFirstLine ? (
+            <button
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand Up"
+              data-title="Expand Up"
+              onClick={() => diffFile.onSplitHunkExpand("up", index)}
+            >
+              <ExpandUp className="fill-current" />
+            </button>
+          ) : isLastLine ? (
+            <button
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand Down"
+              data-title="Expand Down"
+              onClick={() => diffFile.onSplitHunkExpand("down", index)}
+            >
+              <ExpandDown className="fill-current" />
+            </button>
+          ) : isExpandAll ? (
+            <button
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand All"
+              data-title="Expand All"
+              onClick={() => diffFile.onSplitHunkExpand("all", index)}
+            >
+              <ExpandAll className="fill-current" />
+            </button>
+          ) : (
+            <>
+              <button
+                className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                title="Expand Down"
+                data-title="Expand Down"
+                onClick={() => diffFile.onSplitHunkExpand("down", index)}
+              >
+                <ExpandDown className="fill-current" />
+              </button>
+              <button
+                className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                title="Expand Up"
+                data-title="Expand Up"
+                onClick={() => diffFile.onSplitHunkExpand("up", index)}
+              >
+                <ExpandUp className="fill-current" />
+              </button>
+            </>
+          )
+        ) : (
+          <div className="min-h-[28px]">&ensp;</div>
+        )}
+      </div>
+      <div
+        className="diff-line-hunk-content flex w-full items-center px-[10px]"
+        style={{ backgroundColor: `var(${hunkContentBGName})`, color: `var(${hunkContentColorName})` }}
+      >
+        {currentHunk.splitInfo?.plainText || currentHunk.text}
+      </div>
+      <div className="diff-split-line w-[1px] flex-shrink-0" style={{ backgroundColor: `var(${borderColorName})` }} />
+      <div
+        className="diff-line-hunk-action relative z-[1] flex w-[1%] min-w-[40px] select-none flex-col items-center justify-center p-[1px]"
+        style={{
+          backgroundColor: `var(${hunkLineNumberBGName})`,
+          color: `var(${plainLineNumberColorName})`,
+          width: `var(${diffAsideWidthName})`,
+          minWidth: `var(${diffAsideWidthName})`,
+          maxWidth: `var(${diffAsideWidthName})`,
+        }}
+      >
+        {couldExpand ? (
+          isFirstLine ? (
+            <button
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand Up"
+              data-title="Expand Up"
+              onClick={() => diffFile.onSplitHunkExpand("up", index)}
+            >
+              <ExpandUp className="fill-current" />
+            </button>
+          ) : isLastLine ? (
+            <button
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand Down"
+              data-title="Expand Down"
+              onClick={() => diffFile.onSplitHunkExpand("down", index)}
+            >
+              <ExpandDown className="fill-current" />
+            </button>
+          ) : isExpandAll ? (
+            <button
+              className="diff-widget-tooltip flex h-full w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+              title="Expand All"
+              data-title="Expand All"
+              onClick={() => diffFile.onSplitHunkExpand("all", index)}
+            >
+              <ExpandAll className="fill-current" />
+            </button>
+          ) : (
+            <>
+              <button
+                className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                title="Expand Down"
+                data-title="Expand Down"
+                onClick={() => diffFile.onSplitHunkExpand("down", index)}
+              >
+                <ExpandDown className="fill-current" />
+              </button>
+              <button
+                className="diff-widget-tooltip flex h-[50%] w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                title="Expand Up"
+                data-title="Expand Up"
+                onClick={() => diffFile.onSplitHunkExpand("up", index)}
+              >
+                <ExpandUp className="fill-current" />
+              </button>
+            </>
+          )
+        ) : (
+          <div className="min-h-[28px]">&ensp;</div>
+        )}
+      </div>
+      <div
+        className="diff-line-hunk-content relative flex w-full items-center px-[10px]"
+        style={{ backgroundColor: `var(${hunkContentBGName})`, color: `var(${hunkContentColorName})` }}
+      >
+        {currentHunk.splitInfo?.plainText || currentHunk.text}
+      </div>
+    </div>
+  );
+};
+
+const InternalDiffSplitHunkLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const diffViewMode = useDiffContext.useShallowStableSelector((s) => s.mode);
+
+  if (
+    diffViewMode === DiffModeEnum.SplitGitHub ||
+    diffViewMode === DiffModeEnum.Split ||
+    diffViewMode === DiffModeEnum.Unified
+  ) {
+    return <DiffSplitHunkLineGitHub index={index} diffFile={diffFile} lineNumber={lineNumber} />;
+  } else {
+    return <DiffSplitHunkLineGitLab index={index} diffFile={diffFile} lineNumber={lineNumber} />;
+  }
+};
+
+export const DiffSplitHunkLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const currentHunk = diffFile.getSplitHunkLine(index);
+
+  const currentIsShow =
+    currentHunk &&
+    currentHunk.splitInfo &&
+    currentHunk.splitInfo.startHiddenIndex < currentHunk.splitInfo.endHiddenIndex;
+
+  const currentIsPureHunk = currentHunk && diffFile._getIsPureDiffRender() && !currentHunk.splitInfo;
+
+  if (!currentIsShow && !currentIsPureHunk) return null;
+
+  return <InternalDiffSplitHunkLine index={index} diffFile={diffFile} lineNumber={lineNumber} />;
+};

package/src/components/v2/DiffSplitViewLineNormal_v2.tsx

@@ -0,0 +1,33 @@
+import { DiffFileLineType } from "@git-diff-view/core";
+import * as React from "react";
+
+import { DiffSplitContentLine } from "./DiffSplitContentLineNormal_v2";
+import { DiffSplitExtendLine } from "./DiffSplitExtendLineNormal_v2";
+import { DiffSplitHunkLine } from "./DiffSplitHunkLineNormal_v2";
+import { DiffSplitWidgetLine } from "./DiffSplitWidgetLineNormal_v2";
+
+import type { SplitSide } from "../DiffView";
+import type { DiffFile, DiffSplitLineItem } from "@git-diff-view/core";
+
+export const DiffSplitViewLine = ({
+  line,
+  side,
+  diffFile,
+}: {
+  line: DiffSplitLineItem;
+  side: SplitSide;
+  diffFile: DiffFile;
+}) => {
+  switch (line.type) {
+    case DiffFileLineType.hunk:
+      return <DiffSplitHunkLine side={side} index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />;
+    case DiffFileLineType.content:
+      return <DiffSplitContentLine side={side} index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />;
+    case DiffFileLineType.widget:
+      return <DiffSplitWidgetLine side={side} index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />;
+    case DiffFileLineType.extend:
+      return <DiffSplitExtendLine side={side} index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />;
+    default:
+      return null;
+  }
+};

package/src/components/v2/DiffSplitViewLineWrap_v2.tsx

@@ -0,0 +1,24 @@
+import { DiffFileLineType } from "@git-diff-view/core";
+import * as React from "react";
+
+import { DiffSplitContentLine } from "./DiffSplitContentLineWrap_v2";
+import { DiffSplitExtendLine } from "./DiffSplitExtendLineWrap_v2";
+import { DiffSplitHunkLine } from "./DiffSplitHunkLineWrap_v2";
+import { DiffSplitWidgetLine } from "./DiffSplitWidgetLineWrap_v2";
+
+import type { DiffFile, DiffSplitLineItem } from "@git-diff-view/core";
+
+export const DiffSplitViewLine = ({ line, diffFile }: { line: DiffSplitLineItem; diffFile: DiffFile }) => {
+  switch (line.type) {
+    case DiffFileLineType.hunk:
+      return <DiffSplitHunkLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />;
+    case DiffFileLineType.content:
+      return <DiffSplitContentLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />;
+    case DiffFileLineType.widget:
+      return <DiffSplitWidgetLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />;
+    case DiffFileLineType.extend:
+      return <DiffSplitExtendLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />;
+    default:
+      return null;
+  }
+};

package/src/components/v2/DiffSplitViewNormal_v2.tsx

@@ -0,0 +1,159 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { DiffFileLineType, getSplitLines, type DiffFile } from "@git-diff-view/core";
+import {
+  removeAllSelection,
+  syncScroll,
+  diffFontSizeName,
+  diffAsideWidthName,
+  borderColorName,
+} from "@git-diff-view/utils";
+import { memo, useEffect, useRef } from "react";
+import * as React from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+
+import { useTextWidth } from "../../hooks/useTextWidth";
+import { SplitSide } from "../DiffView";
+import { useDiffViewContext } from "../DiffViewContext";
+
+import { DiffSplitViewLine } from "./DiffSplitViewLineNormal_v2";
+
+import type { MouseEventHandler } from "react";
+
+export const DiffSplitViewTable = ({
+  side,
+  diffFile,
+  onMouseDown,
+}: {
+  side: SplitSide;
+  diffFile: DiffFile;
+  onMouseDown?: MouseEventHandler<HTMLDivElement>;
+}) => {
+  const className = side === SplitSide.new ? "new-diff-table" : "old-diff-table";
+
+  const lines = getSplitLines(diffFile);
+
+  return (
+    <div className={className + " w-max min-w-full"} data-mode={SplitSide[side]}>
+      <div className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
+        {lines.map((line) => (
+          <DiffSplitViewLine
+            key={line.index + "-" + DiffFileLineType[line.type]}
+            side={side}
+            line={line}
+            diffFile={diffFile}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) => {
+  const ref1 = useRef<HTMLDivElement>(null);
+
+  const ref2 = useRef<HTMLDivElement>(null);
+
+  const ref = useRef<HTMLStyleElement>();
+
+  const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
+
+  const { useDiffContext } = useDiffViewContext();
+
+  const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
+
+  useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
+
+  useEffect(() => {
+    const left = ref1.current;
+    const right = ref2.current;
+    if (!left || !right) return;
+    return syncScroll(left, right);
+  }, []);
+
+  const font = React.useMemo(
+    () => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }),
+    [fontSize]
+  );
+
+  const _width = useTextWidth({
+    text: splitLineLength.toString(),
+    font,
+  });
+
+  const width = Math.max(40, _width + 25);
+
+  const setStyle = (side: SplitSide) => {
+    if (!ref.current) return;
+    if (!side) {
+      ref.current.textContent = "";
+    } else {
+      const id = `diff-root${diffFile.getId()}`;
+      ref.current.textContent = `#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+    }
+  };
+
+  const onMouseDown: MouseEventHandler<HTMLTableSectionElement> = (e) => {
+    let ele = e.target;
+
+    // need remove all the selection
+    if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
+      removeAllSelection();
+      return;
+    }
+
+    while (ele && ele instanceof HTMLElement) {
+      const state = ele.getAttribute("data-state");
+      const side = ele.getAttribute("data-side");
+      if (side) {
+        setStyle(SplitSide[side]);
+        removeAllSelection();
+      }
+      if (state) {
+        if (state === "extend" || state === "hunk" || state === "widget") {
+          setStyle(undefined);
+          removeAllSelection();
+          return;
+        } else {
+          return;
+        }
+      }
+
+      ele = ele.parentElement;
+    }
+  };
+
+  return (
+    <div className="split-diff-view split-diff-view-normal flex w-full basis-[50%]">
+      <style data-select-style ref={ref} />
+      <div
+        className="old-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden"
+        ref={ref1}
+        style={{
+          // @ts-ignore
+          [diffAsideWidthName]: `${Math.round(width)}px`,
+          overscrollBehaviorX: "none",
+          fontFamily: "Menlo, Consolas, monospace",
+          fontSize: `var(${diffFontSizeName})`,
+        }}
+      >
+        <DiffSplitViewTable side={SplitSide.old} diffFile={diffFile} onMouseDown={onMouseDown} />
+      </div>
+      <div className="diff-split-line w-[1.5px]" style={{ backgroundColor: `var(${borderColorName})` }} />
+      <div
+        className="new-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden"
+        ref={ref2}
+        style={{
+          // @ts-ignore
+          [diffAsideWidthName]: `${Math.round(width)}px`,
+          overscrollBehaviorX: "none",
+          fontFamily: "Menlo, Consolas, monospace",
+          fontSize: `var(${diffFontSizeName})`,
+        }}
+      >
+        <DiffSplitViewTable side={SplitSide.new} diffFile={diffFile} onMouseDown={onMouseDown} />
+      </div>
+    </div>
+  );
+});
+
+DiffSplitViewNormal.displayName = "DiffSplitViewNormal";

package/src/components/v2/DiffSplitViewWrap_v2.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { type DiffFile, getSplitLines } from "@git-diff-view/core";
+import { removeAllSelection, diffFontSizeName, diffAsideWidthName } from "@git-diff-view/utils";
+import { memo, useMemo, useRef } from "react";
+import * as React from "react";
+// SEE https://github.com/facebook/react/pull/25231
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+
+import { useTextWidth } from "../../hooks/useTextWidth";
+import { SplitSide } from "../DiffView";
+import { useDiffViewContext } from "../DiffViewContext";
+
+import { DiffSplitViewLine } from "./DiffSplitViewLineWrap_v2";
+
+import type { MouseEventHandler } from "react";
+
+export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) => {
+  const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
+
+  const { useDiffContext } = useDiffViewContext();
+
+  const ref = useRef<HTMLStyleElement>(null);
+
+  const fontSize = useDiffContext.useShallowStableSelector((s) => s.fontSize);
+
+  useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
+
+  const font = useMemo(() => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }), [fontSize]);
+
+  const _width = useTextWidth({
+    text: splitLineLength.toString(),
+    font,
+  });
+
+  const width = Math.max(40, _width + 25);
+
+  const lines = getSplitLines(diffFile);
+
+  const setStyle = (side: SplitSide) => {
+    if (!ref.current) return;
+    if (!side) {
+      ref.current.textContent = "";
+    } else {
+      const id = `diff-root${diffFile.getId()}`;
+      const targetSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
+      ref.current.textContent = `#${id} [data-side="${SplitSide[targetSide]}"] {user-select: none} \n#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+    }
+  };
+
+  const onMouseDown: MouseEventHandler<HTMLTableSectionElement> = (e) => {
+    let ele = e.target;
+
+    // need remove all the selection
+    if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
+      removeAllSelection();
+      return;
+    }
+
+    while (ele && ele instanceof HTMLElement) {
+      const state = ele.getAttribute("data-state");
+      const side = ele.getAttribute("data-side");
+      if (side) {
+        setStyle(SplitSide[side]);
+        removeAllSelection();
+      }
+      if (state) {
+        if (state === "extend" || state === "hunk" || state === "widget") {
+          setStyle(undefined);
+          removeAllSelection();
+          return;
+        } else {
+          return;
+        }
+      }
+
+      ele = ele.parentElement;
+    }
+  };
+
+  return (
+    <div className="split-diff-view split-diff-view-warp w-full">
+      <div
+        className="diff-table-wrapper w-full"
+        style={{
+          // @ts-ignore
+          [diffAsideWidthName]: `${Math.round(width)}px`,
+          fontFamily: "Menlo, Consolas, monospace",
+          fontSize: `var(${diffFontSizeName})`,
+        }}
+      >
+        <style data-select-style ref={ref} />
+        <div className="diff-table w-full table-fixed border-collapse">
+          <div className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
+            {lines.map((line, index) => (
+              <DiffSplitViewLine key={line.index + index} line={line} diffFile={diffFile} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+DiffSplitViewWrap.displayName = "DiffSplitViewWrap";

package/src/components/v2/DiffSplitView_v2.tsx

@@ -0,0 +1,47 @@
+import { memo, useEffect, useMemo, useRef } from "react";
+import * as React from "react";
+
+import { useDiffViewContext } from "../DiffViewContext";
+import { DiffWidgetContext } from "../DiffWidgetContext";
+import { createDiffWidgetStore } from "../tools";
+
+import { DiffSplitViewNormal } from "./DiffSplitViewNormal_v2";
+import { DiffSplitViewWrap } from "./DiffSplitViewWrap_v2";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+export const DiffSplitView = memo(({ diffFile }: { diffFile: DiffFile }) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const useDiffContextRef = useRef(useDiffContext);
+
+  useDiffContextRef.current = useDiffContext;
+
+  const { enableWrap, onCreateUseWidgetHook } = useDiffContext.useShallowStableSelector((s) => ({
+    enableWrap: s.enableWrap,
+    onCreateUseWidgetHook: s.onCreateUseWidgetHook,
+  }));
+
+  // performance optimization
+  const useWidget = useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
+
+  const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
+
+  useEffect(() => {
+    const { setWidget } = useWidget.getReadonlyState();
+
+    setWidget({});
+  }, [diffFile, useWidget]);
+
+  useEffect(() => {
+    onCreateUseWidgetHook?.(useWidget);
+  }, [useWidget, onCreateUseWidgetHook]);
+
+  return (
+    <DiffWidgetContext.Provider value={contextValue}>
+      {enableWrap ? <DiffSplitViewWrap diffFile={diffFile} /> : <DiffSplitViewNormal diffFile={diffFile} />}
+    </DiffWidgetContext.Provider>
+  );
+});
+
+DiffSplitView.displayName = "DiffSplitView";