larsthorup/rsc-test-sandbox

rsc-test-sandbox

An experimental test runner for an experimental implementation of React Server Components.

The main requirement is that the test runner can manage two global execution contexts, to allow for separate module graphs between server and client rendering. Currently using a worker for this.

Non requirements:

• Bundling (using individual URL-based import instead)
• JSX (using h = createElement instead)
• TypeScript
• File-system based routing (using client routing instead)

Getting started

npm install
npm test
npm start

http://localhost:7000/

TODO

• server actions (wip: https://github.com/larsthorup/rsc-test-sandbox/tree/experiment/server-action)
• e2e-test
• hydrate react elements returned from server actions
• generate react-client-manifest.json from 'use client'; with a node module loader hook (simpler than bundling)

Thanks

• Aurora Scharff for RSC usage inspiration.
• Dan Abramov for RSC From Scratch
• Rodrigo Pombo for Build your own React

Done

• avoid global code in rsc-client
• avoid rendering false
• polyfill requestIdleCallback for testing in jsdom
• re-rendering
• useState
• hydrate mounted html with react tree
• import client components before hydration
• createTextElement to be compatible with react-dom-client hydrateRoot
• when generating html also expand client components
• when expanding server components skip client components from rsc payload
• bespoke react-client-manifest.json with list of client components
• in test: use worker thread to do server rendering in a different module environment from DOM and client rendering
• verify that server components are not being loaded in client module environment
• test hydration
• async server components
• render full component tree
• react server
• render static HTML, like <p>text</p>