update

Author: MrWangJustToDo

package.json

@@ -34,6 +34,7 @@
     "@git-diff-view/svelte": "workspace:*",
     "@git-diff-view/utils": "workspace:*",
     "@git-diff-view/cli": "workspace:*",
+    "@git-diff-view/shiki": "workspace:*",
     "@rollup/plugin-alias": "^5.1.1",
     "@swc/core": "^1.10.15",
     "@types/lodash": "^4.17.15",

packages/cli/src/components/DiffView.tsx

@@ -11,7 +11,7 @@ import { DiffUnifiedView } from "./DiffUnifiedView";
 import { DiffViewContext } from "./DiffViewContext";
 import { createDiffConfigStore } from "./tools";
 
-import type { DiffHighlighterLang } from "@git-diff-view/core";
+import type { DiffHighlighter, DiffHighlighterLang } from "@git-diff-view/core";
 
 _cacheMap.name = "@git-diff-view/cli";
 
@@ -26,6 +26,7 @@ export type DiffViewProps = {
   diffFile?: DiffFile;
   diffViewMode?: DiffModeEnum;
   diffViewTheme?: "light" | "dark";
+  registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
   diffViewHighlight?: boolean;
 };
 
@@ -102,7 +103,7 @@ const InternalDiffView = (
 const MemoedInternalDiffView = memo(InternalDiffView);
 
 const DiffViewWithRef = (props: DiffViewProps) => {
-  const { data, diffViewTheme, diffFile: _diffFile, ...restProps } = props;
+  const { registerHighlighter, data, diffViewTheme, diffFile: _diffFile, ...restProps } = props;
 
   const diffFile = useMemo(() => {
     if (_diffFile) {
@@ -155,10 +156,10 @@ const DiffViewWithRef = (props: DiffViewProps) => {
   useEffect(() => {
     if (!diffFile) return;
     if (props.diffViewHighlight) {
-      diffFile.initSyntax();
-      diffFile.notifyAll();
+      diffFile.initSyntax({ registerHighlighter: registerHighlighter });
     }
-  }, [diffFile, props.diffViewHighlight, props.diffViewTheme]);
+    diffFile.notifyAll();
+  }, [diffFile, props.diffViewHighlight, props.diffViewTheme, registerHighlighter]);
 
   // fix react strict mode error
   useUnmount(() => (__DEV__ ? diffFile?._destroy?.() : diffFile?.clear?.()), [diffFile]);

packages/cli/test/index.mjs

@@ -1,3 +1,4 @@
+import { getDiffViewHighlighter } from "@git-diff-view/shiki";
 // import { createElement } from "@my-react/react";
 // import { render } from "@my-react/react-terminal";
 import { render } from "ink";
@@ -58,11 +59,23 @@ index 5b301628..15aac42f 100644
    }
 `;
 
-render(
-  createElement(DiffView, {
-    data: { hunks: [hunks], newFile: { fileLang: "tsx" } },
-    diffViewTheme: "light",
-    diffViewHighlight: true,
-    diffViewMode: DiffModeEnum.SplitGitLab
-  })
-);
+getDiffViewHighlighter().then((highlighter) => {
+  render(
+    createElement(DiffView, {
+      data: { hunks: [hunks], newFile: { fileLang: "tsx" } },
+      diffViewTheme: "light",
+      diffViewHighlight: true,
+      registerHighlighter: highlighter,
+      diffViewMode: DiffModeEnum.SplitGitLab,
+    })
+  );
+});
+
+// render(
+//   createElement(DiffView, {
+//     data: { hunks: [hunks], newFile: { fileLang: "tsx" } },
+//     diffViewTheme: "light",
+//     diffViewHighlight: true,
+//     diffViewMode: DiffModeEnum.SplitGitLab,
+//   })
+// );