Protect mutation of stores

src/lib/stores/note-editor.ts

@@ -1,29 +1,32 @@
-import { get, writable } from 'svelte/store';
+import { get, readonly, writable } from 'svelte/store';
 import type { Note, NotesStore } from './notes';
 
 export class NoteEditorStore {
-	editing = writable<boolean>(false);
+	private _editing = writable<boolean>(false);
-	draftContent = writable<string>('');
+	private _draftContent = writable<string>('');
+
+	readonly editing = readonly(this._editing);
+	readonly draftContent = readonly(this._draftContent);
 
 	constructor(private noteId: Note['id'], private notes: NotesStore) {}
 
 	startEditing = () => {
 		const note = this.notes.get(this.noteId);
-		this.draftContent.set(note?.content ?? '');
+		this._draftContent.set(note?.content ?? '');
-		this.editing.set(true);
+		this._editing.set(true);
 	};
 
 	draftChange = (event: CustomEvent<{ value: string }>) => {
-		this.draftContent.set(event.detail.value);
+		this._draftContent.set(event.detail.value);
 	};
 
 	save = () => {
-		const content = get(this.draftContent);
+		const content = get(this._draftContent);
 		this.notes.update(this.noteId, { content });
-		this.editing.set(false);
+		this._editing.set(false);
 	};
 
 	discard = () => {
-		this.editing.set(false);
+		this._editing.set(false);
 	};
 }

src/lib/stores/notes.ts

@@ -15,6 +15,8 @@ export class NotesStore implements Readable<Note[]> {
 	private offset = 0;
 	private limit = 1000;
 
+	readonly count = readonly(this.notesCount);
+
 	constructor(private tags: TagsStore) {
 		setTimeout(() => {
 			tags.selectedTags.subscribe(() => {
@@ -25,8 +27,6 @@ export class NotesStore implements Readable<Note[]> {
 
 	subscribe = this.notes.subscribe;
 
-	count = readonly(this.notesCount);
-
 	refreshNotes = async () => {
 		const selectedTags = get(this.tags.selectedTags);
 

src/lib/stores/tags.ts

@@ -12,7 +12,7 @@ export class TagsStore implements Readable<TagFilter[]> {
 	private tags = writable<TagFilter[]>([]);
 	private selected = writable<Set<Tag['id']>>(new Set());
 
-	selectedTags = derived(this.selected, ($selected) => Array.from($selected));
+	readonly selectedTags = derived(this.selected, ($selected) => Array.from($selected));
 
 	constructor() {
 		this.initSelections();