Waku

Minimalistic React Framework

Project status

We are working toward v1-alpha: dai-shi#24

Feel free to try it serioursly with non-production projects and give us feedback.

Playground: https://codesandbox.io/p/sandbox/waku-example-counter-mdc1yb

Why develop a React framework?

We believe that React Server Components (RSCs) are the future of React. The challenge is that we can't utilize RSCs with the React library alone. Instead, they require a React framework for bundling, at the very least.

Currently, only a few React frameworks support RSCs, and they often come with more features than RSCs. It would be nice to have a minimal framework that implements RSCs, which should help learning how RSCs work.

Learning is the start, but it's not what we aim at. Our assumption is that RSC best practices are still to explore. The minimal implementation should clarify the fundamentals of RSCs and enable the creation of additional features. Our goal is to establish an ecosystem that covers a broader range of use cases.

How to create a new project

Minimum requirement: Node.js 18

npm create waku@latest

yarn create waku

pnpm create waku

APIs

TODO

Tweets

• https://twitter.com/dai_shi/status/1631668890861441024
• https://twitter.com/dai_shi/status/1631989295866347520
• https://twitter.com/dai_shi/status/1632005473401716736
• https://twitter.com/dai_shi/status/1632168346354593792
• https://twitter.com/dai_shi/status/1632729614450823169
• https://twitter.com/dai_shi/status/1632749501416087552
• https://twitter.com/dai_shi/status/1633262538862530561
• https://twitter.com/dai_shi/status/1633301007391424518
• https://twitter.com/dai_shi/status/1633821215206035460
• https://twitter.com/dai_shi/status/1633824588152074240
• https://twitter.com/dai_shi/status/1633826855282434048
• https://twitter.com/dai_shi/status/1634210639831867392
• https://twitter.com/dai_shi/status/1634212827706654723
• https://twitter.com/dai_shi/status/1635142924928434177
• https://twitter.com/dai_shi/status/1635149324383559681
• https://twitter.com/dai_shi/status/1635437958185766913
• https://twitter.com/dai_shi/status/1636744180902014981
• https://twitter.com/dai_shi/status/1636745339624624132
• https://twitter.com/dai_shi/status/1636746632900534273
• https://twitter.com/dai_shi/status/1637635196458778627
• https://twitter.com/dai_shi/status/1637768216817840129
• https://twitter.com/dai_shi/status/1638910110448902145
• https://twitter.com/dai_shi/status/1639858260114300931
• https://twitter.com/dai_shi/status/1640358907540537344
• https://twitter.com/dai_shi/status/1642463300314333184
• https://twitter.com/dai_shi/status/1643224085755998210
• https://twitter.com/dai_shi/status/1647132330543419392
• https://twitter.com/dai_shi/status/1654755487391559680
• https://twitter.com/dai_shi/status/1660306318140542976
• https://twitter.com/dai_shi/status/1660537733201248257
• https://twitter.com/dai_shi/status/1660660331528728578
• https://twitter.com/dai_shi/status/1661727138746339328
• https://twitter.com/dai_shi/status/1664286329763684353
• https://twitter.com/dai_shi/status/1664989534889861123
• https://twitter.com/dai_shi/status/1667545252654366721
• https://twitter.com/dai_shi/status/1670650381762961408
• https://twitter.com/dai_shi/status/1671161795061628930
• https://twitter.com/dai_shi/status/1676793637282394112
• https://twitter.com/dai_shi/status/1684928419220578304

Diagrams

Architecture

https://excalidraw.com/#json=XGEA5V5JVU3AZSri7fXOw,Q95v26_30v05jwwQeU_tjw

How React Server Functions Work

https://excalidraw.com/#json=sqAZKA6csX-vLDlnu7CyK,JYQiZyAHbCPK4zPgeD2a8g

How Waku counter example communicates with server

https://excalidraw.com/#json=LMrRnVfDm8TDGtP-BfHZ5,o1fI7c_HvL81TDKSRoEc5A

Waku's minimal spec for React Server Components

https://excalidraw.com/#json=RPBX88sLf6FFCQXOVXIyW,ngpz5ZqKyQyU2vgWx_x6tg

How Waku's RSC-only SSR works

https://excalidraw.com/#json=pSsBQOqkYX4O-TIgxNrZj,i_CsymP1VZiHIAa0dlLbNw