Skip to content

Conversation

@sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Apr 18, 2023

Builds on top of #26661

This lets you pass FormData objects through the Flight Reply serialization. It does that by prefixing each entry with the ID of the reference and then the decoding side creates a new FormData object containing only those fields (without the prefix).

Ideally this should be more generic. E.g. you should be able to pass Blobs, Streams and Typed Arrays by reference inside plain objects too. You should also be able to send Blobs and FormData in the regular Flight serialization too so that they can go both directions. They should be symmetrical. We'll get around to adding more of those features in the Flight protocol as we go.

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

react-sizebot commented Apr 18, 2023

Comparing: b600620...b22e89f

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 = 164.42 kB 164.42 kB = 51.69 kB 51.69 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 166.86 kB 166.86 kB = 52.34 kB 52.34 kB
facebook-www/ReactDOM-prod.classic.js = 564.45 kB 564.45 kB = 99.40 kB 99.40 kB
facebook-www/ReactDOM-prod.modern.js = 548.24 kB 548.24 kB = 96.71 kB 96.71 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +2.34% 45.22 kB 46.27 kB +2.56% 11.11 kB 11.40 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +2.34% 45.22 kB 46.27 kB +2.56% 11.11 kB 11.40 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +2.34% 45.22 kB 46.27 kB +2.56% 11.11 kB 11.40 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +2.28% 48.10 kB 49.19 kB +2.51% 11.30 kB 11.58 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +2.28% 48.10 kB 49.19 kB +2.51% 11.30 kB 11.58 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +2.28% 48.10 kB 49.19 kB +2.51% 11.30 kB 11.58 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-webpack/cjs/react-server-dom-webpack-client.browser.development.js +2.34% 45.22 kB 46.27 kB +2.56% 11.11 kB 11.40 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +2.34% 45.22 kB 46.27 kB +2.56% 11.11 kB 11.40 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js +2.34% 45.22 kB 46.27 kB +2.56% 11.11 kB 11.40 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +2.28% 48.10 kB 49.19 kB +2.51% 11.30 kB 11.58 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +2.28% 48.10 kB 49.19 kB +2.51% 11.30 kB 11.58 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.development.js +2.28% 48.10 kB 49.19 kB +2.51% 11.30 kB 11.58 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js +1.88% 20.35 kB 20.73 kB +2.57% 7.27 kB 7.45 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js +1.88% 20.35 kB 20.73 kB +2.57% 7.27 kB 7.45 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js +1.88% 20.35 kB 20.73 kB +2.57% 7.27 kB 7.45 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js +1.83% 20.91 kB 21.29 kB +2.54% 7.45 kB 7.64 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js +1.83% 20.91 kB 21.29 kB +2.54% 7.45 kB 7.64 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js +1.83% 20.91 kB 21.29 kB +2.54% 7.45 kB 7.64 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +1.79% 84.27 kB 85.78 kB +2.40% 20.24 kB 20.73 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +1.79% 84.27 kB 85.78 kB +2.40% 20.24 kB 20.73 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js +1.79% 84.27 kB 85.78 kB +2.40% 20.24 kB 20.73 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js +1.74% 9.24 kB 9.40 kB +1.62% 3.65 kB 3.70 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js +1.74% 9.24 kB 9.40 kB +1.62% 3.65 kB 3.70 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js +1.74% 9.24 kB 9.40 kB +1.62% 3.65 kB 3.70 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +1.74% 86.59 kB 88.09 kB +2.28% 20.92 kB 21.40 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +1.74% 86.59 kB 88.09 kB +2.28% 20.92 kB 21.40 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js +1.74% 86.59 kB 88.09 kB +2.28% 20.92 kB 21.40 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js +1.70% 9.48 kB 9.64 kB +1.60% 3.75 kB 3.81 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js +1.70% 9.48 kB 9.64 kB +1.60% 3.75 kB 3.81 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-client.browser.production.min.js +1.70% 9.48 kB 9.64 kB +1.60% 3.75 kB 3.81 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 19.96 kB 19.88 kB +0.31% 7.18 kB 7.20 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 19.96 kB 19.88 kB +0.31% 7.18 kB 7.20 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.production.min.js = 19.96 kB 19.88 kB +0.31% 7.18 kB 7.20 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 20.04 kB 19.95 kB +0.18% 7.16 kB 7.17 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 20.04 kB 19.95 kB +0.18% 7.16 kB 7.17 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js = 20.04 kB 19.95 kB +0.18% 7.16 kB 7.17 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 19.75 kB 19.67 kB +0.17% 7.07 kB 7.08 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 19.75 kB 19.67 kB +0.17% 7.07 kB 7.08 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js = 19.75 kB 19.67 kB +0.17% 7.07 kB 7.08 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 84.09 kB 83.70 kB +0.32% 20.55 kB 20.62 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 84.09 kB 83.70 kB +0.32% 20.55 kB 20.62 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js = 84.09 kB 83.70 kB +0.32% 20.55 kB 20.62 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 83.60 kB 83.21 kB +0.34% 20.41 kB 20.48 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 83.60 kB 83.21 kB +0.34% 20.41 kB 20.48 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js = 83.60 kB 83.21 kB +0.34% 20.41 kB 20.48 kB
oss-experimental/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 88.39 kB 87.95 kB +0.33% 20.69 kB 20.75 kB
oss-stable-semver/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 88.39 kB 87.95 kB +0.33% 20.69 kB 20.75 kB
oss-stable/react-server-dom-webpack/umd/react-server-dom-webpack-server.browser.development.js = 88.39 kB 87.95 kB +0.33% 20.69 kB 20.75 kB

Generated by 🚫 dangerJS against b22e89f

Copy link
Collaborator

@sophiebits sophiebits left a comment

Choose a reason for hiding this comment

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

I didn't review the #26661 part

// $FlowFixMe[prop-missing] FormData has forEach on it.
backingFormData.forEach((entry: File | string, entryKey: string) => {
if (entryKey.startsWith(formPrefix)) {
data.append(entryKey.substr(formPrefix.length), entry);
Copy link
Collaborator

Choose a reason for hiding this comment

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

substr is kinda deprecated? annex B.

Suggested change
data.append(entryKey.substr(formPrefix.length), entry);
data.append(entryKey.substring(formPrefix.length), entry);

(personally I'm a slice gal)

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I'd be down to just lint and enforce a single form just for the potential compression savings by using a repeated string.

Typo

Co-authored-by: Sophie Alpert <git@sophiebits.com>
@sebmarkbage sebmarkbage merged commit d8089f2 into facebook:main Apr 18, 2023
@sebmarkbage
Copy link
Collaborator Author

Oops. I forgot that I had a stacked PR. Anyway. Probably fine.

sophiebits added a commit that referenced this pull request Apr 19, 2023
- substr is Annex B
- substring silently flips its arguments if they're in the "wrong order", which is confusing
- slice is better than sliced bread (no pun intended) and also it works the same way on Arrays so there's less to remember

---

> I'd be down to just lint and enforce a single form just for the potential compression savings by using a repeated string.

_Originally posted by @sebmarkbage in #26663 (comment)
kassens pushed a commit that referenced this pull request Apr 21, 2023
Builds on top of #26661

This lets you pass FormData objects through the Flight Reply
serialization. It does that by prefixing each entry with the ID of the
reference and then the decoding side creates a new FormData object
containing only those fields (without the prefix).

Ideally this should be more generic. E.g. you should be able to pass
Blobs, Streams and Typed Arrays by reference inside plain objects too.
You should also be able to send Blobs and FormData in the regular Flight
serialization too so that they can go both directions. They should be
symmetrical. We'll get around to adding more of those features in the
Flight protocol as we go.

---------

Co-authored-by: Sophie Alpert <git@sophiebits.com>
kassens pushed a commit that referenced this pull request Apr 21, 2023
- substr is Annex B
- substring silently flips its arguments if they're in the "wrong order", which is confusing
- slice is better than sliced bread (no pun intended) and also it works the same way on Arrays so there's less to remember

---

> I'd be down to just lint and enforce a single form just for the potential compression savings by using a repeated string.

_Originally posted by @sebmarkbage in #26663 (comment)
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Builds on top of facebook#26661

This lets you pass FormData objects through the Flight Reply
serialization. It does that by prefixing each entry with the ID of the
reference and then the decoding side creates a new FormData object
containing only those fields (without the prefix).

Ideally this should be more generic. E.g. you should be able to pass
Blobs, Streams and Typed Arrays by reference inside plain objects too.
You should also be able to send Blobs and FormData in the regular Flight
serialization too so that they can go both directions. They should be
symmetrical. We'll get around to adding more of those features in the
Flight protocol as we go.

---------

Co-authored-by: Sophie Alpert <git@sophiebits.com>
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
- substr is Annex B
- substring silently flips its arguments if they're in the "wrong order", which is confusing
- slice is better than sliced bread (no pun intended) and also it works the same way on Arrays so there's less to remember

---

> I'd be down to just lint and enforce a single form just for the potential compression savings by using a repeated string.

_Originally posted by @sebmarkbage in facebook#26663 (comment)
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
Builds on top of #26661

This lets you pass FormData objects through the Flight Reply
serialization. It does that by prefixing each entry with the ID of the
reference and then the decoding side creates a new FormData object
containing only those fields (without the prefix).

Ideally this should be more generic. E.g. you should be able to pass
Blobs, Streams and Typed Arrays by reference inside plain objects too.
You should also be able to send Blobs and FormData in the regular Flight
serialization too so that they can go both directions. They should be
symmetrical. We'll get around to adding more of those features in the
Flight protocol as we go.

---------

Co-authored-by: Sophie Alpert <git@sophiebits.com>

DiffTrain build for commit d8089f2.
Akshato07 pushed a commit to Akshato07/-Luffy that referenced this pull request Feb 20, 2025
- substr is Annex B
- substring silently flips its arguments if they're in the "wrong order", which is confusing
- slice is better than sliced bread (no pun intended) and also it works the same way on Arrays so there's less to remember

---

> I'd be down to just lint and enforce a single form just for the potential compression savings by using a repeated string.

_Originally posted by @sebmarkbage in facebook/react#26663 (comment)

DiffTrain build for commit facebook/react@767f522.
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.

4 participants