Skip to content

Commit 353e264

Browse files
MrWangJustToDoMrWangJustToDo
committed
fix
1 parent c35b846 commit 353e264

14 files changed

+64
-77
lines changed

‎packages/react/src/components/DiffSplitHunkLineNormal.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,7 @@ const InternalDiffSplitHunkLineGitHub = ({
8282
className="diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
8383
title="Expand Down"
8484
data-title="Expand Down"
85-
onClick={() => {
86-
diffFile.onSplitHunkExpand("down", index);
87-
}}
85+
onClick={() => diffFile.onSplitHunkExpand("down", index)}
8886
>
8987
<ExpandDown className="fill-current" />
9088
</button>
@@ -212,9 +210,7 @@ const InternalDiffSplitHunkLineGitLab = ({
212210
className="diff-widget-tooltip relative flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
213211
title="Expand Down"
214212
data-title="Expand Down"
215-
onClick={() => {
216-
diffFile.onSplitHunkExpand("down", index);
217-
}}
213+
onClick={() => diffFile.onSplitHunkExpand("down", index)}
218214
>
219215
<ExpandDown className="fill-current" />
220216
</button>

‎packages/react/src/components/DiffView.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,8 @@ const InternalDiffView = <T extends unknown>(props: Omit<DiffViewProps<T>, "data
132132
setId,
133133
mode,
134134
setMode,
135+
mounted,
136+
setMounted,
135137
enableAddWidget,
136138
setEnableAddWidget,
137139
enableHighlight,
@@ -157,6 +159,10 @@ const InternalDiffView = <T extends unknown>(props: Omit<DiffViewProps<T>, "data
157159
setMode(diffViewMode);
158160
}
159161

162+
if (mounted !== isMounted) {
163+
setMounted(isMounted);
164+
}
165+
160166
if (diffViewAddWidget !== enableAddWidget) {
161167
setEnableAddWidget(diffViewAddWidget);
162168
}
@@ -196,6 +202,7 @@ const InternalDiffView = <T extends unknown>(props: Omit<DiffViewProps<T>, "data
196202
diffViewWrap,
197203
diffViewAddWidget,
198204
diffFileId,
205+
isMounted,
199206
renderWidgetLine,
200207
renderExtendLine,
201208
extendData,

‎packages/react/src/components/tools.ts

+6
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ export const createDiffConfigStore = (props: DiffViewProps<any>, diffFileId: str
1414

1515
const setMode = (_mode: DiffModeEnum) => (mode.value = _mode);
1616

17+
const mounted = ref(false);
18+
19+
const setMounted = (_mounted: boolean) => (mounted.value = _mounted);
20+
1721
const enableWrap = ref(props.diffViewWrap);
1822

1923
const setEnableWrap = (_enableWrap: boolean) => (enableWrap.value = _enableWrap);
@@ -79,6 +83,8 @@ export const createDiffConfigStore = (props: DiffViewProps<any>, diffFileId: str
7983
setId,
8084
mode,
8185
setMode,
86+
mounted,
87+
setMounted,
8288
enableWrap,
8389
setEnableWrap,
8490
enableAddWidget,

‎packages/react/src/hooks/useDomWidth.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useCallback, useEffect, useState } from "react";
1+
import { useEffect, useState } from "react";
22

33
import { useDiffViewContext } from "../components/DiffViewContext";
44

@@ -12,10 +12,10 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
1212

1313
const { useDiffContext } = useDiffViewContext();
1414

15-
const id = useDiffContext(useCallback((s) => s.id, []));
15+
const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
1616

1717
useEffect(() => {
18-
if (enable) {
18+
if (enable && mounted) {
1919
const container = document.querySelector(`#diff-root${id}`);
2020

2121
const wrapper = container?.querySelector(selector);
@@ -61,7 +61,7 @@ export const useDomWidth = ({ selector, enable }: { selector: string; enable: bo
6161

6262
return () => cleanCb();
6363
}
64-
}, [selector, enable, id]);
64+
}, [selector, enable, id, mounted]);
6565

6666
return width;
6767
};

‎packages/react/src/hooks/useSyncHeight.ts

+33-42
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useCallback, useEffect } from "react";
1+
import { useEffect } from "react";
22

33
import { useDiffViewContext } from "../components/DiffViewContext";
44

@@ -16,59 +16,50 @@ export const useSyncHeight = ({
1616
}) => {
1717
const { useDiffContext } = useDiffViewContext();
1818

19-
const id = useDiffContext(useCallback((s) => s.id, []));
19+
const { id, mounted } = useDiffContext.useShallowStableSelector((s) => ({ id: s.id, mounted: s.mounted }));
2020

2121
useEffect(() => {
22-
if (enable) {
23-
let clean = () => {};
24-
// fix the dom delay update
25-
const timer = setTimeout(() => {
26-
const container = document.querySelector(`#diff-root${id}`);
22+
if (enable && mounted) {
23+
const container = document.querySelector(`#diff-root${id}`);
2724

28-
const elements = Array.from(container?.querySelectorAll(selector) || []);
25+
const elements = Array.from(container?.querySelectorAll(selector) || []);
2926

30-
const wrappers = wrapper ? Array.from(container?.querySelectorAll(wrapper) || []) : elements;
27+
const wrappers = wrapper ? Array.from(container?.querySelectorAll(wrapper) || []) : elements;
3128

32-
if (elements.length === 2 && wrappers.length === 2) {
33-
const ele1 = elements[0] as HTMLElement;
34-
const ele2 = elements[1] as HTMLElement;
29+
if (elements.length === 2 && wrappers.length === 2) {
30+
const ele1 = elements[0] as HTMLElement;
31+
const ele2 = elements[1] as HTMLElement;
3532

36-
const wrapper1 = wrappers[0] as HTMLElement;
37-
const wrapper2 = wrappers[1] as HTMLElement;
33+
const wrapper1 = wrappers[0] as HTMLElement;
34+
const wrapper2 = wrappers[1] as HTMLElement;
3835

39-
const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
36+
const target = ele1.getAttribute("data-side") === side ? ele1 : ele2;
4037

41-
const cb = () => {
42-
ele1.style.height = "auto";
43-
ele2.style.height = "auto";
44-
const rect1 = ele1.getBoundingClientRect();
45-
const rect2 = ele2.getBoundingClientRect();
46-
const maxHeight = Math.max(rect1.height, rect2.height);
47-
wrapper1.style.height = maxHeight + "px";
48-
wrapper2.style.height = maxHeight + "px";
49-
wrapper1.setAttribute("data-sync-height", String(maxHeight));
50-
wrapper2.setAttribute("data-sync-height", String(maxHeight));
51-
};
38+
const cb = () => {
39+
ele1.style.height = "auto";
40+
ele2.style.height = "auto";
41+
const rect1 = ele1.getBoundingClientRect();
42+
const rect2 = ele2.getBoundingClientRect();
43+
const maxHeight = Math.max(rect1.height, rect2.height);
44+
wrapper1.style.height = maxHeight + "px";
45+
wrapper2.style.height = maxHeight + "px";
46+
wrapper1.setAttribute("data-sync-height", String(maxHeight));
47+
wrapper2.setAttribute("data-sync-height", String(maxHeight));
48+
};
5249

53-
cb();
50+
cb();
5451

55-
const observer = new ResizeObserver(cb);
52+
const observer = new ResizeObserver(cb);
5653

57-
observer.observe(target);
54+
observer.observe(target);
5855

59-
target.setAttribute("data-observe", "height");
56+
target.setAttribute("data-observe", "height");
6057

61-
clean = () => {
62-
observer.disconnect();
63-
target?.removeAttribute("data-observe");
64-
};
65-
}
66-
});
67-
68-
return () => {
69-
clean();
70-
clearTimeout(timer);
71-
};
58+
return () => {
59+
observer.disconnect();
60+
target?.removeAttribute("data-observe");
61+
};
62+
}
7263
}
73-
}, [selector, enable, side, id, wrapper]);
64+
}, [selector, enable, side, id, wrapper, mounted]);
7465
};

‎packages/vue/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"gen:css1": "postcss src/tailwind.css -o dist/css/diff-view.css",
2424
"gen:css2": "postcss src/tailwind_pure.css -o dist/css/diff-view-pure.css",
2525
"gen:css": "npm run gen:css1 && npm run gen:css2",
26-
"gen:type": "dts-bundle-generator -o index.d.ts dist/index.d.ts"
26+
"gen:type": "dts-bundle-generator -o index.d.ts dist/types/index.d.ts"
2727
},
2828
"homepage": "https://mrwangjusttodo.github.io/git-diff-view",
2929
"exports": {
@@ -47,7 +47,6 @@
4747
"fast-diff": "^1.3.0"
4848
},
4949
"devDependencies": {
50-
"@rollup/plugin-typescript": "^12.1.2",
5150
"@vitejs/plugin-vue": "^5.2.1",
5251
"@vitejs/plugin-vue-jsx": "^4.1.1",
5352
"autoprefixer": "^10.4.20",

‎packages/vue/src/components/DiffView.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
onAddWidgetClickSymbol,
1515
widgetStateSymbol,
1616
setWidgetStateSymbol,
17+
mountedSymbol,
1718
} from "../context";
1819
import { useIsMounted } from "../hooks/useIsMounted";
1920
import { useProvide } from "../hooks/useProvide";
@@ -191,6 +192,8 @@ export const DiffView = defineComponent<
191192

192193
provide(idSymbol, id);
193194

195+
provide(mountedSymbol, isMounted);
196+
194197
provide(slotsSymbol, options.slots);
195198

196199
provide(onAddWidgetClickSymbol, options.emit);

‎packages/vue/src/context/inject.ts

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
fontSizeSymbol,
99
idSymbol,
1010
modeSymbol,
11+
mountedSymbol,
1112
onAddWidgetClickSymbol,
1213
setWidgetStateSymbol,
1314
slotsSymbol,
@@ -18,6 +19,8 @@ export const useId = () => inject(idSymbol);
1819

1920
export const useMode = () => inject(modeSymbol);
2021

22+
export const useIsMounted = () => inject(mountedSymbol);
23+
2124
export const useFontSize = () => inject(fontSizeSymbol);
2225

2326
export const useEnableWrap = () => inject(enableWrapSymbol);

‎packages/vue/src/context/provider.ts

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import type { InjectionKey, Ref, Slot } from "vue";
44

55
export const idSymbol: InjectionKey<Ref<string>> = Symbol();
66

7+
export const mountedSymbol: InjectionKey<Ref<boolean>> = Symbol();
8+
79
export const modeSymbol: InjectionKey<Ref<DiffModeEnum>> = Symbol();
810

911
export const fontSizeSymbol: InjectionKey<Ref<number>> = Symbol();

‎packages/vue/src/hooks/useDomWidth.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { ref, watchPostEffect } from "vue";
22

3-
import { useId } from "../context";
4-
5-
import { useIsMounted } from "./useIsMounted";
3+
import { useId, useIsMounted } from "../context";
64

75
import type { Ref } from "vue";
86

‎packages/vue/src/hooks/useSyncHeight.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { type Ref, watchPostEffect } from "vue";
22

3-
import { useId } from "../context";
4-
5-
import { useIsMounted } from "./useIsMounted";
3+
import { useId, useIsMounted } from "../context";
64

75
// TODO
86
export const useSyncHeight = ({

‎packages/vue/vite.config.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import typescript from "@rollup/plugin-typescript";
21
import vue from "@vitejs/plugin-vue";
32
import vueJsx from "@vitejs/plugin-vue-jsx";
43
import * as path from "path";
@@ -8,9 +7,7 @@ import dts from "vite-plugin-dts";
87
import pkg from "./package.json";
98

109
export default defineConfig({
11-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
12-
// @ts-ignore
13-
plugins: [typescript({ tsconfig: "./tsconfig.json" }), vue(), vueJsx(), dts()],
10+
plugins: [vue(), vueJsx(), dts({ outDir: "dist/types" })],
1411
build: {
1512
lib: {
1613
entry: path.resolve(__dirname, "src/index.ts"),

‎pnpm-lock.yaml

-12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/build.ts

-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ const buildType = async (packageName: string) => {
3939
ls.on("error", (e) => j(e));
4040
});
4141
await clean(packageName);
42-
if (packageName === "vue") return;
4342
await clear(packageName);
4443
};
4544

0 commit comments

Comments
 (0)