@git-diff-view/react 0.0.26 → 0.0.28

package/src/components/v2/DiffSplitWidgetLineNormal_v2.tsx

@@ -0,0 +1,132 @@
+import { emptyBGName } from "@git-diff-view/utils";
+import * as React from "react";
+
+import { useDomWidth } from "../../hooks/useDomWidth";
+import { useSyncHeight } from "../../hooks/useSyncHeight";
+import { SplitSide } from "../DiffView";
+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);
+
+  useSyncHeight({
+    wrapper: `div[data-state="widget"][data-line="${lineNumber}-widget"]`,
+    selector: `div[data-line="${lineNumber}-widget-content"]`,
+    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 (
+    <div
+      data-line={`${lineNumber}-widget`}
+      data-state="widget"
+      data-side={SplitSide[side]}
+      className="diff-line diff-line-widget"
+    >
+      {currentHasWidget ? (
+        <div className={`diff-line-widget-${SplitSide[side]}-content p-0`}>
+          <div
+            data-line={`${lineNumber}-widget-content`}
+            data-side={SplitSide[side]}
+            className="diff-line-widget-wrapper sticky left-0 z-[1]"
+            style={{ width }}
+          >
+            {width > 0 &&
+              renderWidgetLine?.({
+                diffFile,
+                side,
+                lineNumber: currentLine.lineNumber,
+                onClose: () => setWidget({}),
+              })}
+          </div>
+        </div>
+      ) : (
+        <div
+          className={`diff-line-widget-${SplitSide[side]}-placeholder h-full select-none p-0`}
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+        >
+          <div data-line={`${lineNumber}-widget-content`} data-side={SplitSide[side]} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const DiffSplitWidgetLine = ({
+  index,
+  diffFile,
+  side,
+  lineNumber,
+}: {
+  index: number;
+  side: SplitSide;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useWidget } = useDiffWidgetContext();
+
+  const { widgetLineNumber, widgetSide } = useWidget.useShallowStableSelector((s) => ({
+    widgetLineNumber: s.widgetLineNumber,
+    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;
+
+  if (!currentIsShow) return null;
+
+  return <InternalDiffSplitWidgetLine index={index} diffFile={diffFile} side={side} lineNumber={lineNumber} />;
+};

package/src/components/v2/DiffSplitWidgetLineWrap_v2.tsx

@@ -0,0 +1,119 @@
+import { borderColorName, emptyBGName } from "@git-diff-view/utils";
+import * as React from "react";
+
+import { SplitSide } from "../DiffView";
+import { useDiffViewContext } from "../DiffViewContext";
+import { useDiffWidgetContext } from "../DiffWidgetContext";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+const InternalDiffSplitWidgetLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  oldLineWidget,
+  newLineWidget,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  oldLineWidget: boolean;
+  newLineWidget: boolean;
+}) => {
+  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);
+
+  if (!renderWidgetLine) return null;
+
+  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({}),
+    });
+
+  return (
+    <div data-line={`${lineNumber}-widget`} data-state="widget" className="diff-line diff-line-widget flex">
+      {oldWidgetRendered ? (
+        <div className="diff-line-widget-old-content w-[50%] p-0">
+          <div className="diff-line-widget-wrapper">{oldWidgetRendered}</div>
+        </div>
+      ) : (
+        <div
+          className="diff-line-widget-old-placeholder w-[50%] select-none p-0"
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+        />
+      )}
+      <div className="diff-split-line w-[1px] flex-shrink-0" style={{ backgroundColor: `var(${borderColorName})` }} />
+      {newWidgetRendered ? (
+        <div className="diff-line-widget-new-content w-[50%] p-0">
+          <div className="diff-line-widget-wrapper">{newWidgetRendered}</div>
+        </div>
+      ) : (
+        <div
+          className="diff-line-widget-new-placeholder w-[50%] select-none p-0"
+          style={{ backgroundColor: `var(${emptyBGName})` }}
+        />
+      )}
+    </div>
+  );
+};
+
+export const DiffSplitWidgetLine = ({
+  index,
+  diffFile,
+  lineNumber,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+}) => {
+  const { useWidget } = useDiffWidgetContext();
+
+  const { widgetLineNumber, widgetSide } = useWidget.useShallowStableSelector((s) => ({
+    widgetLineNumber: s.widgetLineNumber,
+    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;
+
+  if (!currentIsShow) return null;
+
+  return (
+    <InternalDiffSplitWidgetLine
+      index={index}
+      diffFile={diffFile}
+      lineNumber={lineNumber}
+      oldLineWidget={oldLineWidget}
+      newLineWidget={newLineWidget}
+    />
+  );
+};

package/src/global.d.ts

@@ -0,0 +1,12 @@
+declare global {
+  const __DEV__: boolean;
+  const __VERSION__: string;
+
+  namespace NodeJS {
+    interface ProcessEnv {
+      NODE_ENV: "development" | "production" | "test";
+    }
+  }
+}
+
+export {};

package/src/hooks/useCallbackRef.ts

@@ -0,0 +1,18 @@
+import { useCallback, useRef } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+export const useCallbackRef = <T extends Function>(cb?: T): T => {
+  const cbRef = useRef(cb);
+
+  cbRef.current = cb;
+
+  const stableCallback = useCallback((...args: any[]) => {
+    if (args.length) {
+      return cbRef.current?.(...args);
+    } else {
+      return cbRef.current?.();
+    }
+  }, []) as unknown as T;
+
+  return stableCallback;
+};

package/src/hooks/useDomWidth.ts

@@ -0,0 +1,67 @@
+import { useEffect, useState } from "react";
+
+import { useDiffViewContext } from "../components/DiffViewContext";
+
+export type ObserveElement = HTMLElement & {
+  __observeCallback: Set<() => void>;
+  __observeInstance: ResizeObserver;
+};
+
+export const useDomWidth = ({ selector, enable }: { selector: string; enable: boolean }) => {
+  const [width, setWidth] = useState(0);
+
+  const { useDiffContext } = useDiffViewContext();
+
+  const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
+
+  useEffect(() => {
+    if (enable) {
+      const container = document.querySelector(`#diff-root${id}`);
+
+      const wrapper = container?.querySelector(selector);
+
+      if (!wrapper) return;
+
+      const typedWrapper = wrapper as ObserveElement;
+
+      const cb = () => {
+        const rect = wrapper?.getBoundingClientRect();
+        setWidth(rect?.width ?? 0);
+      };
+
+      cb();
+
+      const cleanCb = () => {
+        typedWrapper.__observeCallback.delete(cb);
+        if (typedWrapper.__observeCallback.size === 0) {
+          typedWrapper.__observeInstance?.disconnect();
+          typedWrapper.removeAttribute("data-observe");
+          delete typedWrapper.__observeCallback;
+          delete typedWrapper.__observeInstance;
+        }
+      };
+
+      if (typedWrapper.__observeCallback) {
+        typedWrapper.__observeCallback.add(cb);
+
+        return () => cleanCb();
+      }
+
+      typedWrapper.__observeCallback = new Set();
+
+      typedWrapper.__observeCallback.add(cb);
+
+      const observer = new ResizeObserver(() => typedWrapper.__observeCallback.forEach((cb) => cb()));
+
+      typedWrapper.__observeInstance = observer;
+
+      observer.observe(typedWrapper);
+
+      typedWrapper.setAttribute("data-observe", "height");
+
+      return () => cleanCb();
+    }
+  }, [selector, enable, id, mounted]);
+
+  return width;
+};

package/src/hooks/useIsMounted.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react";
+
+export const useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return isMounted;
+};

package/src/hooks/useSafeLayout.ts

@@ -0,0 +1,5 @@
+import { useEffect, useLayoutEffect } from "react";
+
+const isClient = typeof window !== "undefined";
+
+export const useSafeLayout = isClient ? useLayoutEffect : useEffect;

package/src/hooks/useSyncHeight.ts

@@ -0,0 +1,87 @@
+import { useEffect } from "react";
+
+import { useDiffViewContext } from "../components/DiffViewContext";
+
+import type { ObserveElement } from "./useDomWidth";
+
+export const useSyncHeight = ({
+  selector,
+  wrapper,
+  side,
+  enable,
+}: {
+  selector: string;
+  wrapper?: string;
+  side: string;
+  enable: boolean;
+}) => {
+  const { useDiffContext } = useDiffViewContext();
+
+  const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
+
+  useEffect(() => {
+    if (enable) {
+      const container = document.querySelector(`#diff-root${id}`);
+
+      const elements = Array.from(container?.querySelectorAll(selector) || []);
+
+      const wrappers = wrapper ? Array.from(container?.querySelectorAll(wrapper) || []) : elements;
+
+      if (elements.length === 2 && wrappers.length === 2) {
+        const ele1 = elements[0] as HTMLElement;
+        const ele2 = elements[1] as HTMLElement;
+
+        const wrapper1 = wrappers[0] as HTMLElement;
+        const wrapper2 = wrappers[1] as HTMLElement;
+
+        const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
+
+        const typedTarget = target as ObserveElement;
+
+        const cb = () => {
+          ele1.style.height = "auto";
+          ele2.style.height = "auto";
+          const rect1 = ele1.getBoundingClientRect();
+          const rect2 = ele2.getBoundingClientRect();
+          const maxHeight = Math.max(rect1.height, rect2.height);
+          wrapper1.style.height = maxHeight + "px";
+          wrapper2.style.height = maxHeight + "px";
+          wrapper1.setAttribute("data-sync-height", String(maxHeight));
+          wrapper2.setAttribute("data-sync-height", String(maxHeight));
+        };
+
+        cb();
+
+        const cleanCb = () => {
+          typedTarget.__observeCallback.delete(cb);
+          if (typedTarget.__observeCallback.size === 0) {
+            typedTarget.__observeInstance?.disconnect();
+            typedTarget.removeAttribute("data-observe");
+            delete typedTarget.__observeCallback;
+            delete typedTarget.__observeInstance;
+          }
+        };
+
+        if (typedTarget.__observeCallback) {
+          typedTarget.__observeCallback.add(cb);
+
+          return () => cleanCb();
+        }
+
+        typedTarget.__observeCallback = new Set();
+
+        typedTarget.__observeCallback.add(cb);
+
+        const observer = new ResizeObserver(() => typedTarget.__observeCallback.forEach((cb) => cb()));
+
+        typedTarget.__observeInstance = observer;
+
+        observer.observe(target);
+
+        target.setAttribute("data-observe", "height");
+
+        return () => cleanCb();
+      }
+    }
+  }, [selector, enable, side, id, wrapper, mounted]);
+};

package/src/hooks/useTextWidth.ts

@@ -0,0 +1,27 @@
+import { getTextMeasureInstance } from "@git-diff-view/utils";
+import { useState } from "react";
+
+import { useSafeLayout } from "./useSafeLayout";
+
+export const useTextWidth = ({
+  text,
+  font,
+}: {
+  text: string;
+  font: { fontFamily?: string; fontStyle?: string; fontSize?: string };
+}) => {
+  const [width, setWidth] = useState(() => {
+    const fontSize = parseInt(font.fontSize);
+    let baseSize = 6;
+    baseSize += fontSize > 10 ? (fontSize - 10) * 0.6 : 0;
+    return baseSize * text.length;
+  });
+
+  useSafeLayout(() => {
+    const width = getTextMeasureInstance().measure(text, font);
+
+    setWidth(width);
+  }, [text, font]);
+
+  return width;
+};

package/src/hooks/useUnmount.ts

@@ -0,0 +1,10 @@
+import { useEffect, useRef } from "react";
+
+export const useUnmount = (cb: () => void, deps: any[]) => {
+  const ref = useRef(cb);
+
+  ref.current = cb;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => ref.current, deps);
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./components/DiffView";
+
+export * from "@git-diff-view/core";

package/src/tailwind.css

@@ -0,0 +1,3 @@
+@import url(./_base.css);
+@import url(./_com.css);
+@import url(./_theme.css);

package/src/tailwind_pure.css

@@ -0,0 +1,3 @@
+@import url(./_base_pure.css);
+@import url(./_com.css);
+@import url(./_theme.css);

package/styles/diff-view-pure.css

@@ -280,7 +280,9 @@
   --diff-plain-content--: #ffffff;
   --diff-expand-content--: #fafafa;
   --diff-plain-lineNumber--: #fafafa;
+  --diff-expand-lineNumber--: #fafafa;
   --diff-plain-lineNumber-color--: #555555;
+  --diff-expand-lineNumber-color--: #555555;
   --diff-hunk-content--: #ddf4ff;
   --diff-hunk-lineNumber--: #c7ecff;
   --diff-hunk-lineNumber-hover--: #0969da;
@@ -307,7 +309,9 @@
   --diff-plain-content--: #0d1117;
   --diff-expand-content--: #161b22;
   --diff-plain-lineNumber--: #161b22;
+  --diff-expand-lineNumber--: #161b22;
   --diff-plain-lineNumber-color--: #a0aaab;
+  --diff-expand-lineNumber-color--: #a0aaab;
   --diff-hunk-content--: #131d2e;
   --diff-hunk-lineNumber--: #204274;
   --diff-hunk-lineNumber-hover--: #1f6feb;

package/styles/diff-view.css

@@ -786,7 +786,9 @@ video {
   --diff-plain-content--: #ffffff;
   --diff-expand-content--: #fafafa;
   --diff-plain-lineNumber--: #fafafa;
+  --diff-expand-lineNumber--: #fafafa;
   --diff-plain-lineNumber-color--: #555555;
+  --diff-expand-lineNumber-color--: #555555;
   --diff-hunk-content--: #ddf4ff;
   --diff-hunk-lineNumber--: #c7ecff;
   --diff-hunk-lineNumber-hover--: #0969da;
@@ -813,7 +815,9 @@ video {
   --diff-plain-content--: #0d1117;
   --diff-expand-content--: #161b22;
   --diff-plain-lineNumber--: #161b22;
+  --diff-expand-lineNumber--: #161b22;
   --diff-plain-lineNumber-color--: #a0aaab;
+  --diff-expand-lineNumber-color--: #a0aaab;
   --diff-hunk-content--: #131d2e;
   --diff-hunk-lineNumber--: #204274;
   --diff-hunk-lineNumber-hover--: #1f6feb;