@git-diff-view/react 0.0.25 → 0.0.27

package/src/components/DiffUnifiedView.tsx

@@ -0,0 +1,159 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { getUnifiedContentLine, SplitSide } from "@git-diff-view/core";
+import { diffFontSizeName, removeAllSelection, diffAsideWidthName } from "@git-diff-view/utils";
+import * as React from "react";
+import { Fragment, memo, useEffect, useMemo, useRef } from "react";
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
+
+import { useTextWidth } from "../hooks/useTextWidth";
+
+import { DiffUnifiedContentLine } from "./DiffUnifiedContentLine";
+import { DiffUnifiedExtendLine } from "./DiffUnifiedExtendLine";
+import { DiffUnifiedHunkLine } from "./DiffUnifiedHunkLine";
+import { DiffUnifiedWidgetLine } from "./DiffUnifiedWidgetLine";
+import { useDiffViewContext } from "./DiffViewContext";
+import { DiffWidgetContext } from "./DiffWidgetContext";
+import { createDiffWidgetStore } from "./tools";
+
+import type { DiffFile } from "@git-diff-view/core";
+import type { MouseEventHandler } from "react";
+
+export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const ref = useRef<HTMLStyleElement>(null);
+
+  const useDiffContextRef = useRef(useDiffContext);
+
+  useDiffContextRef.current = useDiffContext;
+
+  // performance optimization
+  const useWidget = useMemo(() => createDiffWidgetStore(useDiffContextRef), []);
+
+  const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
+
+  const { fontSize, enableWrap, enableHighlight, enableAddWidget, onCreateUseWidgetHook } =
+    useDiffContext.useShallowStableSelector((s) => ({
+      fontSize: s.fontSize,
+      enableWrap: s.enableWrap,
+      enableHighlight: s.enableHighlight,
+      enableAddWidget: s.enableAddWidget,
+      onCreateUseWidgetHook: s.onCreateUseWidgetHook,
+    }));
+
+  useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount, diffFile.getUpdateCount);
+
+  useEffect(() => {
+    const { setWidget } = useWidget.getReadonlyState();
+
+    setWidget({});
+  }, [diffFile, useWidget]);
+
+  useEffect(() => {
+    onCreateUseWidgetHook?.(useWidget);
+  }, [useWidget, onCreateUseWidgetHook]);
+
+  const unifiedLineLength = Math.max(diffFile.unifiedLineLength, diffFile.fileLineLength);
+
+  const _width = useTextWidth({
+    text: unifiedLineLength.toString(),
+    font: useMemo(() => ({ fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" }), [fontSize]),
+  });
+
+  const width = Math.max(40, _width + 10);
+
+  const lines = getUnifiedContentLine(diffFile);
+
+  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");
+      if (state) {
+        if (state === "extend" || state === "hunk" || state === "widget") {
+          setStyle(undefined);
+          removeAllSelection();
+          return;
+        } else {
+          setStyle(SplitSide.new);
+          removeAllSelection();
+          return;
+        }
+      }
+
+      ele = ele.parentElement;
+    }
+  };
+
+  return (
+    <DiffWidgetContext.Provider value={contextValue}>
+      <div className={`unified-diff-view ${enableWrap ? "unified-diff-view-wrap" : "unified-diff-view-normal"} w-full`}>
+        <style data-select-style ref={ref} />
+        <div
+          className="unified-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden"
+          style={{
+            // @ts-ignore
+            [diffAsideWidthName]: `${Math.round(width)}px`,
+            fontFamily: "Menlo, Consolas, monospace",
+            fontSize: `var(${diffFontSizeName})`,
+          }}
+        >
+          <table
+            className={`unified-diff-table w-full border-collapse border-spacing-0 ${enableWrap ? "table-fixed" : ""}`}
+          >
+            <colgroup>
+              <col className="unified-diff-table-num-col" />
+              <col className="unified-diff-table-content-col" />
+            </colgroup>
+            <thead className="hidden">
+              <tr>
+                <th scope="col">line number</th>
+                <th scope="col">line content</th>
+              </tr>
+            </thead>
+            <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+              {lines.map((item) => (
+                <Fragment key={item.index}>
+                  <DiffUnifiedHunkLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />
+                  <DiffUnifiedContentLine
+                    index={item.index}
+                    lineNumber={item.lineNumber}
+                    diffFile={diffFile}
+                    enableWrap={enableWrap}
+                    enableHighlight={enableHighlight}
+                    enableAddWidget={enableAddWidget}
+                  />
+                  <DiffUnifiedWidgetLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />
+                  <DiffUnifiedExtendLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />
+                </Fragment>
+              ))}
+              <DiffUnifiedHunkLine
+                index={diffFile.unifiedLineLength}
+                lineNumber={diffFile.unifiedLineLength}
+                diffFile={diffFile}
+              />
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </DiffWidgetContext.Provider>
+  );
+});
+
+DiffUnifiedView.displayName = "DiffUnifiedView";

package/src/components/DiffUnifiedWidgetLine.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+
+import { SplitSide } from "..";
+import { useDomWidth } from "../hooks/useDomWidth";
+
+import { useDiffViewContext } from "./DiffViewContext";
+import { useDiffWidgetContext } from "./DiffWidgetContext";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+const InternalDiffUnifiedWidgetLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useWidget } = useDiffWidgetContext();
+
+  const setWidget = useWidget.getReadonlyState().setWidget;
+
+  const unifiedItem = diffFile.getUnifiedLine(index);
+
+  const onClose = () => setWidget({});
+
+  const widgetSide = useWidget.getReadonlyState().widgetSide;
+
+  const widgetLineNumber = useWidget.getReadonlyState().widgetLineNumber;
+
+  const oldWidget =
+    unifiedItem.oldLineNumber && widgetSide === SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
+
+  const newWidget =
+    unifiedItem.newLineNumber && widgetSide === SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
+
+  const { useDiffContext } = useDiffViewContext();
+
+  // 需要显示的时候才进行方法订阅，可以大幅度提高性能
+  const renderWidgetLine = useDiffContext.useShallowStableSelector((s) => s.renderWidgetLine);
+
+  const width = useDomWidth({
+    selector: ".unified-diff-table-wrapper",
+    enable: typeof renderWidgetLine === "function",
+  });
+
+  if (!renderWidgetLine) return null;
+
+  return (
+    <tr data-line={`${lineNumber}-widget`} data-state="widget" className="diff-line diff-line-widget">
+      <td className="diff-line-widget-content p-0" colSpan={2}>
+        <div className="diff-line-widget-wrapper sticky left-0 z-[1]" style={{ width }}>
+          {width > 0 &&
+            oldWidget &&
+            renderWidgetLine?.({ diffFile, side: SplitSide.old, lineNumber: unifiedItem.oldLineNumber, onClose })}
+          {width > 0 &&
+            newWidget &&
+            renderWidgetLine?.({ diffFile, side: SplitSide.new, lineNumber: unifiedItem.newLineNumber, onClose })}
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export const DiffUnifiedWidgetLine = ({
+  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 unifiedItem = diffFile.getUnifiedLine(index);
+
+        const oldWidget =
+          unifiedItem.oldLineNumber && widgetSide === SplitSide.old && widgetLineNumber === unifiedItem.oldLineNumber;
+
+        const newWidget =
+          unifiedItem.newLineNumber && widgetSide === SplitSide.new && widgetLineNumber === unifiedItem.newLineNumber;
+
+        const currentIsShow = oldWidget || newWidget;
+
+        return currentIsShow;
+      },
+      [diffFile, index]
+    ),
+    (p, c) => p === c
+  );
+
+  if (!currentIsShow) return null;
+
+  return <InternalDiffUnifiedWidgetLine index={index} diffFile={diffFile} lineNumber={lineNumber} />;
+};

package/src/components/DiffView.tsx

@@ -0,0 +1,365 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { DiffFile, _cacheMap, SplitSide } from "@git-diff-view/core";
+import { diffFontSizeName } 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";
+
+import { DiffSplitView } from "./DiffSplitView";
+import { DiffUnifiedView } from "./DiffUnifiedView";
+import { DiffViewContext } from "./DiffViewContext";
+import { createDiffConfigStore } from "./tools";
+// import { DiffSplitView } from "./v2/DiffSplitView_v2";
+
+import type { createDiffWidgetStore } from "./tools";
+import type { DiffHighlighter, DiffHighlighterLang } from "@git-diff-view/core";
+import type { CSSProperties, ForwardedRef, ReactNode } from "react";
+
+_cacheMap.name = "@git-diff-view/react";
+
+export { SplitSide };
+
+export enum DiffModeEnum {
+  // github like
+  SplitGitHub = 1,
+  // gitlab like
+  SplitGitLab = 2,
+  Split = 1 | 2,
+  Unified = 4,
+}
+
+export type DiffViewProps<T> = {
+  data?: {
+    oldFile?: { fileName?: string | null; fileLang?: DiffHighlighterLang | string | null; content?: string | null };
+    newFile?: { fileName?: string | null; fileLang?: DiffHighlighterLang | string | null; content?: string | null };
+    hunks: string[];
+  };
+  extendData?: { oldFile?: Record<string, { data: T }>; newFile?: Record<string, { data: T }> };
+  diffFile?: DiffFile;
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * provide a custom highlighter
+   * eg: lowlight, refractor, starry-night, shiki
+   */
+  registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
+  diffViewMode?: DiffModeEnum;
+  diffViewWrap?: boolean;
+  diffViewTheme?: "light" | "dark";
+  diffViewFontSize?: number;
+  diffViewHighlight?: boolean;
+  diffViewAddWidget?: boolean;
+  renderWidgetLine?: ({
+    diffFile,
+    side,
+    lineNumber,
+    onClose,
+  }: {
+    lineNumber: number;
+    side: SplitSide;
+    diffFile: DiffFile;
+    onClose: () => void;
+  }) => ReactNode;
+  renderExtendLine?: ({
+    diffFile,
+    side,
+    data,
+    lineNumber,
+    onUpdate,
+  }: {
+    lineNumber: number;
+    side: SplitSide;
+    data: T;
+    diffFile: DiffFile;
+    onUpdate: () => void;
+  }) => ReactNode;
+  onAddWidgetClick?: (lineNumber: number, side: SplitSide) => void;
+  onCreateUseWidgetHook?: (hook: ReturnType<typeof createDiffWidgetStore>) => void;
+};
+
+type DiffViewProps_1<T> = Omit<DiffViewProps<T>, "data"> & {
+  data?: {
+    oldFile?: { fileName?: string | null; fileLang?: DiffHighlighterLang | null; content?: string | null };
+    newFile?: { fileName?: string | null; fileLang?: DiffHighlighterLang | null; content?: string | null };
+    hunks: string[];
+  };
+};
+
+type DiffViewProps_2<T> = Omit<DiffViewProps<T>, "data"> & {
+  data?: {
+    oldFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
+    newFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
+    hunks: string[];
+  };
+};
+
+const InternalDiffView = <T extends unknown>(
+  props: Omit<DiffViewProps<T>, "data" | "registerHighlighter"> & { isMounted: boolean }
+) => {
+  const {
+    diffFile,
+    className,
+    style,
+    diffViewMode,
+    diffViewWrap,
+    diffViewFontSize,
+    diffViewHighlight,
+    renderWidgetLine,
+    renderExtendLine,
+    extendData,
+    diffViewAddWidget,
+    onAddWidgetClick,
+    onCreateUseWidgetHook,
+    isMounted,
+  } = props;
+
+  const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
+
+  const wrapperRef = useRef<HTMLDivElement>();
+
+  // performance optimization
+  const useDiffContext = useMemo(
+    () => createDiffConfigStore(props, diffFileId),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  useEffect(() => {
+    const {
+      id,
+      setId,
+      mode,
+      setMode,
+      mounted,
+      setMounted,
+      enableAddWidget,
+      setEnableAddWidget,
+      enableHighlight,
+      setEnableHighlight,
+      enableWrap,
+      setEnableWrap,
+      setExtendData,
+      fontSize,
+      setFontSize,
+      onAddWidgetClick: _onAddWidgetClick,
+      setOnAddWidgetClick,
+      renderExtendLine: _renderExtendLine,
+      setRenderExtendLine,
+      renderWidgetLine: _renderWidgetLine,
+      setRenderWidgetLine,
+      onCreateUseWidgetHook: _onCreateUseWidgetHook,
+      setOnCreateUseWidgetHook,
+    } = useDiffContext.getReadonlyState();
+
+    if (diffFileId && diffFileId !== id) {
+      setId(diffFileId);
+    }
+
+    if (diffViewMode && diffViewMode !== mode) {
+      setMode(diffViewMode);
+    }
+
+    if (mounted !== isMounted) {
+      setMounted(isMounted);
+    }
+
+    if (diffViewAddWidget !== enableAddWidget) {
+      setEnableAddWidget(diffViewAddWidget);
+    }
+
+    if (diffViewHighlight !== enableHighlight) {
+      setEnableHighlight(diffViewHighlight);
+    }
+
+    if (diffViewWrap !== enableWrap) {
+      setEnableWrap(diffViewWrap);
+    }
+
+    if (extendData) {
+      setExtendData(extendData);
+    }
+
+    if (diffViewFontSize && diffViewFontSize !== fontSize) {
+      setFontSize(diffViewFontSize);
+    }
+
+    if (onAddWidgetClick !== _onAddWidgetClick.current) {
+      setOnAddWidgetClick({ current: onAddWidgetClick });
+    }
+
+    if (onCreateUseWidgetHook !== _onCreateUseWidgetHook) {
+      setOnCreateUseWidgetHook(onCreateUseWidgetHook);
+    }
+
+    if (renderExtendLine !== _renderExtendLine) {
+      setRenderExtendLine(renderExtendLine);
+    }
+
+    if (renderWidgetLine !== _renderWidgetLine) {
+      setRenderWidgetLine(renderWidgetLine);
+    }
+  }, [
+    useDiffContext,
+    diffViewFontSize,
+    diffViewHighlight,
+    diffViewMode,
+    diffViewWrap,
+    diffViewAddWidget,
+    diffFileId,
+    isMounted,
+    renderWidgetLine,
+    renderExtendLine,
+    extendData,
+    onAddWidgetClick,
+    onCreateUseWidgetHook,
+  ]);
+
+  useEffect(() => {
+    const cb = diffFile.subscribe(() => {
+      wrapperRef.current?.setAttribute("data-theme", diffFile._getTheme() || "light");
+      wrapperRef.current?.setAttribute("data-highlighter", diffFile._getHighlighterName());
+    });
+
+    return cb;
+  }, [diffFile]);
+
+  const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
+
+  return (
+    <DiffViewContext.Provider value={value}>
+      <div
+        className="diff-tailwindcss-wrapper"
+        data-component="git-diff-view"
+        data-theme={diffFile._getTheme() || "light"}
+        data-version={__VERSION__}
+        data-highlighter={diffFile._getHighlighterName()}
+        ref={wrapperRef}
+      >
+        <div
+          className="diff-style-root"
+          style={{
+            // @ts-ignore
+            [diffFontSizeName]: diffViewFontSize + "px",
+          }}
+        >
+          <div
+            id={isMounted ? `diff-root${diffFileId}` : undefined}
+            className={"diff-view-wrapper" + (className ? ` ${className}` : "")}
+            style={style}
+          >
+            {diffViewMode & DiffModeEnum.Split ? (
+              <DiffSplitView diffFile={diffFile} />
+            ) : (
+              <DiffUnifiedView diffFile={diffFile} />
+            )}
+          </div>
+        </div>
+      </div>
+    </DiffViewContext.Provider>
+  );
+};
+
+const MemoedInternalDiffView = memo(InternalDiffView);
+
+const DiffViewWithRef = <T extends unknown>(
+  props: DiffViewProps<T>,
+  ref: ForwardedRef<{ getDiffFileInstance: () => DiffFile }>
+) => {
+  const { registerHighlighter, data, diffViewTheme, diffFile: _diffFile, ...restProps } = props;
+
+  const diffFile = useMemo(() => {
+    if (_diffFile) {
+      // missing data for plain file render
+      // TODO next release update ?
+      // will cause more complex for diffFile flow control, keep current
+      const diffFile = DiffFile.createInstance({});
+      diffFile._mergeFullBundle(_diffFile._getFullBundle());
+      return diffFile;
+    } else if (data) {
+      return new DiffFile(
+        data?.oldFile?.fileName || "",
+        data?.oldFile?.content || "",
+        data?.newFile?.fileName || "",
+        data?.newFile?.content || "",
+        data?.hunks || [],
+        data?.oldFile?.fileLang || "",
+        data?.newFile?.fileLang || ""
+      );
+    }
+    return null;
+  }, [data, _diffFile]);
+
+  const diffFileRef = useRef(diffFile);
+
+  if (diffFileRef.current && diffFileRef.current !== diffFile) {
+    diffFileRef.current.clear?.();
+    diffFileRef.current = diffFile;
+  }
+
+  const isMounted = useIsMounted();
+
+  useEffect(() => {
+    if (_diffFile && diffFile) {
+      _diffFile._addClonedInstance(diffFile);
+      return () => {
+        _diffFile._delClonedInstance(diffFile);
+      };
+    }
+  }, [diffFile, _diffFile]);
+
+  useEffect(() => {
+    if (!diffFile) return;
+    diffFile.initTheme(diffViewTheme);
+    diffFile.initRaw();
+    diffFile.buildSplitDiffLines();
+    diffFile.buildUnifiedDiffLines();
+  }, [diffFile, diffViewTheme]);
+
+  useEffect(() => {
+    if (!diffFile) return;
+    if (props.diffViewHighlight) {
+      diffFile.initSyntax({ registerHighlighter });
+      diffFile.notifyAll();
+    }
+  }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
+
+  // fix react strict mode error
+  useUnmount(() => (__DEV__ ? diffFile?._destroy?.() : diffFile?.clear?.()), [diffFile]);
+
+  useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
+
+  if (!diffFile) return null;
+
+  return (
+    <MemoedInternalDiffView
+      key={diffFile.getId()}
+      {...restProps}
+      diffFile={diffFile}
+      isMounted={isMounted}
+      diffViewMode={restProps.diffViewMode || DiffModeEnum.SplitGitHub}
+      diffViewFontSize={restProps.diffViewFontSize || 14}
+    />
+  );
+};
+
+// type helper function
+function ReactDiffView<T>(
+  props: DiffViewProps_1<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }> }
+): JSX.Element;
+function ReactDiffView<T>(
+  props: DiffViewProps_2<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }> }
+): JSX.Element;
+function ReactDiffView<T>(props: DiffViewProps<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }> }) {
+  return <DiffViewWithRef {...props} />;
+}
+
+const InnerDiffView = forwardRef(DiffViewWithRef);
+
+InnerDiffView.displayName = "DiffView";
+
+export const DiffView = InnerDiffView as typeof ReactDiffView;
+
+export const version = __VERSION__;

package/src/components/DiffViewContext.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+
+import type { createDiffConfigStore } from "./tools";
+
+export const DiffViewContext = createContext<{
+  useDiffContext: ReturnType<typeof createDiffConfigStore>;
+}>(null);
+
+DiffViewContext.displayName = "DiffViewContext";
+
+export const useDiffViewContext = () => useContext(DiffViewContext);

package/src/components/DiffWidgetContext.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+import type { SplitSide } from "..";
+import type { Ref, UseSelectorWithStore } from "reactivity-store";
+
+export const DiffWidgetContext = createContext<{
+  useWidget: UseSelectorWithStore<{
+    widgetSide: Ref<SplitSide>;
+    widgetLineNumber: Ref<number>;
+
+    setWidget: (props: { side?: SplitSide; lineNumber?: number }) => void;
+  }>;
+}>(null);
+
+DiffWidgetContext.displayName = "DiffWidgetContext";
+
+export const useDiffWidgetContext = () => useContext(DiffWidgetContext);