improve code

packages/react/src/components/DiffAddWidget.tsx

@@ -1,8 +1,6 @@
+import { addWidgetBGName, addWidgetColorName, diffFontSizeName } from "@git-diff-view/utils";
 import * as React from "react";
 
-import { addWidgetBGName, addWidgetColorName } from "./color";
-import { diffFontSizeName } from "./tools";
-
 import type { SplitSide } from "./DiffView";
 import type { DiffFile } from "@git-diff-view/core";
 

packages/react/src/components/DiffContent.tsx

@@ -1,9 +1,8 @@
 import { DiffLineType, NewLineSymbol, type DiffFile, type DiffLine, type SyntaxLine } from "@git-diff-view/core";
+import { memoFunc, addContentHighlightBGName, delContentHighlightBGName, diffFontSizeName } from "@git-diff-view/utils";
 import * as React from "react";
 
-import { addContentHighlightBGName, delContentHighlightBGName } from "./color";
 import { DiffNoNewLine } from "./DiffNoNewLine";
-import { diffFontSizeName, memoFunc } from "./tools";
 
 const temp = {};
 

packages/react/src/components/DiffContent_v2.tsx

@@ -6,12 +6,11 @@ import {
   type diffChanges,
   type SyntaxLine,
 } from "@git-diff-view/core";
+import { addContentHighlightBGName, delContentHighlightBGName, diffFontSizeName } from "@git-diff-view/utils";
 import * as React from "react";
 
-import { addContentHighlightBGName, delContentHighlightBGName } from "./color";
 import { getStyleObjectFromString, getSymbol } from "./DiffContent";
 import { DiffNoNewLine } from "./DiffNoNewLine";
-import { diffFontSizeName } from "./tools";
 
 const RenderRange = ({
   str,

packages/react/src/components/DiffSplitContentLineNormal.tsx

@@ -1,14 +1,19 @@
 import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
+import {
+  getContentBG,
+  getLineNumberBG,
+  plainLineNumberColorName,
+  diffAsideWidthName,
+  emptyBGName,
+} from "@git-diff-view/utils";
 import * as React from "react";
 
 import { useDiffViewContext, SplitSide } from "..";
 
-import { emptyBGName, getContentBG, getLineNumberBG, plainLineNumberColorName } from "./color";
 import { DiffSplitAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
 // import { DiffContent_v2 } from "./DiffContent_v2";
 import { useDiffWidgetContext } from "./DiffWidgetContext";
-import { diffAsideWidthName } from "./tools";
 
 const _DiffSplitLine = ({
   index,

packages/react/src/components/DiffSplitContentLineWrap.tsx

@@ -1,9 +1,15 @@
 import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
+import {
+  getContentBG,
+  getLineNumberBG,
+  plainLineNumberColorName,
+  emptyBGName,
+  borderColorName,
+} from "@git-diff-view/utils";
 import * as React from "react";
 
 import { SplitSide, useDiffViewContext } from "..";
 
-import { borderColorName, emptyBGName, getContentBG, getLineNumberBG, plainLineNumberColorName } from "./color";
 import { DiffSplitAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
 // import { DiffContent_v2 } from "./DiffContent_v2";

packages/react/src/components/DiffSplitExtendLineNormal.tsx

@@ -1,11 +1,10 @@
+import { emptyBGName } from "@git-diff-view/utils";
 import * as React from "react";
 
 import { useDiffViewContext, SplitSide } from "..";
 import { useDomWidth } from "../hooks/useDomWidth";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
-import { emptyBGName } from "./color";
-
 import type { DiffFile } from "@git-diff-view/core";
 
 const _DiffSplitExtendLine = ({

packages/react/src/components/DiffSplitExtendLineWrap.tsx

@@ -1,9 +1,8 @@
+import { emptyBGName, borderColorName } from "@git-diff-view/utils";
 import * as React from "react";
 
 import { useDiffViewContext, SplitSide } from "..";
 
-import { borderColorName, emptyBGName } from "./color";
-
 import type { DiffFile } from "@git-diff-view/core";
 
 const _DiffSplitExtendLine = ({

packages/react/src/components/DiffSplitHunkLineNormal.tsx

@@ -1,12 +1,17 @@
 import { composeLen, type DiffFile } from "@git-diff-view/core";
+import {
+  hunkLineNumberBGName,
+  plainLineNumberColorName,
+  diffAsideWidthName,
+  hunkContentBGName,
+  hunkContentColorName,
+} from "@git-diff-view/utils";
 import * as React from "react";
 
 import { DiffModeEnum, SplitSide, useDiffViewContext } from "..";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
-import { hunkContentBGName, hunkContentColorName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
 import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
-import { diffAsideWidthName } from "./tools";
 
 const _DiffSplitHunkLineGitHub = ({
   index,

packages/react/src/components/DiffSplitHunkLineWrap.tsx

@@ -1,15 +1,15 @@
 import { composeLen, type DiffFile } from "@git-diff-view/core";
+import {
+  hunkLineNumberBGName,
+  plainLineNumberColorName,
+  hunkContentBGName,
+  hunkContentColorName,
+  borderColorName,
+} from "@git-diff-view/utils";
 import * as React from "react";
 
 import { DiffModeEnum, useDiffViewContext } from "..";
 
-import {
-  borderColorName,
-  hunkContentBGName,
-  hunkContentColorName,
-  hunkLineNumberBGName,
-  plainLineNumberColorName,
-} from "./color";
 import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
 
 const DiffSplitHunkLineGitHub = ({

packages/react/src/components/DiffSplitViewNormal.tsx

@@ -1,19 +1,18 @@
 /* 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 { useDiffViewContext } from "..";
 import { useTextWidth } from "../hooks/useTextWidth";
 
-import { borderColorName } from "./color";
 import { DiffSplitContentLine } from "./DiffSplitContentLineNormal";
 import { DiffSplitExtendLine } from "./DiffSplitExtendLineNormal";
 import { DiffSplitHunkLine } from "./DiffSplitHunkLineNormal";
 import { DiffSplitWidgetLine } from "./DiffSplitWidgetLineNormal";
 import { SplitSide } from "./DiffView";
-import { diffAsideWidthName, diffFontSizeName, removeAllSelection, syncScroll } from "./tools";
 
 import type { MouseEventHandler } from "react";
 

packages/react/src/components/DiffSplitViewWrap.tsx

@@ -1,5 +1,6 @@
 /* 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, useCallback, useMemo } from "react";
 import * as React from "react";
 // SEE https://github.com/facebook/react/pull/25231
@@ -12,7 +13,7 @@ import { DiffSplitContentLine } from "./DiffSplitContentLineWrap";
 import { DiffSplitExtendLine } from "./DiffSplitExtendLineWrap";
 import { DiffSplitHunkLine } from "./DiffSplitHunkLineWrap";
 import { DiffSplitWidgetLine } from "./DiffSplitWidgetLineWrap";
-import { createDiffSplitConfigStore, diffAsideWidthName, diffFontSizeName, removeAllSelection } from "./tools";
+import { createDiffSplitConfigStore } from "./tools";
 
 import type { MouseEventHandler } from "react";
 import type { Ref, UseSelectorWithStore } from "reactivity-store";

packages/react/src/components/DiffSplitWidgetLineNormal.tsx

@@ -1,10 +1,10 @@
+import { emptyBGName } from "@git-diff-view/utils";
 import * as React from "react";
 
 import { useDiffViewContext, SplitSide } from "..";
 import { useDomWidth } from "../hooks/useDomWidth";
 import { useSyncHeight } from "../hooks/useSyncHeight";
 
-import { emptyBGName } from "./color";
 import { useDiffWidgetContext } from "./DiffWidgetContext";
 
 import type { DiffFile } from "@git-diff-view/core";

packages/react/src/components/DiffSplitWidgetLineWrap.tsx

@@ -1,8 +1,8 @@
+import { borderColorName, emptyBGName } from "@git-diff-view/utils";
 import * as React from "react";
 
 import { useDiffViewContext, SplitSide } from "..";
 
-import { borderColorName, emptyBGName } from "./color";
 import { useDiffWidgetContext } from "./DiffWidgetContext";
 
 import type { DiffFile } from "@git-diff-view/core";

packages/react/src/components/DiffUnifiedContentLine.tsx

@@ -1,10 +1,6 @@
 import { type DiffFile, type SyntaxLine, type DiffLine, checkDiffLineIncludeChange } from "@git-diff-view/core";
-import * as React from "react";
-import { memo } from "react";
-
-import { SplitSide, useDiffViewContext } from "..";
-
 import {
+  diffAsideWidthName,
   addContentBGName,
   addLineNumberBGName,
   delContentBGName,
@@ -13,11 +9,15 @@ import {
   plainContentBGName,
   plainLineNumberBGName,
   plainLineNumberColorName,
-} from "./color";
+} from "@git-diff-view/utils";
+import * as React from "react";
+import { memo } from "react";
+
+import { SplitSide, useDiffViewContext } from "..";
+
 import { DiffUnifiedAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
 import { useDiffWidgetContext } from "./DiffWidgetContext";
-import { diffAsideWidthName } from "./tools";
 
 import type { DiffViewProps } from "..";
 

packages/react/src/components/DiffUnifiedHunkLine.tsx

@@ -1,11 +1,16 @@
 import { composeLen } from "@git-diff-view/core";
+import {
+  diffAsideWidthName,
+  hunkContentBGName,
+  hunkContentColorName,
+  hunkLineNumberBGName,
+  plainLineNumberColorName,
+} from "@git-diff-view/utils";
 import * as React from "react";
 
 import { useDiffViewContext } from "..";
 
-import { hunkContentBGName, hunkContentColorName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
 import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
-import { diffAsideWidthName } from "./tools";
 
 import type { DiffFile } from "@git-diff-view/core";
 

packages/react/src/components/DiffUnifiedView.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { getUnifiedContentLine } 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";
@@ -12,7 +13,7 @@ import { DiffUnifiedExtendLine } from "./DiffUnifiedExtendLine";
 import { DiffUnifiedHunkLine } from "./DiffUnifiedHunkLine";
 import { DiffUnifiedWidgetLine } from "./DiffUnifiedWidgetLine";
 import { DiffWidgetContext } from "./DiffWidgetContext";
-import { createDiffWidgetStore, diffAsideWidthName, diffFontSizeName, removeAllSelection } from "./tools";
+import { createDiffWidgetStore } from "./tools";
 
 import type { DiffFile } from "@git-diff-view/core";
 import type { MouseEventHandler } from "react";

packages/react/src/components/DiffView.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { DiffFile, _cacheMap } 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";
 
@@ -9,7 +10,7 @@ import { useUnmount } from "../hooks/useUnmount";
 import { DiffSplitView } from "./DiffSplitView";
 import { DiffUnifiedView } from "./DiffUnifiedView";
 import { DiffModeEnum, DiffViewContext } from "./DiffViewContext";
-import { createDiffConfigStore, diffFontSizeName } from "./tools";
+import { createDiffConfigStore } from "./tools";
 // import { DiffSplitView } from "./v2/DiffSplitView_v2";
 
 import type { DiffHighlighter, DiffHighlighterLang } from "@git-diff-view/core";
@@ -286,12 +287,6 @@ const DiffViewWithRef = <T extends unknown>(
   );
 };
 
-const InnerDiffView = forwardRef(DiffViewWithRef) as (<T>(
-  props: DiffViewProps<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }> }
-) => ReactNode) & { displayName?: string };
-
-InnerDiffView.displayName = "DiffView";
-
 // type helper function
 function _DiffView<T>(
   props: DiffViewProps_1<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }> }
@@ -300,9 +295,13 @@ function _DiffView<T>(
   props: DiffViewProps_2<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }> }
 ): ReactNode;
 function _DiffView<T>(props: DiffViewProps<T> & { ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }> }) {
-  return <InnerDiffView {...props} />;
+  return <DiffViewWithRef {...props} />;
 }
 
+const InnerDiffView = forwardRef(DiffViewWithRef);
+
+InnerDiffView.displayName = "DiffView";
+
 export const DiffView = InnerDiffView as typeof _DiffView;
 
 export const version = __VERSION__;

packages/react/src/components/tools.ts

@@ -5,50 +5,6 @@ import type { DiffViewProps, SplitSide } from "./DiffView";
 import type { DiffModeEnum } from "./DiffViewContext";
 import type { RefObject } from "react";
 
-export const removeAllSelection = () => {
-  const selection = window.getSelection();
-  for (let i = 0; i < selection.rangeCount; i++) {
-    selection.removeRange(selection.getRangeAt(i));
-  }
-};
-
-export const syncScroll = (left: HTMLElement, right: HTMLElement) => {
-  const onScroll = function (event: Event) {
-    if (event === null || event.target === null) return;
-    if (event.target === left) {
-      right.scrollTop = left.scrollTop;
-      right.scrollLeft = left.scrollLeft;
-    } else {
-      left.scrollTop = right.scrollTop;
-      left.scrollLeft = right.scrollLeft;
-    }
-  };
-  if (!left.onscroll) {
-    left.onscroll = onScroll;
-  }
-  if (!right.onscroll) {
-    right.onscroll = onScroll;
-  }
-
-  return () => {
-    left.onscroll = null;
-    right.onscroll = null;
-  };
-};
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const memoFunc = <T extends Function>(func: T): T => {
-  const cache = {};
-  return ((key: string) => {
-    if (cache[key]) {
-      return cache[key];
-    }
-    const result = func(key);
-    cache[key] = result;
-    return result;
-  }) as unknown as T;
-};
-
 export const createDiffConfigStore = (props: DiffViewProps<any>, diffFileId: string) => {
   return createStore(() => {
     const id = ref(diffFileId);
@@ -177,7 +133,3 @@ export const createDiffSplitConfigStore = () => {
     return { splitRef, setSplit };
   });
 };
-
-export const diffAsideWidthName = "--diff-aside-width--";
-
-export const diffFontSizeName = "--diff-font-size--";

packages/react/src/components/v2/DiffSplitContentLineNormal_v2.tsx

@@ -1,13 +1,18 @@
 import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
+import {
+  getContentBG,
+  getLineNumberBG,
+  plainLineNumberColorName,
+  emptyBGName,
+  diffAsideWidthName,
+} from "@git-diff-view/utils";
 import * as React from "react";
 
-import { getContentBG, getLineNumberBG, plainLineNumberColorName, emptyBGName } from "../color";
 import { DiffSplitAddWidget } from "../DiffAddWidget";
 import { DiffContent } from "../DiffContent";
 import { SplitSide } from "../DiffView";
 import { useDiffViewContext } from "../DiffViewContext";
 import { useDiffWidgetContext } from "../DiffWidgetContext";
-import { diffAsideWidthName } from "../tools";
 
 const _DiffSplitLine = ({
   index,