fix

Author: MrWangJustToDo

packages/core/src/parse/diff-tool.ts

@@ -1,5 +1,5 @@
 import { diffChanges, relativeChanges } from "./change-range";
-import { DiffLineType } from "./diff-line";
+import { DiffLineType, DiffLine } from "./diff-line";
 import { DiffHunkExpansionType } from "./raw-diff";
 import {
   getEnableFastDiffTemplate,
@@ -10,7 +10,6 @@ import {
 } from "./template";
 
 import type { SyntaxLineWithTemplate } from "../file";
-import type { DiffLine } from "./diff-line";
 import type { DiffHunk, DiffHunkHeader } from "./raw-diff";
 
 /** How many new lines will be added to a diff hunk by default. */
@@ -122,8 +121,14 @@ export const getDiffRange = (
       if (!addition.changes || !deletion.changes) {
         // use the original text content to computed diff range
         // fix: get diff with ignoreWhiteSpace config
-        const _addition = addition.clone(getAdditionRaw(addition.newLineNumber) || addition.text || "");
-        const _deletion = deletion.clone(getDeletionRaw(deletion.oldLineNumber) || deletion.text || "");
+        const _addition = DiffLine.prototype.clone.call(
+          addition,
+          getAdditionRaw(addition.newLineNumber) || addition.text || ""
+        );
+        const _deletion = DiffLine.prototype.clone.call(
+          deletion,
+          getDeletionRaw(deletion.oldLineNumber) || deletion.text || ""
+        );
         const { addRange, delRange } = relativeChanges(_addition, _deletion);
         addition.changes = addRange;
         deletion.changes = delRange;
@@ -154,8 +159,14 @@ export const getDiffRange = (
           });
         }
       } else {
-        const _addition = addition.clone(getAdditionRaw(addition.newLineNumber) || addition.text || "");
-        const _deletion = deletion.clone(getDeletionRaw(deletion.oldLineNumber) || deletion.text || "");
+        const _addition = DiffLine.prototype.clone.call(
+          addition,
+          getAdditionRaw(addition.newLineNumber) || addition.text || ""
+        );
+        const _deletion = DiffLine.prototype.clone.call(
+          deletion,
+          getDeletionRaw(deletion.oldLineNumber) || deletion.text || ""
+        );
         const { addRange, delRange } = diffChanges(_addition, _deletion);
         addition.diffChanges = addRange;
         deletion.diffChanges = delRange;

packages/solid/src/components/DiffView.tsx

@@ -181,6 +181,8 @@ const InternalDiffView = <T extends unknown>(props: DiffViewProps<T>) => {
       currentDiffFile.initRaw();
       currentDiffFile.buildSplitDiffLines();
       currentDiffFile.buildUnifiedDiffLines();
+      // 看起来solid的 effect 调用无法保证顺序？
+      currentDiffFile.notifyAll();
     }
   };
 

packages/svelte/src/lib/components/DiffSplitExtendLineNormal.svelte

@@ -15,6 +15,8 @@
 
 	let props: Props = $props();
 
+	let lineDom = $state<HTMLElement | null>(null);
+
 	const extendData = $derived.by(getExtend());
 
 	const renderExtend = $derived.by(getRenderExtend());
@@ -67,13 +69,13 @@
 		selector: () => lineSelector,
 		wrapper: () => lineWrapperSelector,
 		side: () => extendSide,
-		enable: () => currentIsShow
+		enable: () => Boolean(currentIsShow && lineDom)
 	});
 
 	const width = $derived.by(
 		useDomWidth({
 			selector: () => wrapperSelector,
-			enable: () => currentEnable
+			enable: () => Boolean(currentEnable && lineDom)
 		})
 	);
 </script>
@@ -84,6 +86,7 @@
 		data-state="extend"
 		data-side={SplitSide[props.side]}
 		class="diff-line diff-line-extend"
+		{@attach (l) => (lineDom = l)}
 	>
 		{#if !!renderExtend && currentExtend}
 			<td class={`diff-line-extend-${SplitSide[props.side]}-content p-0`} colspan={2}>

packages/svelte/src/lib/components/DiffSplitHunkLineNormalGitHub.svelte

@@ -22,6 +22,8 @@
 
 	let props: Props = $props();
 
+	let lineDom = $state<HTMLElement | null>(null);
+
 	const currentHunk = $derived.by(() => props.diffFile.getSplitHunkLine(props.index));
 
 	const enableExpand = $derived.by(() => props.diffFile.getExpandEnabled());
@@ -94,7 +96,7 @@
 		selector: () => lineSelector,
 		wrapper: () => lineSelector,
 		side: () => currentSyncHeightSide,
-		enable: () => currentEnableSyncHeight
+		enable: () => Boolean(currentEnableSyncHeight && lineDom)
 	});
 </script>
 
@@ -105,6 +107,7 @@
 		data-side={SplitSide[props.side]}
 		style={`background-color: var(${hunkContentBGName})`}
 		class="diff-line diff-line-hunk"
+		{@attach (l) => (lineDom = l)}
 	>
 		{#if currentShowExpand}
 			<td

packages/svelte/src/lib/components/DiffSplitHunkLineNormalGitLab.svelte

@@ -22,6 +22,8 @@
 
 	let props: Props = $props();
 
+	let lineDom = $state<HTMLElement | null>(null);
+
 	const currentHunk = $derived.by(() => props.diffFile.getSplitHunkLine(props.index));
 
 	const enableExpand = $derived.by(() => props.diffFile.getExpandEnabled());
@@ -92,7 +94,7 @@
 		selector: () => lineSelector,
 		wrapper: () => lineSelector,
 		side: () => currentSyncHeightSide,
-		enable: () => currentEnableSyncHeight
+		enable: () => Boolean(currentEnableSyncHeight && lineDom)
 	});
 </script>
 
@@ -103,6 +105,7 @@
 		data-side={SplitSide[props.side]}
 		style={`background-color: var(${hunkContentBGName})`}
 		class="diff-line diff-line-hunk"
+		{@attach (l) => (lineDom = l)}
 	>
 		<td
 			class="diff-line-hunk-action sticky left-0 w-[1%] min-w-[40px] select-none p-[1px]"

packages/svelte/src/lib/components/DiffSplitWidgetLineNormal.svelte

@@ -15,6 +15,8 @@
 
 	let props: Props = $props();
 
+	let lineDom = $state<HTMLElement | null>(null);
+
 	const renderWidget = $derived.by(getRenderWidget());
 
 	const widget = $derived.by(getWidget());
@@ -75,13 +77,13 @@
 		selector: () => lineSelector,
 		wrapper: () => lineWrapperSelector,
 		side: () => observeSide,
-		enable: () => currentIsShow
+		enable: () => Boolean(currentIsShow && lineDom)
 	});
 
 	const width = $derived.by(
 		useDomWidth({
 			selector: () => wrapperSelector,
-			enable: () => currentEnable
+			enable: () => Boolean(currentEnable && lineDom)
 		})
 	);
 </script>
@@ -92,6 +94,7 @@
 		data-state="widget"
 		data-side={SplitSide[props.side]}
 		class="diff-line diff-line-widget"
+		{@attach (l) => (lineDom = l)}
 	>
 		{#if currentWidget}
 			<td class={`diff-line-widget-${SplitSide[props.side]}-content p-0`} colspan={2}>

packages/svelte/src/lib/hooks/useDomWidth.svelte.ts

@@ -25,8 +25,6 @@ export const useDomWidth = ({
 	const observeWidth = () => {
 		if (!isMounted) return;
 
-		cancel.current?.();
-
 		if (enable()) {
 			const container = document.querySelector(`#diff-root${id}`);
 
@@ -79,7 +77,11 @@ export const useDomWidth = ({
 		}
 	};
 
-	$effect(observeWidth);
+	$effect(() => {
+		observeWidth();
+
+		return () => cancel.current?.();
+	});
 
 	return () => width;
 };

packages/svelte/src/lib/hooks/useSyncHeight.svelte.ts

@@ -22,8 +22,6 @@ export const useSyncHeight = ({
 	const unSubscribe = { current: () => {} };
 
 	const observeHeight = () => {
-		unSubscribe.current();
-
 		if (!isMounted) return;
 
 		if (enable()) {
@@ -100,5 +98,9 @@ export const useSyncHeight = ({
 		}
 	};
 
-	$effect(observeHeight);
+	$effect(() => {
+		observeHeight();
+
+		return () => unSubscribe.current?.();
+	});
 };

scripts/build.ts

@@ -121,8 +121,8 @@ const start = async () => {
   process.exit(0);
 };
 
-start();
+// start();
 
 // buildCli();
 
-// buildSvelte();
+buildSvelte();