dillon1000/react

Commit

Implement react-server-dom-parcel (#31725)

This adds a new `react-server-dom-parcel-package`, which is an RSC
integration for the Parcel bundler. It is mostly copied from the
existing webpack/turbopack integrations, with some changes to utilize
Parcel runtime APIs for loading and executing bundles/modules.

See https://github.com/parcel-bundler/parcel/pull/10043 for the Parcel
side of this, which includes the plugin needed to generate client and
server references. https://github.com/parcel-bundler/rsc-examples also
includes examples of various ways to use RSCs with Parcel.

Differences from other integrations:

* Client and server modules are all part of the same graph, and we use
Parcel's
[environments](https://parceljs.org/plugin-system/transformer/#the-environment)
to distinguish them. The server is the Parcel build entry point, and it
imports and renders server components in route handlers. When a `"use
client"` directive is seen, the environment changes and Parcel creates a
new client bundle for the page, combining all client modules together.
CSS from both client and server components are also combined
automatically.
* There is no separate manifest file that needs to be passed around by
the user. A [Runtime](https://parceljs.org/plugin-system/runtime/)
plugin injects client and server references as needed into the relevant
bundles, and registers server action ids using `react-server-dom-parcel`
automatically.
* A special `<Resources>` component is also generated by Parcel to
render the `<script>` and `<link rel="stylesheet">` elements needed for
a page, using the relevant info from the bundle graph.

Note: I've already published a 0.0.x version of this package to npm for
testing purposes but happy to add whoever needs access to it as well.

### Questions

* How to test this in the React repo. I'll have integration tests in
Parcel, but setting up all the different mocks and environments to
simulate that here seems challenging. I could try to copy how
Webpack/Turbopack do it but it's a bit different.
* Where to put TypeScript types. Right now I have some ambient types in
my [example
repo](https://github.com/parcel-bundler/rsc-examples/blob/main/types.d.ts)
but it would be nice for users not to copy and paste these. Can I
include them in the package or do they need to maintained separately in
definitelytyped? I would really prefer not to have to maintain code in
three different repos ideally.

---------

Co-authored-by: Sebastian Markbage <[email protected]>
Browse files
Changed paths70 files
First-parent comparison
M .eslintrc.js ModifiedM ReactVersions.js ModifiedA fixtures/flight-parcel/.gitignore AddedA fixtures/flight-parcel/.parcelrc AddedA fixtures/flight-parcel/package.json AddedA fixtures/flight-parcel/src/Dialog.tsx AddedA fixtures/flight-parcel/src/TodoCreate.tsx AddedA fixtures/flight-parcel/src/TodoDetail.tsx AddedA fixtures/flight-parcel/src/TodoItem.tsx AddedA fixtures/flight-parcel/src/TodoList.tsx AddedA fixtures/flight-parcel/src/Todos.css AddedA fixtures/flight-parcel/src/Todos.tsx AddedA fixtures/flight-parcel/src/actions.ts AddedA fixtures/flight-parcel/src/client.tsx AddedA fixtures/flight-parcel/src/server.tsx AddedA fixtures/flight-parcel/tsconfig.json AddedA fixtures/flight-parcel/types.d.ts AddedA fixtures/flight-parcel/yarn.lock AddedA packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-parcel.js AddedA packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-parcel.js AddedA packages/react-client/src/forks/ReactFlightClientConfig.dom-node-parcel.js AddedA packages/react-server-dom-parcel/README.md AddedA packages/react-server-dom-parcel/client.browser.js AddedA packages/react-server-dom-parcel/client.edge.js AddedA packages/react-server-dom-parcel/client.js AddedA packages/react-server-dom-parcel/client.node.js AddedA packages/react-server-dom-parcel/index.js AddedA packages/react-server-dom-parcel/npm/client.browser.js AddedA packages/react-server-dom-parcel/npm/client.edge.js AddedA packages/react-server-dom-parcel/npm/client.js AddedA packages/react-server-dom-parcel/npm/client.node.js AddedA packages/react-server-dom-parcel/npm/index.js AddedA packages/react-server-dom-parcel/npm/server.browser.js AddedA packages/react-server-dom-parcel/npm/server.edge.js AddedA packages/react-server-dom-parcel/npm/server.js AddedA packages/react-server-dom-parcel/npm/server.node.js AddedA packages/react-server-dom-parcel/package.json AddedA packages/react-server-dom-parcel/server.browser.js AddedA packages/react-server-dom-parcel/server.edge.js AddedA packages/react-server-dom-parcel/server.js AddedA packages/react-server-dom-parcel/server.node.js AddedA packages/react-server-dom-parcel/src/ReactFlightParcelReferences.js AddedA packages/react-server-dom-parcel/src/client/ReactFlightDOMClientBrowser.js AddedA packages/react-server-dom-parcel/src/client/ReactFlightDOMClientEdge.js AddedA packages/react-server-dom-parcel/src/client/ReactFlightDOMClientNode.js AddedA packages/react-server-dom-parcel/src/server/ReactFlightDOMServerBrowser.js AddedA packages/react-server-dom-parcel/src/server/ReactFlightDOMServerEdge.js AddedA packages/react-server-dom-parcel/src/server/ReactFlightDOMServerNode.js AddedA packages/react-server-dom-parcel/src/server/ReactFlightServerConfigParcelBundler.js AddedA packages/react-server-dom-parcel/src/server/react-flight-dom-server.browser.js AddedA packages/react-server-dom-parcel/src/server/react-flight-dom-server.browser.stable.js AddedA packages/react-server-dom-parcel/src/server/react-flight-dom-server.edge.js AddedA packages/react-server-dom-parcel/src/server/react-flight-dom-server.edge.stable.js AddedA packages/react-server-dom-parcel/src/server/react-flight-dom-server.node.js AddedA packages/react-server-dom-parcel/src/server/react-flight-dom-server.node.stable.js AddedA packages/react-server-dom-parcel/src/shared/ReactFlightClientConfigBundlerParcel.js AddedA packages/react-server-dom-parcel/src/shared/ReactFlightImportMetadata.js AddedA packages/react-server-dom-parcel/static.browser.js AddedA packages/react-server-dom-parcel/static.edge.js AddedA packages/react-server-dom-parcel/static.js AddedA packages/react-server-dom-parcel/static.node.js AddedA packages/react-server/src/forks/ReactFlightServerConfig.dom-browser-parcel.js AddedA packages/react-server/src/forks/ReactFlightServerConfig.dom-edge-parcel.js AddedA packages/react-server/src/forks/ReactFlightServerConfig.dom-node-parcel.js AddedM scripts/flow/environment.js ModifiedM scripts/rollup/bundles.js ModifiedM scripts/rollup/validate/eslintrc.cjs.js ModifiedM scripts/rollup/validate/eslintrc.cjs2015.js ModifiedM scripts/rollup/validate/eslintrc.esm.js ModifiedM scripts/shared/inlinedHostConfigs.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…