dillon1000/react
Commit
Browse files 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]>
Changed paths70 files
First-parent comparison.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 ModifiedPatch
Files changed
Rendering syntax-highlighted changes…