Provide read and write functions with a name in development mode based on debugLabel.

[iwoplaza]

We were recently debugging an issue with the store and async atoms (a bug which the experimental store seems to fix btw, so that's great 🌟 ), and while we were trying to hone down which atoms were causing the issue, having a stack trace of mostly anonymous functions was not particularly useful. We are debating whether to pass in named functions as read functions to derived atoms at the cost of readability. I thought maybe there could be a way to give these read and write functions names based on the debugLabel assigned to its owning atom.

So instead of having to write:

const countAtom = atom(0)
const doubleAtom = atom(function doubleAtomRead(get) {
  return get(countAtom) * 2
})

We could write:

const countAtom = atom(0)
const doubleAtom = atom((get) => get(countAtom) * 2)
doubleAtom.debugLabel = `doubleAtom`;

And since the babel plugin seems to give atoms their debugLabel automatically anyway, this would improve our debugging experience a ton.

In pseudo-code, we could do something like this in the atom function:

export function atom<Value, Args extends unknown[], Result>(
  read: Value | Read<Value, SetAtom<Args, Result>>,
  write?: Write<Args, Result>,
) {
  // .. the usual `atom` function body

  if (import.meta.env?.MODE !== 'production') {
    let debugLabel: undefined | string = undefind;
    Object.defineProperty(config, 'debugLabel', {
      get() {
        return debugLabel;
      },
      set(v) {
        debugLabel = v
        if (typeof read === 'function' && read.name === undefined) {
          Object.defineProperty(read, 'name', {
            value: v + 'Read',
          })
        }
        if (typeof write === 'function' && write.name === undefined) {
          Object.defineProperty(write, 'name', {
            value: v + 'Write',
          })
        }
      },
    })
  }
  return config
}

[dai-shi]

Your pseudo-code looks good, and it's DEV-only. However, I wonder if there are any pitfalls.

If you are using the babel plugin anyway, I think it feels safer to add the function names with the plugin:

const countAtom = atom(0)
const doubleAtom = atom((get) => get(countAtom) * 2)
doubleAtom.debugLabel = `doubleAtom`;
if (doubleAtom.read && !doubleAtom.read.name) doubleAtom.read.name = `doubleAtomRead`;
if (doubleAtom.write && !doubleAtom.write.name) doubleAtom.write.name = `doubleAtomWrite`;