feat(babel): Babel plugin: debug-label

[Thisen]

This change adds a Babel plugin to Jotai for adding debug labels automatically to atoms.

Partially fixes #487, as I want to split the PRs as much as possible.

The plan is to create the following plugins:

• jotai/babel/plugin-debug-label - Handles debug label
• jotai/babel/plugin-react-refresh - Handles React refresh support

And the following preset to compose the plugins:

• jotai/babel/preset

EDIT:

If you wanna try it out, use the new sandbox or install the CSB build and add the following to your .babelrc:

{
  "presets": [],
  "plugins": ["jotai/babel/plugin-debug-label"]
}

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/pmndrs/jotai/89DWimBFRM4SqtcTzNZy3irW7utX
✅ Preview: https://jotai-git-babel-plugin-debug-label-pmndrs.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit efff15c:

Sandbox	Source
React	Configuration
React Typescript	Configuration
React Browserify	Configuration
React Snowpack	Configuration
Next.js	Configuration
Next.js with custom Babel config	Configuration
React with custom Babel config	Configuration

[dai-shi]

Is this ready to play with? How can we try?

[Thisen]

Is this ready to play with? How can we try?

If you want to try it, you can use the CSB build and add this to your .babelrc:

{
  "presets": [],
  "plugins": ["jotai/babel-plugin/debug-label"]
}

[dai-shi]

https://codesandbox.io/s/jotai-nextjs-babel-plugin-kc8sd
Is this something you expected? Got "Internal Server Error"

[dai-shi]

It works well in codesandbox. nextjs with babel config.
The screenshot with react devtools, using <Provider>:

[Thisen]

I think it's getting close to ready. Please review and try it.

Happy to get more test cases.

[dai-shi]

I think this is good for the initial version.
There could be many edge cases that need to be covered later, but it's more important to let it go.
Let's label this as "experimental" in the release note.

[dai-shi]

How does this resolve naming conflict?

[Thisen]

Good catch. If someone has an atom called atoms, it would break - Do you have a good idea how to guard against it?

[dai-shi]

It can be any variable or even a function declaration function atom() { return 1 }.
I would simply ignore if it finds a conflict.

[dai-shi]

Yay, it works in non-container codesandbox.