add examples/54_jotai

[dai-shi]

It's still a proof-of-concept. We should hide the complexity with an integration library.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Updated (UTC)
waku	⬜️ Ignored (Inspect)	Visit Preview	Feb 4, 2025 0:09am

[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.

[tylersayshi]

recorded a short demo of this... super cool stuff 😎

[rmarscher]

allowServer seems very interesting! It looks like it is a marker for vite to register the contained function as its own client reference using registerClientReference (https://github.com/facebook/react/blob/main/packages/react-server/README.md#client-references).

When I click the button, I see it updates the client store value and then uses refetch to re-render the current page (or really the whole app with the minimal client) on the server. A fetch request is made to /RSC/_.txt with components/counter.tsx#countAtom and the new client store value in the payload.

The waku-jotai Provider examines the incoming RSC payload of each request and uses it to update the store with the atom values which are recreated per request with React server's cache feature. It re-renders all of the server components and streams them down in the RSC response. 👏 👏 👏

[dai-shi]

That's a great summary. Thanks!

Technically, allowServer is unnecessary if we transform all exported variables like the same way. But, as it's conventional to throw an error on function call, I made it opt-in with the marker.

Avoiding full rerender is not a specific problem to the jotai integration, and we should tackle separately. (I don't have any solutions at the moment, and if anyone has an idea, happy to hear.)