derived

cypress/e2e/loadSite.spec.ts

@@ -73,7 +73,7 @@ describe('Site Loads', () => {
 	// 	cy.get('#view').contains(`src='https://via.placeholder.com/64'`);
 	// });
 
-	it.only('should allow persisting "securityLevel" using confirm dialogue', () => {
+	it('should allow persisting "securityLevel" using confirm dialogue', () => {
 		const b64State = toBase64(
 			`{"code":"graph TD\\nA[\\"<img src='https://dummyimage.com/64' width=64/>\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","autoSync":true,"updateDiagram":true}`,
 			true

src/lib/components/editor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { EditorMode } from '$lib/types';
-	import { stateStore, updateCode, updateConfig } from '$lib/util/state';
+	import { currentState, stateStore, updateCode, updateConfig } from '$lib/util/state';
 	import { themeStore } from '$lib/util/theme';
 	import { errorDebug, syncDiagram } from '$lib/util/util';
 	import type monaco from 'monaco-editor';
@@ -20,8 +20,7 @@
 	};
 	let text = '';
 
-	stateStore.subscribe(async (state) => {
-		const { errorMarkers, editorMode, code, mermaid } = await state;
+	stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
 		console.log('editor store subscription', { code, mermaid });
 		if (!editor) return;
 
@@ -48,6 +47,7 @@
 	});
 
 	const handleUpdate = async (text: string, mode: EditorMode) => {
+		console.log('editor HandleUpdate', { text, mode });
 		if (mode === 'code') {
 			await updateCode(text);
 		} else {
@@ -77,13 +77,13 @@
 		editor = Monaco.editor.create(divEl, editorOptions);
 		editor.onDidChangeModelContent(async () => {
 			const newText = editor.getValue();
-			console.log({ text, newText });
+			console.log('editor onDidChangeModelContent', { text, newText });
 			// errorDebug(500);
 			if (text === newText) {
 				return;
 			}
 			text = newText;
-			await handleUpdate(text, (await $stateStore).editorMode);
+			await handleUpdate(text, currentState.editorMode);
 		});
 		editor.addAction({
 			id: 'mermaid-render-diagram',

src/lib/util/state.ts

@@ -1,13 +1,11 @@
-import { writable, get, type Readable } from 'svelte/store';
+import { writable, get, type Readable, derived } from 'svelte/store';
 import { persist, localStorage } from './persist';
 import { saveStatistics, countLines } from './stats';
 import { serializeState, deserializeState } from './serde';
-import { asyncable, syncable } from 'svelte-asyncable';
 import { cmdKey, errorDebug } from './util';
 import { parse } from './mermaid';
 
 import type { MarkerData, State, ValidatedState } from '$lib/types';
-let count = 0;
 export const defaultState: State = {
 	code: `graph TD
     A[Christmas] -->|Get money| B(Go shopping)
@@ -52,9 +50,16 @@ export let currentState: ValidatedState = (() => {
 	};
 })();
 
-// All internal reads should be done via stateStore, but it should not be persisted/shared externally.
-export const stateStore = asyncable(
-	async (state: State) => {
+const stateChanges: State[] = [];
+let processing = false;
+const processStateChange = async (newState: State, set) => {
+	stateChanges.push(newState);
+	if (processing) {
+		return;
+	}
+	processing = true;
+	while (stateChanges.length > 0) {
+		const state = stateChanges.shift();
 		const processed: ValidatedState = {
 			...state,
 			serialized: '',
@@ -90,10 +95,18 @@ export const stateStore = asyncable(
 			}
 		}
 		currentState = processed;
-		return processed;
+		set(processed);
+	}
+	processing = false;
+};
+
+// All internal reads should be done via stateStore, but it should not be persisted/shared externally.
+export const stateStore: Readable<ValidatedState> = derived(
+	[inputStateStore],
+	([state], set) => {
+		processStateChange(state, set);
 	},
-	undefined,
-	[inputStateStore]
+	currentState
 );
 
 // export const stateStore: Readable<ValidatedState> = derived([inputStateStore], ([state]) => {