♻️ Extract store to its own file

.gitignore

@@ -10,3 +10,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.vercel

src/lib/stores/journal.ts

@@ -0,0 +1,13 @@
+import { browser } from '$app/environment';
+import { writable } from 'svelte/store';
+
+const JOURNAL = 'journal';
+
+const storedJournal = browser ? window.localStorage.getItem(JOURNAL) : '';
+
+export const journal = writable(storedJournal || '');
+journal.subscribe((value) => {
+	if (browser) {
+		localStorage.setItem(JOURNAL, value);
+	}
+});

src/lib/word-counter.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
-	import { JOURNAL } from '../routes/+layout.svelte';
+	import { journal } from '$lib/stores/journal';
 
-	let journal: SvelteStore<string> = getContext(JOURNAL);
 	$: count = $journal.split(' ').filter((value) => !!value).length;
 </script>
 

src/routes/+layout.svelte

@@ -1,22 +1,5 @@
-<script context="module">
-	export const JOURNAL = 'journal';
-</script>
-
 <script lang="ts">
-	import { browser } from '$app/environment';
-	import { setContext } from 'svelte';
-	import { writable } from 'svelte/store';
 	import WordCounter from '../lib/word-counter.svelte';
-
-	const storedJournal = browser ? window.localStorage.getItem(JOURNAL) : '';
-	const journal = writable(storedJournal || '');
-	journal.subscribe((value) => {
-		if (browser) {
-			localStorage.setItem(JOURNAL, value);
-		}
-	});
-
-	setContext(JOURNAL, journal);
 </script>
 
 <slot />

src/routes/+page.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
-	import { JOURNAL } from './+layout.svelte';
+	import { journal } from '$lib/stores/journal';
 
-	let journal: SvelteStore<string> = getContext(JOURNAL);
 	$: encryptedJournal = $journal.length;
 </script>