Introducing JotaiX

[zbeyens]

Hey Jotai community!

I'm excited to introduce JotaiX, a new layer enhancing your experience with Jotai. At its heart is createAtomStore, offering:

• One-stop creation for all your atoms.
• Simple store hydration and sync, perfect for SSR.
• Scoped providers for more precise state control across your app.
• Full TypeScript support.

In short, less boilerplate and a quick start. It's also a solution to many Discussions opened here since jotai@2. Love to hear what you think. We're using it in Plate libraries and apps using NextJS App Router.

→ https://github.com/udecode/jotai-x

[MiroslavPetrik]

Kudos for scoped state, that could be useful. It seems similar to what bunshi does, but I didn't use it. Bunshi seems more flexible.

I dislike the .get.atom.fn stuff, seems too verbose, like better DX could be achieved.

Perhaps, instead of the verbose { fn: () => void } types, there could be func exported:

import {func, Func} from "jotai-x"

type onUpdateName = Func<(name: string) => void>


const initialValues = {
  onUpdateName: func((name: string) => console.log("Child:", name))
}

[zbeyens]

Thanks for the feedback.

For the fn workaround, we got rid of it today thanks to https://github.com/udecode/jotai-x/blob/main/packages/jotai-x/src/atomWithFn.ts

Bunshi seems to handle a few more cases with the scope, without the need of a provider. In addition to scoping, createAtomStore from jotai-x returns a provider that hydrates and syncs atoms in a simple way. Also, for each value in the initial state, jotai-x generates an atom and the 3 jotai hooks (useAtom, useAtomValue, useSetAtom) for less boilerplate overall.