improve performance

Author: MrWangJustToDo

packages/core/index.d.ts

@@ -116,6 +116,7 @@ export declare class DiffFile {
 		unifiedLines: UnifiedLineItem[];
 		unifiedHunkLines: Record<string, DiffHunkItem>;
 		highlighterName: string;
+		highlighterType: string;
 		composeByDiff: boolean;
 		hasSomeLineCollapsed: boolean;
 		version: string;
@@ -156,6 +157,7 @@ export declare class DiffFile {
 		unifiedLines: UnifiedLineItem[];
 		unifiedHunkLines: Record<string, DiffHunkItem>;
 		highlighterName: string;
+		highlighterType: string;
 		composeByDiff: boolean;
 		hasSomeLineCollapsed: boolean;
 		version: string;

packages/core/src/diff-file.ts

@@ -133,6 +133,8 @@ export class DiffFile {
 
   #highlighterName?: string;
 
+  #highlighterType?: string;
+
   #theme: "light" | "dark" = "light";
 
   #_theme?: "light" | "dark";
@@ -598,6 +600,8 @@ export class DiffFile {
   initSyntax({ registerHighlighter }: { registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine"> } = {}) {
     if (this.#hasInitSyntax && (!this.#_theme || this.#theme === this.#_theme)) return;
 
+    if (this.#highlighterType === "class") return;
+
     if (this.#composeByMerge && !this.#composeByFullMerge) {
       __DEV__ &&
         console.error(
@@ -611,6 +615,9 @@ export class DiffFile {
     this.#highlighterName =
       this.#oldFileResult?.highlighterName || this.#newFileResult?.highlighterName || this.#highlighterName;
 
+    this.#highlighterType =
+      this.#oldFileResult?.highlighterType || this.#newFileResult?.highlighterType || this.#highlighterType;
+
     this.#hasInitSyntax = true;
   }
 
@@ -1285,6 +1292,7 @@ export class DiffFile {
     const fileLineLength = this.fileLineLength;
     const composeByDiff = this.#composeByDiff;
     const highlighterName = this.#highlighterName;
+    const highlighterType = this.#highlighterType;
     const hasSomeLineCollapsed = this.hasSomeLineCollapsed;
 
     // split
@@ -1322,6 +1330,7 @@ export class DiffFile {
       unifiedHunkLines,
 
       highlighterName,
+      highlighterType,
       composeByDiff,
       hasSomeLineCollapsed,
 
@@ -1340,6 +1349,7 @@ export class DiffFile {
     this.#hasBuildUnified = data.hasBuildUnified;
     this.#composeByDiff = data.composeByDiff;
     this.#highlighterName = data.highlighterName;
+    this.#highlighterType = data.highlighterType;
 
     this.#oldFileLines = data.oldFileLines;
     this.#oldFileDiffLines = data.oldFileDiffLines;

packages/file/index.d.ts

@@ -115,6 +115,7 @@ export declare class DiffFile {
 		unifiedLines: UnifiedLineItem[];
 		unifiedHunkLines: Record<string, DiffHunkItem>;
 		highlighterName: string;
+		highlighterType: string;
 		composeByDiff: boolean;
 		hasSomeLineCollapsed: boolean;
 		version: string;
@@ -155,6 +156,7 @@ export declare class DiffFile {
 		unifiedLines: UnifiedLineItem[];
 		unifiedHunkLines: Record<string, DiffHunkItem>;
 		highlighterName: string;
+		highlighterType: string;
 		composeByDiff: boolean;
 		hasSomeLineCollapsed: boolean;
 		version: string;

packages/react/index.d.ts

@@ -115,6 +115,7 @@ export declare class DiffFile {
 		unifiedLines: UnifiedLineItem[];
 		unifiedHunkLines: Record<string, DiffHunkItem>;
 		highlighterName: string;
+		highlighterType: string;
 		composeByDiff: boolean;
 		hasSomeLineCollapsed: boolean;
 		version: string;
@@ -155,6 +156,7 @@ export declare class DiffFile {
 		unifiedLines: UnifiedLineItem[];
 		unifiedHunkLines: Record<string, DiffHunkItem>;
 		highlighterName: string;
+		highlighterType: string;
 		composeByDiff: boolean;
 		hasSomeLineCollapsed: boolean;
 		version: string;

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

@@ -206,7 +206,7 @@ const DiffSplitHunkLineGitLab = ({
       </div>
       <div className="diff-split-line w-[1px] flex-shrink-0" style={{ backgroundColor: `var(${borderColorName})` }} />
       <div
-        className="diff-line-hunk-action flex relative w-[1%] min-w-[40px] select-none flex-col items-center justify-center p-[1px]"
+        className="diff-line-hunk-action relative flex w-[1%] min-w-[40px] select-none flex-col items-center justify-center p-[1px]"
         style={{
           backgroundColor: `var(${hunkLineNumberBGName})`,
           color: `var(${plainLineNumberColorName})`,
@@ -268,7 +268,7 @@ const DiffSplitHunkLineGitLab = ({
         )}
       </div>
       <div
-        className="diff-line-hunk-content flex relative w-full items-center px-[10px]"
+        className="diff-line-hunk-content relative flex w-full items-center px-[10px]"
         style={{ backgroundColor: `var(${hunkContentBGName})`, color: `var(${hunkContentColorName})` }}
       >
         {currentHunk.splitInfo?.plainText || currentHunk.text}

packages/vue/index.d.ts

@@ -115,6 +115,7 @@ export declare class DiffFile {
 		unifiedLines: UnifiedLineItem[];
 		unifiedHunkLines: Record<string, DiffHunkItem>;
 		highlighterName: string;
+		highlighterType: string;
 		composeByDiff: boolean;
 		hasSomeLineCollapsed: boolean;
 		version: string;
@@ -155,6 +156,7 @@ export declare class DiffFile {
 		unifiedLines: UnifiedLineItem[];
 		unifiedHunkLines: Record<string, DiffHunkItem>;
 		highlighterName: string;
+		highlighterType: string;
 		composeByDiff: boolean;
 		hasSomeLineCollapsed: boolean;
 		version: string;

packages/vue/src/hooks/useSyncHeight.ts

@@ -29,7 +29,7 @@ export const useSyncHeight = ({
       const timer = setTimeout(() => {
         const container = document.querySelector(`#diff-root${id.value}`);
 
-        const elements = Array.from(container?.querySelectorAll(selector.value));
+        const elements = Array.from(container?.querySelectorAll(selector.value) || []);
 
         const wrappers = Array.from(container?.querySelectorAll(wrapper?.value) || []);
 

ui/vue-example/src/App.vue

@@ -14,10 +14,14 @@ const diffFile = ref<DiffFile>();
 
 const wrap = ref(true);
 
+const dark = ref(false);
+
 const mode = ref(DiffModeEnum.Split);
 
 const toggleHighlight = () => (highlight.value = !highlight.value);
 
+const toggleTheme = () => (dark.value = !dark.value);
+
 const toggleWrap = () => (wrap.value = !wrap.value);
 
 const toggleMode = () => {
@@ -55,7 +59,7 @@ watch(
 watch(
   _data,
   () => {
-    worker.postMessage({ data: _data.value, theme: "dark" });
+    worker.postMessage({ data: _data.value });
   },
   { immediate: true }
 );
@@ -92,6 +96,12 @@ const resetV = () => (v.value = "");
       >
         {{ highlight ? "Toggle to disable highlight" : "Toggle to enable highlight" }}
       </button>
+      <button
+        class="rounded-full bg-sky-500 px-5 py-2 text-sm font-semibold leading-5 text-white hover:bg-sky-700"
+        @click="toggleTheme"
+      >
+        {{ dark ? "Toggle to light theme" : "Toggle to dark theme" }}
+      </button>
       <button
         class="rounded-full bg-sky-500 px-5 py-2 text-sm font-semibold leading-5 text-white hover:bg-sky-700"
         @click="toggleMode"
@@ -108,6 +118,7 @@ const resetV = () => (v.value = "");
       :diff-view-highlight="highlight"
       :diff-view-add-widget="true"
       ref="instance"
+      :diff-view-theme="dark ? 'dark' : 'light'"
       :diff-view-wrap="wrap"
       @on-add-widget-click="resetV"
       :extend-data="extendData"