Compile only when the document changes

src/lib/components/Editor.svelte

@@ -12,7 +12,8 @@
 	import { getThemeExtension } from '../ts/themes';
 	import { themeStore, darkModeStore, editorViewStore, editorErrors, triggerLspReconnect } from '../ts/store';
 	import { page } from '$app/stores';
-	import { LSPClient, languageServerExtensions } from "@codemirror/lsp-client";
+	import { LSPClient } from "@codemirror/lsp-client";
+	import { typstLspExtensions } from '../ts/editor-lsp';
 	import { setDiagnostics, lintGutter } from '@codemirror/lint';
 	import { bracketExtensions, typstBracketSettings } from '../ts/editor-brackets';
 
@@ -202,6 +203,7 @@
 		
 		editorViewStore.set(view);
 
+		let lastCompilerDiagnostics = '';
 		unsubscribeErrors = editorErrors.subscribe((errors) => {
 			if (view) {
 				const docLen = view.state.doc.length;
@@ -218,6 +220,9 @@
 						message: e.message
 					};
 				});
+				const snapshot = JSON.stringify(safeDiagnostics);
+				if (snapshot === lastCompilerDiagnostics) return;
+				lastCompilerDiagnostics = snapshot;
 				view.dispatch(setDiagnostics(view.state, safeDiagnostics));
 			}
 		});
@@ -246,6 +251,7 @@
 
 		let lsHandlers: ((value: string) => void)[] = [];
 		let lspInitialized = false;
+		let lastServerDiagnostics = '';
 
 		const transport = {
 			send(message: string) { if (lsSocket?.readyState === WebSocket.OPEN) lsSocket.send(message); },
@@ -261,6 +267,7 @@
 			
 			lspInitialized = false;
 			lsHandlers = [];
+			lastServerDiagnostics = '';
 			
 			lsSocket = new WebSocket(`${protocol}//${host}/api/lsp/${docId}`);
 
@@ -274,7 +281,7 @@
 							client = new LSPClient({
 								rootUri: msg.rootUri,
 								timeout: 10000,
-								extensions: languageServerExtensions()
+								extensions: typstLspExtensions()
 							}).connect(transport);
 
 							view.dispatch({
@@ -292,6 +299,10 @@
 						if (msg.method === 'textDocument/publishDiagnostics' && msg.params && msg.params.diagnostics) {
 							msg.params.diagnostics = msg.params.diagnostics.filter((d: any) => !d.message.toLowerCase().includes('unknown font family'));
 							processedData = JSON.stringify(msg);
+
+							const snapshot = `${msg.params.uri}:${msg.params.version ?? ''}:${JSON.stringify(msg.params.diagnostics)}`;
+							if (snapshot === lastServerDiagnostics) return;
+							lastServerDiagnostics = snapshot;
 						}
 					} catch (err) {}
 				}

src/lib/ts/editor-lsp.ts

@@ -0,0 +1,19 @@
+import {
+	serverCompletion,
+	serverDiagnostics,
+	signatureHelp,
+	formatKeymap,
+	renameKeymap,
+	jumpToDefinitionKeymap,
+	findReferencesKeymap
+} from '@codemirror/lsp-client';
+import { keymap } from '@codemirror/view';
+
+export function typstLspExtensions() {
+	return [
+		serverCompletion(),
+		signatureHelp(),
+		serverDiagnostics(),
+		keymap.of([...formatKeymap, ...renameKeymap, ...jumpToDefinitionKeymap, ...findReferencesKeymap])
+	];
+}

src/routes/doc/[id]/+page.svelte

@@ -14,6 +14,7 @@
 	let svgs = $state<string[]>([]);
 	let errors = $state<Diagnostic[]>([]);
 	let timeoutId: number | undefined;
+	let lastCompiledContent: string | null = null;
 	let initialized = $state(false);
 	let documentTitle = $state('Untitled Document');
 	let isViewer = $state(false);
@@ -54,6 +55,8 @@
 	function triggerCompile() {
 		if (!text || !$previewOpenStore) return;
 		const content = text.toString();
+		if (content === lastCompiledContent) return;
+		lastCompiledContent = content;
 		const docId = $page.params.id;
 		compileTypst(content, docId)
 			.then((res) => {
@@ -71,6 +74,7 @@
 			})
 			.catch((e) => {
 				console.error('Compilation fetch failed', e);
+				lastCompiledContent = null;
 				errors = [{ message: 'Network or Server Error compiling document.', severity: 'error' }];
 			});
 	}
@@ -106,8 +110,6 @@
 			timeoutId = window.setTimeout(triggerCompile, 500);
 		});
 
-		triggerCompile();
-
 		return () => {
 			if (timeoutId) clearTimeout(timeoutId);
 			cleanupYjs();

src/routes/project/[id]/+page.svelte

@@ -31,6 +31,7 @@
 	let showPublish = $state(false);
 	let ready = $state(false);
 	let timeoutId: number | undefined;
+	let lastCompiledSources: string | null = null;
 
 	let contextMenu = $state({ show: false, x: 0, y: 0, text: '' });
 
@@ -43,9 +44,18 @@
 		timeoutId = window.setTimeout(triggerCompile, 500);
 	}
 
+	function recompileAfterFileChange() {
+		lastCompiledSources = null;
+		scheduleCompile();
+	}
+
 	function triggerCompile() {
 		if (!$previewOpenStore) return;
-		compileProject(projectId, getAllText())
+		const sources = getAllText();
+		const fingerprint = JSON.stringify(sources);
+		if (fingerprint === lastCompiledSources) return;
+		lastCompiledSources = fingerprint;
+		compileProject(projectId, sources)
 			.then((res) => {
 				if (res.stats) $documentStatsStore = res.stats;
 				if (res.svgs) {
@@ -58,6 +68,7 @@
 				}
 			})
 			.catch(() => {
+				lastCompiledSources = null;
 				errors = [{ message: 'Network or server error compiling project.', severity: 'error' }];
 			});
 	}
@@ -106,7 +117,7 @@
 		const res = await fetch(`/api/projects/${projectId}/files/upload`, { method: 'POST', body: form });
 		if (res.ok) {
 			await loadFiles();
-			triggerCompile();
+			recompileAfterFileChange();
 		}
 	}
 
@@ -119,7 +130,7 @@
 		if (res.ok) {
 			files = files.map((f) => (f.id === file.id ? { ...f, path } : f));
 			renameOpenFile(file.id, path);
-			scheduleCompile();
+			recompileAfterFileChange();
 		}
 	}
 
@@ -132,7 +143,7 @@
 			if (activeFileId === file.id) {
 				activeFileId = files.find((f) => f.kind === 'text')?.id ?? '';
 			}
-			scheduleCompile();
+			recompileAfterFileChange();
 		}
 	}
 
@@ -144,7 +155,7 @@
 		});
 		if (res.ok) {
 			entrypoint = file.path;
-			scheduleCompile();
+			recompileAfterFileChange();
 		}
 	}