custom key names

svecosystem · Jul 14, 2024 · af54d89 · af54d89
1 parent ffb1926
commit af54d89
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 28 deletions.
diff --git a/packages/mode-watcher/src/lib/index.ts b/packages/mode-watcher/src/lib/index.ts
@@ -1,8 +1,8 @@
 import {
-	localStorageKey,
+	modeStorageKey,
 	userPrefersMode,
 	systemPrefersMode,
-	themeLocalStorageKey,
+	themeStorageKey,
 	mode,
 	setMode,
 	toggleMode,
@@ -15,13 +15,13 @@ export {
 	setMode,
 	toggleMode,
 	resetMode,
-	localStorageKey,
+	modeStorageKey,
 	userPrefersMode,
 	systemPrefersMode,
 	mode,
 	theme,
 	setTheme,
-	themeLocalStorageKey
+	themeStorageKey
 };
 
 export { default as ModeWatcher } from './mode-watcher.svelte';
diff --git a/packages/mode-watcher/src/lib/mode-watcher.svelte b/packages/mode-watcher/src/lib/mode-watcher.svelte
@@ -3,19 +3,21 @@
 	import {
 		systemPrefersMode,
 		setMode,
-		localStorageKey,
 		mode,
 		themeColors as themeColorsStore,
 		disableTransitions as disableTransitionsStore,
 		setInitialMode,
 		defineConfig,
+		setTheme,
 	} from './mode.js';
 
 	import type { Mode, ModeWatcherProps, ThemeColors } from './types.js';
 	import {
 		darkClassNames as darkClassNamesStore,
 		isValidMode,
 		lightClassNames as lightClassNamesStore,
+		themeStorageKey as themeStorageKeyStore,
+		modeStorageKey as modeStorageKeyStore,
 	} from './stores.js';
 
 	type $$Props = ModeWatcherProps;
@@ -31,22 +33,21 @@
 	export let themeStorageKey: string = 'mode-watcher-theme';
 	export let modeStorageKey: string = 'mode-watcher-mode';
 
-	themeColorsStore.set(themeColors);
-	disableTransitionsStore.set(disableTransitions);
-	darkClassNamesStore.set(darkClassNames);
-	lightClassNamesStore.set(lightClassNames);
-
 	$: disableTransitionsStore.set(disableTransitions);
 	$: themeColorsStore.set(themeColors);
 	$: darkClassNamesStore.set(darkClassNames);
 	$: lightClassNamesStore.set(lightClassNames);
+	$: modeStorageKeyStore.set(modeStorageKey);
+	$: themeStorageKeyStore.set(themeStorageKey);
 
 	onMount(() => {
 		const unsubscriber = mode.subscribe(() => {});
 		systemPrefersMode.tracking(track);
 		systemPrefersMode.query();
-		const localStorageMode = localStorage.getItem(localStorageKey);
+		const localStorageMode = localStorage.getItem($modeStorageKeyStore);
 		setMode(isValidMode(localStorageMode) ? localStorageMode : defaultMode);
+		const localStorageTheme = localStorage.getItem($themeStorageKeyStore);
+		setTheme(localStorageTheme ? localStorageTheme : defaultTheme);
 
 		return () => {
 			unsubscriber();
@@ -63,10 +64,6 @@
 		themeStorageKey,
 	});
 
-	const args = `"${defaultMode}"${
-		themeColors ? `, ${JSON.stringify(themeColors)}` : ', undefined'
-	}, ${JSON.stringify(darkClassNames)}, ${JSON.stringify(lightClassNames)}, "${defaultTheme}"`;
-
 	$: trueNonce = typeof window === 'undefined' ? nonce : '';
 </script>
 
@@ -80,9 +77,17 @@
 
 	{#if trueNonce}
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html `<script nonce=${trueNonce}>(` + setInitialMode.toString() + `)(` + args + `);</script>`}
+		{@html `<script nonce=${trueNonce}>(` +
+			setInitialMode.toString() +
+			`)(` +
+			JSON.stringify(initConfig) +
+			`);</script>`}
 	{:else}
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html `<script>(` + setInitialMode.toString() + `)(` + args + `);</script>`}
+		{@html `<script>(` +
+			setInitialMode.toString() +
+			`)(` +
+			JSON.stringify(initConfig) +
+			`);</script>`}
 	{/if}
 </svelte:head>
diff --git a/packages/mode-watcher/src/lib/mode.ts b/packages/mode-watcher/src/lib/mode.ts
@@ -1,14 +1,14 @@
 import { get } from 'svelte/store';
 import {
-	modeLocalStorageKey,
+	modeStorageKey,
 	userPrefersMode,
 	systemPrefersMode,
 	derivedMode,
 	themeColors,
 	theme as themeStore,
 	disableTransitions,
 	derivedTheme,
-	themeLocalStorageKey
+	themeStorageKey
 } from './stores.js';
 import type { Mode, ThemeColors } from './types.js';
 
@@ -86,8 +86,8 @@ export function setInitialMode({
 }
 
 export {
-	modeLocalStorageKey as localStorageKey,
-	themeLocalStorageKey,
+	modeStorageKey,
+	themeStorageKey,
 	derivedTheme as theme,
 	userPrefersMode,
 	systemPrefersMode,

diff --git a/packages/mode-watcher/src/lib/stores.ts b/packages/mode-watcher/src/lib/stores.ts
@@ -1,4 +1,4 @@
-import { writable, derived } from 'svelte/store';
+import { writable, derived, get } from 'svelte/store';
 import { withoutTransition } from './without-transition.js';
 import type { Mode, ThemeColors } from './types.js';
 import { sanitizeClassNames } from './utils.js';
@@ -76,14 +76,18 @@ function createUserPrefersMode() {
 	const defaultValue = 'system';
 
 	const storage = isBrowser ? localStorage : noopStorage;
-	const initialValue = storage.getItem(modeLocalStorageKey);
+	const initialValue = storage.getItem(getModeStorageKey());
 
 	let value = isValidMode(initialValue) ? initialValue : defaultValue;
 
+	function getModeStorageKey() {
+		return get(modeStorageKey);
+	}
+
 	const { subscribe, set: _set } = writable(value, () => {
 		if (!isBrowser) return;
 		const handler = (e: StorageEvent) => {
-			if (e.key !== modeLocalStorageKey) return;
+			if (e.key !== getModeStorageKey()) return;
 			const newValue = e.newValue;
 			if (isValidMode(newValue)) {
 				_set((value = newValue));
@@ -97,7 +101,7 @@ function createUserPrefersMode() {
 
 	function set(v: Mode) {
 		_set((value = v));
-		storage.setItem(modeLocalStorageKey, value);
+		storage.setItem(getModeStorageKey(), value);
 	}
 
 	return {
@@ -108,13 +112,17 @@ function createUserPrefersMode() {
 
 function createCustomTheme() {
 	const storage = isBrowser ? localStorage : noopStorage;
-	const initialValue = storage.getItem(themeLocalStorageKey)
+	const initialValue = storage.getItem(getThemeStorageKey())
 	let value = initialValue === null || initialValue === undefined ? '' : initialValue
 
+	function getThemeStorageKey() {
+		return get(themeStorageKey)
+	}
+
 	const { subscribe, set: _set } = writable(value, () => {
 		if (!isBrowser) return;
 		const handler = (e: StorageEvent) => {
-			if (e.key !== modeLocalStorageKey) return;
+			if (e.key !== getThemeStorageKey()) return;
 			const newValue = e.newValue;
 			if (newValue === null) {
 				_set((value = ''))
@@ -128,7 +136,7 @@ function createCustomTheme() {
 
 	function set(v: string) {
 		_set((value = v));
-		storage.setItem(themeLocalStorageKey, value);
+		storage.setItem(getThemeStorageKey(), value);
 	}
 
 	return {