stream-monaco 0.0.13 → 0.0.15

package/README.md

@@ -80,6 +80,13 @@ The `useMonaco()` function returns an object with the following methods:
 - **`setUpdateThrottleMs(ms)`** - Change update throttle at runtime
 - **`getUpdateThrottleMs()`** - Get current throttle value
 
+#### Diff streaming highlight tip
+
+Monaco's diff computation is async and cancels/restarts when models change. If you stream updates too frequently (e.g. per token / every frame), the diff may only finish once streaming stops, so the difference highlights appear "at the end".
+
+- Set `diffUpdateThrottleMs` (default: 50) to let the diff worker complete intermediate computations during streaming.
+- Set it to `0` to restore pure RAF batching (most responsive, but may delay diff highlights under heavy streaming).
+
 ### Install
 
 ```bash
@@ -473,6 +480,7 @@ cleanupEditor()
 ### Troubleshooting
 
 - Editor invisible after build: configure Monaco web workers correctly.
+- Diff editor renders blank during early mount/streaming: ensure Monaco workers are configured before `createEditor`/`createDiffEditor` (e.g. call `preloadMonacoWorkers()` as early as possible).
 - Theme not applied: ensure theme name is included in `themes`.
 - Language highlighting missing: ensure the language is included and supported by Shiki.
 

package/README.zh-CN.md

@@ -720,11 +720,15 @@ onUnmounted(() => {
 
 确保正确配置了 Monaco Editor 的 Web Workers（参考上面的 Vite/Webpack 配置）。
 
-#### 2. 主题不生效
+#### 2. Diff 编辑器流式更新时内容区空白
+
+确保在调用 `createEditor` / `createDiffEditor` 之前已正确配置 Monaco 的 workers（建议尽早调用 `preloadMonacoWorkers()`）。
+
+#### 3. 主题不生效
 
 检查主题名称是否正确，确保主题已在 `themes` 数组中注册。
 
-#### 3. 语言高亮不工作
+#### 4. 语言高亮不工作
 
 确保语言已在 `languages` 数组中包含，并且 Shiki 支持该语言。
 

package/dist/index.cjs

@@ -516,11 +516,15 @@ var DiffEditorManager = class {
 	revealBatchOnIdleMsOption;
 	scrollWatcherSuppressionMs = 500;
 	diffScrollWatcherSuppressionTimer = null;
-	appendBufferDiff = [];
+	appendBufferOriginalDiff = [];
+	appendBufferModifiedDiff = [];
 	appendBufferDiffScheduled = false;
+	diffUpdateThrottleMs = 50;
+	lastAppendFlushTimeDiff = 0;
+	appendFlushThrottleTimerDiff = null;
 	rafScheduler = createRafScheduler();
 	diffHeightManager = null;
-	constructor(options, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, revealDebounceMsOption) {
+	constructor(options, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, revealDebounceMsOption, diffUpdateThrottleMsOption) {
 		this.options = options;
 		this.maxHeightValue = maxHeightValue;
 		this.maxHeightCSS = maxHeightCSS;
@@ -531,6 +535,40 @@ var DiffEditorManager = class {
 		this.diffAutoScroll = diffAutoScroll;
 		this.revealDebounceMsOption = revealDebounceMsOption;
 	}
+	scheduleFlushAppendBufferDiff() {
+		if (this.appendBufferDiffScheduled) return;
+		this.appendBufferDiffScheduled = true;
+		const schedule = () => {
+			this.rafScheduler.schedule("appendDiff", () => this.flushAppendBufferDiff());
+		};
+		const throttle = this.diffUpdateThrottleMs;
+		if (!throttle) {
+			schedule();
+			return;
+		}
+		const now = Date.now();
+		const since = now - this.lastAppendFlushTimeDiff;
+		if (since >= throttle) {
+			schedule();
+			return;
+		}
+		if (this.appendFlushThrottleTimerDiff != null) return;
+		const wait = throttle - since;
+		this.appendFlushThrottleTimerDiff = setTimeout(() => {
+			this.appendFlushThrottleTimerDiff = null;
+			schedule();
+		}, wait);
+	}
+	flushOriginalAppendBufferSync() {
+		if (!this.originalModel) return;
+		if (this.appendBufferOriginalDiff.length === 0) return;
+		this.rafScheduler.cancel("appendDiff");
+		this.appendBufferDiffScheduled = false;
+		const text = this.appendBufferOriginalDiff.join("");
+		this.appendBufferOriginalDiff.length = 0;
+		if (!text) return;
+		this.appendToModel(this.originalModel, text);
+	}
 	computedHeight() {
 		var _originalEditor$getMo, _modifiedEditor$getMo, _originalEditor$getSc, _modifiedEditor$getSc;
 		if (!this.diffEditorView) return Math.min(1 * 18 + padding, this.maxHeightValue);
@@ -778,6 +816,7 @@ var DiffEditorManager = class {
 		});
 		this.lastKnownOriginalCode = originalCode;
 		this.lastKnownModifiedCode = modifiedCode;
+		this.diffUpdateThrottleMs = this.options.diffUpdateThrottleMs ?? 50;
 		this.shouldAutoScrollDiff = !!(this.autoScrollInitial && this.diffAutoScroll);
 		if (this.diffScrollWatcher) {
 			this.diffScrollWatcher.dispose();
@@ -894,16 +933,14 @@ var DiffEditorManager = class {
 		const prevM = this.lastKnownModifiedCode;
 		let didImmediate = false;
 		if (originalCode !== prevO && originalCode.startsWith(prevO)) {
-			this.appendToModel(this.originalModel, originalCode.slice(prevO.length));
+			this.appendOriginal(originalCode.slice(prevO.length));
 			this.lastKnownOriginalCode = originalCode;
 			didImmediate = true;
 		}
 		if (modifiedCode !== prevM && modifiedCode.startsWith(prevM)) {
-			const prevLine = this.modifiedModel.getLineCount();
-			this.appendToModel(this.modifiedModel, modifiedCode.slice(prevM.length));
+			this.appendModified(modifiedCode.slice(prevM.length));
 			this.lastKnownModifiedCode = modifiedCode;
 			didImmediate = true;
-			this.maybeScrollDiffToBottom(this.modifiedModel.getLineCount(), prevLine);
 		}
 		if (originalCode !== this.lastKnownOriginalCode || modifiedCode !== this.lastKnownModifiedCode) {
 			this.pendingDiffUpdate = {
@@ -921,8 +958,11 @@ var DiffEditorManager = class {
 		}
 		const prev = this.lastKnownOriginalCode ?? this.originalModel.getValue();
 		if (prev === newCode) return;
-		if (newCode.startsWith(prev) && prev.length < newCode.length) this.appendToModel(this.originalModel, newCode.slice(prev.length));
-		else this.applyMinimalEditToModel(this.originalModel, prev, newCode);
+		if (newCode.startsWith(prev) && prev.length < newCode.length) this.appendOriginal(newCode.slice(prev.length), codeLanguage);
+		else {
+			this.flushOriginalAppendBufferSync();
+			this.applyMinimalEditToModel(this.originalModel, prev, newCode);
+		}
 		this.lastKnownOriginalCode = newCode;
 	}
 	updateModified(newCode, codeLanguage) {
@@ -933,12 +973,12 @@ var DiffEditorManager = class {
 		}
 		const prev = this.lastKnownModifiedCode ?? this.modifiedModel.getValue();
 		if (prev === newCode) return;
-		const prevLine = this.modifiedModel.getLineCount();
-		if (newCode.startsWith(prev) && prev.length < newCode.length) {
-			this.appendToModel(this.modifiedModel, newCode.slice(prev.length));
-			this.maybeScrollDiffToBottom(this.modifiedModel.getLineCount(), prevLine);
-		} else {
-			this.applyMinimalEditToModel(this.modifiedModel, prev, newCode);
+		if (newCode.startsWith(prev) && prev.length < newCode.length) this.appendModified(newCode.slice(prev.length), codeLanguage);
+		else {
+			this.flushModifiedAppendBufferSync();
+			const prevAfterFlush = this.modifiedModel.getValue();
+			const prevLine = this.modifiedModel.getLineCount();
+			this.applyMinimalEditToModel(this.modifiedModel, prevAfterFlush, newCode);
 			const newLine = this.modifiedModel.getLineCount();
 			if (newLine !== prevLine) {
 				const shouldImmediate = this.shouldPerformImmediateRevealDiff();
@@ -972,8 +1012,8 @@ var DiffEditorManager = class {
 			const lang = processedLanguage(codeLanguage);
 			if (lang && this.originalModel.getLanguageId() !== lang) monaco_shim_exports.editor.setModelLanguage(this.originalModel, lang);
 		}
-		this.appendToModel(this.originalModel, appendText);
-		this.lastKnownOriginalCode = this.originalModel.getValue();
+		this.appendBufferOriginalDiff.push(appendText);
+		this.scheduleFlushAppendBufferDiff();
 	}
 	appendModified(appendText, codeLanguage) {
 		if (!this.diffEditorView || !this.modifiedModel || !appendText) return;
@@ -981,11 +1021,8 @@ var DiffEditorManager = class {
 			const lang = processedLanguage(codeLanguage);
 			if (lang && this.modifiedModel.getLanguageId() !== lang) monaco_shim_exports.editor.setModelLanguage(this.modifiedModel, lang);
 		}
-		this.appendBufferDiff.push(appendText);
-		if (!this.appendBufferDiffScheduled) {
-			this.appendBufferDiffScheduled = true;
-			this.rafScheduler.schedule("appendDiff", () => this.flushAppendBufferDiff());
-		}
+		this.appendBufferModifiedDiff.push(appendText);
+		this.scheduleFlushAppendBufferDiff();
 	}
 	setLanguage(language, languages$1) {
 		if (!languages$1.includes(language)) {
@@ -1009,7 +1046,12 @@ var DiffEditorManager = class {
 		this.pendingDiffUpdate = null;
 		this.rafScheduler.cancel("appendDiff");
 		this.appendBufferDiffScheduled = false;
-		this.appendBufferDiff.length = 0;
+		this.appendBufferOriginalDiff.length = 0;
+		this.appendBufferModifiedDiff.length = 0;
+		if (this.appendFlushThrottleTimerDiff != null) {
+			clearTimeout(this.appendFlushThrottleTimerDiff);
+			this.appendFlushThrottleTimerDiff = null;
+		}
 		this.rafScheduler.cancel("content-size-change-diff");
 		this.rafScheduler.cancel("sync-last-known-modified");
 		if (this.diffScrollWatcher) {
@@ -1056,6 +1098,14 @@ var DiffEditorManager = class {
 	safeClean() {
 		this.rafScheduler.cancel("diff");
 		this.pendingDiffUpdate = null;
+		this.rafScheduler.cancel("appendDiff");
+		this.appendBufferDiffScheduled = false;
+		this.appendBufferOriginalDiff.length = 0;
+		this.appendBufferModifiedDiff.length = 0;
+		if (this.appendFlushThrottleTimerDiff != null) {
+			clearTimeout(this.appendFlushThrottleTimerDiff);
+			this.appendFlushThrottleTimerDiff = null;
+		}
 		if (this.diffScrollWatcher) {
 			this.diffScrollWatcher.dispose();
 			this.diffScrollWatcher = null;
@@ -1107,6 +1157,8 @@ var DiffEditorManager = class {
 		}
 		const { original, modified, lang } = this.pendingDiffUpdate;
 		this.pendingDiffUpdate = null;
+		this.flushOriginalAppendBufferSync();
+		this.flushModifiedAppendBufferSync();
 		if (lang) {
 			const plang = processedLanguage(lang);
 			if (plang) {
@@ -1124,14 +1176,7 @@ var DiffEditorManager = class {
 			else this.applyMinimalEditToModel(o, prevO, original);
 			this.lastKnownOriginalCode = original;
 		}
-		let prevM = this.lastKnownModifiedCode;
-		const buffered = this.appendBufferDiff.length > 0 ? this.appendBufferDiff.join("") : "";
-		if (this.appendBufferDiff.length > 0) try {
-			prevM = m.getValue() + buffered;
-			this.lastKnownModifiedCode = prevM;
-		} catch {
-			prevM = (this.lastKnownModifiedCode ?? "") + buffered;
-		}
+		const prevM = m.getValue();
 		const prevMLineCount = m.getLineCount();
 		if (prevM !== modified) {
 			if (modified.startsWith(prevM) && prevM.length < modified.length) this.appendToModel(m, modified.slice(prevM.length));
@@ -1151,17 +1196,33 @@ var DiffEditorManager = class {
 			}
 		}
 	}
+	flushModifiedAppendBufferSync() {
+		if (!this.modifiedModel) return;
+		if (this.appendBufferModifiedDiff.length === 0) return;
+		this.rafScheduler.cancel("appendDiff");
+		this.appendBufferDiffScheduled = false;
+		const text = this.appendBufferModifiedDiff.join("");
+		this.appendBufferModifiedDiff.length = 0;
+		if (!text) return;
+		this.appendToModel(this.modifiedModel, text);
+	}
 	async flushAppendBufferDiff() {
 		if (!this.diffEditorView) return;
-		if (this.appendBufferDiff.length === 0) return;
+		if (this.appendBufferOriginalDiff.length === 0 && this.appendBufferModifiedDiff.length === 0) return;
+		this.lastAppendFlushTimeDiff = Date.now();
 		this.appendBufferDiffScheduled = false;
+		if (this.originalModel && this.appendBufferOriginalDiff.length > 0) {
+			const oText = this.appendBufferOriginalDiff.join("");
+			this.appendBufferOriginalDiff.length = 0;
+			if (oText) this.appendToModel(this.originalModel, oText);
+		}
 		const me = this.diffEditorView.getModifiedEditor();
 		const model = me.getModel();
 		if (!model) {
-			this.appendBufferDiff.length = 0;
+			this.appendBufferModifiedDiff.length = 0;
 			return;
 		}
-		let parts = this.appendBufferDiff.splice(0);
+		let parts = this.appendBufferModifiedDiff.splice(0);
 		const prevLineInit = model.getLineCount();
 		const totalText = parts.join("");
 		const totalChars = totalText.length;
@@ -1236,7 +1297,7 @@ var DiffEditorManager = class {
 			return;
 		}
 		const text = totalText;
-		this.appendBufferDiff.length = 0;
+		this.appendBufferModifiedDiff.length = 0;
 		prevLine = model.getLineCount();
 		const lastColumn = model.getLineMaxColumn(prevLine);
 		const range = new monaco_shim_exports.Range(prevLine, lastColumn, prevLine, lastColumn);
@@ -1956,15 +2017,17 @@ async function preloadMonacoWorkers() {
 		javascript: workerUrlTs
 	};
 	try {
-		await Promise.all(unique.map((u) => fetch(u, {
-			method: "GET",
-			cache: "force-cache"
-		}).catch(() => void 0)));
 		self.MonacoEnvironment = { getWorker(_, label) {
 			const url = workerUrlByLabel[label] ?? workerUrlEditor;
 			return new Worker(url, { type: "module" });
 		} };
 	} catch {}
+	try {
+		await Promise.all(unique.map((u) => fetch(u, {
+			method: "GET",
+			cache: "force-cache"
+		}).catch(() => void 0)));
+	} catch {}
 }
 
 //#endregion
@@ -2444,7 +2507,7 @@ function useMonaco(monacoOptions = {}) {
 		try {
 			monaco_shim_exports.editor.setTheme(initialThemeName);
 		} catch {}
-		diffMgr = new DiffEditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, monacoOptions.revealDebounceMs);
+		diffMgr = new DiffEditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, monacoOptions.revealDebounceMs, monacoOptions.diffUpdateThrottleMs);
 		diffEditorView = await diffMgr.createDiffEditor(container, originalCode, modifiedCode, language, initialThemeName);
 		if (typeof monacoOptions.onThemeChange === "function") monacoOptions.onThemeChange(initialThemeName);
 		const models = diffMgr.getDiffModels();

package/dist/index.d.cts

@@ -69,6 +69,18 @@ interface MonacoOptions extends monaco$1.editor.IStandaloneEditorConstructionOpt
    * - Default (library): 50
    */
   updateThrottleMs?: number;
+  /**
+   * Time window (ms) used to throttle diff streaming updates in addition to RAF batching.
+   * This affects `appendOriginal`/`appendModified` and the fast-path append branches of `updateDiff`.
+   *
+   * Why: Monaco's diff computation is async and cancels/restarts when models change.
+   * If you apply edits every frame (or per token), the diff may only finish once
+   * streaming stops, so the highlights appear "at the end".
+   *
+   * - 0 means only RAF-based coalescing (more responsive, but can starve diff computation).
+   * - Default (library): 50
+   */
+  diffUpdateThrottleMs?: number;
   /**
    * When attempting the "minimal edit" algorithm, if prev.length + next.length
    * exceeds this number the library will fall back to full `setValue` to avoid

package/dist/index.d.ts

@@ -68,6 +68,18 @@ interface MonacoOptions extends monaco$1.editor.IStandaloneEditorConstructionOpt
    * - Default (library): 50
    */
   updateThrottleMs?: number;
+  /**
+   * Time window (ms) used to throttle diff streaming updates in addition to RAF batching.
+   * This affects `appendOriginal`/`appendModified` and the fast-path append branches of `updateDiff`.
+   *
+   * Why: Monaco's diff computation is async and cancels/restarts when models change.
+   * If you apply edits every frame (or per token), the diff may only finish once
+   * streaming stops, so the highlights appear "at the end".
+   *
+   * - 0 means only RAF-based coalescing (more responsive, but can starve diff computation).
+   * - Default (library): 50
+   */
+  diffUpdateThrottleMs?: number;
   /**
    * When attempting the "minimal edit" algorithm, if prev.length + next.length
    * exceeds this number the library will fall back to full `setValue` to avoid

package/dist/index.js

@@ -488,11 +488,15 @@ var DiffEditorManager = class {
 	revealBatchOnIdleMsOption;
 	scrollWatcherSuppressionMs = 500;
 	diffScrollWatcherSuppressionTimer = null;
-	appendBufferDiff = [];
+	appendBufferOriginalDiff = [];
+	appendBufferModifiedDiff = [];
 	appendBufferDiffScheduled = false;
+	diffUpdateThrottleMs = 50;
+	lastAppendFlushTimeDiff = 0;
+	appendFlushThrottleTimerDiff = null;
 	rafScheduler = createRafScheduler();
 	diffHeightManager = null;
-	constructor(options, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, revealDebounceMsOption) {
+	constructor(options, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, revealDebounceMsOption, diffUpdateThrottleMsOption) {
 		this.options = options;
 		this.maxHeightValue = maxHeightValue;
 		this.maxHeightCSS = maxHeightCSS;
@@ -503,6 +507,40 @@ var DiffEditorManager = class {
 		this.diffAutoScroll = diffAutoScroll;
 		this.revealDebounceMsOption = revealDebounceMsOption;
 	}
+	scheduleFlushAppendBufferDiff() {
+		if (this.appendBufferDiffScheduled) return;
+		this.appendBufferDiffScheduled = true;
+		const schedule = () => {
+			this.rafScheduler.schedule("appendDiff", () => this.flushAppendBufferDiff());
+		};
+		const throttle = this.diffUpdateThrottleMs;
+		if (!throttle) {
+			schedule();
+			return;
+		}
+		const now = Date.now();
+		const since = now - this.lastAppendFlushTimeDiff;
+		if (since >= throttle) {
+			schedule();
+			return;
+		}
+		if (this.appendFlushThrottleTimerDiff != null) return;
+		const wait = throttle - since;
+		this.appendFlushThrottleTimerDiff = setTimeout(() => {
+			this.appendFlushThrottleTimerDiff = null;
+			schedule();
+		}, wait);
+	}
+	flushOriginalAppendBufferSync() {
+		if (!this.originalModel) return;
+		if (this.appendBufferOriginalDiff.length === 0) return;
+		this.rafScheduler.cancel("appendDiff");
+		this.appendBufferDiffScheduled = false;
+		const text = this.appendBufferOriginalDiff.join("");
+		this.appendBufferOriginalDiff.length = 0;
+		if (!text) return;
+		this.appendToModel(this.originalModel, text);
+	}
 	computedHeight() {
 		var _originalEditor$getMo, _modifiedEditor$getMo, _originalEditor$getSc, _modifiedEditor$getSc;
 		if (!this.diffEditorView) return Math.min(1 * 18 + padding, this.maxHeightValue);
@@ -750,6 +788,7 @@ var DiffEditorManager = class {
 		});
 		this.lastKnownOriginalCode = originalCode;
 		this.lastKnownModifiedCode = modifiedCode;
+		this.diffUpdateThrottleMs = this.options.diffUpdateThrottleMs ?? 50;
 		this.shouldAutoScrollDiff = !!(this.autoScrollInitial && this.diffAutoScroll);
 		if (this.diffScrollWatcher) {
 			this.diffScrollWatcher.dispose();
@@ -866,16 +905,14 @@ var DiffEditorManager = class {
 		const prevM = this.lastKnownModifiedCode;
 		let didImmediate = false;
 		if (originalCode !== prevO && originalCode.startsWith(prevO)) {
-			this.appendToModel(this.originalModel, originalCode.slice(prevO.length));
+			this.appendOriginal(originalCode.slice(prevO.length));
 			this.lastKnownOriginalCode = originalCode;
 			didImmediate = true;
 		}
 		if (modifiedCode !== prevM && modifiedCode.startsWith(prevM)) {
-			const prevLine = this.modifiedModel.getLineCount();
-			this.appendToModel(this.modifiedModel, modifiedCode.slice(prevM.length));
+			this.appendModified(modifiedCode.slice(prevM.length));
 			this.lastKnownModifiedCode = modifiedCode;
 			didImmediate = true;
-			this.maybeScrollDiffToBottom(this.modifiedModel.getLineCount(), prevLine);
 		}
 		if (originalCode !== this.lastKnownOriginalCode || modifiedCode !== this.lastKnownModifiedCode) {
 			this.pendingDiffUpdate = {
@@ -893,8 +930,11 @@ var DiffEditorManager = class {
 		}
 		const prev = this.lastKnownOriginalCode ?? this.originalModel.getValue();
 		if (prev === newCode) return;
-		if (newCode.startsWith(prev) && prev.length < newCode.length) this.appendToModel(this.originalModel, newCode.slice(prev.length));
-		else this.applyMinimalEditToModel(this.originalModel, prev, newCode);
+		if (newCode.startsWith(prev) && prev.length < newCode.length) this.appendOriginal(newCode.slice(prev.length), codeLanguage);
+		else {
+			this.flushOriginalAppendBufferSync();
+			this.applyMinimalEditToModel(this.originalModel, prev, newCode);
+		}
 		this.lastKnownOriginalCode = newCode;
 	}
 	updateModified(newCode, codeLanguage) {
@@ -905,12 +945,12 @@ var DiffEditorManager = class {
 		}
 		const prev = this.lastKnownModifiedCode ?? this.modifiedModel.getValue();
 		if (prev === newCode) return;
-		const prevLine = this.modifiedModel.getLineCount();
-		if (newCode.startsWith(prev) && prev.length < newCode.length) {
-			this.appendToModel(this.modifiedModel, newCode.slice(prev.length));
-			this.maybeScrollDiffToBottom(this.modifiedModel.getLineCount(), prevLine);
-		} else {
-			this.applyMinimalEditToModel(this.modifiedModel, prev, newCode);
+		if (newCode.startsWith(prev) && prev.length < newCode.length) this.appendModified(newCode.slice(prev.length), codeLanguage);
+		else {
+			this.flushModifiedAppendBufferSync();
+			const prevAfterFlush = this.modifiedModel.getValue();
+			const prevLine = this.modifiedModel.getLineCount();
+			this.applyMinimalEditToModel(this.modifiedModel, prevAfterFlush, newCode);
 			const newLine = this.modifiedModel.getLineCount();
 			if (newLine !== prevLine) {
 				const shouldImmediate = this.shouldPerformImmediateRevealDiff();
@@ -944,8 +984,8 @@ var DiffEditorManager = class {
 			const lang = processedLanguage(codeLanguage);
 			if (lang && this.originalModel.getLanguageId() !== lang) monaco_shim_exports.editor.setModelLanguage(this.originalModel, lang);
 		}
-		this.appendToModel(this.originalModel, appendText);
-		this.lastKnownOriginalCode = this.originalModel.getValue();
+		this.appendBufferOriginalDiff.push(appendText);
+		this.scheduleFlushAppendBufferDiff();
 	}
 	appendModified(appendText, codeLanguage) {
 		if (!this.diffEditorView || !this.modifiedModel || !appendText) return;
@@ -953,11 +993,8 @@ var DiffEditorManager = class {
 			const lang = processedLanguage(codeLanguage);
 			if (lang && this.modifiedModel.getLanguageId() !== lang) monaco_shim_exports.editor.setModelLanguage(this.modifiedModel, lang);
 		}
-		this.appendBufferDiff.push(appendText);
-		if (!this.appendBufferDiffScheduled) {
-			this.appendBufferDiffScheduled = true;
-			this.rafScheduler.schedule("appendDiff", () => this.flushAppendBufferDiff());
-		}
+		this.appendBufferModifiedDiff.push(appendText);
+		this.scheduleFlushAppendBufferDiff();
 	}
 	setLanguage(language, languages$1) {
 		if (!languages$1.includes(language)) {
@@ -981,7 +1018,12 @@ var DiffEditorManager = class {
 		this.pendingDiffUpdate = null;
 		this.rafScheduler.cancel("appendDiff");
 		this.appendBufferDiffScheduled = false;
-		this.appendBufferDiff.length = 0;
+		this.appendBufferOriginalDiff.length = 0;
+		this.appendBufferModifiedDiff.length = 0;
+		if (this.appendFlushThrottleTimerDiff != null) {
+			clearTimeout(this.appendFlushThrottleTimerDiff);
+			this.appendFlushThrottleTimerDiff = null;
+		}
 		this.rafScheduler.cancel("content-size-change-diff");
 		this.rafScheduler.cancel("sync-last-known-modified");
 		if (this.diffScrollWatcher) {
@@ -1028,6 +1070,14 @@ var DiffEditorManager = class {
 	safeClean() {
 		this.rafScheduler.cancel("diff");
 		this.pendingDiffUpdate = null;
+		this.rafScheduler.cancel("appendDiff");
+		this.appendBufferDiffScheduled = false;
+		this.appendBufferOriginalDiff.length = 0;
+		this.appendBufferModifiedDiff.length = 0;
+		if (this.appendFlushThrottleTimerDiff != null) {
+			clearTimeout(this.appendFlushThrottleTimerDiff);
+			this.appendFlushThrottleTimerDiff = null;
+		}
 		if (this.diffScrollWatcher) {
 			this.diffScrollWatcher.dispose();
 			this.diffScrollWatcher = null;
@@ -1079,6 +1129,8 @@ var DiffEditorManager = class {
 		}
 		const { original, modified, lang } = this.pendingDiffUpdate;
 		this.pendingDiffUpdate = null;
+		this.flushOriginalAppendBufferSync();
+		this.flushModifiedAppendBufferSync();
 		if (lang) {
 			const plang = processedLanguage(lang);
 			if (plang) {
@@ -1096,14 +1148,7 @@ var DiffEditorManager = class {
 			else this.applyMinimalEditToModel(o, prevO, original);
 			this.lastKnownOriginalCode = original;
 		}
-		let prevM = this.lastKnownModifiedCode;
-		const buffered = this.appendBufferDiff.length > 0 ? this.appendBufferDiff.join("") : "";
-		if (this.appendBufferDiff.length > 0) try {
-			prevM = m.getValue() + buffered;
-			this.lastKnownModifiedCode = prevM;
-		} catch {
-			prevM = (this.lastKnownModifiedCode ?? "") + buffered;
-		}
+		const prevM = m.getValue();
 		const prevMLineCount = m.getLineCount();
 		if (prevM !== modified) {
 			if (modified.startsWith(prevM) && prevM.length < modified.length) this.appendToModel(m, modified.slice(prevM.length));
@@ -1123,17 +1168,33 @@ var DiffEditorManager = class {
 			}
 		}
 	}
+	flushModifiedAppendBufferSync() {
+		if (!this.modifiedModel) return;
+		if (this.appendBufferModifiedDiff.length === 0) return;
+		this.rafScheduler.cancel("appendDiff");
+		this.appendBufferDiffScheduled = false;
+		const text = this.appendBufferModifiedDiff.join("");
+		this.appendBufferModifiedDiff.length = 0;
+		if (!text) return;
+		this.appendToModel(this.modifiedModel, text);
+	}
 	async flushAppendBufferDiff() {
 		if (!this.diffEditorView) return;
-		if (this.appendBufferDiff.length === 0) return;
+		if (this.appendBufferOriginalDiff.length === 0 && this.appendBufferModifiedDiff.length === 0) return;
+		this.lastAppendFlushTimeDiff = Date.now();
 		this.appendBufferDiffScheduled = false;
+		if (this.originalModel && this.appendBufferOriginalDiff.length > 0) {
+			const oText = this.appendBufferOriginalDiff.join("");
+			this.appendBufferOriginalDiff.length = 0;
+			if (oText) this.appendToModel(this.originalModel, oText);
+		}
 		const me = this.diffEditorView.getModifiedEditor();
 		const model = me.getModel();
 		if (!model) {
-			this.appendBufferDiff.length = 0;
+			this.appendBufferModifiedDiff.length = 0;
 			return;
 		}
-		let parts = this.appendBufferDiff.splice(0);
+		let parts = this.appendBufferModifiedDiff.splice(0);
 		const prevLineInit = model.getLineCount();
 		const totalText = parts.join("");
 		const totalChars = totalText.length;
@@ -1208,7 +1269,7 @@ var DiffEditorManager = class {
 			return;
 		}
 		const text = totalText;
-		this.appendBufferDiff.length = 0;
+		this.appendBufferModifiedDiff.length = 0;
 		prevLine = model.getLineCount();
 		const lastColumn = model.getLineMaxColumn(prevLine);
 		const range = new monaco_shim_exports.Range(prevLine, lastColumn, prevLine, lastColumn);
@@ -1928,15 +1989,17 @@ async function preloadMonacoWorkers() {
 		javascript: workerUrlTs
 	};
 	try {
-		await Promise.all(unique.map((u) => fetch(u, {
-			method: "GET",
-			cache: "force-cache"
-		}).catch(() => void 0)));
 		self.MonacoEnvironment = { getWorker(_, label) {
 			const url = workerUrlByLabel[label] ?? workerUrlEditor;
 			return new Worker(url, { type: "module" });
 		} };
 	} catch {}
+	try {
+		await Promise.all(unique.map((u) => fetch(u, {
+			method: "GET",
+			cache: "force-cache"
+		}).catch(() => void 0)));
+	} catch {}
 }
 
 //#endregion
@@ -2416,7 +2479,7 @@ function useMonaco(monacoOptions = {}) {
 		try {
 			monaco_shim_exports.editor.setTheme(initialThemeName);
 		} catch {}
-		diffMgr = new DiffEditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, monacoOptions.revealDebounceMs);
+		diffMgr = new DiffEditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, monacoOptions.revealDebounceMs, monacoOptions.diffUpdateThrottleMs);
 		diffEditorView = await diffMgr.createDiffEditor(container, originalCode, modifiedCode, language, initialThemeName);
 		if (typeof monacoOptions.onThemeChange === "function") monacoOptions.onThemeChange(initialThemeName);
 		const models = diffMgr.getDiffModels();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-monaco",
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "A framework-agnostic library for integrating Monaco Editor with Shiki highlighting, optimized for streaming updates.",
   "author": "Simon He",
   "license": "MIT",
@@ -92,6 +92,7 @@
     "start": "esno src/index.ts",
     "bench": "node scripts/stream-benchmark.mjs",
     "bench:playwright": "node scripts/playwright-bench.mjs",
+    "smoke:diff": "node scripts/playwright-diff-smoke.mjs",
     "test": "vitest",
     "typecheck": "tsc --noEmit"
   }