@git-diff-view/vue - npm Package Compare versions

Comparing version 0.0.28 to 0.0.29

index.cjs

 "use strict";
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 module.exports = require("./dist/vue-git-diff-view.cjs");

index.d.ts

@@ -29,2 +29,3 @@ // Generated by dts-bundle-generator v9.5.1
 	maxLineNumber: number;
+	enableTemplate: boolean;
 	static createInstance(data: File$1): File$1;
@@ -91,2 +92,5 @@ constructor(row: string, lang: DiffHighlighterLang, fileName?: string);
 	init(): void;
+	enableTemplate(): void;
+	disableTemplate(): void;
+	getIsEnableTemplate(): boolean;
 	buildSplitDiffLines(): void;
@@ -170,2 +174,3 @@ buildUnifiedDiffLines(): void;
 		theme: "light" | "dark";
+		enableTemplate: boolean;
 		isFullMerge: boolean;
@@ -228,2 +233,3 @@ };
 		theme: "light" | "dark";
+		enableTemplate: boolean;
 	};
@@ -230,0 +236,0 @@ _mergeFullBundle: (data: ReturnType<DiffFile["_getFullBundle"]>, notifyUpdate?: boolean) => void;

package.json

@@ -6,3 +6,3 @@ {
   "license": "MIT",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "main": "./dist/vue-git-diff-view.mjs",
@@ -38,3 +38,3 @@ "type": "module",
   "dependencies": {
-    "@git-diff-view/core": "^0.0.28",
+    "@git-diff-view/core": "^0.0.29",
     "@types/hast": "^3.0.0",
@@ -49,5 +49,5 @@ "highlight.js": "^11.11.0",
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
-    "vite": "^5.4.14",
+    "vite": "^5.4.19",
     "vite-plugin-dts": "^4.5.0",
@@ -54,0 +54,0 @@ "vue": "^3.5.13",

src/components/DiffContent.tsx

@@ -26,2 +26,3 @@ import {
   enableWrap,
+  enableTemplate,
 }: {
@@ -33,2 +34,3 @@ rawLine: string;
   enableWrap?: boolean;
+  enableTemplate?: boolean;
 }) => {
@@ -40,7 +42,7 @@ const changes = diffLine?.changes;
 
-    if (!diffLine?.plainTemplate && typeof getPlainDiffTemplate === "function") {
+    if (enableTemplate && !diffLine?.plainTemplate && typeof getPlainDiffTemplate === "function") {
       getPlainDiffTemplate({ diffLine, rawLine, operator });
     }
 
-    if (diffLine?.plainTemplate) {
+    if (enableTemplate && diffLine?.plainTemplate) {
       return (
@@ -111,7 +113,7 @@ <span class="diff-line-content-raw">
 
-  if (plainLine && !plainLine?.template) {
+  if (enableTemplate && plainLine && !plainLine?.template) {
     plainLine.template = getPlainLineTemplate(plainLine.value);
   }
 
-  if (plainLine?.template) {
+  if (enableTemplate && plainLine?.template) {
     return (
@@ -133,2 +135,3 @@ <span class="diff-line-content-raw">
   enableWrap,
+  enableTemplate,
 }: {
@@ -140,5 +143,14 @@ rawLine: string;
   enableWrap?: boolean;
+  enableTemplate?: boolean;
 }) => {
   if (!syntaxLine) {
-    return <DiffString rawLine={rawLine} diffLine={diffLine} operator={operator} />;
+    return (
+      <DiffString
+        rawLine={rawLine}
+        diffLine={diffLine}
+        operator={operator}
+        enableWrap={enableWrap}
+        enableTemplate={enableTemplate}
+      />
+    );
   }
@@ -151,7 +163,7 @@
 
-    if (!diffLine?.syntaxTemplate && typeof getSyntaxDiffTemplate === "function") {
+    if (enableTemplate && !diffLine?.syntaxTemplate && typeof getSyntaxDiffTemplate === "function") {
       getSyntaxDiffTemplate({ diffLine, syntaxLine, operator });
     }
 
-    if (diffLine?.syntaxTemplate) {
+    if (enableTemplate && diffLine?.syntaxTemplate) {
       return (
@@ -258,7 +270,7 @@ <span class="diff-line-syntax-raw">
 
-  if (!syntaxLine.template) {
+  if (enableTemplate && !syntaxLine.template) {
     syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
   }
 
-  if (syntaxLine.template) {
+  if (enableTemplate && syntaxLine.template) {
     return (
@@ -291,2 +303,3 @@ <span class="diff-line-syntax-raw">
   rawLine,
+  diffFile,
   plainLine,
@@ -311,2 +324,4 @@ syntaxLine,
 
+  const isEnableTemplate = diffFile?.getIsEnableTemplate?.() ?? true;
+
   return (
@@ -334,2 +349,3 @@ <div
           enableWrap={enableWrap}
+          enableTemplate={isEnableTemplate}
         />
@@ -343,2 +359,3 @@ ) : (
           enableWrap={enableWrap}
+          enableTemplate={isEnableTemplate}
         />
@@ -345,0 +362,0 @@ )}

src/components/DiffSplitContentLineNormal.tsx

@@ -10,3 +10,3 @@ import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
 } from "@git-diff-view/utils";
-import { defineComponent, ref } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
@@ -30,3 +30,3 @@ import { useEnableAddWidget, useEnableHighlight, useOnAddWidgetClick, useSetWidget } from "../context";
 
-    const currentLine = ref(
+    const currentLine = computed(() =>
       props.side === SplitSide.old
@@ -37,9 +37,9 @@ ? props.diffFile.getSplitLeftLine(props.index)
 
-    const currentLineHasDiff = ref(!!currentLine.value?.diff);
+    const currentLineHasDiff = computed(() => !!currentLine.value?.diff);
 
-    const currentLineHasChange = ref(checkDiffLineIncludeChange(currentLine.value?.diff));
+    const currentLineHasChange = computed(() => checkDiffLineIncludeChange(currentLine.value?.diff));
 
-    const currentLineHasHidden = ref(currentLine.value?.isHidden);
+    const currentLineHasHidden = computed(() => currentLine.value?.isHidden);
 
-    const currentLineHasContent = ref(currentLine.value.lineNumber);
+    const currentLineHasContent = computed(() => currentLine.value?.lineNumber);
 
@@ -55,9 +55,6 @@ const currentSyntaxLine = ref(
         ? props.diffFile.getOldPlainLine(currentLine.value?.lineNumber)
-        : props.diffFile.getNewPlainLine(currentLine.value.lineNumber)
+        : props.diffFile.getNewPlainLine(currentLine.value?.lineNumber)
     );
 
     useSubscribeDiffFile(props, (diffFile) => {
-      currentLine.value =
-        props.side === SplitSide.old ? diffFile.getSplitLeftLine(props.index) : diffFile.getSplitRightLine(props.index);
-
       currentSyntaxLine.value =
@@ -72,10 +69,2 @@ props.side === SplitSide.old
           : diffFile.getNewPlainLine(currentLine.value?.lineNumber);
-
-      currentLineHasDiff.value = !!currentLine.value?.diff;
-
-      currentLineHasChange.value = checkDiffLineIncludeChange(currentLine.value?.diff);
-
-      currentLineHasHidden.value = currentLine.value?.isHidden;
-
-      currentLineHasContent.value = currentLine.value.lineNumber;
     });
@@ -106,3 +95,3 @@
               <td
-                class={`diff-line-${SplitSide[props.side]}-num sticky left-0 w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`}
+                class={`diff-line-${SplitSide[props.side]}-num sticky left-0 z-[1] w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top`}
                 style={{
@@ -141,4 +130,4 @@ backgroundColor: lineNumberBG,
                   diffFile={props.diffFile}
-                  rawLine={currentLine.value.value}
-                  diffLine={currentLine.value.diff}
+                  rawLine={currentLine.value?.value || ""}
+                  diffLine={currentLine.value?.diff}
                   plainLine={currentPlainLine.value}
@@ -145,0 +134,0 @@ syntaxLine={currentSyntaxLine.value}

src/components/DiffSplitContentLineWrap.tsx

@@ -10,3 +10,3 @@ import { DiffLineType, type DiffFile, checkDiffLineIncludeChange } from "@git-diff-view/core";
 } from "@git-diff-view/utils";
-import { defineComponent, ref } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
@@ -30,5 +30,5 @@ import { useEnableAddWidget, useEnableHighlight, useOnAddWidgetClick, useSetWidget } from "../context";
 
-    const oldLine = ref(props.diffFile.getSplitLeftLine(props.index));
+    const oldLine = computed(() => props.diffFile.getSplitLeftLine(props.index));
 
-    const newLine = ref(props.diffFile.getSplitRightLine(props.index));
+    const newLine = computed(() => props.diffFile.getSplitRightLine(props.index));
 
@@ -43,19 +43,11 @@ const oldSyntaxLine = ref(props.diffFile.getOldSyntaxLine(oldLine.value?.lineNumber));
 
-    const hasDiff = ref(!!oldLine.value?.diff || !!newLine.value?.diff);
+    const hasDiff = computed(() => !!oldLine.value?.diff || !!newLine.value?.diff);
 
-    const hasChange = ref(
-      checkDiffLineIncludeChange(oldLine.value?.diff) || checkDiffLineIncludeChange(newLine.value?.diff)
+    const hasChange = computed(
+      () => checkDiffLineIncludeChange(oldLine.value?.diff) || checkDiffLineIncludeChange(newLine.value?.diff)
     );
 
-    const hasHidden = ref(oldLine.value?.isHidden && newLine.value?.isHidden);
+    const hasHidden = computed(() => oldLine.value?.isHidden && newLine.value?.isHidden);
 
-    const oldLineIsDelete = ref(oldLine.value?.diff?.type === DiffLineType.Delete);
-
-    const newLineIsAdded = ref(newLine.value?.diff?.type === DiffLineType.Add);
-
     useSubscribeDiffFile(props, (diffFile) => {
-      oldLine.value = diffFile.getSplitLeftLine(props.index);
-
-      newLine.value = diffFile.getSplitRightLine(props.index);
-
       oldSyntaxLine.value = diffFile.getOldSyntaxLine(oldLine.value?.lineNumber);
@@ -68,13 +60,2 @@
       newPlainLine.value = diffFile.getNewPlainLine(newLine.value.lineNumber);
-
-      hasDiff.value = !!oldLine.value?.diff || !!newLine.value?.diff;
-
-      hasChange.value =
-        checkDiffLineIncludeChange(oldLine.value?.diff) || checkDiffLineIncludeChange(newLine.value?.diff);
-
-      hasHidden.value = oldLine.value?.isHidden && newLine.value?.isHidden;
-
-      oldLineIsDelete.value = oldLine.value?.diff?.type === DiffLineType.Delete;
-
-      newLineIsAdded.value = newLine.value?.diff?.type === DiffLineType.Add;
     });
@@ -91,10 +72,14 @@
 
-      const oldLineContentBG = getContentBG(false, oldLineIsDelete.value, hasDiff.value);
+      const oldLineIsDelete = oldLine.value?.diff?.type === DiffLineType.Delete;
 
-      const oldLineNumberBG = getLineNumberBG(false, oldLineIsDelete.value, hasDiff.value);
+      const newLineIsAdded = newLine.value?.diff?.type === DiffLineType.Add;
 
-      const newLineContentBG = getContentBG(newLineIsAdded.value, false, hasDiff.value);
+      const oldLineContentBG = getContentBG(false, oldLineIsDelete, hasDiff.value);
 
-      const newLineNumberBG = getLineNumberBG(newLineIsAdded.value, false, hasDiff.value);
+      const oldLineNumberBG = getLineNumberBG(false, oldLineIsDelete, hasDiff.value);
 
+      const newLineContentBG = getContentBG(newLineIsAdded, false, hasDiff.value);
+
+      const newLineNumberBG = getLineNumberBG(newLineIsAdded, false, hasDiff.value);
+
       return (
@@ -145,4 +130,4 @@ <tr data-line={props.lineNumber} data-state={hasDiff.value ? "diff" : "plain"} class="diff-line">
                   diffFile={props.diffFile}
-                  rawLine={oldLine.value.value}
-                  diffLine={oldLine.value.diff}
+                  rawLine={oldLine.value?.value}
+                  diffLine={oldLine.value?.diff}
                   plainLine={oldPlainLine.value}
@@ -208,4 +193,4 @@ syntaxLine={oldSyntaxLine.value}
                   diffFile={props.diffFile}
-                  rawLine={newLine.value.value || ""}
-                  diffLine={newLine.value.diff}
+                  rawLine={newLine.value?.value || ""}
+                  diffLine={newLine.value?.diff}
                   plainLine={newPlainLine.value}
@@ -212,0 +197,0 @@ syntaxLine={newSyntaxLine.value}

src/components/DiffSplitExtendLineNormal.tsx

 import { emptyBGName } from "@git-diff-view/utils";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useExtendData, useSlots } from "../context";
 import { useDomWidth } from "../hooks/useDomWidth";
-import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 import { useSyncHeight } from "../hooks/useSyncHeight";
@@ -19,4 +18,2 @@
 
-    const currentSide = computed(() => SplitSide[props.side]);
-
     const lineSelector = computed(() => `div[data-line="${props.lineNumber}-extend-content"]`);
@@ -30,26 +27,16 @@
 
-    const oldLine = ref(props.diffFile.getSplitLeftLine(props.index));
+    const oldLine = computed(() => props.diffFile.getSplitLeftLine(props.index));
 
-    const newLine = ref(props.diffFile.getSplitRightLine(props.index));
+    const newLine = computed(() => props.diffFile.getSplitRightLine(props.index));
 
-    const enableExpand = ref(props.diffFile.getExpandEnabled());
+    const enableExpand = computed(() => props.diffFile.getExpandEnabled());
 
-    const oldLineExtend = ref(extendData.value?.oldFile?.[oldLine.value?.lineNumber]);
+    const oldLineExtend = computed(() => extendData.value?.oldFile?.[oldLine.value?.lineNumber]);
 
-    const newLineExtend = ref(extendData.value?.newFile?.[newLine.value.lineNumber]);
+    const newLineExtend = computed(() => extendData.value?.newFile?.[newLine.value.lineNumber]);
 
     const currentItem = computed(() => (props.side === SplitSide.old ? oldLine.value : newLine.value));
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      oldLine.value = diffFile.getSplitLeftLine(props.index);
+    const currentIsHidden = computed(() => currentItem.value.isHidden);
 
-      newLine.value = diffFile.getSplitRightLine(props.index);
-
-      oldLineExtend.value = extendData.value?.oldFile?.[oldLine.value?.lineNumber];
-
-      newLineExtend.value = extendData.value?.newFile?.[newLine.value.lineNumber];
-
-      enableExpand.value = diffFile.getExpandEnabled();
-    });
-
     const currentExtend = computed(() => (props.side === SplitSide.old ? oldLineExtend.value : newLineExtend.value));
@@ -63,5 +50,3 @@
       Boolean(
-        (oldLineExtend.value || newLineExtend.value) &&
-          (!currentItem.value.isHidden || enableExpand.value) &&
-          slots.extend
+        (oldLineExtend.value || newLineExtend.value) && (!currentIsHidden.value || enableExpand.value) && slots.extend
       )
@@ -74,6 +59,10 @@ );
 
+    const extendSide = computed(
+      () => SplitSide[currentExtend.value ? props.side : props.side === SplitSide.new ? SplitSide.old : SplitSide.new]
+    );
+
     useSyncHeight({
       selector: lineSelector,
       wrapper: lineWrapperSelector,
-      side: currentSide,
+      side: extendSide,
       enable: currentIsShow,
@@ -80,0 +69,0 @@ });

src/components/DiffSplitExtendLineWrap.tsx

 import { borderColorName, emptyBGName } from "@git-diff-view/utils";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useExtendData, useSlots } from "../context";
-import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 
@@ -17,30 +16,16 @@ import { SplitSide } from "./DiffView";
 
-    const oldLine = ref(props.diffFile.getSplitLeftLine(props.index));
+    const oldLine = computed(() => props.diffFile.getSplitLeftLine(props.index));
 
-    const newLine = ref(props.diffFile.getSplitRightLine(props.index));
+    const newLine = computed(() => props.diffFile.getSplitRightLine(props.index));
 
-    const enableExpand = ref(props.diffFile.getExpandEnabled());
+    const enableExpand = computed(() => props.diffFile.getExpandEnabled());
 
-    const oldLineExtend = ref(extendData.value?.oldFile?.[oldLine.value?.lineNumber]);
+    const oldLineExtend = computed(() => extendData.value?.oldFile?.[oldLine.value?.lineNumber]);
 
-    const newLineExtend = ref(extendData.value?.newFile?.[newLine.value.lineNumber]);
+    const newLineExtend = computed(() => extendData.value?.newFile?.[newLine.value.lineNumber]);
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      oldLine.value = diffFile.getSplitLeftLine(props.index);
+    const hasHidden = computed(() => oldLine.value.isHidden && newLine.value.isHidden);
 
-      newLine.value = diffFile.getSplitRightLine(props.index);
-
-      oldLineExtend.value = extendData.value?.oldFile?.[oldLine.value?.lineNumber];
-
-      newLineExtend.value = extendData.value?.newFile?.[newLine.value.lineNumber];
-
-      enableExpand.value = diffFile.getExpandEnabled();
-    });
-
     const currentIsShow = computed(() =>
-      Boolean(
-        (oldLineExtend.value || newLineExtend.value) &&
-          ((!oldLine.value?.isHidden && !newLine.value?.isHidden) || enableExpand.value) &&
-          slots.extend
-      )
+      Boolean((oldLineExtend.value || newLineExtend.value) && (!hasHidden.value || enableExpand.value) && slots.extend)
     );
@@ -47,0 +32,0 @@

src/components/DiffSplitHunkLineNormal.tsx

@@ -20,5 +20,5 @@ import { composeLen, type DiffFile } from "@git-diff-view/core";
   (props: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
-    const currentHunk = ref(props.diffFile.getSplitHunkLine(props.index));
+    const currentHunk = computed(() => props.diffFile.getSplitHunkLine(props.index));
 
-    const enableExpand = ref(props.diffFile.getExpandEnabled());
+    const enableExpand = computed(() => props.diffFile.getExpandEnabled());
 
@@ -33,2 +33,10 @@ const couldExpand = computed(() => enableExpand.value && currentHunk.value && currentHunk.value.splitInfo);
 
+    const currentIsFirstLine = computed(() => currentHunk.value && currentHunk.value.isFirst);
+
+    const currentIsLastLine = computed(() => currentHunk.value && currentHunk.value.isLast);
+
+    const currentIsPureHunk = computed(
+      () => currentHunk.value && props.diffFile._getIsPureDiffRender() && !currentHunk.value.splitInfo
+    );
+
     const currentShowExpandAll = ref(
@@ -40,8 +48,2 @@ currentHunk.value &&
 
-    const currentIsFirstLine = ref(currentHunk.value && currentHunk.value.isFirst);
-
-    const currentIsPureHunk = ref(currentHunk.value && !currentHunk.value.splitInfo);
-
-    const currentIsLastLine = ref(currentHunk.value && currentHunk.value.isLast);
-
     const currentIsShow = ref(
@@ -53,7 +55,3 @@ currentHunk.value &&
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      currentHunk.value = diffFile.getSplitHunkLine(props.index);
-
-      enableExpand.value = diffFile.getExpandEnabled();
-
+    useSubscribeDiffFile(props, () => {
       currentShowExpandAll.value =
@@ -68,8 +66,2 @@ currentHunk.value &&
         currentHunk.value.splitInfo.startHiddenIndex < currentHunk.value.splitInfo.endHiddenIndex;
-
-      currentIsFirstLine.value = currentHunk.value && currentHunk.value.isFirst;
-
-      currentIsLastLine.value = currentHunk.value && currentHunk.value.isLast;
-
-      currentIsPureHunk.value = currentHunk.value && diffFile._getIsPureDiffRender() && !currentHunk.value.splitInfo;
     });
@@ -193,5 +185,5 @@
   (props: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
-    const currentHunk = ref(props.diffFile.getSplitHunkLine(props.index));
+    const currentHunk = computed(() => props.diffFile.getSplitHunkLine(props.index));
 
-    const enableExpand = ref(props.diffFile.getExpandEnabled());
+    const enableExpand = computed(() => props.diffFile.getExpandEnabled());
 
@@ -208,7 +200,9 @@ const lineSelector = computed(() => `tr[data-line="${props.lineNumber}-hunk"]`);
 
-    const currentIsFirstLine = ref(currentHunk.value && currentHunk.value.isFirst);
+    const currentIsFirstLine = computed(() => currentHunk.value && currentHunk.value.isFirst);
 
-    const currentIsPureHunk = ref(currentHunk.value && !currentHunk.value.splitInfo);
+    const currentIsPureHunk = computed(
+      () => currentHunk.value && props.diffFile._getIsPureDiffRender() && !currentHunk.value.splitInfo
+    );
 
-    const currentIsLastLine = ref(currentHunk.value && currentHunk.value.isLast);
+    const currentIsLastLine = computed(() => currentHunk.value && currentHunk.value.isLast);
 
@@ -232,7 +226,3 @@ const currentIsShow = ref(
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      currentHunk.value = diffFile.getSplitHunkLine(props.index);
-
-      enableExpand.value = diffFile.getExpandEnabled();
-
+    useSubscribeDiffFile(props, () => {
       currentShowExpandAll.value =
@@ -247,8 +237,2 @@ currentHunk.value &&
         currentHunk.value.splitInfo.startHiddenIndex < currentHunk.value.splitInfo.endHiddenIndex;
-
-      currentIsFirstLine.value = currentHunk.value && currentHunk.value.isFirst;
-
-      currentIsLastLine.value = currentHunk.value && currentHunk.value.isLast;
-
-      currentIsPureHunk.value = currentHunk.value && diffFile._getIsPureDiffRender() && !currentHunk.value.splitInfo;
     });
@@ -255,0 +239,0 @@

src/components/DiffSplitHunkLineWrap.tsx

@@ -19,5 +19,5 @@ import { composeLen, type DiffFile } from "@git-diff-view/core";
   (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
-    const currentHunk = ref(props.diffFile.getSplitHunkLine(props.index));
+    const currentHunk = computed(() => props.diffFile.getSplitHunkLine(props.index));
 
-    const enableExpand = ref(props.diffFile.getExpandEnabled());
+    const enableExpand = computed(() => props.diffFile.getExpandEnabled());
 
@@ -38,13 +38,11 @@ const couldExpand = computed(() => enableExpand.value && currentHunk.value && currentHunk.value.splitInfo);
 
-    const currentIsFirstLine = ref(currentHunk.value && currentHunk.value.isFirst);
+    const currentIsFirstLine = computed(() => currentHunk.value && currentHunk.value.isFirst);
 
-    const currentIsPureHunk = ref(currentHunk.value && !currentHunk.value.splitInfo);
+    const currentIsLastLine = computed(() => currentHunk.value && currentHunk.value.isLast);
 
-    const currentIsLastLine = ref(currentHunk.value && currentHunk.value.isLast);
+    const currentIsPureHunk = computed(
+      () => currentHunk.value && props.diffFile._getIsPureDiffRender() && !currentHunk.value.splitInfo
+    );
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      currentHunk.value = diffFile.getSplitHunkLine(props.index);
-
-      enableExpand.value = diffFile.getExpandEnabled();
-
+    useSubscribeDiffFile(props, () => {
       currentShowExpandAll.value =
@@ -59,8 +57,2 @@ currentHunk.value &&
         currentHunk.value.splitInfo.startHiddenIndex < currentHunk.value.splitInfo.endHiddenIndex;
-
-      currentIsFirstLine.value = currentHunk.value && currentHunk.value.isFirst;
-
-      currentIsLastLine.value = currentHunk.value && currentHunk.value.isLast;
-
-      currentIsPureHunk.value = currentHunk.value && diffFile._getIsPureDiffRender() && !currentHunk.value.splitInfo;
     });
@@ -155,5 +147,5 @@
   (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
-    const currentHunk = ref(props.diffFile.getSplitHunkLine(props.index));
+    const currentHunk = computed(() => props.diffFile.getSplitHunkLine(props.index));
 
-    const enableExpand = ref(props.diffFile.getExpandEnabled());
+    const enableExpand = computed(() => props.diffFile.getExpandEnabled());
 
@@ -174,13 +166,11 @@ const couldExpand = computed(() => enableExpand.value && currentHunk.value && currentHunk.value.splitInfo);
 
-    const currentIsFirstLine = ref(currentHunk.value && currentHunk.value.isFirst);
+    const currentIsFirstLine = computed(() => currentHunk.value && currentHunk.value.isFirst);
 
-    const currentIsPureHunk = ref(currentHunk.value && !currentHunk.value.splitInfo);
+    const currentIsPureHunk = computed(
+      () => currentHunk.value && props.diffFile._getIsPureDiffRender() && !currentHunk.value.splitInfo
+    );
 
-    const currentIsLastLine = ref(currentHunk.value && currentHunk.value.isLast);
+    const currentIsLastLine = computed(() => currentHunk.value && currentHunk.value.isLast);
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      currentHunk.value = diffFile.getSplitHunkLine(props.index);
-
-      enableExpand.value = diffFile.getExpandEnabled();
-
+    useSubscribeDiffFile(props, () => {
       currentShowExpandAll.value =
@@ -195,8 +185,2 @@ currentHunk.value &&
         currentHunk.value.splitInfo.startHiddenIndex < currentHunk.value.splitInfo.endHiddenIndex;
-
-      currentIsFirstLine.value = currentHunk.value && currentHunk.value.isFirst;
-
-      currentIsLastLine.value = currentHunk.value && currentHunk.value.isLast;
-
-      currentIsPureHunk.value = currentHunk.value && diffFile._getIsPureDiffRender() && !currentHunk.value.splitInfo;
     });
@@ -203,0 +187,0 @@

src/components/DiffSplitViewNormal.tsx

@@ -25,3 +25,8 @@ import { getSplitContentLines } from "@git-diff-view/core";
 const DiffSplitViewTable = defineComponent(
-  (props: { side: SplitSide; diffFile: DiffFile; onSelect?: (side?: SplitSide) => void }) => {
+  (props: {
+    side: SplitSide;
+    diffFile: DiffFile;
+    onSelect?: (side?: SplitSide) => void;
+    selectState: { current?: SplitSide };
+  }) => {
     const className = computed(() => (props.side === SplitSide.new ? "new-diff-table" : "old-diff-table"));
@@ -35,2 +40,4 @@
 
+    const selectState = props.selectState;
+
     const onMouseDown = (e: MouseEvent) => {
@@ -48,7 +55,13 @@ let ele = e.target as HTMLElement;
           if (state === "extend" || state === "hunk" || state === "widget") {
-            props.onSelect?.(undefined);
-            removeAllSelection();
+            if (selectState.current !== undefined) {
+              selectState.current = undefined;
+              props.onSelect?.(undefined);
+              removeAllSelection();
+            }
           } else {
-            props.onSelect?.(props.side);
-            removeAllSelection();
+            if (selectState.current !== props.side) {
+              selectState.current = props.side;
+              props.onSelect?.(props.side);
+              removeAllSelection();
+            }
           }
@@ -114,3 +127,3 @@ return;
   },
-  { name: "DiffSplitViewTable", props: ["diffFile", "side", "onSelect"] }
+  { name: "DiffSplitViewTable", props: ["diffFile", "side", "onSelect", "selectState"] }
 );
@@ -126,10 +139,6 @@
 
-    const side = ref<SplitSide>();
+    const styleRef = ref<HTMLStyleElement>();
 
-    const maxText = ref(props.diffFile.splitLineLength.toString());
+    const maxText = computed(() => Math.max(props.diffFile.splitLineLength, props.diffFile.fileLineLength).toString());
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      maxText.value = Math.max(diffFile.splitLineLength, diffFile.fileLineLength).toString();
-    });
-
     const initSyncScroll = (onClean: (cb: () => void) => void) => {
@@ -146,4 +155,19 @@ if (!isMounted.value) return;
 
+    const onSelect = (side?: SplitSide) => {
+      const ele = styleRef.value;
+
+      if (!ele) return;
+
+      if (!side) {
+        ele.textContent = "";
+      } else {
+        const id = `diff-root${props.diffFile.getId()}`;
+        ele.textContent = `#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+      }
+    };
+
     const fontSize = useFontSize();
 
+    const selectState = { current: undefined as SplitSide | undefined };
+
     const font = computed(() => ({ fontSize: fontSize.value + "px", fontFamily: "Menlo, Consolas, monospace" }));
@@ -156,11 +180,5 @@
     return () => {
-      const id = `diff-root${props.diffFile.getId()}`;
-
       return (
         <div class="split-diff-view split-diff-view-normal flex w-full basis-[50%]">
-          <style data-select-style>
-            {side.value
-              ? `#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`
-              : ""}
-          </style>
+          <style data-select-style ref={styleRef} />
           <div
@@ -179,5 +197,4 @@ class="old-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden"
               diffFile={props.diffFile}
-              onSelect={(s) => {
-                side.value = s;
-              }}
+              onSelect={onSelect}
+              selectState={selectState}
             />
@@ -199,5 +216,4 @@ </div>
               diffFile={props.diffFile}
-              onSelect={(s) => {
-                side.value = s;
-              }}
+              onSelect={onSelect}
+              selectState={selectState}
             />
@@ -204,0 +220,0 @@ </div>

src/components/DiffSplitViewWrap.tsx

@@ -17,14 +17,2 @@ import { getSplitContentLines } from "@git-diff-view/core";
 
-const Style = ({ splitSideInfo, id }: { splitSideInfo: { side: SplitSide }; id: string }) => {
-  return (
-    <style data-select-style>
-      {splitSideInfo.side === SplitSide.old
-        ? `#${id} [data-side="${SplitSide[SplitSide.new]}"] {user-select: none} \n#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`
-        : splitSideInfo.side === SplitSide.new
-          ? `#${id} [data-side="${SplitSide[SplitSide.old]}"] {user-select: none} \n#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`
-          : ""}
-    </style>
-  );
-};
-
 export const DiffSplitViewWrap = defineComponent(
@@ -34,6 +22,21 @@ (props: { diffFile: DiffFile }) => {
 
-    const maxText = ref(props.diffFile.splitLineLength.toString());
+    const maxText = computed(() => Math.max(props.diffFile.splitLineLength, props.diffFile.fileLineLength).toString());
 
-    const splitSideInfo = ref({ side: undefined as SplitSide });
+    const styleRef = ref<HTMLStyleElement | null>(null);
 
+    const selectState = { current: undefined as SplitSide | undefined };
+
+    const onSelect = (side?: SplitSide) => {
+      const ele = styleRef.value;
+
+      if (!ele) return;
+
+      if (!side) {
+        ele.textContent = "";
+      } else {
+        const id = `diff-root${props.diffFile.getId()}`;
+        ele.textContent = `#${id} [data-side="${SplitSide[side === SplitSide.old ? SplitSide.new : SplitSide.old]}"] {user-select: none} \n#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+      }
+    };
+
     const onMouseDown = (e: MouseEvent) => {
@@ -52,9 +55,15 @@ let ele = e.target;
         if (side) {
-          splitSideInfo.value.side = SplitSide[side];
-          removeAllSelection();
+          if (selectState.current !== SplitSide[side]) {
+            selectState.current = SplitSide[side];
+            onSelect(SplitSide[side]);
+            removeAllSelection();
+          }
         }
         if (state) {
           if (state === "extend" || state === "hunk" || state === "widget") {
-            splitSideInfo.value.side = undefined;
-            removeAllSelection();
+            if (selectState.current !== undefined) {
+              selectState.current = undefined;
+              onSelect(undefined);
+              removeAllSelection();
+            }
             return;
@@ -76,3 +85,2 @@ } else {
       lines.value = getSplitContentLines(diffFile);
-      maxText.value = Math.max(diffFile.splitLineLength, diffFile.fileLineLength).toString();
     });
@@ -95,3 +103,3 @@
           >
-            <Style splitSideInfo={splitSideInfo.value} id={`diff-root${props.diffFile.getId()}`} />
+            <style data-select-style ref={styleRef} />
             <table class="diff-table w-full table-fixed border-collapse border-spacing-0">
@@ -98,0 +106,0 @@ <colgroup>

src/components/DiffSplitWidgetLineNormal.tsx

 import { emptyBGName } from "@git-diff-view/utils";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useSetWidget, useSlots, useWidget } from "../context";
 import { useDomWidth } from "../hooks/useDomWidth";
-import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 import { useSyncHeight } from "../hooks/useSyncHeight";
@@ -21,5 +20,5 @@
 
-    const oldLine = ref(props.diffFile.getSplitLeftLine(props.index));
+    const oldLine = computed(() => props.diffFile.getSplitLeftLine(props.index));
 
-    const newLine = ref(props.diffFile.getSplitRightLine(props.index));
+    const newLine = computed(() => props.diffFile.getSplitRightLine(props.index));
 
@@ -40,10 +39,6 @@ const oldLineWidget = computed(
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      oldLine.value = diffFile.getSplitLeftLine(props.index);
+    const currentLine = computed(() => (props.side === SplitSide.old ? oldLine.value : newLine.value));
 
-      newLine.value = diffFile.getSplitRightLine(props.index);
-    });
+    const currentIsHidden = computed(() => currentLine.value.isHidden);
 
-    const currentLine = computed(() => (props.side === SplitSide.old ? oldLine.value : newLine.value));
-
     const lineSelector = computed(() => `div[data-line="${props.lineNumber}-widget-content"]`);
@@ -57,12 +52,14 @@
 
-    const observeSide = computed(() => SplitSide[props.side]);
+    const currentWidget = computed(() => (props.side === SplitSide.old ? oldLineWidget.value : newLineWidget.value));
 
-    const currentIsShow = computed(
-      () => (!!oldLineWidget.value || !!newLineWidget.value) && !currentLine.value.isHidden && !!slots.widget
+    const observeSide = computed(
+      () => SplitSide[currentWidget ? props.side : props.side === SplitSide.old ? SplitSide.new : SplitSide.old]
     );
 
-    const currentWidget = computed(
-      () => (props.side === SplitSide.old ? oldLineWidget.value : newLineWidget.value) && !!currentIsShow.value
+    const currentIsShow = computed(
+      () => (!!oldLineWidget.value || !!newLineWidget.value) && !currentIsHidden.value && !!slots.widget
     );
 
+    const currentEnable = computed(() => currentWidget.value && !!currentIsShow.value);
+
     const onCloseWidget = () => setWidget({});
@@ -79,3 +76,3 @@
       selector: wrapperSelector,
-      enable: currentWidget,
+      enable: currentEnable,
     });
@@ -82,0 +79,0 @@

src/components/DiffSplitWidgetLineWrap.tsx

 import { borderColorName, emptyBGName } from "@git-diff-view/utils";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent } from "vue";
 
 import { useSetWidget, useSlots, useWidget } from "../context";
-import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 
@@ -19,5 +18,5 @@ import { SplitSide } from "./DiffView";
 
-    const oldLine = ref(props.diffFile.getSplitLeftLine(props.index));
+    const oldLine = computed(() => props.diffFile.getSplitLeftLine(props.index));
 
-    const newLine = ref(props.diffFile.getSplitRightLine(props.index));
+    const newLine = computed(() => props.diffFile.getSplitRightLine(props.index));
 
@@ -38,14 +37,6 @@ const oldLineWidget = computed(
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      oldLine.value = diffFile.getSplitLeftLine(props.index);
+    const hasHidden = computed(() => oldLine.value.isHidden && newLine.value.isHidden);
 
-      newLine.value = diffFile.getSplitRightLine(props.index);
-    });
-
     const currentIsShow = computed(
-      () =>
-        (!!oldLineWidget.value || !!newLineWidget.value) &&
-        !oldLine.value.isHidden &&
-        !newLine.value.isHidden &&
-        !!slots.widget
+      () => (!!oldLineWidget.value || !!newLineWidget.value) && !hasHidden.value && !!slots.widget
     );
@@ -52,0 +43,0 @@

src/components/DiffUnifiedContentLine.tsx

@@ -14,3 +14,3 @@ import { type DiffFile, type DiffLine, checkDiffLineIncludeChange, type File } from "@git-diff-view/core";
 } from "@git-diff-view/utils";
-import { defineComponent, ref } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
@@ -54,3 +54,3 @@ import { SplitSide } from "..";
       <td
-        class="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
+        class="diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
         style={{
@@ -127,3 +127,3 @@ color: `var(${plainLineNumberColorName})`,
       <td
-        class="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
+        class="diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
         style={{
@@ -172,3 +172,3 @@ color: `var(${plainLineNumberColorName})`,
   (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
-    const unifiedItem = ref(props.diffFile.getUnifiedLine(props.index));
+    const unifiedItem = computed(() => props.diffFile.getUnifiedLine(props.index));
 
@@ -185,5 +185,5 @@ const enableWrap = useEnableWrap();
 
-    const currentItemHasHidden = ref(unifiedItem.value?.isHidden);
+    const currentItemHasHidden = computed(() => unifiedItem.value?.isHidden);
 
-    const currentItemHasChange = ref(checkDiffLineIncludeChange(unifiedItem.value?.diff));
+    const currentItemHasChange = computed(() => checkDiffLineIncludeChange(unifiedItem.value?.diff));
 
@@ -207,4 +207,2 @@ const currentSyntaxLine = ref(
     useSubscribeDiffFile(props, (diffFile) => {
-      unifiedItem.value = diffFile.getUnifiedLine(props.index);
-
       currentSyntaxLine.value = unifiedItem.value?.newLineNumber
@@ -221,6 +219,2 @@ ? diffFile.getNewSyntaxLine(unifiedItem.value.newLineNumber)
           : undefined;
-
-      currentItemHasHidden.value = unifiedItem.value?.isHidden;
-
-      currentItemHasChange.value = checkDiffLineIncludeChange(unifiedItem.value?.diff);
     });
@@ -277,3 +271,3 @@
             <td
-              class="diff-line-num sticky left-0 w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
+              class="diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
               style={{
@@ -280,0 +274,0 @@ color: `var(${unifiedItem.value.diff ? plainLineNumberColorName : expandLineNumberColorName})`,

src/components/DiffUnifiedExtendLine.tsx

@@ -6,3 +6,2 @@ import { computed, defineComponent, ref } from "vue";
 import { useDomWidth } from "../hooks/useDomWidth";
-import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 
@@ -17,18 +16,12 @@ import type { DiffFile } from "@git-diff-view/core";
 
-    const unifiedItem = ref(props.diffFile.getUnifiedLine(props.index));
+    const unifiedItem = computed(() => props.diffFile.getUnifiedLine(props.index));
 
-    const oldExtend = ref(extendData.value?.oldFile?.[unifiedItem.value.oldLineNumber]);
+    const oldExtend = computed(() => extendData.value?.oldFile?.[unifiedItem.value.oldLineNumber]);
 
-    const newExtend = ref(extendData.value?.newFile?.[unifiedItem.value.newLineNumber]);
+    const newExtend = computed(() => extendData.value?.newFile?.[unifiedItem.value.newLineNumber]);
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      unifiedItem.value = diffFile.getUnifiedLine(props.index);
+    const currentIsHidden = computed(() => unifiedItem.value.isHidden);
 
-      oldExtend.value = extendData.value?.oldFile?.[unifiedItem.value.oldLineNumber];
-
-      newExtend.value = extendData.value?.newFile?.[unifiedItem.value.newLineNumber];
-    });
-
     const currentIsShow = computed(() =>
-      Boolean((oldExtend.value || newExtend.value) && !unifiedItem.value.isHidden && slots.extend)
+      Boolean((oldExtend.value || newExtend.value) && !currentIsHidden.value && slots.extend)
     );
@@ -35,0 +28,0 @@

src/components/DiffUnifiedHunkLine.tsx

@@ -20,5 +20,5 @@ import { composeLen } from "@git-diff-view/core";
   (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
-    const currentHunk = ref(props.diffFile.getUnifiedHunkLine(props.index));
+    const currentHunk = computed(() => props.diffFile.getUnifiedHunkLine(props.index));
 
-    const enableExpand = ref(props.diffFile.getExpandEnabled());
+    const enableExpand = computed(() => props.diffFile.getExpandEnabled());
 
@@ -41,13 +41,11 @@ const couldExpand = computed(() => enableExpand.value && currentHunk.value && currentHunk.value.unifiedInfo);
 
-    const currentIsFirstLine = ref(currentHunk.value && currentHunk.value.isFirst);
+    const currentIsFirstLine = computed(() => currentHunk.value && currentHunk.value.isFirst);
 
-    const currentIsPureHunk = ref(currentHunk.value && !currentHunk.value.unifiedInfo);
+    const currentIsLastLine = computed(() => currentHunk.value && currentHunk.value.isLast);
 
-    const currentIsLastLine = ref(currentHunk.value && currentHunk.value.isLast);
+    const currentIsPureHunk = computed(
+      () => currentHunk.value && props.diffFile._getIsPureDiffRender() && !currentHunk.value.unifiedInfo
+    );
 
-    useSubscribeDiffFile(props, (diffFile) => {
-      currentHunk.value = diffFile.getUnifiedHunkLine(props.index);
-
-      enableExpand.value = diffFile.getExpandEnabled();
-
+    useSubscribeDiffFile(props, () => {
       currentIsShow.value =
@@ -62,8 +60,2 @@ currentHunk.value &&
         currentHunk.value.unifiedInfo.endHiddenIndex - currentHunk.value.unifiedInfo.startHiddenIndex < composeLen;
-
-      currentIsFirstLine.value = currentHunk.value && currentHunk.value.isFirst;
-
-      currentIsLastLine.value = currentHunk.value && currentHunk.value.isLast;
-
-      currentIsPureHunk.value = currentHunk.value && diffFile._getIsPureDiffRender() && !currentHunk.value.unifiedInfo;
     });
@@ -70,0 +62,0 @@

src/components/DiffUnifiedView.tsx

@@ -20,7 +20,8 @@ import { getUnifiedContentLine } from "@git-diff-view/core";
 
-    const maxText = ref(props.diffFile.unifiedLineLength.toString());
+    const maxText = computed(() =>
+      Math.max(props.diffFile.unifiedLineLength, props.diffFile.fileLineLength).toString()
+    );
 
     useSubscribeDiffFile(props, (diffFile) => {
       lines.value = getUnifiedContentLine(diffFile);
-      maxText.value = Math.max(diffFile.splitLineLength, diffFile.fileLineLength).toString();
     });
@@ -32,4 +33,19 @@
 
-    const stateRef = ref<boolean>();
+    const selectState = { current: undefined as boolean | undefined };
 
+    const styleRef = ref<HTMLStyleElement | null>(null);
+
+    const onSelect = (state?: boolean) => {
+      const ele = styleRef.value;
+
+      if (!ele) return;
+
+      if (state === undefined) {
+        ele.textContent = "";
+      } else {
+        const id = `diff-root${props.diffFile.getId()}`;
+        ele.textContent = `#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`;
+      }
+    };
+
     const onMouseDown = (e: MouseEvent) => {
@@ -47,7 +63,13 @@ let ele = e.target as HTMLElement;
           if (state === "extend" || state === "hunk" || state === "widget") {
-            stateRef.value = false;
-            removeAllSelection();
+            if (selectState.current !== false) {
+              selectState.current = false;
+              onSelect(false);
+              removeAllSelection();
+            }
           } else {
-            stateRef.value = true;
-            removeAllSelection();
+            if (selectState.current !== true) {
+              selectState.current = true;
+              onSelect(true);
+              removeAllSelection();
+            }
           }
@@ -67,4 +89,2 @@ return;
     return () => {
-      const id = `diff-root${props.diffFile.getId()}`;
-
       return (
@@ -74,7 +94,3 @@ <div
         >
-          <style data-select-style>
-            {stateRef.value
-              ? `#${id} [data-state="extend"] {user-select: none} \n#${id} [data-state="hunk"] {user-select: none} \n#${id} [data-state="widget"] {user-select: none}`
-              : ""}
-          </style>
+          <style data-select-style ref={styleRef} />
           <div
@@ -81,0 +97,0 @@ class="unified-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden"

src/components/DiffUnifiedWidgetLine.tsx

@@ -6,3 +6,2 @@ import { computed, defineComponent, ref } from "vue";
 import { useDomWidth } from "../hooks/useDomWidth";
-import { useSubscribeDiffFile } from "../hooks/useSubscribeDiffFile";
 
@@ -19,3 +18,3 @@ import type { DiffFile } from "@git-diff-view/core";
 
-    const unifiedItem = ref(props.diffFile.getUnifiedLine(props.index));
+    const unifiedItem = computed(() => props.diffFile.getUnifiedLine(props.index));
 
@@ -36,6 +35,6 @@ const oldWidget = computed(
 
-    useSubscribeDiffFile(props, (diffFile) => (unifiedItem.value = diffFile.getUnifiedLine(props.index)));
+    const currentIsHidden = computed(() => unifiedItem.value.isHidden);
 
     const currentIsShow = computed(
-      () => (oldWidget.value || newWidget.value) && !unifiedItem.value.isHidden && !!slots.widget
+      () => (oldWidget.value || newWidget.value) && !currentIsHidden.value && !!slots.widget
     );
@@ -42,0 +41,0 @@

src/components/DiffView.tsx

 import { DiffFile, _cacheMap, SplitSide } from "@git-diff-view/core";
-import { diffFontSizeName } from "@git-diff-view/utils";
+import { diffFontSizeName, DiffModeEnum } from "@git-diff-view/utils";
 import { defineComponent, provide, ref, watch, watchEffect, computed, onUnmounted } from "vue";
@@ -30,13 +30,4 @@
 
-export enum DiffModeEnum {
-  // github like
-  SplitGitHub = 1,
-  // gitlab like
-  SplitGitLab = 2,
-  Split = 1 | 2,
-  Unified = 4,
-}
+export { SplitSide, DiffModeEnum };
 
-export { SplitSide };
-
 export type DiffViewProps<T> = {
@@ -129,4 +120,2 @@ data?: {
           };
-        } else {
-          widgetState.value = {};
         }
@@ -171,5 +160,3 @@ },
       if (!isMounted.value || !enableHighlight.value || !diffFile.value) return;
-      // hack to track the value change
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      theme.value;
+
       const instance = diffFile.value;
@@ -185,6 +172,14 @@ instance.initSyntax({
       const instance = diffFile.value;
-      const cb = instance.subscribe(() => {
+      // hack to track the value change
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      theme.value;
+      const init = () => {
         wrapperRef.value?.setAttribute("data-theme", instance._getTheme() || "light");
         wrapperRef.value?.setAttribute("data-highlighter", instance._getHighlighterName());
-      });
+      };
+
+      init();
+
+      const cb = instance.subscribe(init);
+
       onClean(() => cb());
@@ -191,0 +186,0 @@ };

src/hooks/useDomWidth.ts

@@ -7,3 +7,3 @@ import { ref, watchPostEffect } from "vue";
 
-type ObserveElement = HTMLElement & {
+export type ObserveElement = HTMLElement & {
   __observeCallback: Set<() => void>;
@@ -10,0 +10,0 @@ __observeInstance: ResizeObserver;

src/hooks/useSyncHeight.ts

@@ -5,2 +5,4 @@ import { type Ref, watchPostEffect } from "vue";
 
+import type { ObserveElement } from "./useDomWidth";
+
 // TODO
@@ -28,49 +30,66 @@ export const useSyncHeight = ({
 
-      const timer = setTimeout(() => {
-        const container = document.querySelector(`#diff-root${id.value}`);
+      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) || []);
+      const wrappers = wrapper.value ? Array.from(container?.querySelectorAll(wrapper?.value) || []) : elements;
 
-        if (elements.length === 2 && wrappers.length === 2) {
-          const ele1 = elements[0] as HTMLElement;
-          const ele2 = elements[1] as HTMLElement;
+      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 wrapper1 = wrappers[0] as HTMLElement;
+        const wrapper2 = wrappers[1] as HTMLElement;
 
-          const target = ele1.getAttribute("data-side") === side.value ? ele1 : ele2;
+        const target = ele1.getAttribute("data-side") === side.value ? ele1 : ele2;
 
-          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));
-          };
+        const typedTarget = target as ObserveElement;
 
-          cb();
+        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));
+        };
 
-          const observer = new ResizeObserver(cb);
+        cb();
 
-          observer.observe(target);
+        const cleanCb = () => {
+          typedTarget.__observeCallback.delete(cb);
+          if (typedTarget.__observeCallback.size === 0) {
+            typedTarget.__observeInstance?.disconnect();
+            target.removeAttribute("data-observe");
+            delete typedTarget.__observeCallback;
+            delete typedTarget.__observeInstance;
+          }
+        };
 
-          target.setAttribute("data-observe", "height");
+        if (typedTarget.__observeCallback) {
+          typedTarget.__observeCallback.add(cb);
 
-          clean = () => {
-            observer.disconnect();
-            target?.removeAttribute("data-observe");
-          };
+          clean = cleanCb;
+          return;
         }
-      });
 
-      onCancel(() => {
-        clean();
-        clearTimeout(timer);
-      });
+        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");
+
+        clean = cleanCb;
+      }
+
+      onCancel(() => clean());
     }
@@ -77,0 +96,0 @@ };

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

1054057

8.68%

Lines of code

12885

29.73%

Number of low quality alerts

1

-66.67%

Dependency changes

• + Added

  @git-diff-view/core@0.0.29
  (transitive)

• + Added

  @git-diff-view/lowlight@0.0.29
  (transitive)

• - Removed

  @git-diff-view/core@0.0.28
  (transitive)

• - Removed

  @git-diff-view/lowlight@0.0.28
  (transitive)

• Updated

  @git-diff-view/core@^0.0.29