import { StorageSerializers } from "@vueuse/core"; import { preferences as prefs } from "~/components/preferences/preferences"; type SerializedPreferences = { [K in keyof typeof prefs]: (typeof prefs)[K]["options"]["defaultValue"]; }; const usePreferences = (): { [K in keyof typeof prefs]: WritableComputedRef< (typeof prefs)[K]["options"]["defaultValue"] >; } => { const localStorage = useLocalStorage( "versia:preferences", Object.fromEntries( Object.entries(prefs).map(([key, value]) => [ key, value.options.defaultValue, ]), ) as SerializedPreferences, { serializer: { read(raw) { return StorageSerializers.object.read(raw); }, write(value) { return StorageSerializers.object.write(value); }, }, }, ); return Object.fromEntries( Object.entries(prefs).map(([key, value]) => [ key, computed({ get() { return ( localStorage.value[key as keyof typeof prefs] ?? value.options.defaultValue ); }, set(newValue) { // @ts-expect-error Key is marked as readonly in the type localStorage.value[key] = newValue; }, }), ]), ) as { [K in keyof typeof prefs]: WritableComputedRef< (typeof prefs)[K]["options"]["defaultValue"] >; }; }; export const preferences = usePreferences();