stream-monaco 0.0.12 → 0.0.14

package/README.md

@@ -473,6 +473,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

@@ -899,11 +899,9 @@ var DiffEditorManager = class {
 			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 = {
@@ -933,12 +931,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();
@@ -1056,6 +1054,9 @@ var DiffEditorManager = class {
 	safeClean() {
 		this.rafScheduler.cancel("diff");
 		this.pendingDiffUpdate = null;
+		this.rafScheduler.cancel("appendDiff");
+		this.appendBufferDiffScheduled = false;
+		this.appendBufferDiff.length = 0;
 		if (this.diffScrollWatcher) {
 			this.diffScrollWatcher.dispose();
 			this.diffScrollWatcher = null;
@@ -1107,6 +1108,7 @@ var DiffEditorManager = class {
 		}
 		const { original, modified, lang } = this.pendingDiffUpdate;
 		this.pendingDiffUpdate = null;
+		this.flushModifiedAppendBufferSync();
 		if (lang) {
 			const plang = processedLanguage(lang);
 			if (plang) {
@@ -1124,14 +1126,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,6 +1146,16 @@ var DiffEditorManager = class {
 			}
 		}
 	}
+	flushModifiedAppendBufferSync() {
+		if (!this.modifiedModel) return;
+		if (this.appendBufferDiff.length === 0) return;
+		this.rafScheduler.cancel("appendDiff");
+		this.appendBufferDiffScheduled = false;
+		const text = this.appendBufferDiff.join("");
+		this.appendBufferDiff.length = 0;
+		if (!text) return;
+		this.appendToModel(this.modifiedModel, text);
+	}
 	async flushAppendBufferDiff() {
 		if (!this.diffEditorView) return;
 		if (this.appendBufferDiff.length === 0) return;
@@ -1956,15 +1961,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
@@ -2343,14 +2350,12 @@ function useMonaco(monacoOptions = {}) {
 		if (token !== globalThemeRequestSeq) return;
 		try {
 			monaco_shim_exports.editor.setTheme(themeName);
-			lastAppliedTheme = themeName;
 			globalAppliedThemeName = themeName;
 		} catch {
 			try {
 				const maybeHighlighter = await registerMonacoThemes(themes, languages$1);
 				if (token !== globalThemeRequestSeq) return;
 				monaco_shim_exports.editor.setTheme(themeName);
-				lastAppliedTheme = themeName;
 				globalAppliedThemeName = themeName;
 				await tryLoadAndSetShikiTheme(maybeHighlighter, themeName).catch(() => void 0);
 			} catch (err2) {
@@ -2414,7 +2419,6 @@ function useMonaco(monacoOptions = {}) {
 		await ensureThemeRegistered(initialThemeName);
 		editorMgr = new EditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, monacoOptions.revealDebounceMs);
 		editorView = await editorMgr.createEditor(container, code, language, initialThemeName);
-		lastAppliedTheme = initialThemeName;
 		if (pendingUpdate && editorMgr) {
 			const { code: queuedCode, lang: queuedLang } = pendingUpdate;
 			pendingUpdate = null;
@@ -2446,7 +2450,6 @@ function useMonaco(monacoOptions = {}) {
 		await ensureThemeRegistered(initialThemeName);
 		try {
 			monaco_shim_exports.editor.setTheme(initialThemeName);
-			lastAppliedTheme = initialThemeName;
 		} catch {}
 		diffMgr = new DiffEditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, monacoOptions.revealDebounceMs);
 		diffEditorView = await diffMgr.createDiffEditor(container, originalCode, modifiedCode, language, initialThemeName);

package/dist/index.js

@@ -871,11 +871,9 @@ var DiffEditorManager = class {
 			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 = {
@@ -905,12 +903,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();
@@ -1028,6 +1026,9 @@ var DiffEditorManager = class {
 	safeClean() {
 		this.rafScheduler.cancel("diff");
 		this.pendingDiffUpdate = null;
+		this.rafScheduler.cancel("appendDiff");
+		this.appendBufferDiffScheduled = false;
+		this.appendBufferDiff.length = 0;
 		if (this.diffScrollWatcher) {
 			this.diffScrollWatcher.dispose();
 			this.diffScrollWatcher = null;
@@ -1079,6 +1080,7 @@ var DiffEditorManager = class {
 		}
 		const { original, modified, lang } = this.pendingDiffUpdate;
 		this.pendingDiffUpdate = null;
+		this.flushModifiedAppendBufferSync();
 		if (lang) {
 			const plang = processedLanguage(lang);
 			if (plang) {
@@ -1096,14 +1098,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,6 +1118,16 @@ var DiffEditorManager = class {
 			}
 		}
 	}
+	flushModifiedAppendBufferSync() {
+		if (!this.modifiedModel) return;
+		if (this.appendBufferDiff.length === 0) return;
+		this.rafScheduler.cancel("appendDiff");
+		this.appendBufferDiffScheduled = false;
+		const text = this.appendBufferDiff.join("");
+		this.appendBufferDiff.length = 0;
+		if (!text) return;
+		this.appendToModel(this.modifiedModel, text);
+	}
 	async flushAppendBufferDiff() {
 		if (!this.diffEditorView) return;
 		if (this.appendBufferDiff.length === 0) return;
@@ -1928,15 +1933,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
@@ -2315,14 +2322,12 @@ function useMonaco(monacoOptions = {}) {
 		if (token !== globalThemeRequestSeq) return;
 		try {
 			monaco_shim_exports.editor.setTheme(themeName);
-			lastAppliedTheme = themeName;
 			globalAppliedThemeName = themeName;
 		} catch {
 			try {
 				const maybeHighlighter = await registerMonacoThemes(themes, languages$1);
 				if (token !== globalThemeRequestSeq) return;
 				monaco_shim_exports.editor.setTheme(themeName);
-				lastAppliedTheme = themeName;
 				globalAppliedThemeName = themeName;
 				await tryLoadAndSetShikiTheme(maybeHighlighter, themeName).catch(() => void 0);
 			} catch (err2) {
@@ -2386,7 +2391,6 @@ function useMonaco(monacoOptions = {}) {
 		await ensureThemeRegistered(initialThemeName);
 		editorMgr = new EditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, monacoOptions.revealDebounceMs);
 		editorView = await editorMgr.createEditor(container, code, language, initialThemeName);
-		lastAppliedTheme = initialThemeName;
 		if (pendingUpdate && editorMgr) {
 			const { code: queuedCode, lang: queuedLang } = pendingUpdate;
 			pendingUpdate = null;
@@ -2418,7 +2422,6 @@ function useMonaco(monacoOptions = {}) {
 		await ensureThemeRegistered(initialThemeName);
 		try {
 			monaco_shim_exports.editor.setTheme(initialThemeName);
-			lastAppliedTheme = initialThemeName;
 		} catch {}
 		diffMgr = new DiffEditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, diffAutoScroll, monacoOptions.revealDebounceMs);
 		diffEditorView = await diffMgr.createDiffEditor(container, originalCode, modifiedCode, language, initialThemeName);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-monaco",
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "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"
   }