index.ts

import { writable as internal, type Writable } from 'svelte/store'

declare type Updater<T> = (value: T) => T;
declare type StoreDict<T> = { [key: string]: Persisted<T> }

export interface Persisted<T> extends Writable<T> {
  reset: () => void
}

/* eslint-disable @typescript-eslint/no-explicit-any */
interface Stores {
  local: StoreDict<any>,
  session: StoreDict<any>,
}

const stores: Stores = {
  local: {},
  session: {}
}

export interface Serializer<T> {
  parse(text: string): T
  stringify(object: T): string
}

export type StorageType = 'local' | 'session'

export interface Options<StoreType, SerializerType> {
  serializer?: Serializer<SerializerType>
  storage?: StorageType,
  syncTabs?: boolean,
  onError?: (e: unknown) => void
  onWriteError?: (e: unknown) => void
  onParseError?: (newValue: string | null, e: unknown) => void
  beforeRead?: (val: SerializerType) => StoreType
  beforeWrite?: (val: StoreType) => SerializerType
}

function getStorage(type: StorageType) {
  return type === 'local' ? localStorage : sessionStorage
}

/** @deprecated `writable()` has been renamed to `persisted()` */
export function writable<StoreType, SerializerType = StoreType>(key: string, initialValue: StoreType, options?: Options<StoreType, SerializerType>): Persisted<StoreType> {
  console.warn("writable() has been deprecated. Please use persisted() instead.\n\nchange:\n\nimport { writable } from 'svelte-persisted-store'\n\nto:\n\nimport { persisted } from 'svelte-persisted-store'")
  return persisted<StoreType, SerializerType>(key, initialValue, options)
}
export function persisted<StoreType, SerializerType = StoreType>(key: string, initialValue: StoreType, options?: Options<StoreType, SerializerType>): Persisted<StoreType> {
  if (options?.onError) console.warn("onError has been deprecated. Please use onWriteError instead")

  const storageType = options?.storage ?? 'local'
  const browser = typeof (window) !== 'undefined' && typeof (document) !== 'undefined'

  if (browser && stores[storageType][key]) {
    return stores[storageType][key]
  }

  const serializer = options?.serializer ?? JSON
  const syncTabs = options?.syncTabs ?? true
  const onWriteError = options?.onWriteError ?? options?.onError ?? ((e) => console.error(`Error when writing value from persisted store "${key}" to ${storageType}`, e))
  const onParseError = options?.onParseError ?? ((newVal, e) => console.error(`Error when parsing ${newVal ? '"' + newVal + '"' : "value"} from persisted store "${key}"`, e))
  const beforeRead = options?.beforeRead ?? ((val) => val as unknown as StoreType)
  const beforeWrite = options?.beforeWrite ?? ((val) => val as unknown as SerializerType)

  const storage = browser ? getStorage(storageType) : null

  function updateStorage(key: string, value: StoreType) {
    const newVal = beforeWrite(value)

    try {
      storage?.setItem(key, serializer.stringify(newVal))
    } catch (e) {
      onWriteError(e)
    }
  }

  function maybeLoadInitial(): StoreType {
    function serialize(json: any) {
      try {
        return <SerializerType>serializer.parse(json)
      } catch (e) {
        onParseError(json, e)
      }
    }
    const json = storage?.getItem(key)
    if (json == null) return initialValue

    const serialized = serialize(json)
    if (serialized == null) return initialValue

    const newVal = beforeRead(serialized)
    return newVal
  }

  const initial = maybeLoadInitial()
  const store = internal(initial, (set) => {
    if (browser && storageType == 'local' && syncTabs) {
      const handleStorage = (event: StorageEvent) => {
        if (event.key === key && event.newValue) {
          let newVal: any
          try {
            newVal = serializer.parse(event.newValue)
          } catch (e) {
            onParseError(event.newValue, e)
            return
          }
          const processedVal = beforeRead(newVal)

          set(processedVal)
        }
      }

      window.addEventListener("storage", handleStorage)

      return () => window.removeEventListener("storage", handleStorage)
    }
  })

  const { subscribe, set } = store
  const persistedStore = {
    set(value: StoreType) {
      set(value)
      updateStorage(key, value)
    },
    update(callback: Updater<StoreType>) {
      return store.update((last) => {
        const value = callback(last)

        updateStorage(key, value)

        return value
      })
    },
    reset() {
      this.set(initialValue)
    },
    subscribe
  }

  if (browser) {
    stores[storageType][key] = persistedStore
  }

  return persistedStore
}