suggested implementation for chrome's stroage with atomWithStorage

[kaminskypavel]

Hi @dai-shi ,

I'm working on a Chrome extension, in which I need to synchronize a background-script and content-script, these two live in different "worlds" and cannot use localStorage to sync.

I've implemented a wrapper around https://developer.chrome.com/docs/extensions/reference/api/storage?hl=en
would you be open for a PR in utils so it can be part of the package?

[dai-shi]

We consider it for third-party utils.
Basically, atomWithStorage is storage agnostic, and it happens to defaults to localStorage for convenience.
If chrome.storage supports Web Storage API, it should be as simple as one liner.

[kaminskypavel]

chrome.storage supports Web Storage API

it does not.

[dai-shi]

Then, create a wrapper to match Jotai's Storage API.

jotai/src/vanilla/utils/atomWithStorage.ts

Lines 43 to 47 in 90d3969

	export interface SyncStringStorage {
	getItem: (key: string) => string | null
	setItem: (key: string, newValue: string) => void
	removeItem: (key: string) => void
	}

[kaminskypavel]

ofcourse, I've already implemented it. I was wondering if you'd be open for a PR to include it.
great library btw. throwing me back to the ol' mobx days. loving it. 😆

[dai-shi]

As I said, it's for a third-party lib. We don't add storage specific implementation. We have many awesome third-party libraries.

[nwehrhan]

@kaminskypavel can you share the wrapper?

[tylers]

This is my implementation for atomWithStorage with async chrome.storage.local:

/* storedNumbersAtom.ts */

import { atomWithStorage } from 'jotai/utils';

export const storedNumbersAtom = atomWithStorage<string[]>('numbers', [], {
  async getItem(key, initialValue) {
    const storedValue = await chrome.storage.local.get(key);
    const value = key in storedValue ? storedValue[key] : initialValue;
    return value;
  },
  async setItem(key, value) {
    await chrome.storage.local.set({ [key]: value });
  },
  async removeItem(key) {
    await chrome.storage.local.remove(key);
  },
  subscribe(key, callback, initialValue) {
    function onChangedHandler(changes: { [key: string]: chrome.storage.StorageChange }, namespace: chrome.storage.AreaName) {
      for (let [changedKey, { oldValue, newValue }] of Object.entries(changes)) {
        if (changedKey === key) callback(newValue ?? initialValue);
      }
    }
    chrome.storage.onChanged.addListener(onChangedHandler);

    return () => {
      chrome.storage.onChanged.removeListener(onChangedHandler);
    };
  },
}, {
  // update to true if value is needed immediately
  getOnInit: false, 
});

/* SomeComponent.ts */

const [storedNumbers, setStoredNumbers] = useAtom(storedNumbersAtom);
console.log('%c storedNumbers', 'color:hotpink', storedNumbers);

const setAtomStorageValues = async () => {
  // simple set value
  setStoredNumbers(['one', 'two', 'three']);

  // async/await if current value is referenced
  await setStoredNumbers(async (value) => {
    const current = await value;
    if (current.includes('seven')) return ['ten', 'eleven', 'twelve'];
    if (current.includes('four')) return ['seven', 'eight', 'nine'];
    if (current.includes('one')) return ['four', 'five', 'six'];
    
    return ['one', 'two', 'three'];
  });
}

The only issue is when you set the atom, it will update the stored value and still trigger the subscribe method. And there's not a way I can see to compare the newValue from the changes to the current atom value to determine if callback() should be called. So it will cause 2 renders. (A JSON.stringify() around both values to compare would be simple.)

https://jotai.org/docs/utilities/storage

@nwehrhan