update

Author: MrWangJustToDo

packages/react/src/components/DiffView.tsx

@@ -299,19 +299,23 @@ const DiffViewWithRef = <T extends unknown>(
   useEffect(() => {
     if (!diffFile) return;
     diffFile.initTheme(diffViewTheme);
+
     diffFile.initRaw();
+
     diffFile.buildSplitDiffLines();
+
     diffFile.buildUnifiedDiffLines();
   }, [diffFile, diffViewTheme]);
 
   useEffect(() => {
     if (!diffFile) return;
-    
+
     if (props.diffViewHighlight) {
       diffFile.initSyntax({ registerHighlighter });
-      diffFile.notifyAll();
     }
-  }, [diffFile, props.diffViewHighlight, registerHighlighter]);
+
+    diffFile.notifyAll();
+  }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
 
   useEffect(() => {
     if (!diffFile) return;
@@ -326,7 +330,7 @@ const DiffViewWithRef = <T extends unknown>(
     const cb = diffFile.subscribe(init);
 
     return cb;
-  }, [diffFile, diffViewTheme]);
+  }, [diffFile]);
 
   // fix react strict mode error
   useUnmount(() => (__DEV__ ? diffFile?._destroy?.() : diffFile?.clear?.()), [diffFile]);

packages/solid/src/components/DiffView.tsx

@@ -187,17 +187,19 @@ const InternalDiffView = <T extends unknown>(props: DiffViewProps<T>) => {
   const initSyntax = () => {
     const mounted = isMounted();
     const currentDiffFile = diffFile();
-    if (mounted && currentDiffFile && props.diffViewHighlight) {
-      currentDiffFile.initSyntax({ registerHighlighter: props.registerHighlighter });
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    props.diffViewTheme;
+    if (mounted && currentDiffFile) {
+      if (props.diffViewHighlight) {
+        currentDiffFile.initSyntax({ registerHighlighter: props.registerHighlighter });
+      }
       currentDiffFile.notifyAll();
     }
   };
 
   const initAttribute = () => {
     const mounted = isMounted();
     const currentDiffFile = diffFile();
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    props.diffViewTheme;
     if (mounted && currentDiffFile && wrapperRef()) {
       const init = () => {
         wrapperRef()?.setAttribute("data-theme", currentDiffFile._getTheme() || "light");

packages/svelte/src/lib/components/DiffView.svelte

@@ -156,10 +156,16 @@
 	$effect(initDiff);
 
 	const initSyntax = () => {
-		if (!diffFile || !isMounted || !enableHighlight) return;
-		diffFile.initSyntax({
-			registerHighlighter: props.registerHighlighter
-		});
+		if (!diffFile || !isMounted) return;
+
+		theme;
+
+		if (enableHighlight) {
+			diffFile.initSyntax({
+				registerHighlighter: props.registerHighlighter
+			});
+		}
+
 		diffFile.notifyAll();
 	};
 
@@ -172,8 +178,6 @@
 
 		if (!isMounted || !diffFile || !wrapperRef) return;
 
-		theme;
-
 		const init = () => {
 			wrapperRef?.setAttribute('data-theme', diffFile._getTheme() || 'light');
 			wrapperRef?.setAttribute('data-highlighter', diffFile._getHighlighterName());

packages/vue/src/components/DiffView.tsx

@@ -154,21 +154,26 @@ export const DiffView = defineComponent<
     };
 
     const initSyntax = () => {
-      if (!isMounted.value || !enableHighlight.value || !diffFile.value) return;
+      if (!isMounted.value || !diffFile.value) return;
 
       const instance = diffFile.value;
-      instance.initSyntax({
-        registerHighlighter: props.registerHighlighter,
-      });
+
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      theme.value;
+
+      if (enableHighlight.value) {
+        instance.initSyntax({
+          registerHighlighter: props.registerHighlighter,
+        });
+      }
+
       instance.notifyAll();
     };
 
     const initAttribute = (onClean: (cb: () => void) => void) => {
       if (!isMounted.value || !diffFile.value || !wrapperRef.value) return;
       const instance = diffFile.value;
-      // 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());