Skip to content
  • Devon Govett's avatar
    Implement react-server-dom-parcel (#31725) · ca587425
    Devon Govett authored
    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: default avatarSebastian Markbage <sebastian@calyptus.eu>
    ca587425