fix

MrWangJustToDo · MrWangJustToDo · commit 353e26424cfb · 2025-02-25T13:34:27.000+08:00
diff --git a/packages/react/src/components/DiffSplitHunkLineNormal.tsx b/packages/react/src/components/DiffSplitHunkLineNormal.tsx
@@ -82,9 +82,7 @@ const InternalDiffSplitHunkLineGitHub = ({
                   className="diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
                   title="Expand Down"
                   data-title="Expand Down"
-                  onClick={() => {
-                    diffFile.onSplitHunkExpand("down", index);
-                  }}
+                  onClick={() => diffFile.onSplitHunkExpand("down", index)}
                 >
                   <ExpandDown className="fill-current" />
                 </button>
@@ -212,9 +210,7 @@ const InternalDiffSplitHunkLineGitLab = ({
               className="diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
               title="Expand Down"
               data-title="Expand Down"
-              onClick={() => {
-                diffFile.onSplitHunkExpand("down", index);
-              }}
+              onClick={() => diffFile.onSplitHunkExpand("down", index)}
             >
               <ExpandDown className="fill-current" />
             </button>
diff --git a/packages/react/src/components/DiffView.tsx b/packages/react/src/components/DiffView.tsx
@@ -132,6 +132,8 @@ const InternalDiffView = <T extends unknown>(props: Omit<DiffViewProps<T>, "data
       setId,
       mode,
       setMode,
+      mounted,
+      setMounted,
       enableAddWidget,
       setEnableAddWidget,
       enableHighlight,
@@ -157,6 +159,10 @@ const InternalDiffView = <T extends unknown>(props: Omit<DiffViewProps<T>, "data
       setMode(diffViewMode);
     }
 
+    if (mounted !== isMounted) {
+      setMounted(isMounted);
+    }
+
     if (diffViewAddWidget !== enableAddWidget) {
       setEnableAddWidget(diffViewAddWidget);
     }
@@ -196,6 +202,7 @@ const InternalDiffView = <T extends unknown>(props: Omit<DiffViewProps<T>, "data
     diffViewWrap,
     diffViewAddWidget,
     diffFileId,
+    isMounted,
     renderWidgetLine,
     renderExtendLine,
     extendData,
diff --git a/packages/react/src/components/tools.ts b/packages/react/src/components/tools.ts
@@ -14,6 +14,10 @@ export const createDiffConfigStore = (props: DiffViewProps<any>, diffFileId: str
 
     const setMode = (_mode: DiffModeEnum) => (mode.value = _mode);
 
+    const mounted = ref(false);
+
+    const setMounted = (_mounted: boolean) => (mounted.value = _mounted);
+
     const enableWrap = ref(props.diffViewWrap);
 
     const setEnableWrap = (_enableWrap: boolean) => (enableWrap.value = _enableWrap);
@@ -79,6 +83,8 @@ export const createDiffConfigStore = (props: DiffViewProps<any>, diffFileId: str
       setId,
       mode,
       setMode,
+      mounted,
+      setMounted,
       enableWrap,
       setEnableWrap,
       enableAddWidget,
diff --git a/packages/react/src/hooks/useDomWidth.ts b/packages/react/src/hooks/useDomWidth.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useDiffViewContext } from "../components/DiffViewContext";
 
@@ -12,10 +12,10 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
 
   const { useDiffContext } = useDiffViewContext();
 
-  const id = useDiffContext(useCallback((s) => s.id, []));
+  const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
 
   useEffect(() => {
-    if (enable) {
+    if (enable && mounted) {
       const container = document.querySelector(`#diff-root${id}`);
 
       const wrapper = container?.querySelector(selector);
@@ -61,7 +61,7 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
 
       return () => cleanCb();
     }
-  }, [selector, enable, id]);
+  }, [selector, enable, id, mounted]);
 
   return width;
 };
diff --git a/packages/react/src/hooks/useSyncHeight.ts b/packages/react/src/hooks/useSyncHeight.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
 
 import { useDiffViewContext } from "../components/DiffViewContext";
 
@@ -16,59 +16,50 @@ export const useSyncHeight = ({
 }) => {
   const { useDiffContext } = useDiffViewContext();
 
-  const id = useDiffContext(useCallback((s) => s.id, []));
+  const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
 
   useEffect(() => {
-    if (enable) {
-      let clean = () => {};
-      // fix the dom delay update
-      const timer = setTimeout(() => {
-        const container = document.querySelector(`#diff-root${id}`);
+    if (enable && mounted) {
+      const container = document.querySelector(`#diff-root${id}`);
 
-        const elements = Array.from(container?.querySelectorAll(selector) || []);
+      const elements = Array.from(container?.querySelectorAll(selector) || []);
 
-        const wrappers = wrapper ? Array.from(container?.querySelectorAll(wrapper) || []) : elements;
+      const wrappers = wrapper ? Array.from(container?.querySelectorAll(wrapper) || []) : 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 ? ele1 : ele2;
+        const target = ele1.getAttribute("data-side") === side ? 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 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));
+        };
 
-          cb();
+        cb();
 
-          const observer = new ResizeObserver(cb);
+        const observer = new ResizeObserver(cb);
 
-          observer.observe(target);
+        observer.observe(target);
 
-          target.setAttribute("data-observe", "height");
+        target.setAttribute("data-observe", "height");
 
-          clean = () => {
-            observer.disconnect();
-            target?.removeAttribute("data-observe");
-          };
-        }
-      });
-
-      return () => {
-        clean();
-        clearTimeout(timer);
-      };
+        return () => {
+          observer.disconnect();
+          target?.removeAttribute("data-observe");
+        };
+      }
     }
-  }, [selector, enable, side, id, wrapper]);
+  }, [selector, enable, side, id, wrapper, mounted]);
 };
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -23,7 +23,7 @@
     "gen:css1": "postcss src/tailwind.css -o dist/css/diff-view.css",
     "gen:css2": "postcss src/tailwind_pure.css -o dist/css/diff-view-pure.css",
     "gen:css": "npm run gen:css1 && npm run gen:css2",
-    "gen:type": "dts-bundle-generator -o index.d.ts dist/index.d.ts"
+    "gen:type": "dts-bundle-generator -o index.d.ts dist/types/index.d.ts"
   },
   "homepage": "https://mrwangjusttodo.github.io/git-diff-view",
   "exports": {
@@ -47,7 +47,6 @@
     "fast-diff": "^1.3.0"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^12.1.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "autoprefixer": "^10.4.20",
diff --git a/packages/vue/src/components/DiffView.tsx b/packages/vue/src/components/DiffView.tsx
@@ -14,6 +14,7 @@ import {
   onAddWidgetClickSymbol,
   widgetStateSymbol,
   setWidgetStateSymbol,
+  mountedSymbol,
 } from "../context";
 import { useIsMounted } from "../hooks/useIsMounted";
 import { useProvide } from "../hooks/useProvide";
@@ -191,6 +192,8 @@ export const DiffView = defineComponent<
 
     provide(idSymbol, id);
 
+    provide(mountedSymbol, isMounted);
+
     provide(slotsSymbol, options.slots);
 
     provide(onAddWidgetClickSymbol, options.emit);
diff --git a/packages/vue/src/context/inject.ts b/packages/vue/src/context/inject.ts
@@ -8,6 +8,7 @@ import {
   fontSizeSymbol,
   idSymbol,
   modeSymbol,
+  mountedSymbol,
   onAddWidgetClickSymbol,
   setWidgetStateSymbol,
   slotsSymbol,
@@ -18,6 +19,8 @@ export const useId = () => inject(idSymbol);
 
 export const useMode = () => inject(modeSymbol);
 
+export const useIsMounted = () => inject(mountedSymbol);
+
 export const useFontSize = () => inject(fontSizeSymbol);
 
 export const useEnableWrap = () => inject(enableWrapSymbol);
diff --git a/packages/vue/src/context/provider.ts b/packages/vue/src/context/provider.ts
@@ -4,6 +4,8 @@ import type { InjectionKey, Ref, Slot } from "vue";
 
 export const idSymbol: InjectionKey<Ref<string>> = Symbol();
 
+export const mountedSymbol: InjectionKey<Ref<boolean>> = Symbol();
+
 export const modeSymbol: InjectionKey<Ref<DiffModeEnum>> = Symbol();
 
 export const fontSizeSymbol: InjectionKey<Ref<number>> = Symbol();
diff --git a/packages/vue/src/hooks/useDomWidth.ts b/packages/vue/src/hooks/useDomWidth.ts
@@ -1,8 +1,6 @@
 import { ref, watchPostEffect } from "vue";
 
-import { useId } from "../context";
-
-import { useIsMounted } from "./useIsMounted";
+import { useId, useIsMounted } from "../context";
 
 import type { Ref } from "vue";
 
diff --git a/packages/vue/src/hooks/useSyncHeight.ts b/packages/vue/src/hooks/useSyncHeight.ts
@@ -1,8 +1,6 @@
 import { type Ref, watchPostEffect } from "vue";
 
-import { useId } from "../context";
-
-import { useIsMounted } from "./useIsMounted";
+import { useId, useIsMounted } from "../context";
 
 // TODO
 export const useSyncHeight = ({
diff --git a/packages/vue/vite.config.ts b/packages/vue/vite.config.ts
@@ -1,4 +1,3 @@
-import typescript from "@rollup/plugin-typescript";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
 import * as path from "path";
@@ -8,9 +7,7 @@ import dts from "vite-plugin-dts";
 import pkg from "./package.json";
 
 export default defineConfig({
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  plugins: [typescript({ tsconfig: "./tsconfig.json" }), vue(), vueJsx(), dts()],
+  plugins: [vue(), vueJsx(), dts({ outDir: "dist/types" })],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/build.ts b/scripts/build.ts
@@ -39,7 +39,6 @@ const buildType = async (packageName: string) => {
     ls.on("error", (e) => j(e));
   });
   await clean(packageName);
-  if (packageName === "vue") return;
   await clear(packageName);
 };
 
