fix cli component

Author: MrWangJustToDo

packages/cli/src/components/DiffSplitView.tsx

@@ -26,6 +26,8 @@ export const DiffSplitView = memo(({ diffFile }: { diffFile: DiffFile }) => {
 
   const lines = getSplitContentLines(diffFile);
 
+  if (!columns) return null;
+
   return (
     <>
       {lines.map((line) => (

packages/cli/src/components/DiffUnifiedView.tsx

@@ -29,6 +29,8 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
 
   const lines = getUnifiedContentLine(diffFile);
 
+  if (!columns) return null;
+
   return (
     <>
       {lines.map((item) => (

packages/cli/src/components/DiffView.tsx

@@ -12,6 +12,8 @@ import { DiffViewContext } from "./DiffViewContext";
 import { createDiffConfigStore } from "./tools";
 
 import type { DiffHighlighter, DiffHighlighterLang } from "@git-diff-view/core";
+import type { DOMElement } from "ink";
+import type { RefObject } from "react";
 
 _cacheMap.name = "@git-diff-view/cli";
 
@@ -23,6 +25,7 @@ export type DiffViewProps = {
     newFile?: { fileName?: string | null; fileLang?: DiffHighlighterLang | string | null; content?: string | null };
     hunks: string[];
   };
+  width?: number;
   diffFile?: DiffFile;
   diffViewMode?: DiffModeEnum;
   diffViewTheme?: "light" | "dark";
@@ -49,9 +52,10 @@ type DiffViewProps_2 = Omit<DiffViewProps, "data"> & {
 const InternalDiffView = (
   props: Omit<DiffViewProps, "data"> & {
     isMounted: boolean;
+    wrapperRef?: RefObject<DOMElement>;
   }
 ) => {
-  const { diffFile, diffViewMode, diffViewHighlight, isMounted } = props;
+  const { diffFile, diffViewMode, diffViewHighlight, isMounted, wrapperRef } = props;
 
   const diffFileId = useMemo(() => diffFile.getId(), [diffFile]);
 
@@ -79,6 +83,13 @@ const InternalDiffView = (
     }
   }, [useDiffContext, diffViewHighlight, diffViewMode, diffFileId, isMounted]);
 
+  useEffect(() => {
+    const { wrapper, setWrapper } = useDiffContext.getReadonlyState();
+    if (wrapperRef.current !== wrapper.current) {
+      setWrapper(wrapperRef.current);
+    }
+  });
+
   const value = useMemo(() => ({ useDiffContext }), [useDiffContext]);
 
   return (
@@ -102,8 +113,10 @@ const InternalDiffView = (
 
 const MemoedInternalDiffView = memo(InternalDiffView);
 
-const DiffViewWithRef = (props: DiffViewProps) => {
-  const { registerHighlighter, data, diffViewTheme, diffFile: _diffFile, ...restProps } = props;
+const DiffViewContainer = (props: DiffViewProps) => {
+  const { registerHighlighter, data, diffViewTheme, diffFile: _diffFile, width, ...restProps } = props;
+
+  const ref = useRef<DOMElement>(null);
 
   const diffFile = useMemo(() => {
     if (_diffFile) {
@@ -167,22 +180,30 @@ const DiffViewWithRef = (props: DiffViewProps) => {
   if (!diffFile) return null;
 
   return (
-    <MemoedInternalDiffView
-      key={diffFile.getId()}
-      {...restProps}
-      diffFile={diffFile}
-      isMounted={isMounted}
-      diffViewTheme={diffViewTheme}
-      diffViewMode={restProps.diffViewMode || DiffModeEnum.SplitGitHub}
-    />
+    <Box
+      ref={ref}
+      width={width}
+      flexGrow={typeof width === "number" ? undefined : 1}
+      flexShrink={typeof width === "number" ? 0 : undefined}
+    >
+      <MemoedInternalDiffView
+        key={diffFile.getId()}
+        {...restProps}
+        wrapperRef={ref}
+        diffFile={diffFile}
+        isMounted={isMounted}
+        diffViewTheme={diffViewTheme}
+        diffViewMode={restProps.diffViewMode || DiffModeEnum.SplitGitHub}
+      />
+    </Box>
   );
 };
 
 // type helper function
 function ReactDiffView(props: DiffViewProps_1): JSX.Element;
 function ReactDiffView(props: DiffViewProps_2): JSX.Element;
 function ReactDiffView(props: DiffViewProps) {
-  return <DiffViewWithRef {...props} />;
+  return <DiffViewContainer {...props} />;
 }
 
 export const DiffView = ReactDiffView;

packages/cli/src/components/tools.ts

@@ -1,7 +1,9 @@
-import { createStore, ref } from "reactivity-store";
+import { createStore, markRaw, ref } from "reactivity-store";
 
 import type { DiffModeEnum, DiffViewProps } from "./DiffView";
 import type { DiffLine } from "@git-diff-view/core";
+import type { DOMElement } from "ink";
+import type { Ref, UseSelectorWithStore } from "reactivity-store";
 
 export const createDiffConfigStore = (props: DiffViewProps & { isMounted: boolean }, diffFileId: string) => {
   return createStore(() => {
@@ -13,6 +15,10 @@ export const createDiffConfigStore = (props: DiffViewProps & { isMounted: boolea
 
     const setMode = (_mode: DiffModeEnum) => (mode.value = _mode);
 
+    const wrapper = ref<{ current: DOMElement }>(markRaw({ current: null }));
+
+    const setWrapper = (_wrapper?: DOMElement) => (wrapper.value = markRaw({ current: _wrapper }));
+
     const mounted = ref(props.isMounted);
 
     const setMounted = (_mounted: boolean) => (mounted.value = _mounted);
@@ -26,12 +32,26 @@ export const createDiffConfigStore = (props: DiffViewProps & { isMounted: boolea
       setId,
       mode,
       setMode,
+      wrapper,
+      setWrapper,
       mounted,
       setMounted,
       enableHighlight,
       setEnableHighlight,
     };
-  });
+    // fix rollup type error
+  }) as UseSelectorWithStore<{
+    id: Ref<string>;
+    setId: (id: string) => void;
+    mode: Ref<DiffModeEnum>;
+    setMode: (mode: DiffModeEnum) => void;
+    wrapper: Ref<{ current: DOMElement }>;
+    setWrapper: (wrapper?: DOMElement) => void;
+    mounted: Ref<boolean>;
+    setMounted: (mounted: boolean) => void;
+    enableHighlight: Ref<boolean>;
+    setEnableHighlight: (enableHighlight: boolean) => void;
+  }>;
 };
 
 export const getCurrentLineRow = ({ content, width }: { content: string; width: number }) => {

packages/cli/src/hooks/useTerminalSize.ts

@@ -1,5 +1,10 @@
+import { measureElement } from "ink";
 import { useEffect, useState } from "react";
 
+import { useDiffViewContext } from "../components/DiffViewContext";
+
+import type { DOMElement } from "ink";
+
 const TERMINAL_PADDING_X = 4;
 
 const getValidColumns = (columns: number): number => {
@@ -11,24 +16,40 @@ const getValidColumns = (columns: number): number => {
 };
 
 export function useTerminalSize(): { columns: number; rows: number } {
+  const { useDiffContext } = useDiffViewContext();
+
+  const wrapper = useDiffContext((s) => s.wrapper);
+
   const [size, setSize] = useState({
-    columns: getValidColumns((process.stdout.columns || 60) - TERMINAL_PADDING_X),
+    columns: 0,
     rows: process.stdout.rows || 20,
   });
 
   useEffect(() => {
     function updateSize() {
+      const terminalWidth = getValidColumns((process.stdout.columns || 60) - TERMINAL_PADDING_X);
+
+      let width = terminalWidth;
+
+      if (wrapper.current) {
+        width = getValidColumns(measureElement(wrapper.current as DOMElement).width);
+      }
+
+      width = Math.min(width, terminalWidth);
+
       setSize({
-        columns: getValidColumns((process.stdout.columns || 60) - TERMINAL_PADDING_X),
+        columns: width,
         rows: process.stdout.rows || 20,
       });
     }
 
+    updateSize();
+
     process.stdout.on("resize", updateSize);
     return () => {
       process.stdout.off("resize", updateSize);
     };
-  }, []);
+  }, [wrapper]);
 
   return size;
 }

packages/cli/test/index.mjs

@@ -1,8 +1,8 @@
 import { getDiffViewHighlighter } from "@git-diff-view/shiki";
-import { createElement } from "@my-react/react";
-import { render } from "@my-react/react-terminal";
-// import { render } from "ink";
-// import { createElement } from "react";
+// import { createElement } from "@my-react/react";
+// import { render } from "@my-react/react-terminal";
+import { render } from "ink";
+import { createElement } from "react";
 
 import { DiffView, DiffModeEnum } from "@git-diff-view/cli";
 
@@ -61,13 +61,34 @@ index 5b301628..15aac42f 100644
 
 getDiffViewHighlighter().then((highlighter) => {
   render(
+    //     createElement(
+    //  Box,
+    //  { flexShrink: 0, flexGrow: 1 },
+    //  null,
+    // createElement(DiffView, {
+    //   data: { hunks: [hunks], newFile: { fileLang: "tsx" } },
+    //   diffViewTheme: "light",
+    //   diffViewHighlight: true,
+    //   diffViewMode: DiffModeEnum.SplitGitLab,
+    // }),
+    //  createElement(Box, { flexGrow: 1, flexShrink: 0 }, createElement(Text, null, "Diff View: Split Mode")),
+    //  createElement(DiffView, {
+    //    data: { hunks: [hunks], newFile: { fileLang: "tsx" } },
+    //    width: 60,
+    //    diffViewTheme: "light",
+    //    diffViewHighlight: true,
+    //    registerHighlighter: highlighter,
+    //    diffViewMode: DiffModeEnum.Split,
+    //  }),
     createElement(DiffView, {
-      data: { hunks: [hunks], newFile: { fileLang: 'tsx' } },
+      data: { hunks: [hunks], newFile: { fileLang: "tsx" } },
+      width: 80,
       diffViewTheme: "light",
       diffViewHighlight: true,
       registerHighlighter: highlighter,
       diffViewMode: DiffModeEnum.Split,
     })
+    //     )
   );
 });
 

scripts/build.ts

@@ -113,6 +113,7 @@ const start = async () => {
   await buildUtils();
   await buildCore();
   await buildFile();
+  await buildCli();
   await buildReact();
   await buildSolid();
   await buildSvelte();