Replace custom store with svelte-persistent-store

package-lock.json

@@ -11,6 +11,7 @@
 				"svelte-highlight": "^3.2.0"
 			},
 			"devDependencies": {
+				"@macfja/svelte-persistent-store": "^1.2.0",
 				"@octokit/graphql": "^4.7.0",
 				"@sveltejs/adapter-static": "next",
 				"@sveltejs/kit": "next",
@@ -993,6 +994,19 @@
 				"node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
 			}
 		},
+		"node_modules/@macfja/svelte-persistent-store": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@macfja/svelte-persistent-store/-/svelte-persistent-store-1.2.0.tgz",
+			"integrity": "sha512-vftMaR7vwNwJx7atDjzFagBEZpOXgnrKqeutHfTtEreprP/izjb0LfvwLKQK29cO7gT9iifHQdOoD9kGynasOw==",
+			"dev": true,
+			"dependencies": {
+				"browser-cookies": "^1.2.0",
+				"idb-keyval": "^5.1.3"
+			},
+			"peerDependencies": {
+				"svelte": "^3.0"
+			}
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1784,6 +1798,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/browser-cookies": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/browser-cookies/-/browser-cookies-1.2.0.tgz",
+			"integrity": "sha1-/KP/ubamOq3E2MCZnGtX0Pp9KbU=",
+			"dev": true
+		},
 		"node_modules/browser-process-hrtime": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -3018,6 +3038,15 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/idb-keyval": {
+			"version": "5.1.5",
+			"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-5.1.5.tgz",
+			"integrity": "sha512-J1utxYWQokYjy01LvDQ7WmiAtZCGUSkVi9EIBfUSyLOr/BesnMIxNGASTh9A1LzeISSjSqEPsfFdTss7EE7ofQ==",
+			"dev": true,
+			"dependencies": {
+				"safari-14-idb-fix": "^1.0.6"
+			}
+		},
 		"node_modules/ignore": {
 			"version": "4.0.6",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -4844,6 +4873,12 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/safari-14-idb-fix": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/safari-14-idb-fix/-/safari-14-idb-fix-1.0.6.tgz",
+			"integrity": "sha512-oTEQOdMwRX+uCtWCKT1nx2gAeSdpr8elg/2gcaKUH00SJU2xWESfkx11nmXwTRHy7xfQoj1o4TTQvdmuBosTnA==",
+			"dev": true
+		},
 		"node_modules/safe-buffer": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -6560,6 +6595,16 @@
 				"chalk": "^4.0.0"
 			}
 		},
+		"@macfja/svelte-persistent-store": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@macfja/svelte-persistent-store/-/svelte-persistent-store-1.2.0.tgz",
+			"integrity": "sha512-vftMaR7vwNwJx7atDjzFagBEZpOXgnrKqeutHfTtEreprP/izjb0LfvwLKQK29cO7gT9iifHQdOoD9kGynasOw==",
+			"dev": true,
+			"requires": {
+				"browser-cookies": "^1.2.0",
+				"idb-keyval": "^5.1.3"
+			}
+		},
 		"@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -7167,6 +7212,12 @@
 				"fill-range": "^7.0.1"
 			}
 		},
+		"browser-cookies": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/browser-cookies/-/browser-cookies-1.2.0.tgz",
+			"integrity": "sha1-/KP/ubamOq3E2MCZnGtX0Pp9KbU=",
+			"dev": true
+		},
 		"browser-process-hrtime": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -8102,6 +8153,15 @@
 				"safer-buffer": ">= 2.1.2 < 3"
 			}
 		},
+		"idb-keyval": {
+			"version": "5.1.5",
+			"resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-5.1.5.tgz",
+			"integrity": "sha512-J1utxYWQokYjy01LvDQ7WmiAtZCGUSkVi9EIBfUSyLOr/BesnMIxNGASTh9A1LzeISSjSqEPsfFdTss7EE7ofQ==",
+			"dev": true,
+			"requires": {
+				"safari-14-idb-fix": "^1.0.6"
+			}
+		},
 		"ignore": {
 			"version": "4.0.6",
 			"resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -9470,6 +9530,12 @@
 				"mri": "^1.1.0"
 			}
 		},
+		"safari-14-idb-fix": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/safari-14-idb-fix/-/safari-14-idb-fix-1.0.6.tgz",
+			"integrity": "sha512-oTEQOdMwRX+uCtWCKT1nx2gAeSdpr8elg/2gcaKUH00SJU2xWESfkx11nmXwTRHy7xfQoj1o4TTQvdmuBosTnA==",
+			"dev": true
+		},
 		"safe-buffer": {
 			"version": "5.1.2",
 			"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",

package.json

@@ -11,6 +11,7 @@
 		"test": "jest"
 	},
 	"devDependencies": {
+		"@macfja/svelte-persistent-store": "^1.2.0",
 		"@octokit/graphql": "^4.7.0",
 		"@sveltejs/adapter-static": "next",
 		"@sveltejs/kit": "next",

src/lib/utils/localStore.ts

@@ -1,21 +0,0 @@
-import type { Writable } from 'svelte/store';
-import { writable } from 'svelte/store';
-
-export function localStore<T>(key: string, initial: T): Writable<T> {
-	const browser = typeof localStorage === 'object';
-	if (browser && localStorage.getItem(key) === null) {
-		localStorage.setItem(key, JSON.stringify(initial));
-	}
-
-	const saved: T = browser ? JSON.parse(localStorage.getItem(key)) : initial;
-	const { subscribe, set, update } = writable(saved);
-
-	return {
-		subscribe,
-		set: (value) => {
-			browser && localStorage.setItem(key, JSON.stringify(value));
-			return set(value);
-		},
-		update
-	};
-}

src/routes/components/index.svelte

@@ -1,5 +1,6 @@
 <script>
-	import { localStore } from '$lib/utils/localStore';
+	import { persist, localStorage } from '@macfja/svelte-persistent-store';
+	import { writable } from 'svelte/store';
 	import SearchLayout from '$layouts/SearchLayout.svelte';
 	import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
 	import List from '$components/ComponentIndex/CardList.svelte';
@@ -22,7 +23,7 @@
 	let sorting = 'stars_desc';
 	let selectedSorting = { value: 'stars_desc', label: 'Stars Desc' };
 	$: sorting = selectedSorting?.value || 'stars_desc';
-	let packageManager = localStore('packageManager', 'npm');
+	let packageManager = persist(writable('npm'), localStorage(), 'packageManager');
 	const intersection = (array1, array2) => {
 		return array1.filter((item) => array2.includes(item));
 	};