Nested atoms in atomWithStorage

[morganbarrett]

It seems like nested atoms aren't supported with "atomWithStorage"? This seems like a trivial fix inside of createJSONStorage, is there some sort of gotcha that I'm missing? Possibly the performance impact of having to recurse the stored atom in order to serialize and deserialize the nested atoms within (could be opt in?). Here is the sort of code I want to write, I guess "split" is the way it would be written, but I think splitting up the storage would be more efficient for larger arrays with large objects (especially in my use case where I want to synchronize the storage with a backend, so sending smaller updates when updating a single nested atom would be preferred).

//would serialize to something like `["atom:todo-0", "atom:todo-1"]`
const todos = atomWithStorage<Atom<Todo>[]>("todos", [], storage);

const addTodo = (title: string) => {
	const id = createId();
	const todo = {id, title};
        //would serialize to `{id: 0, title: "something"}`
	const atom = atomWithStorage<Todo>(`todo-${id}`, todo, storage);

	store.set(todos, async arr => [...(await arr), atom]);
};

If the nested atom isn't an "atomWithStorage" then maybe it could serialize in place e.g ["literal-atom:{id: 0, title: "something}"]

[morganbarrett]

If this is something that gels, I would be happy to submit a pr

[dai-shi]

This seems like a trivial fix inside of createJSONStorage, is there some sort of gotcha that I'm missing?

How does the trivial fix would look like? Notice that createJSONStorage is just a separate function, so you can create your own outside the library.

[morganbarrett]

I don't believe atoms currently expose enough information about themselves to implement this externally. This is the basic gist (not production code)

const replacer = (key, value) => {
  if (value instanceof Atom) {
    return serializeAtom(value);
  }

  if (Array.isArray(value)) {
    return escapeArray(value);
  }

  return value;
};

const reviver = (key, value) => {
  if (!Array.isArray(value)) {
    return value;
  }

  if (value[0] === "atom") {
    return deserializeAtom(value);
  }

  return unescapeArray(value);
};

const serializeAtom = (value: Atom) => {
  if (value.init === undefined) {
    throw new Error("Cannot serialize computed atom");
  }

  if (value.isStorage) {
    if (value.storage !== storage) {
      throw new Error("Cannot serialize atom with different storage");
    }

    return ["atom", value.initialValue, value.storageKey];
  }

  return ["atom", get(value)];
};

const deserializeAtom = ([_, serializedValue, storageKey]: string[]) => {
  const value = reviver("", serializedValue);

  if (storageKey !== undefined) {
    return atomWithStorage(storageKey, value, storage);
  }

  return atom(value);
};

const atomRegex = /^\\*atom$/;

const escapeArray = (value: any[]) => {
  const [first, ...rest] = value;

  if (first.test(atomRegex)) {
    return [`\\${first}`, ...rest];
  }

  return value;
};

const unescapeArray = (value: any[]) => {
  const [first, ...rest] = value;

  if (first.test(atomRegex)) {
    return [first.slice(1), ...rest];
  }

  return value;
};

these would augment replacer and reviver inside of createJSONStorage, it would just need an additional change of exposing data from atoms with storage

[dai-shi]

I don't believe atoms currently expose enough information about themselves

Oh, I thought you meant you had a trivial solution in your mind.
Never mind then. This isn't trivial.
Thinking about it, atoms don't have string keys, so it's technically impossible.

[morganbarrett]

this is for atoms with storage, they certainly have string keys

[morganbarrett]

it's just the atomWithStorage utility that would need ammending

[dai-shi]

I hope some solutions will be provided from jotai-effect library.

[dai-shi]

I assume you have a full control for your atoms you create.
So, instead of the symbol, you can create your own atom creator.

import { atom as originalAtom } from 'jotai';

const atoms = new WeakSet();

export const atom = (...args) => {
  const a = originalAtom(...args);
  atoms.add(a);
  return a;
};

export const isAtom = (a) => atoms.has(a);

(It's our design decision to not have isAtom util or such a symbol in jotai library.)

[morganbarrett]

what's the reasoning behind not having an isAtom util?

[morganbarrett]

but yeah, looking at it now, it would be easy enough to do this externally, thanks for your help

[morganbarrett]

anyone else who wants this functionality please see:

https://github.com/morganbarrett/jotai-persistence