Jotai debugLabels -- NODE_ENV guard

[rmillio]

Hello, I have a couple of questions regarding debug labels for Jotai atoms.

• What disadvantages are there if the debug labels get included in the prod build? Do I have to always add that NODE_ENV guard before settings a debugLabel? It seems like the jotai docs recommends (I think?) adding the guard in this code snippet

• I see that the babel plugin for auto debug labels doesn't include that env guard. Depending on the answers to the first question, I would like to contribute a patch to the plugin or clarify the docs if that's possible.

[dai-shi]

1: It's just to reduce the bundle size.
2: I'd suggest to disable the plugin for production build. Feel free to improve the docs.

[rmillio]

@dai-shi In my codebase I use a lot of custom labels for the atoms and I end up having guards everywhere. I would like to have a plugin enabled in all envs and when it parses atom.debugLabel it could wrap it in a guard. Does this sound like a good idea to you? Or do you have advice on how to not have that guard everywhere in the codebase?

[dai-shi]

In my codebase I use a lot of custom labels for the atoms

So, you have debug labels manually without using the babel plugin, right?
If you need to remove them for production build, you would need a custom plugin or source code transformer. You could create a plugin, but I wonder if there are existing plugins that help your case.

[rmillio]

Yes exactly, I add debug labels manually because I use the same atom (under scope provider) in a few places in the same page, so I need different names for each atom instance. I searched for a suitable plugin but couldn't find one, do you have anything in mind that could help me?. If I write my own, would you like me to share it or is it not useful enough for most people?

[dai-shi]

How about using https://vite.dev/config/shared-options.html#define ?

const fooAtom = atom('foo');
defineAtomDebugLabel(fooAtom, 'fooAtom');

export default defineConfig({
  define: {
    defineAtomDebugLabel: '((a, l) => { a.debugLabel = l })',
  },
})

[rmillio]

thanks for the idea. I'm using webpack so it could look like this:

new webpack.DefinePlugin({
      defineAtomDebugLabel:
        process.env.NODE_ENV === "development"
          ? (atom, label) => {
              atom.debugLabel = label;
            }
          : () => {},
    }),

I also wrote a babel plugin but since I have to pass the names of the custom atoms to it, it seems a bit more tedious to use that one so I'm going to go with the webpack approach. Do you care to add the plugin to the plugins folder?