Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setup react-server-dom-parcel package #28138

Closed
wants to merge 15 commits into from

Conversation

devongovett
Copy link
Contributor

This sets up a new react-server-dom-parcel package, which will be 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.

Some other differences:

  • The transformer plugin to handle client/server references isn't in this package, it'll be in the Parcel repo. Same for the plugin that generates the manifest. It's easier for us to maintain and test there, so hopefully that's ok.
  • There's no node loader or register functionality in this package. The server parts will be bundled on Parcel's side just like the client. In Parcel, this is all a single module graph, with different environments for client and server modules. There's no need for a node loader because node will run the output that is transformed by Parcel, with client components replaced with references already.
  • There is support for loading both CSS and JS bundles. I added some functionality to the shared client config for this, not sure if that's ok.

This is only a first pass. Some parts may still change as I make progress on the Parcel side of this, but I wanted to open a PR in case there is any feedback. I'm happy for it to be merged or not, but will probably send more followup changes as I make more progress.

@react-sizebot
Copy link

react-sizebot commented Jan 28, 2024

Comparing: 706d95f...8d06250

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js = 177.10 kB 177.10 kB = 55.20 kB 55.20 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 177.64 kB 177.64 kB = 55.53 kB 55.53 kB
facebook-www/ReactDOM-prod.classic.js = 594.34 kB 594.34 kB = 104.96 kB 104.96 kB
facebook-www/ReactDOM-prod.modern.js = 577.60 kB 577.60 kB = 102.02 kB 102.02 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +∞% 0.00 kB 61.78 kB +∞% 0.00 kB 14.91 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +∞% 0.00 kB 45.00 kB +∞% 0.00 kB 10.80 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.min.js +∞% 0.00 kB 11.91 kB +∞% 0.00 kB 4.42 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +∞% 0.00 kB 68.52 kB +∞% 0.00 kB 16.55 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +∞% 0.00 kB 51.16 kB +∞% 0.00 kB 12.30 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.min.js +∞% 0.00 kB 13.99 kB +∞% 0.00 kB 5.03 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +∞% 0.00 kB 67.66 kB +∞% 0.00 kB 16.34 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +∞% 0.00 kB 50.26 kB +∞% 0.00 kB 12.09 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.min.js +∞% 0.00 kB 13.71 kB +∞% 0.00 kB 4.95 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js +∞% 0.00 kB 121.59 kB +∞% 0.00 kB 27.76 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +∞% 0.00 kB 96.63 kB +∞% 0.00 kB 22.87 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.min.js +∞% 0.00 kB 26.26 kB +∞% 0.00 kB 9.01 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js +∞% 0.00 kB 123.15 kB +∞% 0.00 kB 28.25 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.js +∞% 0.00 kB 97.48 kB +∞% 0.00 kB 23.11 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.min.js +∞% 0.00 kB 26.80 kB +∞% 0.00 kB 9.18 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js +∞% 0.00 kB 128.04 kB +∞% 0.00 kB 29.19 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.js +∞% 0.00 kB 102.67 kB +∞% 0.00 kB 24.03 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.min.js +∞% 0.00 kB 28.19 kB +∞% 0.00 kB 9.65 kB
oss-experimental/react-server-dom-parcel/client.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-experimental/react-server-dom-parcel/client.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-experimental/react-server-dom-parcel/client.js +∞% 0.00 kB 0.06 kB +∞% 0.00 kB 0.08 kB
oss-experimental/react-server-dom-parcel/client.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-experimental/react-server-dom-parcel/index.js +∞% 0.00 kB 0.28 kB +∞% 0.00 kB 0.22 kB
oss-experimental/react-server-dom-parcel/server.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-experimental/react-server-dom-parcel/server.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
oss-experimental/react-server-dom-parcel/server.js +∞% 0.00 kB 0.19 kB +∞% 0.00 kB 0.16 kB
oss-experimental/react-server-dom-parcel/server.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +∞% 0.00 kB 56.69 kB +∞% 0.00 kB 13.91 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +∞% 0.00 kB 39.91 kB +∞% 0.00 kB 9.79 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.min.js +∞% 0.00 kB 10.60 kB +∞% 0.00 kB 4.06 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +∞% 0.00 kB 63.44 kB +∞% 0.00 kB 15.54 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +∞% 0.00 kB 46.07 kB +∞% 0.00 kB 11.29 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.min.js +∞% 0.00 kB 12.68 kB +∞% 0.00 kB 4.67 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +∞% 0.00 kB 62.57 kB +∞% 0.00 kB 15.33 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +∞% 0.00 kB 45.17 kB +∞% 0.00 kB 11.08 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.min.js +∞% 0.00 kB 12.39 kB +∞% 0.00 kB 4.58 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js +∞% 0.00 kB 100.21 kB +∞% 0.00 kB 23.62 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +∞% 0.00 kB 86.02 kB +∞% 0.00 kB 20.56 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.min.js +∞% 0.00 kB 23.71 kB +∞% 0.00 kB 8.33 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js +∞% 0.00 kB 101.10 kB +∞% 0.00 kB 23.84 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.js +∞% 0.00 kB 86.87 kB +∞% 0.00 kB 20.78 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.min.js +∞% 0.00 kB 24.22 kB +∞% 0.00 kB 8.50 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js +∞% 0.00 kB 106.46 kB +∞% 0.00 kB 24.93 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.js +∞% 0.00 kB 92.51 kB +∞% 0.00 kB 21.87 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.min.js +∞% 0.00 kB 25.68 kB +∞% 0.00 kB 8.99 kB
oss-stable-semver/react-server-dom-parcel/client.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-stable-semver/react-server-dom-parcel/client.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-stable-semver/react-server-dom-parcel/client.js +∞% 0.00 kB 0.06 kB +∞% 0.00 kB 0.08 kB
oss-stable-semver/react-server-dom-parcel/client.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-stable-semver/react-server-dom-parcel/index.js +∞% 0.00 kB 0.28 kB +∞% 0.00 kB 0.22 kB
oss-stable-semver/react-server-dom-parcel/server.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-stable-semver/react-server-dom-parcel/server.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
oss-stable-semver/react-server-dom-parcel/server.js +∞% 0.00 kB 0.19 kB +∞% 0.00 kB 0.16 kB
oss-stable-semver/react-server-dom-parcel/server.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +∞% 0.00 kB 56.69 kB +∞% 0.00 kB 13.91 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +∞% 0.00 kB 39.91 kB +∞% 0.00 kB 9.79 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.min.js +∞% 0.00 kB 10.60 kB +∞% 0.00 kB 4.06 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +∞% 0.00 kB 63.44 kB +∞% 0.00 kB 15.54 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +∞% 0.00 kB 46.07 kB +∞% 0.00 kB 11.29 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.min.js +∞% 0.00 kB 12.68 kB +∞% 0.00 kB 4.67 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +∞% 0.00 kB 62.57 kB +∞% 0.00 kB 15.33 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +∞% 0.00 kB 45.17 kB +∞% 0.00 kB 11.08 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.min.js +∞% 0.00 kB 12.39 kB +∞% 0.00 kB 4.58 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js +∞% 0.00 kB 100.21 kB +∞% 0.00 kB 23.62 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +∞% 0.00 kB 86.02 kB +∞% 0.00 kB 20.56 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.min.js +∞% 0.00 kB 23.71 kB +∞% 0.00 kB 8.33 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js +∞% 0.00 kB 101.10 kB +∞% 0.00 kB 23.84 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.js +∞% 0.00 kB 86.87 kB +∞% 0.00 kB 20.78 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.min.js +∞% 0.00 kB 24.22 kB +∞% 0.00 kB 8.50 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js +∞% 0.00 kB 106.46 kB +∞% 0.00 kB 24.93 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.js +∞% 0.00 kB 92.51 kB +∞% 0.00 kB 21.87 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.min.js +∞% 0.00 kB 25.68 kB +∞% 0.00 kB 8.99 kB
oss-stable/react-server-dom-parcel/client.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-stable/react-server-dom-parcel/client.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-stable/react-server-dom-parcel/client.js +∞% 0.00 kB 0.06 kB +∞% 0.00 kB 0.08 kB
oss-stable/react-server-dom-parcel/client.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-stable/react-server-dom-parcel/index.js +∞% 0.00 kB 0.28 kB +∞% 0.00 kB 0.22 kB
oss-stable/react-server-dom-parcel/server.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-stable/react-server-dom-parcel/server.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
oss-stable/react-server-dom-parcel/server.js +∞% 0.00 kB 0.19 kB +∞% 0.00 kB 0.16 kB
oss-stable/react-server-dom-parcel/server.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
test_utils/ReactAllWarnings.js Deleted 66.60 kB 0.00 kB Deleted 16.28 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +∞% 0.00 kB 61.78 kB +∞% 0.00 kB 14.91 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +∞% 0.00 kB 45.00 kB +∞% 0.00 kB 10.80 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.min.js +∞% 0.00 kB 11.91 kB +∞% 0.00 kB 4.42 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +∞% 0.00 kB 68.52 kB +∞% 0.00 kB 16.55 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +∞% 0.00 kB 51.16 kB +∞% 0.00 kB 12.30 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.min.js +∞% 0.00 kB 13.99 kB +∞% 0.00 kB 5.03 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +∞% 0.00 kB 67.66 kB +∞% 0.00 kB 16.34 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +∞% 0.00 kB 50.26 kB +∞% 0.00 kB 12.09 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.min.js +∞% 0.00 kB 13.71 kB +∞% 0.00 kB 4.95 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js +∞% 0.00 kB 121.59 kB +∞% 0.00 kB 27.76 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +∞% 0.00 kB 96.63 kB +∞% 0.00 kB 22.87 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.min.js +∞% 0.00 kB 26.26 kB +∞% 0.00 kB 9.01 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js +∞% 0.00 kB 123.15 kB +∞% 0.00 kB 28.25 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.js +∞% 0.00 kB 97.48 kB +∞% 0.00 kB 23.11 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.min.js +∞% 0.00 kB 26.80 kB +∞% 0.00 kB 9.18 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js +∞% 0.00 kB 128.04 kB +∞% 0.00 kB 29.19 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.js +∞% 0.00 kB 102.67 kB +∞% 0.00 kB 24.03 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.min.js +∞% 0.00 kB 28.19 kB +∞% 0.00 kB 9.65 kB
oss-experimental/react-server-dom-parcel/client.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-experimental/react-server-dom-parcel/client.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-experimental/react-server-dom-parcel/client.js +∞% 0.00 kB 0.06 kB +∞% 0.00 kB 0.08 kB
oss-experimental/react-server-dom-parcel/client.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-experimental/react-server-dom-parcel/index.js +∞% 0.00 kB 0.28 kB +∞% 0.00 kB 0.22 kB
oss-experimental/react-server-dom-parcel/server.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-experimental/react-server-dom-parcel/server.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
oss-experimental/react-server-dom-parcel/server.js +∞% 0.00 kB 0.19 kB +∞% 0.00 kB 0.16 kB
oss-experimental/react-server-dom-parcel/server.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +∞% 0.00 kB 56.69 kB +∞% 0.00 kB 13.91 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +∞% 0.00 kB 39.91 kB +∞% 0.00 kB 9.79 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.min.js +∞% 0.00 kB 10.60 kB +∞% 0.00 kB 4.06 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +∞% 0.00 kB 63.44 kB +∞% 0.00 kB 15.54 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +∞% 0.00 kB 46.07 kB +∞% 0.00 kB 11.29 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.min.js +∞% 0.00 kB 12.68 kB +∞% 0.00 kB 4.67 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +∞% 0.00 kB 62.57 kB +∞% 0.00 kB 15.33 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +∞% 0.00 kB 45.17 kB +∞% 0.00 kB 11.08 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.min.js +∞% 0.00 kB 12.39 kB +∞% 0.00 kB 4.58 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js +∞% 0.00 kB 100.21 kB +∞% 0.00 kB 23.62 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +∞% 0.00 kB 86.02 kB +∞% 0.00 kB 20.56 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.min.js +∞% 0.00 kB 23.71 kB +∞% 0.00 kB 8.33 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js +∞% 0.00 kB 101.10 kB +∞% 0.00 kB 23.84 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.js +∞% 0.00 kB 86.87 kB +∞% 0.00 kB 20.78 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.min.js +∞% 0.00 kB 24.22 kB +∞% 0.00 kB 8.50 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js +∞% 0.00 kB 106.46 kB +∞% 0.00 kB 24.93 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.js +∞% 0.00 kB 92.51 kB +∞% 0.00 kB 21.87 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.min.js +∞% 0.00 kB 25.68 kB +∞% 0.00 kB 8.99 kB
oss-stable-semver/react-server-dom-parcel/client.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-stable-semver/react-server-dom-parcel/client.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-stable-semver/react-server-dom-parcel/client.js +∞% 0.00 kB 0.06 kB +∞% 0.00 kB 0.08 kB
oss-stable-semver/react-server-dom-parcel/client.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-stable-semver/react-server-dom-parcel/index.js +∞% 0.00 kB 0.28 kB +∞% 0.00 kB 0.22 kB
oss-stable-semver/react-server-dom-parcel/server.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-stable-semver/react-server-dom-parcel/server.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
oss-stable-semver/react-server-dom-parcel/server.js +∞% 0.00 kB 0.19 kB +∞% 0.00 kB 0.16 kB
oss-stable-semver/react-server-dom-parcel/server.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js +∞% 0.00 kB 56.69 kB +∞% 0.00 kB 13.91 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +∞% 0.00 kB 39.91 kB +∞% 0.00 kB 9.79 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.min.js +∞% 0.00 kB 10.60 kB +∞% 0.00 kB 4.06 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js +∞% 0.00 kB 63.44 kB +∞% 0.00 kB 15.54 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js +∞% 0.00 kB 46.07 kB +∞% 0.00 kB 11.29 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.min.js +∞% 0.00 kB 12.68 kB +∞% 0.00 kB 4.67 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js +∞% 0.00 kB 62.57 kB +∞% 0.00 kB 15.33 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js +∞% 0.00 kB 45.17 kB +∞% 0.00 kB 11.08 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.min.js +∞% 0.00 kB 12.39 kB +∞% 0.00 kB 4.58 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.development.js +∞% 0.00 kB 100.21 kB +∞% 0.00 kB 23.62 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +∞% 0.00 kB 86.02 kB +∞% 0.00 kB 20.56 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.min.js +∞% 0.00 kB 23.71 kB +∞% 0.00 kB 8.33 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.development.js +∞% 0.00 kB 101.10 kB +∞% 0.00 kB 23.84 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.js +∞% 0.00 kB 86.87 kB +∞% 0.00 kB 20.78 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.edge.production.min.js +∞% 0.00 kB 24.22 kB +∞% 0.00 kB 8.50 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.development.js +∞% 0.00 kB 106.46 kB +∞% 0.00 kB 24.93 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.js +∞% 0.00 kB 92.51 kB +∞% 0.00 kB 21.87 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.node.production.min.js +∞% 0.00 kB 25.68 kB +∞% 0.00 kB 8.99 kB
oss-stable/react-server-dom-parcel/client.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-stable/react-server-dom-parcel/client.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-stable/react-server-dom-parcel/client.js +∞% 0.00 kB 0.06 kB +∞% 0.00 kB 0.08 kB
oss-stable/react-server-dom-parcel/client.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.17 kB
oss-stable/react-server-dom-parcel/index.js +∞% 0.00 kB 0.28 kB +∞% 0.00 kB 0.22 kB
oss-stable/react-server-dom-parcel/server.browser.js +∞% 0.00 kB 0.26 kB +∞% 0.00 kB 0.17 kB
oss-stable/react-server-dom-parcel/server.edge.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
oss-stable/react-server-dom-parcel/server.js +∞% 0.00 kB 0.19 kB +∞% 0.00 kB 0.16 kB
oss-stable/react-server-dom-parcel/server.node.js +∞% 0.00 kB 0.25 kB +∞% 0.00 kB 0.16 kB
react-native/implementations/ReactFabric-profiling.js +0.21% 345.55 kB 346.27 kB +0.18% 60.54 kB 60.64 kB
react-native/implementations/ReactNativeRenderer-profiling.js = 355.28 kB 354.56 kB = 62.30 kB 62.18 kB
facebook-react-native/react-test-renderer/cjs/ReactTestRenderer-profiling.js = 330.39 kB 329.70 kB = 58.22 kB 58.12 kB
react-native/implementations/ReactNativeRenderer-prod.js = 335.88 kB 335.16 kB = 59.08 kB 58.97 kB
test_utils/ReactAllWarnings.js Deleted 66.60 kB 0.00 kB Deleted 16.28 kB 0.00 kB

Generated by 🚫 dangerJS against 8d06250

@sebmarkbage
Copy link
Collaborator

The transformer plugin to handle client/server references isn't in this package, it'll be in the Parcel repo. Same for the plugin that generates the manifest. It's easier for us to maintain and test there, so hopefully that's ok.

That's ok. It's really up to you where you want the versioning seams.

If the react-server-dom-parcel package is going to be published as a stable release, then ideally it should be stable for the life-time of the Parcel major that it depends on. E.g. The expectation would be that newer minors of Parcel wouldn't break the manifest format nor the runtime e.g. __parcel__import__. This should ideally hold true if Flight adds new features or need to change some implementation (e.g. see how preloads changed) and that affects the manifest.

This is the ideal end state though. You shouldn't even need a plugin to use RSC. Just a bundler and a runtime and you're ready to go like other JS module features.

If the runtime is more stable than the manifest, then maybe a plugin versioned with the react-server-dom-parcel runtime makes more sense.

If even the runtime isn't stable, it's also fine to just keep it in canary releases. It's stable from a consumer's perspective but you need to pin it.

@@ -140,3 +145,35 @@ export function preinitScriptForSSR(
});
}
}

export function preloadForSSR(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this unused?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

at the moment, yes. I need to add more metadata to the manifest so I can determine if a chunk is an ES module or not. Right now I'm just assuming it is.

@sebmarkbage
Copy link
Collaborator

sebmarkbage commented Jan 31, 2024

There is support for loading both CSS and JS bundles. I added some functionality to the shared client config for this, not sure if that's ok.

I suspect the CSS loading part is not quite right with how it wires up with Fizz. Maybe @gnoff can take a closer look.

It's a good example why there's no "just let me provide a callback to do loading" because the protocol isn't fixed and if you're forced to use a limited protocol you might end up with a bad implementation. So changing the Config protocol is exactly the kind of solution we want to see if it's not sufficient.

One of the reasons it looks like this, is because Webpack loads CSS using the same JS chunk protocol (it's actually more like hacked on top of the JS chunk loading). Having other bundlers help inform what variety of structures need to be supported.

Next.js bundles CSS for these cases into the parent page to avoid CSS rule thrashing and improve loading. Note that the intended behavior for CSS loaded through Server Component is that they use the Suspensey CSS mechanism <link rel="stylesheet" href="..." precedence="..." />. So typically for client components it doesn't even use chunk loading to load CSS. That's only for dynamic imports. When the same component is both a client component and dynamic import it gets more complicated only in that edge case.

If you load a component that depends on both CSS and JS, it should ideally not block rendering the components inside the JS on the CSS loading. The JS should load first and render, while the CSS is still streaming in and then suspend on the CSS. Instead of waiting to do the CPU work on the client until the CSS has loaded. The assumption here is that even if you import CSS through the module system, you don't actually do anything that depends on reading that CSS back until the commit phase. So you should be able to initialize the JS module and resolve the client component before the CSS loads.

To this, the CSS needs to be extracted into a <link rel="stylesheet" href="..." precedence="..." /> component and no longer be part of the module dependency graph.

That's an optimization you wouldn't get without framework support maybe though.

@sebmarkbage
Copy link
Collaborator

One way to look at suspensey CSS loading is like SSR. It needs to be injected into the <head> to be visually blocking the display. The SSR pass runs before the CSS loading though. We don't wait for the client to load the CSS before running the SSR. The same thing applies on the client navs.

In Webpack terms this would be part of the "entry point" which the consumer is responsible for loading - not the bundler.

@devongovett
Copy link
Contributor Author

Yeah, in Parcel, by default, the CSS for both the server and client components for each page will get bundled together. In the initial HTML there will be a <link rel="stylesheet"> injected (by prepareDestinationWithChunks). When loading RSC later (e.g. client side transition), it currently uses our existing CSS loader which just injects a link element into the page and waits for it to load. That's how dynamic import currently works too. But if there is a react mechanism that I can hook into inside loadChunk that would load the CSS in a more suspensy way I'm happy to use that instead. Would be cool if this were automatic and the app/framework didn't need to worry about manually injecting <link> elements. I think Parcel has all the info needed based on the module graph, we just need a way to hook into React's loading mechanism?

@sebmarkbage
Copy link
Collaborator

sebmarkbage commented Jan 31, 2024

How does it load new CSS for a different "page" if there's no client component on it and only server components with new CSS?

For CSS in the client component I think conceptually it's like injecting the style in the RSC stream as a sibling to the client component element. This is a bit more technically correct because if there's a Suspense boundary around it, it can suspend on that CSS deeper. In theory there could be some internal plumbing in React to do that automatically. That was kind of the initial plan for client components and React.lazy, however, doing it that way would inject the same style many different times in the page - it would still be deduped by React but leading to higher overhead. It still doesn't help with server component only CSS dependencies.

So currently the model is that whatever slot suspends for server components only CSS, is also the one that's used for client components as part of that "page".

@sebmarkbage
Copy link
Collaborator

sebmarkbage commented Jan 31, 2024

In the initial HTML there will be a injected (by prepareDestinationWithChunks)

This uses the preinit mechanism which is not blocking. It's more like a preloading semantics but doing more work eagerly.

This does add it to the <head> if this is part of the initial flush but if this resource is detected late during streaming it would not be blocking the render. So it might yield a FOUC. We might add blocking="none" or something to the stylesheets in the <head> in the future if this gets support by browsers - for consistency but think of it as not guaranteed to have finished loading.

Rendering <link rel="stylesheet" href="..." precedence="..." /> in the tree is render blocking at the point where it gets rendered (nearest Suspense boundary). However, it doesn't automatically get added by Client References atm. It also needs to be in the React tree, not just a side-effect.

@devongovett
Copy link
Contributor Author

Yeah it doesn't work if there are no client components at the moment. But even if there are client components it isn't ideal because the link element we inject will never be removed from the DOM when you navigate to a different page, and it blocks rendering as you pointed out.

I like the idea of injecting a link element into the RSC stream. That way it would be removed by react when that server component gets unmounted. Then we wouldn't need to inject link elements at runtime or into the initial HTML via prepareDestinationWithChunks either, because it would already be rendered by react in both cases. Will see if I can find an ergonomic way of exposing what links need to be injected.

@sebmarkbage
Copy link
Collaborator

Note that React doesn’t actually immediately remove link tags that are using the “precedence” mode which is also how you opt in to suspensey css.

Same thing with style tags and precedence.

That’s because it should be possible to have both at once (eg for animations, prerendering, keeping things rendered while in offscreen mode), it helps avoid css thrash of recomputing all rules to existing elements when changing pages already loaded and it avoids thrashing when returning to a page. It also simplifies hydration.

This strategy is fairly opinionated and ofc best with small rules or atomic CSS.

However React then has the option to eventually run a GC to clean up if there’s too many rules and at a time where the rules would be recomputed anyway such as when new styles are loaded.

@devongovett
Copy link
Contributor Author

devongovett commented Feb 1, 2024

What is "precedence" mode? I saw some references to it in the code but I couldn't find much info about it.

Edit: found #25243. Not sure if that's the latest info about it.

@devongovett
Copy link
Contributor Author

devongovett commented Feb 1, 2024

OK I think it'll look like this:

import {Resources} from '@parcel/rsc';

export default function App() {
  return (
    <html>
      <head>
        <Resources />
      </head>
      {/* ... */}
    </html>
  );
}

The Resources component will be generated by Parcel during the build, and render the <link> elements needed by the page where it is imported from.

@devongovett
Copy link
Contributor Author

Question: is there any downside to doing the same thing for scripts as we will do for CSS? If we inject a <script type="module async src="..." /> into the RSC stream, then React should suspend on it right? Then we wouldn't even need any additional bundler-specific loader code (loadChunk function) in the browser. And I think we also wouldn't need any preloading stuff on the server (prepareDestinationWithChunks) either. Since it is in the RSC stream, it should get rendered to the initial HTML and also get loaded on client-side navigations and suspend until it loads in both cases.

@sebmarkbage
Copy link
Collaborator

Question: is there any downside to doing the same thing for scripts as we will do for CSS? If we inject a <script type="module async src="..." /> into the RSC stream

The difference is that the CSS isn't needed by React to render a tree. Where as JS is needed before we commit. React wouldn't necessarily inject the script while rendering it. Also, the RSC protocol needs to be able to refer to JS objects that are resolved through those.

However, for things that are completely outside of the Client Reference system and React rendering this technique can be use. E.g. for loading Google Analytics or something global like that which isn't needed to do the render but just wires up later and async after commit.

Copy link

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

@github-actions github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Jun 25, 2024
Copy link

github-actions bot commented Jul 2, 2024

Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!

@github-actions github-actions bot closed this Jul 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Resolution: Stale Automatically closed due to inactivity
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants