Persist stores

package.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@fontsource/fira-mono": "^4.2.2",
     "@lukeed/uuid": "^2.0.0",
+    "@macfja/svelte-persistent-store": "^1.1.0",
     "@tailwindcss/forms": "^0.3.2",
     "cookie": "^0.4.1",
     "js-base64": "^3.6.0",

src/global.d.ts

@@ -26,7 +26,7 @@ interface State {
 
 interface HistoryEntry {
 	state: State;
-	time: Date;
+	time: number;
 	name: string;
 	auto: boolean;
 }

src/lib/History/history.ts

@@ -1,10 +1,23 @@
 import { derived, Readable, Writable, writable, get } from 'svelte/store';
+import { persist, localStorage } from '@macfja/svelte-persistent-store';
 
 const MAX_AUTO_HISTORY_LENGTH = 10;
 
-export const autoHistoryMode: Writable<boolean> = writable(true);
-const autoHistoryStore: Writable<HistoryEntry[]> = writable([]);
-const manualHistoryStore: Writable<HistoryEntry[]> = writable([]);
+export const autoHistoryMode: Writable<boolean> = persist(
+	writable(true),
+	localStorage(),
+	'autoHistoryMode'
+);
+const autoHistoryStore: Writable<HistoryEntry[]> = persist(
+	writable([]),
+	localStorage(),
+	'autoHistoryStore'
+);
+const manualHistoryStore: Writable<HistoryEntry[]> = persist(
+	writable([]),
+	localStorage(),
+	'manualHistoryStore'
+);
 export const historyStore: Readable<HistoryEntry[]> = derived(
 	[autoHistoryMode, autoHistoryStore, manualHistoryStore],
 	([autoMode, autoHistories, manualHistories], set) => {
@@ -24,7 +37,7 @@ export const addHistoryEntry = (entry: HistoryEntry): void => {
 	});
 };
 
-export const clearHistoryData = (time?: Date): void => {
+export const clearHistoryData = (time?: number): void => {
 	(get(autoHistoryMode) ? autoHistoryStore : manualHistoryStore).update((entries) =>
 		entries.filter((entry) => time && entry.time != time)
 	);

src/lib/History/index.svelte

@@ -34,7 +34,7 @@
 		if (previousState !== currentState) {
 			addHistoryEntry({
 				state: $codeStore,
-				time: new Date(),
+				time: Date.now(),
 				name: 'test',
 				auto
 			});
@@ -43,7 +43,7 @@
 		}
 	};
 
-	const clearHistory = (date?: Date): void => {
+	const clearHistory = (date?: number): void => {
 		if (!date && !prompt('Clear all saved items?')) {
 			return;
 		}
@@ -78,7 +78,7 @@
 	<ul class="p-2 space-y-2">
 		{#each $historyStore as { state, time, name }}
 			<li class="rounded p-2 shadow block">
-				{time}
+				{new Date(time)}
 				{name}
 				<button on:click={() => restoreHistory(state)}>Restore</button>
 				<button on:click={() => clearHistory(time)}>Delete</button>

src/lib/Util/state.ts

@@ -1,5 +1,6 @@
 import { writable, get } from 'svelte/store';
 import { encode, decode } from 'js-base64';
+import { persist, localStorage } from '@macfja/svelte-persistent-store';
 
 const defaultState: State = {
 	code: `graph TD
@@ -17,20 +18,19 @@ const defaultState: State = {
 	updateDiagram: true
 };
 
-export const codeStore = writable(defaultState);
+export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore');
 
 export const loadState = (data: string): void => {
 	let state: State;
-	// debugger;
 	try {
 		const stateStr = decode(data);
 		console.log('state from url', stateStr);
 		state = JSON.parse(stateStr);
 	} catch (e) {
 		console.error('Init error', e);
-		state = defaultState;
+		state = get(codeStore);
 	}
-	codeStore.set({ ...state, updateEditor: true });
+	updateCodeStore({ ...state, updateEditor: true });
 };
 
 export const updateCodeStore = (newState: State): void => {

yarn.lock

@@ -74,6 +74,14 @@
   dependencies:
     "@lukeed/csprng" "^1.0.0"
 
+"@macfja/svelte-persistent-store@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@macfja/svelte-persistent-store/-/svelte-persistent-store-1.1.0.tgz#9652f89f59c7a275073622718c5e9d58d4435f0a"
+  integrity sha512-wbx1VR6GTBc0uH9YQZc3vcvhaQdNDK6T3xGr9c/2VJng4B0hoOhOwO9HVoS15WuRu51aLHS/uTjjr26eTtba1g==
+  dependencies:
+    idb-keyval "^5.0.4"
+    js-cookies "^1.0.4"
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
@@ -1475,6 +1483,11 @@ iconv-lite@0.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+idb-keyval@^5.0.4:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-5.0.5.tgz#1b02984dcf42ad4aa290bf9f10935b485419df34"
+  integrity sha512-cqi65rrjhgPExI9vmSU7VcYEbHCUfIBY+9YUWxyr0PyGizptFgGFnvZQ0w+tqOXk1lUcGCZGVLfabf7QnR2S0g==
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -1630,6 +1643,11 @@ js-base64@^3.6.0:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.6.0.tgz#773e1de628f4f298d65a7e9842c50244751f5756"
   integrity sha512-wVdUBYQeY2gY73RIlPrysvpYx+2vheGo8Y1SNQv/BzHToWpAZzJU7Z6uheKMAe+GLSBig5/Ps2nxg/8tRB73xg==
 
+js-cookies@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/js-cookies/-/js-cookies-1.0.4.tgz#d46e576c420ff6d5542c0f52b6d4ef7d637e754e"
+  integrity sha1-1G5XbEIP9tVULA9SttTvfWN+dU4=
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"