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

Clean up inconsistent naming in Flight implementation #26356

Closed

Conversation

unstubbable
Copy link
Contributor

@unstubbable unstubbable commented Mar 9, 2023

Summary

  1. Since ClientManifest and SSRManifest are now clearly differentiated in their structure (via Simplify Webpack References by encoding file path + export name as single id #26300) and type names (via Split out ServerReferenceMetadata into Id and Bound Arguments #26351), this opened up the opportunity to clean up some inconsistencies in how parameters, variables and properties were named (e.g. config, bundlerConfig, moduleMap, webpackMap, ...). To improve readability and avoid confusion between the two different types of objects we now always name them either clientManifest or ssrManifest.

  2. After ReactModel has been renamed to ReactClientValue in Split out ServerReferenceMetadata into Id and Bound Arguments #26351, I think we should also rename the params, variables and functions that handle this type accordingly from model to value.

How did you test this change?

yarn test and yarn test --prod

@react-sizebot
Copy link

react-sizebot commented Mar 9, 2023

Comparing: 8fa41ff...8ff268a

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 = 157.36 kB 157.36 kB = 50.16 kB 50.16 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 158.94 kB 158.94 kB = 50.67 kB 50.67 kB
facebook-www/ReactDOM-prod.classic.js = 542.00 kB 542.00 kB = 96.45 kB 96.45 kB
facebook-www/ReactDOM-prod.modern.js = 525.73 kB 525.73 kB = 93.99 kB 93.99 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-noop-renderer/cjs/react-noop-renderer-flight-server.development.js +1.45% 2.34 kB 2.38 kB = 0.90 kB 0.90 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-server.development.js +1.45% 2.34 kB 2.38 kB = 0.90 kB 0.90 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-server.development.js +1.45% 2.34 kB 2.38 kB = 0.90 kB 0.90 kB
facebook-www/ReactFlightDOMRelayClient-prod.classic.js +0.87% 12.17 kB 12.27 kB +0.19% 3.11 kB 3.12 kB
facebook-www/ReactFlightDOMRelayClient-prod.modern.js +0.87% 12.17 kB 12.27 kB +0.19% 3.11 kB 3.12 kB
facebook-relay/flight/ReactFlightNativeRelayClient-prod.js +0.87% 12.18 kB 12.28 kB +0.16% 3.11 kB 3.12 kB
facebook-www/ReactFlightDOMRelayClient-dev.classic.js +0.62% 19.86 kB 19.99 kB +0.04% 5.22 kB 5.22 kB
facebook-www/ReactFlightDOMRelayClient-dev.modern.js +0.62% 19.86 kB 19.99 kB +0.04% 5.22 kB 5.22 kB
facebook-relay/flight/ReactFlightNativeRelayClient-dev.js +0.61% 19.95 kB 20.07 kB +0.04% 5.24 kB 5.24 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.min.js +0.54% 0.74 kB 0.74 kB +0.66% 0.46 kB 0.46 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.min.js +0.54% 0.74 kB 0.74 kB +0.66% 0.46 kB 0.46 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.min.js +0.54% 0.74 kB 0.74 kB +0.66% 0.46 kB 0.46 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js +0.50% 6.86 kB 6.90 kB +0.04% 2.79 kB 2.79 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js +0.50% 6.86 kB 6.90 kB +0.04% 2.79 kB 2.79 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js +0.50% 6.86 kB 6.90 kB +0.04% 2.79 kB 2.79 kB
oss-experimental/react-client/cjs/react-client-flight.production.min.js +0.50% 6.06 kB 6.09 kB +0.21% 2.40 kB 2.40 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.min.js +0.50% 6.06 kB 6.09 kB +0.21% 2.40 kB 2.40 kB
oss-stable/react-client/cjs/react-client-flight.production.min.js +0.50% 6.06 kB 6.09 kB +0.21% 2.40 kB 2.40 kB
oss-experimental/react-client/cjs/react-client-flight.development.js +0.49% 22.14 kB 22.24 kB +0.14% 5.90 kB 5.91 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js +0.49% 22.14 kB 22.24 kB +0.14% 5.90 kB 5.91 kB
oss-stable/react-client/cjs/react-client-flight.development.js +0.49% 22.14 kB 22.24 kB +0.14% 5.90 kB 5.91 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +0.45% 23.50 kB 23.60 kB = 6.18 kB 6.17 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +0.45% 23.50 kB 23.60 kB = 6.18 kB 6.17 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js +0.45% 23.50 kB 23.60 kB = 6.18 kB 6.17 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +0.41% 25.15 kB 25.25 kB = 6.64 kB 6.63 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +0.41% 25.15 kB 25.25 kB = 6.64 kB 6.63 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js +0.41% 25.15 kB 25.25 kB = 6.64 kB 6.63 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +0.41% 25.36 kB 25.46 kB = 6.72 kB 6.71 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +0.41% 25.36 kB 25.46 kB = 6.72 kB 6.71 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js +0.41% 25.36 kB 25.46 kB = 6.72 kB 6.71 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.min.js +0.41% 6.35 kB 6.38 kB +0.16% 2.53 kB 2.54 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.min.js +0.41% 6.35 kB 6.38 kB +0.16% 2.53 kB 2.54 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.min.js +0.41% 6.35 kB 6.38 kB +0.16% 2.53 kB 2.54 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js +0.38% 6.80 kB 6.82 kB +0.11% 2.74 kB 2.75 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js +0.38% 6.80 kB 6.82 kB +0.11% 2.74 kB 2.75 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js +0.38% 6.80 kB 6.82 kB +0.11% 2.74 kB 2.75 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js +0.30% 8.69 kB 8.72 kB +0.09% 3.44 kB 3.45 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js +0.30% 8.69 kB 8.72 kB +0.09% 3.44 kB 3.45 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js +0.30% 8.69 kB 8.72 kB +0.09% 3.44 kB 3.45 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js +0.29% 8.93 kB 8.96 kB +0.11% 3.55 kB 3.56 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js +0.29% 8.93 kB 8.96 kB +0.11% 3.55 kB 3.56 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js +0.29% 8.93 kB 8.96 kB +0.11% 3.55 kB 3.56 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +0.26% 1.55 kB 1.55 kB = 0.72 kB 0.72 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +0.26% 1.55 kB 1.55 kB = 0.72 kB 0.72 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js +0.26% 1.55 kB 1.55 kB = 0.72 kB 0.72 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.23% 43.36 kB 43.46 kB = 10.74 kB 10.73 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.23% 43.36 kB 43.46 kB = 10.74 kB 10.73 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +0.23% 43.36 kB 43.46 kB = 10.74 kB 10.73 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +0.22% 46.10 kB 46.20 kB = 10.91 kB 10.91 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +0.22% 46.10 kB 46.20 kB = 10.91 kB 10.91 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +0.22% 46.10 kB 46.20 kB = 10.91 kB 10.91 kB

Generated by 🚫 dangerJS against 8ff268a

@@ -41,7 +41,7 @@ export type JSONValue =

const PENDING = 'pending';
const BLOCKED = 'blocked';
const RESOLVED_MODEL = 'resolved_model';
const RESOLVED_VALUE = 'resolved_value';
Copy link
Collaborator

Choose a reason for hiding this comment

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

These are not like the others. E.g. A Module is also a ReactClientValue so why isn't resolved_module also this? We need some way to differentiate between different kinds of values in this context.

Copy link
Contributor Author

@unstubbable unstubbable Mar 13, 2023

Choose a reason for hiding this comment

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

This comment I found difficult to tackle, and I had a hard time finding the best name for this type of chunk. TL;DR: I went with RESOLVED_JSON_VALUE, but I'm am open for other suggestions.

The main problem I have with it is that already before model and module weren't really the best names. Because as you said, a module is also a ReactClientValue, so previously a Model. But ReactClientValue is named from the perspective for the encoder (flight server or flight reply client), whereas this code here is from the perspective of the decoder (flight client or flight reply server), where value (before: model) is something else than ReactClientValue. The value of a module chunk is a client reference object. The value of the chunk in question is an UninitializedValue. So in the streaming client it's a JSON string, and in the relay clients it's a JSONValue. Therefore I went with RESOLVED_JSON_VALUE, so a resolved JSON value that can be initialised (i.e. parsed) next. This is also somewhat in line with how it's modeled in the flight server, where there are completedImportChunks, completedJSONChunks (and completedErrorChunks). Maybe the import chunks in the flight server should even be renamed to module chunks?

I'm really glad for the issue you've pointed out here because it made dive deeper into the whole flight implementation, and I now understand a lot more about how RSC works than before.

@@ -39,7 +39,7 @@ declare module 'ReactFlightDOMRelayServerIntegration' {
import type {JSResourceReference} from 'JSResourceReference';

declare export opaque type Destination;
declare export opaque type BundlerConfig;
Copy link
Collaborator

Choose a reason for hiding this comment

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

We can't change these without changing the internal code in Meta's codebase. So someone at Meta needs to do that both at the same time.

Copy link
Contributor

Choose a reason for hiding this comment

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

Not sure if its connected. But Relay has cleaned up its flight implementation: facebook/relay@689dcb1

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Reverted to BundlerConfig and added a TODO.

@unstubbable
Copy link
Contributor Author

@sebmarkbage I appreciate you taking the time to review these changes! As for your two review comments, do you think I should try to address them in some way, or would you rather I close the PR? I also understand that this is pretty intrusive since you are actively working on the feature, so no hard feelings either way.

@sebmarkbage
Copy link
Collaborator

This is great. I was thinking the same thing the other day. So if you can just address the two outstanding issues, we can land.

@unstubbable unstubbable force-pushed the flight-naming-inconsistencies branch from a13bf97 to 36e576f Compare March 13, 2023 15:29
@unstubbable
Copy link
Contributor Author

I've squashed the changes in the Flight Reply implementation (which came after this PR) into the first two commits. I also have them as separate commits locally. Let me know if I should push that instead.

createModelResolver(parentChunk, parentObject, key),
createModelReject(parentChunk),
createValueResolver(parentChunk, parentObject, key),
createValueReject(parentChunk),
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I think it should be either createValueResolver/createValueRejecter or createValueResolve/createValueReject.

Since `ClientManifest` and `SSRManifest` are now clearly differentiated
in their structure (via facebook#26300) and type names (via facebook#26351), this opened
up the opportunity to clean up some inconsistencies in how parameters,
variables and properties were named (e.g. `config`, `bundlerConfig`,
`moduleMap`, `webpackMap`, ...). To improve readability and avoid
confusion between the two different types of objects we now always name
them either `clientManifest` or `ssrManifest`.
After `ReactModel` has been renamed to `ReactClientValue` in facebook#26351, I
think we should also rename the params, variables and functions that
handle this type accordingly from `model` to `value`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants