What do you guys use for storage?

[dvlden]

Considering that storage API is really bad DX, making a wrapper sounds reasonable.
I did it many times, but I never built an extension using a framework such as Vue or React.

I wonder how do you guys do it, is there anything out there to simplify the storage API and make it reactive out of the box?

I know about @vue-use/core but their API isn't flexible enough to support storage.onChange listener to react to changes.

Feels like major important part of building the extensions, but I think web would disagree with me, cause I wasn't able to find anything.

Please share with me if you have something already made, npm package, repository, anything...

Much appreciated.

[aklinker1]

Here are some libraries:

• https://webext-core.aklinker1.io/guide/storage/ - localStorage-esk APIs for chrome extensions. I wrote this, but it uses webextension-polyfill, so I know you won't want to use it lol
• https://www.npmjs.com/package/webext-storage - This one is really interesting, a pretty good idea, but different from standard storage patterns
• https://www.npmjs.com/package/use-chrome-storage - A hook for react

I couldn't find any that integrate with Vue.

I also plan on adding a storage wrapper and messaging wrapper to WXT in the future. The storage API would use unstorage, see #228 for more details.

unstorage works with Vueuse's useStorageAsync, but like you said, it's not reactive to changes. So I usually roll my own implementation based off of useAsyncState:

// composables/useStoredValue.ts
import { UseAsyncStateOptions, useAsyncState } from "@vueuse/core";
import useStorage from "./useStorage";
import { computed, onMounted, onUnmounted, ref } from "vue";

export default function <
  T extends StorageValue,
  Shallow extends boolean = true
>(
  key: string,
  initialValue?: T,
  opts?: UseAsyncStateOptions<Shallow, T | null>
) {
  const storage = useStorage();
  const { state, ...asyncState } = useAsyncState<T | null, [], Shallow>(
    () => storage.getItem(key),
    initialValue ?? null,
    opts
  );

  // Listen for changes
  let unwatch: Promise<() => void> | undefined;
  onMounted(() => {
    unwatch = storage.watch(async (event, changedKey) => {
      if (key !== changedKey) return;
      if (event === "remove") state.value = null;
      else asyncState.execute();
    });
  });
  onUnmounted(() => {
    unwatch?.then((fn) => fn());
  });

  return {
    // Use a writable computed ref to write updates to storage
    state: computed({
      get() {
        return state.value;
      },
      set(newValue) {
        void storage.setItem(key, newValue);
        state.value = newValue;
      },
    }),
    ...asyncState,
  };
}

type StorageValue = null | string | number | boolean | object;

This is reactive and supports writing to storage when you set the value from a component. Here's some example usages:

const { state: count } = useStoredValue("session:count", 0);
function onClick() {
  count.value++;
}

const { state: installDate } = useStoredValue("local:install-date");

If you have any opinions on what a storage API might look like, please leave them on #228!

[dvlden]

Ah amazing. I was attempting to make something similar myself, and never got it quite right to have setters/getters to work as they do in Vue itself.

So I'll use what you provided me with... 🔥

[aklinker1]

I forgot to include the useStorage implementation:

import { Storage } from "unstorage";
import { inject } from "vue";

export default function () {
  const storage = inject<Storage>("storage");
  if (storage == null)
    throw Error(
      "Injected value for 'storage' not found. Did you forget to provide it?"
    );
  return storage;
}

Then it's provided to the app during creation:

createApp(App).provide("storage", storage).mount("#app");

I've found this is the best way to abstract the browser APIs from your UI - it makes them easier to test because you can use an in-memory implementation and not worry about mocking the entire storage object.