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

[Flight] Allow custom encoding of the form action #27563

Merged
merged 1 commit into from
Feb 13, 2024

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Oct 22, 2023

There are three parts to an RSC set up:

  • React
  • Bundler
  • Endpoints

Most customizability is in the bundler configs. We deal with those as custom builds.

To create a full set up, you need to also configure ways to expose end points for example to call a Server Action. That's typically not something the bundler is responsible for even though it's responsible for gathering the end points that needs generation. Exposing which endpoints to generate is a responsibility for the bundler.

Typically a meta-framework is responsible for generating the end points.

There's two ways to "call" a Server Action. Through JS and through a Form. Through JS we expose the callServer callback so that the framework can call the end point.

Forms by default POST back to the current page with an action serialized into form data, which we have a decoder helper for. However, this is not something that React is really opinionated about just like we're not opinionated about the protocol used by callServer.

This exposes an option to configure the encoding of the form props. encodeFormAction is to the SSR is what callServer is to the Browser.

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Oct 22, 2023
@react-sizebot
Copy link

react-sizebot commented Oct 22, 2023

Comparing: 7a32d71...9bab5a2

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 = 176.79 kB 176.79 kB = 55.11 kB 55.11 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 178.79 kB 178.79 kB = 55.69 kB 55.69 kB
facebook-www/ReactDOM-prod.classic.js = 593.31 kB 593.31 kB = 104.68 kB 104.68 kB
facebook-www/ReactDOM-prod.modern.js = 577.09 kB 577.09 kB = 101.77 kB 101.77 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.min.js +3.48% 12.37 kB 12.80 kB +1.77% 4.62 kB 4.71 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.min.js +3.48% 12.37 kB 12.80 kB +1.77% 4.62 kB 4.71 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.min.js +3.38% 12.77 kB 13.20 kB +1.73% 4.81 kB 4.89 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.min.js +3.38% 12.77 kB 13.20 kB +1.73% 4.81 kB 4.89 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.min.js +3.38% 12.77 kB 13.20 kB +1.73% 4.81 kB 4.89 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.min.js +3.38% 12.77 kB 13.20 kB +1.73% 4.81 kB 4.89 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.min.js +3.30% 13.08 kB 13.51 kB +1.64% 4.93 kB 5.01 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.min.js +3.30% 13.08 kB 13.51 kB +1.64% 4.93 kB 5.01 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js +3.29% 13.09 kB 13.52 kB +1.64% 4.94 kB 5.02 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js +3.29% 13.09 kB 13.52 kB +1.64% 4.94 kB 5.02 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.min.js +3.15% 13.38 kB 13.81 kB +1.49% 5.03 kB 5.10 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.min.js +3.15% 13.38 kB 13.81 kB +1.49% 5.03 kB 5.10 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js +3.15% 13.39 kB 13.81 kB +1.49% 5.04 kB 5.11 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js +3.15% 13.39 kB 13.81 kB +1.49% 5.04 kB 5.11 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.min.js +3.15% 13.70 kB 14.13 kB +1.56% 4.99 kB 5.07 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.min.js +3.06% 14.09 kB 14.52 kB +1.54% 5.18 kB 5.26 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.min.js +3.06% 14.09 kB 14.53 kB +1.54% 5.18 kB 5.26 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.min.js +2.99% 14.41 kB 14.84 kB +1.44% 5.29 kB 5.37 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js +2.99% 14.41 kB 14.84 kB +1.43% 5.30 kB 5.38 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.min.js +2.94% 10.09 kB 10.38 kB +1.57% 3.82 kB 3.88 kB
oss-stable/react-client/cjs/react-client-flight.production.min.js +2.94% 10.09 kB 10.38 kB +1.57% 3.82 kB 3.88 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.js +2.91% 39.54 kB 40.69 kB +1.73% 10.04 kB 10.21 kB
oss-stable/react-client/cjs/react-client-flight.production.js +2.91% 39.54 kB 40.69 kB +1.73% 10.04 kB 10.21 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +2.88% 46.07 kB 47.39 kB +1.61% 11.37 kB 11.56 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +2.88% 46.07 kB 47.39 kB +1.61% 11.37 kB 11.56 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.min.js +2.87% 14.69 kB 15.12 kB +1.30% 5.39 kB 5.46 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js +2.87% 14.70 kB 15.12 kB +1.33% 5.40 kB 5.47 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js +2.77% 47.85 kB 49.18 kB +1.52% 11.93 kB 12.11 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js +2.77% 47.85 kB 49.18 kB +1.52% 11.93 kB 12.11 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +2.77% 47.89 kB 49.21 kB +1.52% 11.95 kB 12.13 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +2.77% 47.89 kB 49.21 kB +1.52% 11.95 kB 12.13 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +2.69% 49.29 kB 50.62 kB +1.51% 12.28 kB 12.47 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +2.69% 49.29 kB 50.62 kB +1.51% 12.28 kB 12.47 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +2.69% 49.32 kB 50.64 kB +1.51% 12.33 kB 12.51 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +2.69% 49.32 kB 50.64 kB +1.51% 12.33 kB 12.51 kB
oss-experimental/react-client/cjs/react-client-flight.production.min.js +2.63% 11.28 kB 11.57 kB +1.54% 4.16 kB 4.22 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +2.60% 50.22 kB 51.52 kB +1.42% 12.49 kB 12.67 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +2.60% 50.22 kB 51.52 kB +1.42% 12.49 kB 12.67 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +2.60% 50.25 kB 51.55 kB +1.42% 12.53 kB 12.71 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +2.60% 50.25 kB 51.55 kB +1.42% 12.53 kB 12.71 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +2.59% 51.16 kB 52.48 kB +1.45% 12.39 kB 12.57 kB
oss-experimental/react-client/cjs/react-client-flight.production.js +2.58% 44.54 kB 45.69 kB +1.53% 11.03 kB 11.20 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js +2.50% 52.94 kB 54.27 kB +1.37% 12.94 kB 13.12 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +2.50% 52.98 kB 54.30 kB +1.37% 12.96 kB 13.14 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +2.44% 54.38 kB 55.71 kB +1.38% 13.29 kB 13.48 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +2.44% 54.41 kB 55.73 kB +1.37% 13.34 kB 13.52 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +2.36% 55.31 kB 56.61 kB +1.30% 13.51 kB 13.68 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +2.36% 55.34 kB 56.64 kB +1.28% 13.55 kB 13.72 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js +2.31% 53.64 kB 54.88 kB +1.17% 13.30 kB 13.46 kB
oss-stable/react-client/cjs/react-client-flight.development.js +2.31% 53.64 kB 54.88 kB +1.17% 13.30 kB 13.46 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +2.21% 59.86 kB 61.18 kB +1.18% 14.56 kB 14.73 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +2.21% 59.86 kB 61.18 kB +1.18% 14.56 kB 14.73 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +2.14% 61.64 kB 62.96 kB +1.17% 15.11 kB 15.28 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +2.14% 61.64 kB 62.96 kB +1.17% 15.11 kB 15.28 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +2.14% 61.68 kB 63.00 kB +1.18% 15.13 kB 15.31 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +2.14% 61.68 kB 63.00 kB +1.18% 15.13 kB 15.31 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +2.11% 58.69 kB 59.93 kB +1.08% 14.31 kB 14.46 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +2.10% 63.08 kB 64.40 kB +1.12% 15.50 kB 15.67 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +2.10% 63.08 kB 64.40 kB +1.12% 15.50 kB 15.67 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +2.10% 63.10 kB 64.42 kB +1.12% 15.54 kB 15.71 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +2.10% 63.10 kB 64.42 kB +1.12% 15.54 kB 15.71 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +2.04% 64.91 kB 66.23 kB +1.12% 15.57 kB 15.75 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +2.03% 63.96 kB 65.26 kB +1.08% 15.70 kB 15.87 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +2.03% 63.96 kB 65.26 kB +1.08% 15.70 kB 15.87 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +2.03% 63.99 kB 65.29 kB +1.09% 15.74 kB 15.91 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +2.03% 63.99 kB 65.29 kB +1.09% 15.74 kB 15.91 kB
test_utils/ReactAllWarnings.js Deleted 67.02 kB 0.00 kB Deleted 16.42 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-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.min.js +3.48% 12.37 kB 12.80 kB +1.77% 4.62 kB 4.71 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.min.js +3.48% 12.37 kB 12.80 kB +1.77% 4.62 kB 4.71 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.min.js +3.38% 12.77 kB 13.20 kB +1.73% 4.81 kB 4.89 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.min.js +3.38% 12.77 kB 13.20 kB +1.73% 4.81 kB 4.89 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.min.js +3.38% 12.77 kB 13.20 kB +1.73% 4.81 kB 4.89 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.min.js +3.38% 12.77 kB 13.20 kB +1.73% 4.81 kB 4.89 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.min.js +3.30% 13.08 kB 13.51 kB +1.64% 4.93 kB 5.01 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.min.js +3.30% 13.08 kB 13.51 kB +1.64% 4.93 kB 5.01 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js +3.29% 13.09 kB 13.52 kB +1.64% 4.94 kB 5.02 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js +3.29% 13.09 kB 13.52 kB +1.64% 4.94 kB 5.02 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.min.js +3.15% 13.38 kB 13.81 kB +1.49% 5.03 kB 5.10 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.min.js +3.15% 13.38 kB 13.81 kB +1.49% 5.03 kB 5.10 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js +3.15% 13.39 kB 13.81 kB +1.49% 5.04 kB 5.11 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js +3.15% 13.39 kB 13.81 kB +1.49% 5.04 kB 5.11 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.min.js +3.15% 13.70 kB 14.13 kB +1.56% 4.99 kB 5.07 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.min.js +3.06% 14.09 kB 14.52 kB +1.54% 5.18 kB 5.26 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.min.js +3.06% 14.09 kB 14.53 kB +1.54% 5.18 kB 5.26 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.min.js +2.99% 14.41 kB 14.84 kB +1.44% 5.29 kB 5.37 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js +2.99% 14.41 kB 14.84 kB +1.43% 5.30 kB 5.38 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.min.js +2.94% 10.09 kB 10.38 kB +1.57% 3.82 kB 3.88 kB
oss-stable/react-client/cjs/react-client-flight.production.min.js +2.94% 10.09 kB 10.38 kB +1.57% 3.82 kB 3.88 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.js +2.91% 39.54 kB 40.69 kB +1.73% 10.04 kB 10.21 kB
oss-stable/react-client/cjs/react-client-flight.production.js +2.91% 39.54 kB 40.69 kB +1.73% 10.04 kB 10.21 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +2.88% 46.07 kB 47.39 kB +1.61% 11.37 kB 11.56 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +2.88% 46.07 kB 47.39 kB +1.61% 11.37 kB 11.56 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.min.js +2.87% 14.69 kB 15.12 kB +1.30% 5.39 kB 5.46 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js +2.87% 14.70 kB 15.12 kB +1.33% 5.40 kB 5.47 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js +2.77% 47.85 kB 49.18 kB +1.52% 11.93 kB 12.11 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js +2.77% 47.85 kB 49.18 kB +1.52% 11.93 kB 12.11 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +2.77% 47.89 kB 49.21 kB +1.52% 11.95 kB 12.13 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +2.77% 47.89 kB 49.21 kB +1.52% 11.95 kB 12.13 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +2.69% 49.29 kB 50.62 kB +1.51% 12.28 kB 12.47 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +2.69% 49.29 kB 50.62 kB +1.51% 12.28 kB 12.47 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +2.69% 49.32 kB 50.64 kB +1.51% 12.33 kB 12.51 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +2.69% 49.32 kB 50.64 kB +1.51% 12.33 kB 12.51 kB
oss-experimental/react-client/cjs/react-client-flight.production.min.js +2.63% 11.28 kB 11.57 kB +1.54% 4.16 kB 4.22 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +2.60% 50.22 kB 51.52 kB +1.42% 12.49 kB 12.67 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +2.60% 50.22 kB 51.52 kB +1.42% 12.49 kB 12.67 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +2.60% 50.25 kB 51.55 kB +1.42% 12.53 kB 12.71 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +2.60% 50.25 kB 51.55 kB +1.42% 12.53 kB 12.71 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js +2.59% 51.16 kB 52.48 kB +1.45% 12.39 kB 12.57 kB
oss-experimental/react-client/cjs/react-client-flight.production.js +2.58% 44.54 kB 45.69 kB +1.53% 11.03 kB 11.20 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.production.js +2.50% 52.94 kB 54.27 kB +1.37% 12.94 kB 13.12 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.js +2.50% 52.98 kB 54.30 kB +1.37% 12.96 kB 13.14 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js +2.44% 54.38 kB 55.71 kB +1.38% 13.29 kB 13.48 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js +2.44% 54.41 kB 55.73 kB +1.37% 13.34 kB 13.52 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js +2.36% 55.31 kB 56.61 kB +1.30% 13.51 kB 13.68 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js +2.36% 55.34 kB 56.64 kB +1.28% 13.55 kB 13.72 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js +2.31% 53.64 kB 54.88 kB +1.17% 13.30 kB 13.46 kB
oss-stable/react-client/cjs/react-client-flight.development.js +2.31% 53.64 kB 54.88 kB +1.17% 13.30 kB 13.46 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +2.21% 59.86 kB 61.18 kB +1.18% 14.56 kB 14.73 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +2.21% 59.86 kB 61.18 kB +1.18% 14.56 kB 14.73 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +2.14% 61.64 kB 62.96 kB +1.17% 15.11 kB 15.28 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +2.14% 61.64 kB 62.96 kB +1.17% 15.11 kB 15.28 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +2.14% 61.68 kB 63.00 kB +1.18% 15.13 kB 15.31 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +2.14% 61.68 kB 63.00 kB +1.18% 15.13 kB 15.31 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +2.11% 58.69 kB 59.93 kB +1.08% 14.31 kB 14.46 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +2.10% 63.08 kB 64.40 kB +1.12% 15.50 kB 15.67 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +2.10% 63.08 kB 64.40 kB +1.12% 15.50 kB 15.67 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +2.10% 63.10 kB 64.42 kB +1.12% 15.54 kB 15.71 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +2.10% 63.10 kB 64.42 kB +1.12% 15.54 kB 15.71 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js +2.04% 64.91 kB 66.23 kB +1.12% 15.57 kB 15.75 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +2.03% 63.96 kB 65.26 kB +1.08% 15.70 kB 15.87 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +2.03% 63.96 kB 65.26 kB +1.08% 15.70 kB 15.87 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +2.03% 63.99 kB 65.29 kB +1.09% 15.74 kB 15.91 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +2.03% 63.99 kB 65.29 kB +1.09% 15.74 kB 15.91 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.unbundled.development.js +1.98% 66.69 kB 68.01 kB +1.10% 16.12 kB 16.30 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +1.98% 66.73 kB 68.05 kB +1.10% 16.14 kB 16.32 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js +1.94% 68.13 kB 69.45 kB +1.05% 16.51 kB 16.69 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +1.94% 68.15 kB 69.47 kB +1.06% 16.55 kB 16.73 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js +1.88% 69.01 kB 70.31 kB +0.98% 16.72 kB 16.89 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +1.88% 69.04 kB 70.34 kB +0.99% 16.76 kB 16.93 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.min.js +0.36% 11.24 kB 11.28 kB +0.37% 4.29 kB 4.30 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.min.js +0.36% 11.24 kB 11.28 kB +0.37% 4.29 kB 4.30 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js +0.35% 11.36 kB 11.40 kB +0.35% 4.32 kB 4.34 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js +0.35% 11.36 kB 11.40 kB +0.35% 4.32 kB 4.34 kB
oss-stable-semver/react-server-dom-turbopack/umd/react-server-dom-turbopack-client.browser.production.min.js +0.35% 11.43 kB 11.47 kB +0.32% 4.37 kB 4.38 kB
oss-stable/react-server-dom-turbopack/umd/react-server-dom-turbopack-client.browser.production.min.js +0.35% 11.43 kB 11.47 kB +0.32% 4.37 kB 4.38 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js +0.35% 11.56 kB 11.60 kB +0.30% 4.41 kB 4.42 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js +0.35% 11.56 kB 11.60 kB +0.30% 4.41 kB 4.42 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.min.js +0.32% 39.96 kB 40.09 kB +0.29% 9.71 kB 9.74 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.min.js +0.32% 39.96 kB 40.09 kB +0.29% 9.71 kB 9.74 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.32% 40.08 kB 40.21 kB +0.29% 9.74 kB 9.76 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.32% 40.08 kB 40.21 kB +0.29% 9.74 kB 9.76 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.min.js +0.32% 12.55 kB 12.59 kB +0.30% 4.64 kB 4.65 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js +0.32% 12.67 kB 12.71 kB +0.28% 4.67 kB 4.69 kB
facebook-www/ReactFlightDOMClient-dev.modern.js +0.32% 37.06 kB 37.18 kB +0.34% 8.49 kB 8.52 kB
oss-experimental/react-server-dom-turbopack/umd/react-server-dom-turbopack-client.browser.production.min.js +0.31% 12.74 kB 12.78 kB +0.34% 4.72 kB 4.73 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js +0.31% 12.87 kB 12.91 kB +0.34% 4.76 kB 4.77 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.30% 43.34 kB 43.47 kB +0.22% 10.68 kB 10.71 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.30% 43.34 kB 43.47 kB +0.22% 10.68 kB 10.71 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.29% 43.86 kB 43.98 kB +0.25% 10.85 kB 10.87 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.29% 43.86 kB 43.98 kB +0.25% 10.85 kB 10.87 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.min.js +0.28% 45.05 kB 45.18 kB +0.23% 10.71 kB 10.74 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +0.28% 45.17 kB 45.30 kB +0.23% 10.74 kB 10.76 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.min.js +0.28% 10.51 kB 10.54 kB +0.30% 4.00 kB 4.01 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.min.js +0.28% 10.51 kB 10.54 kB +0.30% 4.00 kB 4.01 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +0.26% 48.43 kB 48.56 kB +0.20% 11.68 kB 11.70 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +0.26% 48.95 kB 49.07 kB +0.22% 11.84 kB 11.87 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.min.js +0.25% 11.82 kB 11.85 kB +0.28% 4.36 kB 4.37 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.24% 53.59 kB 53.71 kB +0.19% 12.91 kB 12.94 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.24% 53.59 kB 53.71 kB +0.19% 12.91 kB 12.94 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.24% 53.79 kB 53.92 kB +0.18% 12.98 kB 13.00 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.24% 53.79 kB 53.92 kB +0.18% 12.98 kB 13.00 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.22% 57.04 kB 57.17 kB +0.19% 13.95 kB 13.97 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.22% 57.04 kB 57.17 kB +0.19% 13.95 kB 13.97 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.22% 57.55 kB 57.68 kB +0.16% 14.13 kB 14.15 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.22% 57.55 kB 57.68 kB +0.16% 14.13 kB 14.15 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js +0.22% 58.64 kB 58.76 kB +0.17% 13.91 kB 13.94 kB
oss-stable-semver/react-server-dom-turbopack/umd/react-server-dom-turbopack-client.browser.development.js +0.22% 60.64 kB 60.77 kB +0.19% 14.16 kB 14.19 kB
oss-stable/react-server-dom-turbopack/umd/react-server-dom-turbopack-client.browser.development.js +0.22% 60.64 kB 60.77 kB +0.19% 14.16 kB 14.19 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js +0.22% 58.84 kB 58.97 kB +0.18% 13.98 kB 14.00 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +0.22% 61.18 kB 61.31 kB +0.19% 14.35 kB 14.37 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +0.22% 61.18 kB 61.31 kB +0.19% 14.35 kB 14.37 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js +0.21% 62.09 kB 62.22 kB +0.17% 14.94 kB 14.97 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.20% 62.60 kB 62.73 kB +0.17% 15.12 kB 15.15 kB
oss-experimental/react-server-dom-turbopack/umd/react-server-dom-turbopack-client.browser.development.js +0.20% 65.99 kB 66.12 kB +0.16% 15.19 kB 15.21 kB
test_utils/ReactAllWarnings.js Deleted 67.02 kB 0.00 kB Deleted 16.42 kB 0.00 kB

Generated by 🚫 dangerJS against 9bab5a2

@mattcarrollcode
Copy link
Contributor

Does this mean a form action could be implemented/called/run differently depending on the framework that implements form actions? What impact could this have on a library that uses form actions that wants to support multiple frameworks?

@sebmarkbage
Copy link
Collaborator Author

The spirit of how it should be implemented is still that it behaves the same as client rendering. The nice thing about POST to same page is that it doesn't show up in URL and any user visible content so it looks more similar to the client rendering. But in general a library shouldn't need to care.

There's another question of how GET forms that do update the URL like search forms should be implemented that's maybe controversial.

@sebmarkbage sebmarkbage merged commit 8d48183 into facebook:main Feb 13, 2024
36 checks passed
github-actions bot pushed a commit that referenced this pull request Feb 13, 2024
There are three parts to an RSC set up:

- React
- Bundler
- Endpoints

Most customizability is in the bundler configs. We deal with those as
custom builds.

To create a full set up, you need to also configure ways to expose end
points for example to call a Server Action. That's typically not
something the bundler is responsible for even though it's responsible
for gathering the end points that needs generation. Exposing which
endpoints to generate is a responsibility for the bundler.

Typically a meta-framework is responsible for generating the end points.

There's two ways to "call" a Server Action. Through JS and through a
Form. Through JS we expose the `callServer` callback so that the
framework can call the end point.

Forms by default POST back to the current page with an action serialized
into form data, which we have a decoder helper for. However, this is not
something that React is really opinionated about just like we're not
opinionated about the protocol used by callServer.

This exposes an option to configure the encoding of the form props.
`encodeFormAction` is to the SSR is what `callServer` is to the Browser.

DiffTrain build for [8d48183](8d48183)
huozhi added a commit to vercel/next.js that referenced this pull request Feb 23, 2024
### React upstream changes

- facebook/react#28333
- facebook/react#28334
- facebook/react#28378
- facebook/react#28377
- facebook/react#28376
- facebook/react#28338
- facebook/react#28331
- facebook/react#28336
- facebook/react#28320
- facebook/react#28317
- facebook/react#28375
- facebook/react#28367
- facebook/react#28380
- facebook/react#28368
- facebook/react#28343
- facebook/react#28355
- facebook/react#28374
- facebook/react#28362
- facebook/react#28344
- facebook/react#28339
- facebook/react#28353
- facebook/react#28346
- facebook/react#25790
- facebook/react#28352
- facebook/react#28326
- facebook/react#27688
- facebook/react#28329
- facebook/react#28332
- facebook/react#28340
- facebook/react#28327
- facebook/react#28325
- facebook/react#28324
- facebook/react#28309
- facebook/react#28310
- facebook/react#28307
- facebook/react#28306
- facebook/react#28315
- facebook/react#28318
- facebook/react#28226
- facebook/react#28308
- facebook/react#27563
- facebook/react#28297
- facebook/react#28286
- facebook/react#28284
- facebook/react#28275
- facebook/react#28145
- facebook/react#28301
- facebook/react#28224
- facebook/react#28152
- facebook/react#28296
- facebook/react#28294
- facebook/react#28279
- facebook/react#28273
- facebook/react#28269
- facebook/react#28376
- facebook/react#28338
- facebook/react#28331
- facebook/react#28336
- facebook/react#28320
- facebook/react#28317
- facebook/react#28375
- facebook/react#28367
- facebook/react#28380
- facebook/react#28368
- facebook/react#28343
- facebook/react#28355
- facebook/react#28374
- facebook/react#28362
- facebook/react#28344
- facebook/react#28339
- facebook/react#28353
- facebook/react#28346
- facebook/react#25790
- facebook/react#28352
- facebook/react#28326
- facebook/react#27688
- facebook/react#28329
- facebook/react#28332
- facebook/react#28340
- facebook/react#28327
- facebook/react#28325
- facebook/react#28324
- facebook/react#28309
- facebook/react#28310
- facebook/react#28307
- facebook/react#28306
- facebook/react#28315
- facebook/react#28318
- facebook/react#28226
- facebook/react#28308
- facebook/react#27563
- facebook/react#28297
- facebook/react#28286
- facebook/react#28284
- facebook/react#28275
- facebook/react#28145
- facebook/react#28301
- facebook/react#28224
- facebook/react#28152
- facebook/react#28296
- facebook/react#28294
- facebook/react#28279
- facebook/react#28273
- facebook/react#28269

Closes NEXT-2542


Disable ppr test for strict mode for now, @acdlite will check it and
we'll sync again
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
There are three parts to an RSC set up:

- React
- Bundler
- Endpoints

Most customizability is in the bundler configs. We deal with those as
custom builds.

To create a full set up, you need to also configure ways to expose end
points for example to call a Server Action. That's typically not
something the bundler is responsible for even though it's responsible
for gathering the end points that needs generation. Exposing which
endpoints to generate is a responsibility for the bundler.

Typically a meta-framework is responsible for generating the end points.

There's two ways to "call" a Server Action. Through JS and through a
Form. Through JS we expose the `callServer` callback so that the
framework can call the end point.

Forms by default POST back to the current page with an action serialized
into form data, which we have a decoder helper for. However, this is not
something that React is really opinionated about just like we're not
opinionated about the protocol used by callServer.

This exposes an option to configure the encoding of the form props.
`encodeFormAction` is to the SSR is what `callServer` is to the Browser.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
There are three parts to an RSC set up:

- React
- Bundler
- Endpoints

Most customizability is in the bundler configs. We deal with those as
custom builds.

To create a full set up, you need to also configure ways to expose end
points for example to call a Server Action. That's typically not
something the bundler is responsible for even though it's responsible
for gathering the end points that needs generation. Exposing which
endpoints to generate is a responsibility for the bundler.

Typically a meta-framework is responsible for generating the end points.

There's two ways to "call" a Server Action. Through JS and through a
Form. Through JS we expose the `callServer` callback so that the
framework can call the end point.

Forms by default POST back to the current page with an action serialized
into form data, which we have a decoder helper for. However, this is not
something that React is really opinionated about just like we're not
opinionated about the protocol used by callServer.

This exposes an option to configure the encoding of the form props.
`encodeFormAction` is to the SSR is what `callServer` is to the Browser.

DiffTrain build for commit 8d48183.
sebmarkbage added a commit that referenced this pull request Aug 18, 2024
This uses a similar technique to what we use to generate fake stack
frames for server components. This generates an eval:ed wrapper function
around the Server Reference proxy we create on the client. This wrapper
function gets the original `name` of the action on the server and I also
add a source map if `findSourceMapURL` is defined that points back to
the source of the server function.

For `"use server"` on the server, there's no new API. It just uses the
callsite of `registerServerReference()` on the Server. We can infer the
function name from the actual function on the server and we already have
the `findSourceMapURL` on the client receiving it.

For `"use server"` imported from the client, there's two new options
added to `createServerReference()` (in addition to the optional
[`encodeFormAction`](#27563)). These are only used in DEV mode. The
[`findSourceMapURL`](#29708) option is the same one added in #29708. We
need to pass this these references aren't created in the context of any
specific request but globally. The other weird thing about this case is
that this is actually a case where the compiled environment is the
client so any source maps are the same as for the client layer, so the
environment name here is just `"Client"`.

```diff
  createServerReference(
    id: string,
    callServer: CallServerCallback,
    encodeFormAction?: EncodeFormActionCallback,
+   findSourceMapURL?: FindSourceMapURLCallback, // DEV-only
+   functionName?: string, // DEV-only
  )
```

The key is that we use the location of the
`registerServerReference()`/`createServerReference()` call as the
location of the function. A compiler can either emit those at the same
locations as the original functions or use source maps to have those
segments refer to the original location of the function (or in the case
of a re-export the original location of the re-export is also a fine
approximate). The compiled output must call these directly without a
wrapper function because the wrapper adds a stack frame. I decided
against complicated and fragile dev-only options to skip n number of
frames that would just end up in prod code. The implementation just
skips one frame - our own. Otherwise it'll just point all source mapping
to the wrapper.

We don't have a `"use server"` imported from the client implementation
in the reference implementation/fixture so it's a bit tricky to test
that. In the case of CJS on the server, we just use a runtime instead of
compiler so it's tricky to source map those appropriately. We can
implement it for ESM on the server which is the main thing we're testing
in the fixture. It's easier in a real implementation where all the
compilation is just one pass. It's a little tricky since we have to
parse and append to other source maps but I'd like to do that as a
follow up. Or maybe that's just an exercise for the reader.

You can right click an action and click "Go to Definition".

<img width="1323" alt="Screenshot 2024-08-17 at 6 04 27 PM"
src="https://github.com/user-attachments/assets/94d379b3-8871-4671-a20d-cbf9cfbc2c6e">

For now they simply don't point to the right place but you can still
jump to the right file in the fixture:

<img width="1512" alt="Screenshot 2024-08-17 at 5 58 40 PM"
src="https://github.com/user-attachments/assets/1ea5d665-e25a-44ca-9515-481dd3c5c2fe">

In Firefox/Safari given that the location doesn't exist in the source
map yet, the browser refuses to open the file. Where as Chrome does
nearest (last) line.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants