@git-diff-view/react 0.0.26 → 0.0.27

package/src/components/DiffSplitViewNormal.tsx

@@ -0,0 +1,205 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { getSplitContentLines, type DiffFile } from "@git-diff-view/core";
+import {
+  removeAllSelection,
+  syncScroll,
+  diffFontSizeName,
+  borderColorName,
+  diffAsideWidthName,
+} from "@git-diff-view/utils";
+import { Fragment, 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 { DiffSplitContentLine } from "./DiffSplitContentLineNormal";
+import { DiffSplitExtendLine } from "./DiffSplitExtendLineNormal";
+import { DiffSplitHunkLine } from "./DiffSplitHunkLineNormal";
+import { DiffSplitWidgetLine } from "./DiffSplitWidgetLineNormal";
+import { SplitSide } from "./DiffView";
+import { useDiffViewContext } from "./DiffViewContext";
+
+import type { MouseEventHandler } from "react";
+
+const DiffSplitViewTable = ({
+  side,
+  diffFile,
+  enableAddWidget,
+  enableHighlight,
+  onMouseDown,
+}: {
+  side: SplitSide;
+  diffFile: DiffFile;
+  enableHighlight: boolean;
+  enableAddWidget: boolean;
+  onMouseDown?: MouseEventHandler<HTMLTableSectionElement>;
+}) => {
+  const className = side === SplitSide.new ? "new-diff-table" : "old-diff-table";
+
+  const lines = getSplitContentLines(diffFile);
+
+  return (
+    <table className={className + " w-full border-collapse border-spacing-0"} data-mode={SplitSide[side]}>
+      <colgroup>
+        <col className={`diff-table-${SplitSide[side]}-num-col`} />
+        <col className={`diff-table-${SplitSide[side]}-content-col`} />
+      </colgroup>
+      <thead className="hidden">
+        <tr>
+          <th scope="col">{SplitSide[side]} line number</th>
+          <th scope="col">{SplitSide[side]} line content</th>
+        </tr>
+      </thead>
+      <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+        {lines.map((line) => (
+          <Fragment key={line.index}>
+            <DiffSplitHunkLine index={line.index} side={side} lineNumber={line.lineNumber} diffFile={diffFile} />
+            <DiffSplitContentLine
+              index={line.index}
+              side={side}
+              lineNumber={line.lineNumber}
+              diffFile={diffFile}
+              enableAddWidget={enableAddWidget}
+              enableHighlight={enableHighlight}
+            />
+            <DiffSplitWidgetLine index={line.index} side={side} lineNumber={line.lineNumber} diffFile={diffFile} />
+            <DiffSplitExtendLine index={line.index} side={side} lineNumber={line.lineNumber} diffFile={diffFile} />
+          </Fragment>
+        ))}
+        <DiffSplitHunkLine
+          side={side}
+          index={diffFile.splitLineLength}
+          lineNumber={diffFile.splitLineLength}
+          diffFile={diffFile}
+        />
+      </tbody>
+    </table>
+  );
+};
+
+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, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
+    fontSize: s.fontSize,
+    enableAddWidget: s.enableAddWidget,
+    enableHighlight: s.enableHighlight,
+  }));
+
+  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}
+          enableAddWidget={enableAddWidget}
+          enableHighlight={enableHighlight}
+          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}
+          enableAddWidget={enableAddWidget}
+          enableHighlight={enableHighlight}
+          onMouseDown={onMouseDown}
+        />
+      </div>
+    </div>
+  );
+});
+
+DiffSplitViewNormal.displayName = "DiffSplitViewNormal";

package/src/components/DiffSplitViewWrap.tsx

@@ -0,0 +1,141 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { type DiffFile, getSplitContentLines } from "@git-diff-view/core";
+import { diffAsideWidthName, diffFontSizeName, 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
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+
+import { SplitSide } from "..";
+import { useTextWidth } from "../hooks/useTextWidth";
+
+import { DiffSplitContentLine } from "./DiffSplitContentLineWrap";
+import { DiffSplitExtendLine } from "./DiffSplitExtendLineWrap";
+import { DiffSplitHunkLine } from "./DiffSplitHunkLineWrap";
+import { DiffSplitWidgetLine } from "./DiffSplitWidgetLineWrap";
+import { useDiffViewContext } from "./DiffViewContext";
+
+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, enableAddWidget, enableHighlight } = useDiffContext.useShallowStableSelector((s) => ({
+    fontSize: s.fontSize,
+    enableAddWidget: s.enableAddWidget,
+    enableHighlight: s.enableHighlight,
+  }));
+
+  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 = getSplitContentLines(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-wrap 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} />
+        <table className="diff-table w-full table-fixed border-collapse border-spacing-0">
+          <colgroup>
+            <col className="diff-table-old-num-col" width={Math.round(width)} />
+            <col className="diff-table-old-content-col" />
+            <col className="diff-table-new-num-col" width={Math.round(width)} />
+            <col className="diff-table-new-content-col" />
+          </colgroup>
+          <thead className="hidden">
+            <tr>
+              <th scope="col">old line number</th>
+              <th scope="col">old line content</th>
+              <th scope="col">new line number</th>
+              <th scope="col">new line content</th>
+            </tr>
+          </thead>
+          <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+            {lines.map((line) => (
+              <Fragment key={line.index}>
+                <DiffSplitHunkLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />
+                <DiffSplitContentLine
+                  index={line.index}
+                  lineNumber={line.lineNumber}
+                  diffFile={diffFile}
+                  enableAddWidget={enableAddWidget}
+                  enableHighlight={enableHighlight}
+                />
+                <DiffSplitWidgetLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />
+                <DiffSplitExtendLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />
+              </Fragment>
+            ))}
+            <DiffSplitHunkLine
+              index={diffFile.splitLineLength}
+              lineNumber={diffFile.splitLineLength}
+              diffFile={diffFile}
+            />
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+});
+
+DiffSplitViewWrap.displayName = "DiffSplitViewWrap";

package/src/components/DiffSplitWidgetLineNormal.tsx

@@ -0,0 +1,149 @@
+import { emptyBGName } from "@git-diff-view/utils";
+import * as React from "react";
+
+import { SplitSide } from "..";
+import { useDomWidth } from "../hooks/useDomWidth";
+import { useSyncHeight } from "../hooks/useSyncHeight";
+
+import { useDiffViewContext } from "./DiffViewContext";
+import { useDiffWidgetContext } from "./DiffWidgetContext";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+const InternalDiffSplitWidgetLine = ({
+  index,
+  side,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useWidget } = useDiffWidgetContext();
+
+  const { useDiffContext } = useDiffViewContext();
+
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  const widgetSide = useWidget.getReadonlyState().widgetSide;
+
+  const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
+
+  const setWidget = useWidget.getReadonlyState().setWidget;
+
+  const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+
+  const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
+
+  const currentLine = side === SplitSide.old ? oldLine : newLine;
+
+  const otherSide = side === SplitSide.old ? SplitSide.new : SplitSide.old;
+
+  const currentHasWidget = side === SplitSide.old ? oldLineWidget : newLineWidget;
+
+  const hasWidget = oldLineWidget || newLineWidget;
+
+  const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
+
+  const currentWidgetRendered =
+    currentHasWidget &&
+    renderWidgetLine?.({
+      diffFile,
+      side,
+      lineNumber: currentLine.lineNumber,
+      onClose: () => setWidget({}),
+    });
+
+  useSyncHeight({
+    selector: `div[data-line="${lineNumber}-widget-content"]`,
+    wrapper: `tr[data-line="${lineNumber}-widget"]`,
+    side: SplitSide[currentHasWidget ? side : otherSide],
+    enable: hasWidget && typeof renderWidgetLine === "function",
+  });
+
+  const width = useDomWidth({
+    selector: side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper",
+    enable: !!currentHasWidget && typeof renderWidgetLine === "function",
+  });
+
+  if (!renderWidgetLine) return null;
+
+  return (
+    <tr
+      data-line={`${lineNumber}-widget`}
+      data-state="widget"
+      data-side={SplitSide[side]}
+      className="diff-line diff-line-widget"
+    >
+      {currentHasWidget ? (
+        <td className={`diff-line-widget-${SplitSide[side]}-content p-0`} colSpan={2}>
+          <div
+            data-line={`${lineNumber}-widget-content`}
+            data-side={SplitSide[side]}
+            className="diff-line-widget-wrapper sticky left-0 z-[1]"
+            style={{ width }}
+          >
+            {width > 0 && currentWidgetRendered}
+          </div>
+        </td>
+      ) : (
+        <td
+          className={`diff-line-widget-${SplitSide[side]}-placeholder p-0`}
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+          colSpan={2}
+        >
+          <div data-line={`${lineNumber}-widget-content`} data-side={SplitSide[side]} />
+        </td>
+      )}
+    </tr>
+  );
+};
+
+// TODO! improve performance
+export const DiffSplitWidgetLine = ({
+  index,
+  side,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useWidget } = useDiffWidgetContext();
+
+  const currentIsShow = useWidget.useShallowSelector(
+    React.useCallback(
+      (s) => {
+        const widgetLineNumber = s.widgetLineNumber;
+
+        const widgetSide = s.widgetSide;
+
+        const oldLine = diffFile.getSplitLeftLine(index);
+
+        const newLine = diffFile.getSplitRightLine(index);
+
+        const oldLineWidget =
+          oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+
+        const newLineWidget =
+          newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
+
+        const currentIsShow = oldLineWidget || newLineWidget;
+
+        return currentIsShow;
+      },
+      [diffFile, index]
+    ),
+    (p, c) => p === c
+  );
+
+  if (!currentIsShow) return null;
+
+  return <InternalDiffSplitWidgetLine index={index} side={side} diffFile={diffFile} lineNumber={lineNumber} />;
+};

package/src/components/DiffSplitWidgetLineWrap.tsx

@@ -0,0 +1,127 @@
+import { borderColorName, emptyBGName } from "@git-diff-view/utils";
+import * as React from "react";
+
+import { SplitSide } from "..";
+
+import { useDiffViewContext } from "./DiffViewContext";
+import { useDiffWidgetContext } from "./DiffWidgetContext";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+const InternalDiffSplitWidgetLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useWidget } = useDiffWidgetContext();
+
+  const setWidget = useWidget.getReadonlyState().setWidget;
+
+  const { useDiffContext } = useDiffViewContext();
+
+  const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
+
+  const oldLine = diffFile.getSplitLeftLine(index);
+
+  const newLine = diffFile.getSplitRightLine(index);
+
+  const widgetSide = useWidget.getReadonlyState().widgetSide;
+
+  const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
+
+  const oldLineWidget = oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+
+  const newLineWidget = newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
+
+  const oldWidgetRendered =
+    oldLineWidget &&
+    renderWidgetLine?.({ diffFile, side: SplitSide.old, lineNumber: oldLine.lineNumber, onClose: () => setWidget({}) });
+
+  const newWidgetRendered =
+    newLineWidget &&
+    renderWidgetLine?.({ diffFile, side: SplitSide.new, lineNumber: newLine.lineNumber, onClose: () => setWidget({}) });
+
+  if (!renderWidgetLine) return null;
+
+  return (
+    <tr data-line={`${lineNumber}-widget`} data-state="widget" className="diff-line diff-line-widget">
+      {oldWidgetRendered ? (
+        <td className="diff-line-widget-old-content p-0" colSpan={2}>
+          <div className="diff-line-widget-wrapper">{oldWidgetRendered}</div>
+        </td>
+      ) : (
+        <td
+          className="diff-line-widget-old-placeholder select-none p-0"
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+          colSpan={2}
+        />
+      )}
+      {newWidgetRendered ? (
+        <td
+          className="diff-line-widget-new-content border-l-[1px] p-0"
+          colSpan={2}
+          style={{ borderLeftColor: `var(${borderColorName})`, borderLeftStyle: "solid" }}
+        >
+          <div className="diff-line-widget-wrapper">{newWidgetRendered}</div>
+        </td>
+      ) : (
+        <td
+          className="diff-line-widget-new-placeholder select-none border-l-[1px] p-0"
+          style={{
+            backgroundColor: `var(${emptyBGName})`,
+            borderLeftColor: `var(${borderColorName})`,
+            borderLeftStyle: "solid",
+          }}
+          colSpan={2}
+        />
+      )}
+    </tr>
+  );
+};
+
+// TODO! improve performance
+export const DiffSplitWidgetLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useWidget } = useDiffWidgetContext();
+
+  const currentIsShow = useWidget.useShallowSelector(
+    React.useCallback(
+      (s) => {
+        const widgetLineNumber = s.widgetLineNumber;
+
+        const widgetSide = s.widgetSide;
+
+        const oldLine = diffFile.getSplitLeftLine(index);
+
+        const newLine = diffFile.getSplitRightLine(index);
+
+        const oldLineWidget =
+          oldLine.lineNumber && widgetSide === SplitSide.old && widgetLineNumber === oldLine.lineNumber;
+
+        const newLineWidget =
+          newLine.lineNumber && widgetSide === SplitSide.new && widgetLineNumber === newLine.lineNumber;
+
+        const currentIsShow = oldLineWidget || newLineWidget;
+
+        return currentIsShow;
+      },
+      [diffFile, index]
+    ),
+    (p, c) => p === c
+  );
+
+  if (!currentIsShow) return null;
+
+  return <InternalDiffSplitWidgetLine index={index} diffFile={diffFile} lineNumber={lineNumber} />;
+};