Capacitor Preferences binding for VueUse `useStorageAsync`

storage.ts

import { Preferences } from "@capacitor/preferences";
import type {
  MaybeRefOrGetter,
  RemovableRef,
  StorageLikeAsync,
  UseStorageAsyncOptions,
} from "@vueuse/core";

const capacitorPreferenceStorage: StorageLikeAsync = {
  async getItem(key: string): Promise<string | null> {
    const { value } = await Preferences.get({ key });
    return value;
  },
  setItem(key: string, value: string): Promise<void> {
    return Preferences.set({ key, value });
  },
  removeItem(key: string): Promise<void> {
    return Preferences.remove({ key });
  },
};

export function useCapacitorPreference(
  key: string,
  defaults: MaybeRefOrGetter<string>,
  options?: UseStorageAsyncOptions<string>,
): RemovableRef<string>;
export function useCapacitorPreference(
  key: string,
  defaults: MaybeRefOrGetter<boolean>,
  options?: UseStorageAsyncOptions<boolean>,
): RemovableRef<boolean>;
export function useCapacitorPreference(
  key: string,
  defaults: MaybeRefOrGetter<number>,
  options?: UseStorageAsyncOptions<number>,
): RemovableRef<number>;
export function useCapacitorPreference<T>(
  key: string,
  defaults: MaybeRefOrGetter<T>,
  options?: UseStorageAsyncOptions<T>,
): RemovableRef<T>;
export function useCapacitorPreference<T = unknown>(
  key: string,
  defaults: MaybeRefOrGetter<null>,
  options?: UseStorageAsyncOptions<T>,
): RemovableRef<T>;
export function useCapacitorPreference<
  T extends string | number | boolean | object | null,
>(
  key: string,
  defaults: MaybeRefOrGetter<T>,
  options: UseStorageAsyncOptions<T> = {},
): RemovableRef<T> {
  return useStorageAsync<T>(key, defaults, capacitorPreferenceStorage, options);
}