Reactive Local/Session Storage trong Svelte 5

import { createSubscriber } from 'svelte/reactivity';

// https://hackernoon.com/mastering-type-safe-json-serialization-in-typescript
type JSONPrimitive = string | number | boolean | null | undefined;
type JSONValue =
	| JSONPrimitive
	| JSONValue[]
	| {
			[key: string]: JSONValue;
	  };

interface ReactiveStorageConfig {
	prefix: string;
	storage: 'local' | 'session';
}

interface ReactiveStorageItemConfig extends ReactiveStorageConfig {
	init: JSONValue;
}

interface ReactiveStorageItem extends Omit<ReactiveStorageItemConfig, 'storage'> {
	key: string;
	storage: Storage | null;
	value: JSONValue;
	update?: Parameters<Parameters<typeof createSubscriber>[0]>[0];
}

type ReactiveStorage<ValueMap extends Record<string, JSONValue>> = ValueMap & {
	/**
	 * set each item back to initial value (if any)
	 **/
	reset: () => void;
};

export function createReactiveStorage<ValueMap extends Record<string, JSONValue>>(
	values: (keyof ValueMap | [key: keyof ValueMap, config: Partial<ReactiveStorageItemConfig>])[],
	config: Partial<ReactiveStorageConfig> = {},
): ReactiveStorage<ValueMap> {
	const globalConfig: ReactiveStorageConfig = {
		prefix: '',
		storage: 'local',
		...config,
	};

	// resolve config for each item
	const items = values.reduce(
		(acc, value) => {
			let key: string;
			let config: ReactiveStorageItemConfig;
			if (Array.isArray(value)) {
				config = { init: null, ...globalConfig, ...value[1] };
				key = value[0].toString();
			} else {
				config = { ...globalConfig, init: null };
				key = value.toString();
			}

			let storage: Storage | null = null;
			if (config.storage === 'local' && 'localStorage' in globalThis) {
				storage = localStorage;
			} else if (config.storage === 'session' && 'sessionStorage' in globalThis) {
				storage = sessionStorage;
			}

			const keyWithPrefix = config.prefix + key;
			acc[keyWithPrefix] = {
				...config,
				key,
				storage,
				value: config.init,
				update: undefined, // will be set later
			};
			return acc;
		},
		{} as Record<string, ReactiveStorageItem>,
	);

	const reactive = {} as ReactiveStorage<ValueMap>;
	for (const [keyWithPrefix, item] of Object.entries(items)) {
		const { storage, init, key } = item;
		const subscribe = createSubscriber((update) => {
			items[keyWithPrefix].update = update;
		});

		// initialize
		const json = storage?.getItem(keyWithPrefix);
		if (json) {
			item.value = JSON.parse(json) as JSONValue;
		} else if (init !== null && init !== undefined) {
			storage?.setItem(keyWithPrefix, JSON.stringify(init));
		}

		// proxy via getter/setter
		Object.defineProperty(reactive, key, {
			enumerable: true,
			get() {
				subscribe();
				return item.value;
			},
			set(newValue: JSONValue) {
				item.value = newValue;
				if (!storage) return;
				if (newValue === null) {
					storage.removeItem(keyWithPrefix);
				} else {
					storage.setItem(keyWithPrefix, JSON.stringify(newValue));
				}
				item.update?.();
			},
		});
	}

	// implement reset method
	Object.defineProperty(reactive, 'reset', {
		enumerable: false,
		writable: false,
		configurable: false,
		value: () => {
			for (const item of Object.values(items)) {
				// eslint-disable-next-line @typescript-eslint/no-explicit-any
				(reactive as any)[item.key] = item.init;
			}
		},
	});

	// listen for storage changes from other documents
	if ('addEventListener' in globalThis) {
		globalThis.addEventListener('storage', (event) => {
			const { key: keyWithPrefix, storageArea, newValue } = event;
			if (!keyWithPrefix || !storageArea) return;
			const item = items[keyWithPrefix];
			if (!item || item.storage !== storageArea) return;
			item.value = JSON.parse(newValue || 'null') as JSONValue;
			item.update?.();
		});
	}

	return reactive;
}

import { createReactiveStorage } from './lib';

type StorageValue = {
	str: string | null;
	num: number | null;
	bool: boolean | null;
	obj: {
		str: string | null;
		num: number | null;
		bool: boolean | null;
	};
};

export const storage = createReactiveStorage<StorageValue>(
	[['str', { storage: 'session' }], ['num', { init: 0 }], ['bool', { prefix: 'special:' }], 'obj'],
	{
		prefix: 'app:',
		storage: 'local',
	},
);

<script lang="ts">
	import { storage } from './storage';

	function increment(step: number = 1) {
		if (storage.num === null) {
			storage.num = 0;
		} else {
			storage.num += step;
		}
	}

	function randomObj() {
		storage.obj = {
			str: Math.random().toString(36).substring(2, 15),
			num: Math.floor(Math.random() * 100),
			bool: Math.random() > 0.5,
		};
	}
</script>

<fieldset class="not-prose overflow-auto border border-outline p-4 max-w-full min-w-0">
	<legend>Interactive Playground</legend>
	<table class="border-collapse c-text-body-sm w-full">
		<thead>
			<tr class="bg-surface-subtle">
				<th class="w-20" scope="col">Key</th>
				<th scope="col">
					<div class="flex items-center justify-between gap-2">
						<span class="flex-1">Current Value</span>
						<button class="c-btn py-0 px-2" onclick={storage.reset}>
							<span>Reset all</span>
						</button>
					</div>
				</th>
				<th class="w-40" scope="col">Action</th>
			</tr>
		</thead>
		<tbody>
			<!-- str -->
			<tr>
				<th scope="row">str</th>
				<td>"{storage.str}"</td>
				<td>
					<input class="c-text-input py-1 px-2" type="text" placeholder="Type something..." bind:value={storage.str} />
				</td>
			</tr>

			<!-- num -->
			<tr>
				<th scope="row">num</th>
				<td>{storage.num}</td>
				<td>
					<button class="c-btn c-text-body-sm py-1 px-2" onclick={() => increment(1)}>
						<span>Increment</span>
					</button>
					<button class="c-btn c-text-body-sm py-1 px-2" onclick={() => increment(-1)}>
						<span>Decrement</span>
					</button>
				</td>
			</tr>

			<!-- bool -->
			<tr>
				<th scope="row">bool</th>
				<td>{storage.bool}</td>
				<td>
					<label class="flex items-center gap-2 cursor-pointer">
						<input class="c-checkbox" type="checkbox" bind:checked={storage.bool} />
						<span>Toggle</span>
					</label>
				</td>
			</tr>

			<!-- obj -->
			<tr>
				<th scope="row">obj</th>
				<td>{JSON.stringify(storage.obj)}</td>
				<td>
					<button class="c-btn c-text-body-sm py-1 px-2" onclick={randomObj}>
						<span>Randomize</span>
					</button>
				</td>
			</tr>
		</tbody>
	</table>
</fieldset>

<style lang="postcss">
	td, th {
		padding: 0.5rem 1rem;
		border: 1px solid var(--color-outline);
		vertical-align: middle;
	}
</style>

const str = new ReactiveStorageItem('str');
const bool = new ReactiveStorageItem('bool');
const storage = new ReactiveStorage(['str', 'bool']);
storage.str; storage.bool;

type StorageValue = {
  str: string | null;
  num: number | null;
  /* ... */
};
const storage = new ReactiveStorage<StorageValue>({ /* ... */ })
storage.str; // <-- string
stroage.num; // <-- number