[Fizz] Check for nullish values on ReactCustomFormAction (#26770)
Usually we don't have to do this since we only set these in the loop but the ReactCustomFormAction props are optional so they might be undefined. Also moved it to a general type since it's a semi-public API.
Sebastian Markbåge committed
May 3, 2023 at 14:35 UTC
fa7a447b9ce5a4f0be592fc2946380b0fa3b29c0
2 files changed
+21
-21
packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+12
-21
@@ -7,7 +7,7 @@
7
* @flow
8
*/
9
10
-import type {ReactNodeList} from 'shared/ReactTypes';
10
+import type {ReactNodeList, ReactCustomFormAction} from 'shared/ReactTypes';
11
12
import {
13
checkHtmlStringCoercion,
@@ -668,15 +668,6 @@ function pushStringAttribute(
668
}
669
}
670
671
-type CustomFormAction = {
672
- name?: string,
673
- action?: string,
674
- encType?: string,
675
- method?: string,
676
- target?: string,
677
- data?: FormData,
678
-};
679
-
671
function makeFormFieldPrefix(responseState: ResponseState): string {
672
// I'm just reusing this counter. It's not really the same namespace as "name".
673
// It could just be its own counter.
@@ -761,7 +752,7 @@ function pushFormActionAttribute(
752
);
753
}
754
}
764
- const customAction: CustomFormAction = formAction.$$FORM_ACTION;
755
+ const customAction: ReactCustomFormAction = formAction.$$FORM_ACTION;
756
if (typeof customAction === 'function') {
757
// This action has a custom progressive enhancement form that can submit the form
758
// back to the server if it's invoked before hydration. Such as a Server Action.
@@ -794,19 +785,19 @@ function pushFormActionAttribute(
785
injectFormReplayingRuntime(responseState);
786
}
787
}
797
- if (name !== null) {
788
+ if (name != null) {
789
pushAttribute(target, 'name', name);
790
}
800
- if (formAction !== null) {
791
+ if (formAction != null) {
792
pushAttribute(target, 'formAction', formAction);
793
}
803
- if (formEncType !== null) {
794
+ if (formEncType != null) {
795
pushAttribute(target, 'formEncType', formEncType);
796
}
806
- if (formMethod !== null) {
797
+ if (formMethod != null) {
798
pushAttribute(target, 'formMethod', formMethod);
799
}
809
- if (formTarget !== null) {
800
+ if (formTarget != null) {
801
pushAttribute(target, 'formTarget', formTarget);
802
}
803
return formData;
@@ -1455,7 +1446,7 @@ function pushStartForm(
1446
);
1447
}
1448
}
1458
- const customAction: CustomFormAction = formAction.$$FORM_ACTION;
1449
+ const customAction: ReactCustomFormAction = formAction.$$FORM_ACTION;
1450
if (typeof customAction === 'function') {
1451
// This action has a custom progressive enhancement form that can submit the form
1452
// back to the server if it's invoked before hydration. Such as a Server Action.
@@ -1487,16 +1478,16 @@ function pushStartForm(
1478
injectFormReplayingRuntime(responseState);
1479
}
1480
}
1490
- if (formAction !== null) {
1481
+ if (formAction != null) {
1482
pushAttribute(target, 'action', formAction);
1483
}
1493
- if (formEncType !== null) {
1484
+ if (formEncType != null) {
1485
pushAttribute(target, 'encType', formEncType);
1486
}
1496
- if (formMethod !== null) {
1487
+ if (formMethod != null) {
1488
pushAttribute(target, 'method', formMethod);
1489
}
1499
- if (formTarget !== null) {
1490
+ if (formTarget != null) {
1491
pushAttribute(target, 'target', formTarget);
1492
}
1493
packages/shared/ReactTypes.js
+9
@@ -217,3 +217,12 @@ export type StartTransitionOptions = {
217
};
218
219
export type Usable<T> = Thenable<T> | ReactContext<T>;
220
+
221
+export type ReactCustomFormAction = {
222
+ name?: string,
223
+ action?: string,
224
+ encType?: string,
225
+ method?: string,
226
+ target?: string,
227
+ data?: null | FormData,
228
+};