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

[Fizz] Allow an action provide a custom set of props to use for progressive enhancement #26749

Merged
merged 1 commit into from
May 1, 2023

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented May 1, 2023

Stacked on top of #26735.

This allows a framework to add a $$FORM_ACTION property to a function. This lets the framework return a set of props to use in place of the function but only during SSR. Effectively, this lets you implement progressive enhancement of form actions using some other way instead of relying on the replay feature.

This will be used by RSC on Server References automatically by convention in a follow up, but this mechanism can also be used by other frameworks/libraries.

@sebmarkbage sebmarkbage requested review from gnoff and acdlite May 1, 2023 01:50
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels May 1, 2023
@react-sizebot
Copy link

react-sizebot commented May 1, 2023

Comparing: 67f4fb0...764cf9d

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.18 kB 164.18 kB = 51.78 kB 51.78 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js +0.02% 171.54 kB 171.57 kB +0.04% 53.97 kB 53.99 kB
facebook-www/ReactDOM-prod.classic.js = 570.19 kB 570.19 kB = 100.62 kB 100.62 kB
facebook-www/ReactDOM-prod.modern.js = 553.93 kB 553.93 kB = 97.80 kB 97.80 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.production.min.js +2.50% 63.60 kB 65.19 kB +4.22% 19.16 kB 19.97 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.production.min.js +2.46% 64.87 kB 66.47 kB +4.14% 19.91 kB 20.74 kB
oss-experimental/react-dom/cjs/react-dom-static.node.production.min.js +2.45% 64.97 kB 66.57 kB +4.15% 19.97 kB 20.80 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js +2.45% 65.01 kB 66.60 kB +4.15% 19.98 kB 20.81 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js +2.45% 64.60 kB 66.18 kB +4.17% 19.21 kB 20.02 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js +2.41% 60.05 kB 61.49 kB +4.08% 18.00 kB 18.73 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +2.41% 59.89 kB 61.33 kB +4.09% 17.70 kB 18.43 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.production.min.js +2.41% 60.54 kB 62.00 kB +3.87% 18.49 kB 19.20 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js +2.40% 60.66 kB 62.12 kB +3.93% 18.53 kB 19.26 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js +2.40% 60.81 kB 62.27 kB +3.97% 18.77 kB 19.51 kB
oss-experimental/react-dom/cjs/react-dom-static.edge.production.min.js +2.39% 60.88 kB 62.33 kB +3.99% 18.59 kB 19.33 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-dom/cjs/react-dom-server.bun.production.min.js +2.50% 63.60 kB 65.19 kB +4.22% 19.16 kB 19.97 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.production.min.js +2.46% 64.87 kB 66.47 kB +4.14% 19.91 kB 20.74 kB
oss-experimental/react-dom/cjs/react-dom-static.node.production.min.js +2.45% 64.97 kB 66.57 kB +4.15% 19.97 kB 20.80 kB
oss-experimental/react-dom/cjs/react-dom-server.node.production.min.js +2.45% 65.01 kB 66.60 kB +4.15% 19.98 kB 20.81 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.production.min.js +2.45% 64.60 kB 66.18 kB +4.17% 19.21 kB 20.02 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.production.min.js +2.41% 60.05 kB 61.49 kB +4.08% 18.00 kB 18.73 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +2.41% 59.89 kB 61.33 kB +4.09% 17.70 kB 18.43 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.production.min.js +2.41% 60.54 kB 62.00 kB +3.87% 18.49 kB 19.20 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.production.min.js +2.40% 60.66 kB 62.12 kB +3.93% 18.53 kB 19.26 kB
oss-experimental/react-dom/umd/react-dom-server.browser.production.min.js +2.40% 60.81 kB 62.27 kB +3.97% 18.77 kB 19.51 kB
oss-experimental/react-dom/cjs/react-dom-static.edge.production.min.js +2.39% 60.88 kB 62.33 kB +3.99% 18.59 kB 19.33 kB
oss-experimental/react-dom/cjs/react-dom-server.bun.development.js +0.80% 363.58 kB 366.49 kB +0.77% 80.42 kB 81.04 kB
oss-experimental/react-dom/cjs/react-dom-static.browser.development.js +0.80% 365.06 kB 367.98 kB +0.78% 80.90 kB 81.53 kB
oss-experimental/react-dom/cjs/react-dom-static.edge.development.js +0.80% 365.47 kB 368.39 kB +0.78% 81.02 kB 81.65 kB
oss-experimental/react-dom/umd/react-dom-server.browser.development.js +0.80% 383.10 kB 386.16 kB +0.76% 81.96 kB 82.58 kB
oss-experimental/react-dom/cjs/react-dom-server.browser.development.js +0.80% 365.75 kB 368.67 kB +0.77% 81.09 kB 81.71 kB
oss-experimental/react-dom/cjs/react-dom-server.edge.development.js +0.80% 366.16 kB 369.08 kB +0.78% 81.20 kB 81.83 kB
oss-experimental/react-dom/umd/react-dom-server-legacy.browser.development.js +0.80% 383.95 kB 387.01 kB +0.76% 81.85 kB 82.48 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.80% 366.58 kB 369.50 kB +0.77% 80.99 kB 81.62 kB
oss-experimental/react-dom/cjs/react-dom-static.node.development.js +0.79% 367.21 kB 370.13 kB +0.76% 81.23 kB 81.85 kB
oss-experimental/react-dom/cjs/react-dom-server.node.development.js +0.79% 367.25 kB 370.17 kB +0.76% 81.14 kB 81.76 kB
oss-experimental/react-dom/cjs/react-dom-server-legacy.node.development.js +0.79% 368.34 kB 371.25 kB +0.77% 81.45 kB 82.08 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.production.min.js +0.57% 62.16 kB 62.51 kB +0.83% 18.61 kB 18.76 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.production.min.js +0.57% 64.11 kB 64.48 kB +0.69% 19.68 kB 19.82 kB
oss-stable/react-dom/cjs/react-dom-server.bun.production.min.js +0.57% 62.19 kB 62.54 kB +0.83% 18.63 kB 18.79 kB
oss-stable/react-dom/cjs/react-dom-server.node.production.min.js +0.57% 64.14 kB 64.50 kB +0.69% 19.70 kB 19.84 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.production.min.js +0.57% 63.97 kB 64.33 kB +0.79% 19.61 kB 19.76 kB
oss-stable/react-dom/cjs/react-dom-server.edge.production.min.js +0.57% 64.00 kB 64.36 kB +0.79% 19.63 kB 19.79 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.56% 63.17 kB 63.52 kB +0.81% 18.66 kB 18.82 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.production.min.js +0.56% 63.19 kB 63.55 kB +0.81% 18.69 kB 18.84 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.production.min.js +0.38% 59.86 kB 60.09 kB +0.47% 18.26 kB 18.35 kB
oss-stable/react-dom/cjs/react-dom-server.browser.production.min.js +0.38% 59.89 kB 60.11 kB +0.46% 18.29 kB 18.37 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.production.min.js +0.37% 60.03 kB 60.25 kB +0.37% 18.52 kB 18.59 kB
oss-stable/react-dom/umd/react-dom-server.browser.production.min.js +0.37% 60.06 kB 60.28 kB +0.38% 18.55 kB 18.62 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.37% 58.56 kB 58.77 kB +0.47% 17.18 kB 17.26 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +0.37% 58.58 kB 58.80 kB +0.48% 17.20 kB 17.28 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.36% 58.73 kB 58.94 kB +0.33% 17.48 kB 17.54 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.production.min.js +0.36% 58.75 kB 58.97 kB +0.32% 17.50 kB 17.56 kB
facebook-www/ReactDOMServerStreaming-prod.modern.js +0.31% 140.42 kB 140.85 kB +0.57% 26.55 kB 26.70 kB
facebook-www/ReactDOMServer-prod.modern.js +0.22% 135.54 kB 135.83 kB +0.29% 25.21 kB 25.29 kB
facebook-www/ReactDOMServer-prod.classic.js +0.21% 139.06 kB 139.36 kB +0.27% 25.94 kB 26.01 kB
facebook-www/ReactDOMServerStreaming-dev.modern.js +0.21% 364.98 kB 365.73 kB +0.31% 78.99 kB 79.23 kB
oss-stable-semver/react-dom/cjs/react-dom-server.bun.development.js +0.21% 355.94 kB 356.68 kB +0.32% 78.58 kB 78.83 kB
oss-stable/react-dom/cjs/react-dom-server.bun.development.js +0.21% 355.96 kB 356.70 kB +0.33% 78.60 kB 78.85 kB
oss-stable-semver/react-dom/cjs/react-dom-server.browser.development.js +0.21% 358.69 kB 359.43 kB +0.30% 79.48 kB 79.72 kB
oss-stable/react-dom/cjs/react-dom-server.browser.development.js +0.21% 358.72 kB 359.46 kB +0.30% 79.50 kB 79.74 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.21% 358.94 kB 359.68 kB +0.29% 79.16 kB 79.40 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.browser.development.js +0.21% 358.97 kB 359.70 kB +0.30% 79.19 kB 79.42 kB
oss-stable-semver/react-dom/cjs/react-dom-server.edge.development.js +0.21% 359.10 kB 359.84 kB +0.30% 79.60 kB 79.84 kB
oss-stable/react-dom/cjs/react-dom-server.edge.development.js +0.21% 359.13 kB 359.87 kB +0.30% 79.62 kB 79.86 kB
oss-stable-semver/react-dom/cjs/react-dom-server.node.development.js +0.21% 360.19 kB 360.93 kB +0.30% 79.53 kB 79.77 kB
oss-stable/react-dom/cjs/react-dom-server.node.development.js +0.21% 360.22 kB 360.96 kB +0.30% 79.55 kB 79.79 kB
facebook-www/ReactDOMServer-dev.modern.js +0.21% 370.12 kB 370.88 kB +0.31% 80.27 kB 80.52 kB
oss-stable-semver/react-dom/cjs/react-dom-server-legacy.node.development.js +0.20% 360.70 kB 361.44 kB +0.30% 79.62 kB 79.86 kB
oss-stable/react-dom/cjs/react-dom-server-legacy.node.development.js +0.20% 360.72 kB 361.46 kB +0.30% 79.64 kB 79.88 kB
oss-stable-semver/react-dom/umd/react-dom-server.browser.development.js +0.20% 375.74 kB 376.51 kB +0.31% 80.38 kB 80.63 kB
oss-stable/react-dom/umd/react-dom-server.browser.development.js +0.20% 375.76 kB 376.53 kB +0.31% 80.40 kB 80.65 kB
oss-stable-semver/react-dom/umd/react-dom-server-legacy.browser.development.js +0.20% 376.00 kB 376.77 kB +0.31% 80.05 kB 80.30 kB
oss-stable/react-dom/umd/react-dom-server-legacy.browser.development.js +0.20% 376.03 kB 376.80 kB +0.31% 80.07 kB 80.32 kB
facebook-www/ReactDOMServer-dev.classic.js +0.20% 377.55 kB 378.30 kB +0.30% 81.92 kB 82.16 kB

Generated by 🚫 dangerJS against 764cf9d

Copy link
Collaborator

@gnoff gnoff left a comment

Choose a reason for hiding this comment

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

I requested changes on the underlying #26735

but the net new looks good.

Copy link
Collaborator

@acdlite acdlite left a comment

Choose a reason for hiding this comment

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

very cool

// This action has a custom progressive enhancement form that can submit the form
// back to the server if it's invoked before hydration. Such as a Server Action.
const prefix = makeFormFieldPrefix(responseState);
const customFields = customAction(prefix);
Copy link
Collaborator Author

@sebmarkbage sebmarkbage May 1, 2023

Choose a reason for hiding this comment

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

I'm going to make this a method call instead so that the function gets passed as this so you're not required to make this a closure per function if you already have info about the function.

@sebmarkbage sebmarkbage merged commit 559e83a into facebook:main May 1, 2023
github-actions bot pushed a commit that referenced this pull request May 1, 2023
…essive enhancement (#26749)

Stacked on top of #26735.

This allows a framework to add a `$$FORM_ACTION` property to a function.
This lets the framework return a set of props to use in place of the
function but only during SSR. Effectively, this lets you implement
progressive enhancement of form actions using some other way instead of
relying on the replay feature.

This will be used by RSC on Server References automatically by
convention in a follow up, but this mechanism can also be used by other
frameworks/libraries.

DiffTrain build for [559e83a](559e83a)
acdlite added a commit to acdlite/next.js that referenced this pull request May 3, 2023
Includes the following upstream changes:

- [5dd90c562](https://github.com/facebook/react/commits/5dd90c562) Use content hash for react-native builds ([vercel#26734](facebook/react#26734)) (Samuel Susla)
- [559e83aeb](https://github.com/facebook/react/commits/559e83aeb) [Fizz] Allow an action provide a custom set of props to use for progressive enhancement ([vercel#26749](facebook/react#26749)) (Sebastian Markbåge)
- [67f4fb021](https://github.com/facebook/react/commits/67f4fb021) Allow forms to skip hydration of hidden inputs ([vercel#26735](facebook/react#26735)) (Sebastian Markbåge)
- [8ea96ef84](https://github.com/facebook/react/commits/8ea96ef84) [Fizz] Encode external fizz runtime into chunks eagerly ([vercel#26752](facebook/react#26752)) (Josh Story)
- [491aec5d6](https://github.com/facebook/react/commits/491aec5d6) Implement experimental_useOptimisticState ([vercel#26740](facebook/react#26740)) (Andrew Clark)
- [9545e4810](https://github.com/facebook/react/commits/9545e4810) Add nonce support to bootstrap scripts and external runtime ([vercel#26738](facebook/react#26738)) (Dan Ott)
- [86b0e9199](https://github.com/facebook/react/commits/86b0e9199) Gate DevTools test to fix CI ([#26742](facebook/react#26742)) (Andrew Clark)
- [b12bea62d](https://github.com/facebook/react/commits/b12bea62d) Preinits should support a nonce option ([#26744](facebook/react#26744)) (Josh Story)
- [efbd68511](https://github.com/facebook/react/commits/efbd68511) Remove unused `initialStatus` parameter from `useHostTransitionStatus` ([vercel#26743](facebook/react#26743)) (Sebastian Silbermann)
- [18282f881](https://github.com/facebook/react/commits/18282f881) Fix: Update while suspended fails to interrupt ([vercel#26739](facebook/react#26739)) (Andrew Clark)
- [540bab085](https://github.com/facebook/react/commits/540bab085) Implement experimental_useFormStatus ([#26722](facebook/react#26722)) (Andrew Clark)
acdlite added a commit to acdlite/next.js that referenced this pull request May 3, 2023
Includes the following upstream changes:

- [5dd90c562](https://github.com/facebook/react/commits/5dd90c562) Use content hash for react-native builds ([vercel#26734](facebook/react#26734)) (Samuel Susla)
- [559e83aeb](https://github.com/facebook/react/commits/559e83aeb) [Fizz] Allow an action provide a custom set of props to use for progressive enhancement ([vercel#26749](facebook/react#26749)) (Sebastian Markbåge)
- [67f4fb021](https://github.com/facebook/react/commits/67f4fb021) Allow forms to skip hydration of hidden inputs ([vercel#26735](facebook/react#26735)) (Sebastian Markbåge)
- [8ea96ef84](https://github.com/facebook/react/commits/8ea96ef84) [Fizz] Encode external fizz runtime into chunks eagerly ([vercel#26752](facebook/react#26752)) (Josh Story)
- [491aec5d6](https://github.com/facebook/react/commits/491aec5d6) Implement experimental_useOptimisticState ([vercel#26740](facebook/react#26740)) (Andrew Clark)
- [9545e4810](https://github.com/facebook/react/commits/9545e4810) Add nonce support to bootstrap scripts and external runtime ([vercel#26738](facebook/react#26738)) (Dan Ott)
- [86b0e9199](https://github.com/facebook/react/commits/86b0e9199) Gate DevTools test to fix CI ([#26742](facebook/react#26742)) (Andrew Clark)
- [b12bea62d](https://github.com/facebook/react/commits/b12bea62d) Preinits should support a nonce option ([#26744](facebook/react#26744)) (Josh Story)
- [efbd68511](https://github.com/facebook/react/commits/efbd68511) Remove unused `initialStatus` parameter from `useHostTransitionStatus` ([vercel#26743](facebook/react#26743)) (Sebastian Silbermann)
- [18282f881](https://github.com/facebook/react/commits/18282f881) Fix: Update while suspended fails to interrupt ([vercel#26739](facebook/react#26739)) (Andrew Clark)
- [540bab085](https://github.com/facebook/react/commits/540bab085) Implement experimental_useFormStatus ([#26722](facebook/react#26722)) (Andrew Clark)
ijjk pushed a commit to vercel/next.js that referenced this pull request May 3, 2023
Includes the following upstream changes:

- [b7972822b](https://github.com/facebook/react/commits/b7972822b)
useOptimisticState -> useOptimistic
([#26772](facebook/react#26772)) (Andrew Clark)
- [388686f29](https://github.com/facebook/react/commits/388686f29) Add
"canary" to list of allowed npm dist tags
([#26767](facebook/react#26767)) (Andrew Clark)
- [8a25302c6](https://github.com/facebook/react/commits/8a25302c6)
fix[dynamic-scripts-injection]: unregister content scripts before
registration ([#26765](facebook/react#26765))
(Ruslan Lesiutin)
- [2c2476834](https://github.com/facebook/react/commits/2c2476834)
Rename "next" prerelease channel to "canary"
([#26761](facebook/react#26761)) (Andrew Clark)
- [fa4314841](https://github.com/facebook/react/commits/fa4314841)
Remove deprecated workflow key from Circle config
([#26762](facebook/react#26762)) (Andrew Clark)
- [5dd90c562](https://github.com/facebook/react/commits/5dd90c562) Use
content hash for react-native builds
([#26734](facebook/react#26734)) (Samuel Susla)
- [559e83aeb](https://github.com/facebook/react/commits/559e83aeb)
[Fizz] Allow an action provide a custom set of props to use for
progressive enhancement
([#26749](facebook/react#26749)) (Sebastian
Markbåge)
- [67f4fb021](https://github.com/facebook/react/commits/67f4fb021) Allow
forms to skip hydration of hidden inputs
([#26735](facebook/react#26735)) (Sebastian
Markbåge)
- [8ea96ef84](https://github.com/facebook/react/commits/8ea96ef84)
[Fizz] Encode external fizz runtime into chunks eagerly
([#26752](facebook/react#26752)) (Josh Story)
- [491aec5d6](https://github.com/facebook/react/commits/491aec5d6)
Implement experimental_useOptimisticState
([#26740](facebook/react#26740)) (Andrew Clark)
- [9545e4810](https://github.com/facebook/react/commits/9545e4810) Add
nonce support to bootstrap scripts and external runtime
([#26738](facebook/react#26738)) (Dan Ott)
- [86b0e9199](https://github.com/facebook/react/commits/86b0e9199) Gate
DevTools test to fix CI
([#26742](facebook/react#26742)) (Andrew Clark)
- [b12bea62d](https://github.com/facebook/react/commits/b12bea62d)
Preinits should support a nonce option
([#26744](facebook/react#26744)) (Josh Story)
- [efbd68511](https://github.com/facebook/react/commits/efbd68511)
Remove unused `initialStatus` parameter from `useHostTransitionStatus`
([#26743](facebook/react#26743)) (Sebastian
Silbermann)
- [18282f881](https://github.com/facebook/react/commits/18282f881) Fix:
Update while suspended fails to interrupt
([#26739](facebook/react#26739)) (Andrew Clark)
- [540bab085](https://github.com/facebook/react/commits/540bab085)
Implement experimental_useFormStatus
([#26722](facebook/react#26722)) (Andrew Clark)

---------
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
…essive enhancement (facebook#26749)

Stacked on top of facebook#26735.

This allows a framework to add a `$$FORM_ACTION` property to a function.
This lets the framework return a set of props to use in place of the
function but only during SSR. Effectively, this lets you implement
progressive enhancement of form actions using some other way instead of
relying on the replay feature.

This will be used by RSC on Server References automatically by
convention in a follow up, but this mechanism can also be used by other
frameworks/libraries.
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
…essive enhancement (#26749)

Stacked on top of #26735.

This allows a framework to add a `$$FORM_ACTION` property to a function.
This lets the framework return a set of props to use in place of the
function but only during SSR. Effectively, this lets you implement
progressive enhancement of form actions using some other way instead of
relying on the replay feature.

This will be used by RSC on Server References automatically by
convention in a follow up, but this mechanism can also be used by other
frameworks/libraries.

DiffTrain build for commit 559e83a.
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.

5 participants