What do you think about setting debugLabels automatically?

[wootra]

Hello, team.
I'd like to ask this question in more relative thread. pmndrs/jotai#1981
On top of the initial idea. I think this can be extended to do below:

1. add debugLabel to all the atoms given as a parameter.
2. check the naming convention of atom that the team decided.
3. ignore adding debugLabel in the production (not sure if it will reduce bundle size as well)

the code will be like ths:

export const setAtomDebugLabels = <
    T extends { [name: string]: Atom<unknown> }
>(
    obj: T,
    format = (atomName: string) => atomName
) => {
    if(process.env.NODE_ENV !== 'production'){
    Object.keys(obj).forEach(key => {
	if(!key.endsWith('Atom')) {
		throw new Error(`name ${key} does not have Atom at the end. violoation of naming convention.`);
	}
        const atom = obj[key];
        atom.debugLabel = format(key);
    }, '');
    }
    return obj;
};

and use case will be like this:

const val1Atom = atom('');
const val2Atom = atom('');
const val3Atom = atom(get=>get(val1Atom)+" derived");
...
const val10Atom = atom('');

export default setAtomDebugLabels({val1Atom, val2Atom, ..., val10Atom}, name=>`my-atom-group/${name}`);

Do you guys find it useful?

[arjunvegda]

Thanks for sharing your thoughts!

There might be a few ways to achieve your goals.

1. Extend Daishi's idea to include "namespace" in the function parameter, you may need to satisfy the TypeScript types further though
2. Write a babel-macro to add namespaces
3. Write a babel transformer to add namespaces during build time
4. FWIW Your current solution seems easy enough to grasp and maintain during app development

I'd choose the 1st option because the maintenance overhead is the same as your current solution (add key + call the fn) and it guarantees that the debugLabel is set in all the occasions even when you create atoms within functions.

Also, we got a similar idea here to organize these sorts of grouping into a namespace. You may find the discussion insightful.