Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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 [559e83aebb](https://github.com/facebook/react/commit/559e83aebb2026035d47aa0ebf842f78d4cd6757)
This commit is contained in:
sebmarkbage
2023-05-01 20:06:06 +00:00
parent 6476ee0531
commit 0b3882cf21
7 changed files with 431 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiled/facebook-www/REVISION
+1 -1
View File
@@ -1 +1 @@
67f4fb02130b1fe1856289e3b66bb0b8cca57ff7
559e83aebb2026035d47aa0ebf842f78d4cd6757
compiled/facebook-www/ReactDOMServer-dev.classic.js
+67 -40
View File
@@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");
var ReactVersion = "18.3.0-www-classic-fcee71d2";
var ReactVersion = "18.3.0-www-classic-ccb1f72b";
// This refers to a WWW module.
var warningWWW = require("warning");
@@ -2840,7 +2840,7 @@ function pushStringAttribute(target, name, value) {
attributeEnd
);
}
} // Since this will likely be repeated a lot in the HTML, we use a more concise message
}
// than on the client and hopefully it's googleable.
stringToPrecomputedChunk(
@@ -2849,6 +2849,30 @@ stringToPrecomputedChunk(
"javascript:throw new Error('A React form was unexpectedly submitted.')"
)
);
var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
function pushAdditionalFormField(value, key) {
var target = this;
target.push(startHiddenInputChunk);
if (typeof value !== "string") {
throw new Error(
"File/Blob fields are not yet supported in progressive forms. " +
"It probably means you are closing over binary data or FormData in a Server Action."
);
}
pushStringAttribute(target, "name", key);
pushStringAttribute(target, "value", value);
target.push(endOfStartTagSelfClosing);
}
function pushAdditionalFormFields(target, formData) {
if (formData !== null) {
// $FlowFixMe[prop-missing]: FormData has forEach.
formData.forEach(pushAdditionalFormField, target);
}
}
function pushFormActionAttribute(
target,
@@ -2859,28 +2883,29 @@ function pushFormActionAttribute(
formTarget,
name
) {
{
// Plain form actions support all the properties, so we have to emit them.
if (name !== null) {
pushAttribute(target, "name", name);
}
var formData = null;
if (formAction !== null) {
pushAttribute(target, "formAction", formAction);
}
if (formEncType !== null) {
pushAttribute(target, "formEncType", formEncType);
}
if (formMethod !== null) {
pushAttribute(target, "formMethod", formMethod);
}
if (formTarget !== null) {
pushAttribute(target, "formTarget", formTarget);
}
if (name !== null) {
pushAttribute(target, "name", name);
}
if (formAction !== null) {
pushAttribute(target, "formAction", formAction);
}
if (formEncType !== null) {
pushAttribute(target, "formEncType", formEncType);
}
if (formMethod !== null) {
pushAttribute(target, "formMethod", formMethod);
}
if (formTarget !== null) {
pushAttribute(target, "formTarget", formTarget);
}
return formData;
}
function pushAttribute(target, name, value) {
@@ -3535,26 +3560,24 @@ function pushStartForm(target, props, responseState) {
}
}
{
// Plain form actions support all the properties, so we have to emit them.
if (formAction !== null) {
pushAttribute(target, "action", formAction);
}
if (formAction !== null) {
pushAttribute(target, "action", formAction);
}
if (formEncType !== null) {
pushAttribute(target, "encType", formEncType);
}
if (formEncType !== null) {
pushAttribute(target, "encType", formEncType);
}
if (formMethod !== null) {
pushAttribute(target, "method", formMethod);
}
if (formMethod !== null) {
pushAttribute(target, "method", formMethod);
}
if (formTarget !== null) {
pushAttribute(target, "target", formTarget);
}
if (formTarget !== null) {
pushAttribute(target, "target", formTarget);
}
target.push(endOfStartTag);
pushInnerHTML(target, innerHTML, children);
if (typeof children === "string") {
@@ -3658,7 +3681,7 @@ function pushInput(target, props, responseState) {
}
}
pushFormActionAttribute(
var formData = pushFormActionAttribute(
target,
responseState,
formAction,
@@ -3712,7 +3735,9 @@ function pushInput(target, props, responseState) {
pushAttribute(target, "value", defaultValue);
}
target.push(endOfStartTagSelfClosing);
target.push(endOfStartTagSelfClosing); // We place any additional hidden form fields after the input.
pushAdditionalFormFields(target, formData);
return null;
}
@@ -3785,7 +3810,7 @@ function pushStartButton(target, props, responseState) {
}
}
pushFormActionAttribute(
var formData = pushFormActionAttribute(
target,
responseState,
formAction,
@@ -3794,7 +3819,9 @@ function pushStartButton(target, props, responseState) {
formTarget,
name
);
target.push(endOfStartTag);
target.push(endOfStartTag); // We place any additional hidden form fields we need to include inside the button itself.
pushAdditionalFormFields(target, formData);
pushInnerHTML(target, innerHTML, children);
if (typeof children === "string") {
compiled/facebook-www/ReactDOMServer-dev.modern.js
+67 -40
View File
@@ -19,7 +19,7 @@ if (__DEV__) {
var React = require("react");
var ReactDOM = require("react-dom");
var ReactVersion = "18.3.0-www-modern-938c86f0";
var ReactVersion = "18.3.0-www-modern-88959423";
// This refers to a WWW module.
var warningWWW = require("warning");
@@ -2840,7 +2840,7 @@ function pushStringAttribute(target, name, value) {
attributeEnd
);
}
} // Since this will likely be repeated a lot in the HTML, we use a more concise message
}
// than on the client and hopefully it's googleable.
stringToPrecomputedChunk(
@@ -2849,6 +2849,30 @@ stringToPrecomputedChunk(
"javascript:throw new Error('A React form was unexpectedly submitted.')"
)
);
var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
function pushAdditionalFormField(value, key) {
var target = this;
target.push(startHiddenInputChunk);
if (typeof value !== "string") {
throw new Error(
"File/Blob fields are not yet supported in progressive forms. " +
"It probably means you are closing over binary data or FormData in a Server Action."
);
}
pushStringAttribute(target, "name", key);
pushStringAttribute(target, "value", value);
target.push(endOfStartTagSelfClosing);
}
function pushAdditionalFormFields(target, formData) {
if (formData !== null) {
// $FlowFixMe[prop-missing]: FormData has forEach.
formData.forEach(pushAdditionalFormField, target);
}
}
function pushFormActionAttribute(
target,
@@ -2859,28 +2883,29 @@ function pushFormActionAttribute(
formTarget,
name
) {
{
// Plain form actions support all the properties, so we have to emit them.
if (name !== null) {
pushAttribute(target, "name", name);
}
var formData = null;
if (formAction !== null) {
pushAttribute(target, "formAction", formAction);
}
if (formEncType !== null) {
pushAttribute(target, "formEncType", formEncType);
}
if (formMethod !== null) {
pushAttribute(target, "formMethod", formMethod);
}
if (formTarget !== null) {
pushAttribute(target, "formTarget", formTarget);
}
if (name !== null) {
pushAttribute(target, "name", name);
}
if (formAction !== null) {
pushAttribute(target, "formAction", formAction);
}
if (formEncType !== null) {
pushAttribute(target, "formEncType", formEncType);
}
if (formMethod !== null) {
pushAttribute(target, "formMethod", formMethod);
}
if (formTarget !== null) {
pushAttribute(target, "formTarget", formTarget);
}
return formData;
}
function pushAttribute(target, name, value) {
@@ -3535,26 +3560,24 @@ function pushStartForm(target, props, responseState) {
}
}
{
// Plain form actions support all the properties, so we have to emit them.
if (formAction !== null) {
pushAttribute(target, "action", formAction);
}
if (formAction !== null) {
pushAttribute(target, "action", formAction);
}
if (formEncType !== null) {
pushAttribute(target, "encType", formEncType);
}
if (formEncType !== null) {
pushAttribute(target, "encType", formEncType);
}
if (formMethod !== null) {
pushAttribute(target, "method", formMethod);
}
if (formMethod !== null) {
pushAttribute(target, "method", formMethod);
}
if (formTarget !== null) {
pushAttribute(target, "target", formTarget);
}
if (formTarget !== null) {
pushAttribute(target, "target", formTarget);
}
target.push(endOfStartTag);
pushInnerHTML(target, innerHTML, children);
if (typeof children === "string") {
@@ -3658,7 +3681,7 @@ function pushInput(target, props, responseState) {
}
}
pushFormActionAttribute(
var formData = pushFormActionAttribute(
target,
responseState,
formAction,
@@ -3712,7 +3735,9 @@ function pushInput(target, props, responseState) {
pushAttribute(target, "value", defaultValue);
}
target.push(endOfStartTagSelfClosing);
target.push(endOfStartTagSelfClosing); // We place any additional hidden form fields after the input.
pushAdditionalFormFields(target, formData);
return null;
}
@@ -3785,7 +3810,7 @@ function pushStartButton(target, props, responseState) {
}
}
pushFormActionAttribute(
var formData = pushFormActionAttribute(
target,
responseState,
formAction,
@@ -3794,7 +3819,9 @@ function pushStartButton(target, props, responseState) {
formTarget,
name
);
target.push(endOfStartTag);
target.push(endOfStartTag); // We place any additional hidden form fields we need to include inside the button itself.
pushAdditionalFormFields(target, formData);
pushInnerHTML(target, innerHTML, children);
if (typeof children === "string") {
compiled/facebook-www/ReactDOMServer-prod.classic.js
+76 -65
View File
@@ -294,6 +294,13 @@ function pushStringAttribute(target, name, value) {
escapeTextForBrowser(
"javascript:throw new Error('A React form was unexpectedly submitted.')"
);
function pushAdditionalFormField(value, key) {
this.push('<input type="hidden"');
if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
pushStringAttribute(this, "name", key);
pushStringAttribute(this, "value", value);
this.push("/>");
}
function pushFormActionAttribute(
target,
responseState,
@@ -308,6 +315,7 @@ function pushFormActionAttribute(
null !== formEncType && pushAttribute(target, "formEncType", formEncType);
null !== formMethod && pushAttribute(target, "formMethod", formMethod);
null !== formTarget && pushAttribute(target, "formTarget", formTarget);
return null;
}
function pushAttribute(target, name, value) {
switch (name) {
@@ -845,14 +853,15 @@ function pushStartInstance(
return null;
case "input":
target.push(startChunkForTag("input"));
var formTarget =
(propValue$jscomp$0 =
selected =
resources =
textEmbedded =
null),
defaultValue = (propKey$jscomp$0 = null);
propKey = propKey$jscomp$1 = null;
var name = null,
formEncType = (propKey$jscomp$0 = null);
propValue$jscomp$0 =
selected =
resources =
textEmbedded =
propKey =
propKey$jscomp$1 =
null;
for (propValue in props)
if (hasOwnProperty.call(props, propValue)) {
var propValue$jscomp$1 = props[propValue];
@@ -862,58 +871,60 @@ function pushStartInstance(
case "dangerouslySetInnerHTML":
throw Error(formatProdErrorMessage(399, "input"));
case "name":
textEmbedded = propValue$jscomp$1;
name = propValue$jscomp$1;
break;
case "formAction":
resources = propValue$jscomp$1;
propKey$jscomp$0 = propValue$jscomp$1;
break;
case "formEncType":
selected = propValue$jscomp$1;
formEncType = propValue$jscomp$1;
break;
case "formMethod":
propValue$jscomp$0 = propValue$jscomp$1;
break;
case "formTarget":
formTarget = propValue$jscomp$1;
break;
case "defaultChecked":
propKey = propValue$jscomp$1;
break;
case "defaultValue":
defaultValue = propValue$jscomp$1;
break;
case "checked":
propKey$jscomp$1 = propValue$jscomp$1;
break;
case "formTarget":
propKey = propValue$jscomp$1;
break;
case "defaultChecked":
propValue$jscomp$0 = propValue$jscomp$1;
break;
case "defaultValue":
resources = propValue$jscomp$1;
break;
case "checked":
selected = propValue$jscomp$1;
break;
case "value":
propKey$jscomp$0 = propValue$jscomp$1;
textEmbedded = propValue$jscomp$1;
break;
default:
pushAttribute(target, propValue, propValue$jscomp$1);
}
}
pushFormActionAttribute(
props = pushFormActionAttribute(
target,
responseState,
resources,
selected,
propValue$jscomp$0,
formTarget,
textEmbedded
propKey$jscomp$0,
formEncType,
propKey$jscomp$1,
propKey,
name
);
null !== propKey$jscomp$1
? pushBooleanAttribute(target, "checked", propKey$jscomp$1)
: null !== propKey && pushBooleanAttribute(target, "checked", propKey);
null !== propKey$jscomp$0
? pushAttribute(target, "value", propKey$jscomp$0)
: null !== defaultValue && pushAttribute(target, "value", defaultValue);
null !== selected
? pushBooleanAttribute(target, "checked", selected)
: null !== propValue$jscomp$0 &&
pushBooleanAttribute(target, "checked", propValue$jscomp$0);
null !== textEmbedded
? pushAttribute(target, "value", textEmbedded)
: null !== resources && pushAttribute(target, "value", resources);
target.push("/>");
null !== props && props.forEach(pushAdditionalFormField, target);
return null;
case "button":
target.push(startChunkForTag("button"));
defaultValue =
formEncType =
propKey$jscomp$0 =
formTarget =
name =
selected =
resources =
propValue =
@@ -939,27 +950,28 @@ function pushStartInstance(
selected = propKey$jscomp$1;
break;
case "formEncType":
formTarget = propKey$jscomp$1;
name = propKey$jscomp$1;
break;
case "formMethod":
propKey$jscomp$0 = propKey$jscomp$1;
break;
case "formTarget":
defaultValue = propKey$jscomp$1;
formEncType = propKey$jscomp$1;
break;
default:
pushAttribute(target, propValue$jscomp$0, propKey$jscomp$1);
}
pushFormActionAttribute(
props = pushFormActionAttribute(
target,
responseState,
selected,
formTarget,
name,
propKey$jscomp$0,
defaultValue,
formEncType,
resources
);
target.push(">");
null !== props && props.forEach(pushAdditionalFormField, target);
pushInnerHTML(target, propValue, textEmbedded);
"string" === typeof textEmbedded
? (target.push(escapeTextForBrowser(textEmbedded)), (target = null))
@@ -974,12 +986,12 @@ function pushStartInstance(
textEmbedded =
responseState =
null;
for (formTarget in props)
for (name in props)
if (
hasOwnProperty.call(props, formTarget) &&
((propKey$jscomp$0 = props[formTarget]), null != propKey$jscomp$0)
hasOwnProperty.call(props, name) &&
((propKey$jscomp$0 = props[name]), null != propKey$jscomp$0)
)
switch (formTarget) {
switch (name) {
case "children":
responseState = propKey$jscomp$0;
break;
@@ -999,7 +1011,7 @@ function pushStartInstance(
propValue$jscomp$0 = propKey$jscomp$0;
break;
default:
pushAttribute(target, formTarget, propKey$jscomp$0);
pushAttribute(target, name, propKey$jscomp$0);
}
null !== propValue && pushAttribute(target, "action", propValue);
null !== resources && pushAttribute(target, "encType", resources);
@@ -1120,12 +1132,12 @@ function pushStartInstance(
) {
target.push(startChunkForTag("style"));
textEmbedded = responseState = null;
for (defaultValue in props)
for (formEncType in props)
if (
hasOwnProperty.call(props, defaultValue) &&
((propValue = props[defaultValue]), null != propValue)
hasOwnProperty.call(props, formEncType) &&
((propValue = props[formEncType]), null != propValue)
)
switch (defaultValue) {
switch (formEncType) {
case "children":
responseState = propValue;
break;
@@ -1133,7 +1145,7 @@ function pushStartInstance(
textEmbedded = propValue;
break;
default:
pushAttribute(target, defaultValue, propValue);
pushAttribute(target, formEncType, propValue);
}
target.push(">");
props = Array.isArray(responseState)
@@ -1151,24 +1163,23 @@ function pushStartInstance(
target = null;
} else {
propValue$jscomp$0 = "[style]" + propValue;
formTarget = resources.stylesMap.get(propValue$jscomp$0);
if (!formTarget) {
(formTarget = resources.stylePrecedences.get(responseState))
? formTarget.props.hrefs.push(propValue)
: ((formTarget = {
name = resources.stylesMap.get(propValue$jscomp$0);
if (!name) {
(name = resources.stylePrecedences.get(responseState))
? name.props.hrefs.push(propValue)
: ((name = {
type: "style",
chunks: [],
state: 0,
props: { precedence: responseState, hrefs: [propValue] }
}),
resources.stylePrecedences.set(responseState, formTarget),
resources.stylePrecedences.set(responseState, name),
(propValue = new Set()),
propValue.add(formTarget),
propValue.add(name),
resources.precedences.set(responseState, propValue));
resources.stylesMap.set(propValue$jscomp$0, formTarget);
resources.boundaryResources &&
resources.boundaryResources.add(formTarget);
responseState = formTarget.chunks;
resources.stylesMap.set(propValue$jscomp$0, name);
resources.boundaryResources && resources.boundaryResources.add(name);
responseState = name.chunks;
resources = propValue = null;
for (selected in props)
if (
@@ -3991,4 +4002,4 @@ exports.renderToString = function (children, options) {
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
);
};
exports.version = "18.3.0-www-classic-ad0d70c8";
exports.version = "18.3.0-www-classic-3fbcb92a";
compiled/facebook-www/ReactDOMServer-prod.modern.js
+76 -65
View File
@@ -293,6 +293,13 @@ function pushStringAttribute(target, name, value) {
escapeTextForBrowser(
"javascript:throw new Error('A React form was unexpectedly submitted.')"
);
function pushAdditionalFormField(value, key) {
this.push('<input type="hidden"');
if ("string" !== typeof value) throw Error(formatProdErrorMessage(480));
pushStringAttribute(this, "name", key);
pushStringAttribute(this, "value", value);
this.push("/>");
}
function pushFormActionAttribute(
target,
responseState,
@@ -307,6 +314,7 @@ function pushFormActionAttribute(
null !== formEncType && pushAttribute(target, "formEncType", formEncType);
null !== formMethod && pushAttribute(target, "formMethod", formMethod);
null !== formTarget && pushAttribute(target, "formTarget", formTarget);
return null;
}
function pushAttribute(target, name, value) {
switch (name) {
@@ -844,14 +852,15 @@ function pushStartInstance(
return null;
case "input":
target.push(startChunkForTag("input"));
var formTarget =
(propValue$jscomp$0 =
selected =
resources =
textEmbedded =
null),
defaultValue = (propKey$jscomp$0 = null);
propKey = propKey$jscomp$1 = null;
var name = null,
formEncType = (propKey$jscomp$0 = null);
propValue$jscomp$0 =
selected =
resources =
textEmbedded =
propKey =
propKey$jscomp$1 =
null;
for (propValue in props)
if (hasOwnProperty.call(props, propValue)) {
var propValue$jscomp$1 = props[propValue];
@@ -861,58 +870,60 @@ function pushStartInstance(
case "dangerouslySetInnerHTML":
throw Error(formatProdErrorMessage(399, "input"));
case "name":
textEmbedded = propValue$jscomp$1;
name = propValue$jscomp$1;
break;
case "formAction":
resources = propValue$jscomp$1;
propKey$jscomp$0 = propValue$jscomp$1;
break;
case "formEncType":
selected = propValue$jscomp$1;
formEncType = propValue$jscomp$1;
break;
case "formMethod":
propValue$jscomp$0 = propValue$jscomp$1;
break;
case "formTarget":
formTarget = propValue$jscomp$1;
break;
case "defaultChecked":
propKey = propValue$jscomp$1;
break;
case "defaultValue":
defaultValue = propValue$jscomp$1;
break;
case "checked":
propKey$jscomp$1 = propValue$jscomp$1;
break;
case "formTarget":
propKey = propValue$jscomp$1;
break;
case "defaultChecked":
propValue$jscomp$0 = propValue$jscomp$1;
break;
case "defaultValue":
resources = propValue$jscomp$1;
break;
case "checked":
selected = propValue$jscomp$1;
break;
case "value":
propKey$jscomp$0 = propValue$jscomp$1;
textEmbedded = propValue$jscomp$1;
break;
default:
pushAttribute(target, propValue, propValue$jscomp$1);
}
}
pushFormActionAttribute(
props = pushFormActionAttribute(
target,
responseState,
resources,
selected,
propValue$jscomp$0,
formTarget,
textEmbedded
propKey$jscomp$0,
formEncType,
propKey$jscomp$1,
propKey,
name
);
null !== propKey$jscomp$1
? pushBooleanAttribute(target, "checked", propKey$jscomp$1)
: null !== propKey && pushBooleanAttribute(target, "checked", propKey);
null !== propKey$jscomp$0
? pushAttribute(target, "value", propKey$jscomp$0)
: null !== defaultValue && pushAttribute(target, "value", defaultValue);
null !== selected
? pushBooleanAttribute(target, "checked", selected)
: null !== propValue$jscomp$0 &&
pushBooleanAttribute(target, "checked", propValue$jscomp$0);
null !== textEmbedded
? pushAttribute(target, "value", textEmbedded)
: null !== resources && pushAttribute(target, "value", resources);
target.push("/>");
null !== props && props.forEach(pushAdditionalFormField, target);
return null;
case "button":
target.push(startChunkForTag("button"));
defaultValue =
formEncType =
propKey$jscomp$0 =
formTarget =
name =
selected =
resources =
propValue =
@@ -938,27 +949,28 @@ function pushStartInstance(
selected = propKey$jscomp$1;
break;
case "formEncType":
formTarget = propKey$jscomp$1;
name = propKey$jscomp$1;
break;
case "formMethod":
propKey$jscomp$0 = propKey$jscomp$1;
break;
case "formTarget":
defaultValue = propKey$jscomp$1;
formEncType = propKey$jscomp$1;
break;
default:
pushAttribute(target, propValue$jscomp$0, propKey$jscomp$1);
}
pushFormActionAttribute(
props = pushFormActionAttribute(
target,
responseState,
selected,
formTarget,
name,
propKey$jscomp$0,
defaultValue,
formEncType,
resources
);
target.push(">");
null !== props && props.forEach(pushAdditionalFormField, target);
pushInnerHTML(target, propValue, textEmbedded);
"string" === typeof textEmbedded
? (target.push(escapeTextForBrowser(textEmbedded)), (target = null))
@@ -973,12 +985,12 @@ function pushStartInstance(
textEmbedded =
responseState =
null;
for (formTarget in props)
for (name in props)
if (
hasOwnProperty.call(props, formTarget) &&
((propKey$jscomp$0 = props[formTarget]), null != propKey$jscomp$0)
hasOwnProperty.call(props, name) &&
((propKey$jscomp$0 = props[name]), null != propKey$jscomp$0)
)
switch (formTarget) {
switch (name) {
case "children":
responseState = propKey$jscomp$0;
break;
@@ -998,7 +1010,7 @@ function pushStartInstance(
propValue$jscomp$0 = propKey$jscomp$0;
break;
default:
pushAttribute(target, formTarget, propKey$jscomp$0);
pushAttribute(target, name, propKey$jscomp$0);
}
null !== propValue && pushAttribute(target, "action", propValue);
null !== resources && pushAttribute(target, "encType", resources);
@@ -1119,12 +1131,12 @@ function pushStartInstance(
) {
target.push(startChunkForTag("style"));
textEmbedded = responseState = null;
for (defaultValue in props)
for (formEncType in props)
if (
hasOwnProperty.call(props, defaultValue) &&
((propValue = props[defaultValue]), null != propValue)
hasOwnProperty.call(props, formEncType) &&
((propValue = props[formEncType]), null != propValue)
)
switch (defaultValue) {
switch (formEncType) {
case "children":
responseState = propValue;
break;
@@ -1132,7 +1144,7 @@ function pushStartInstance(
textEmbedded = propValue;
break;
default:
pushAttribute(target, defaultValue, propValue);
pushAttribute(target, formEncType, propValue);
}
target.push(">");
props = Array.isArray(responseState)
@@ -1150,24 +1162,23 @@ function pushStartInstance(
target = null;
} else {
propValue$jscomp$0 = "[style]" + propValue;
formTarget = resources.stylesMap.get(propValue$jscomp$0);
if (!formTarget) {
(formTarget = resources.stylePrecedences.get(responseState))
? formTarget.props.hrefs.push(propValue)
: ((formTarget = {
name = resources.stylesMap.get(propValue$jscomp$0);
if (!name) {
(name = resources.stylePrecedences.get(responseState))
? name.props.hrefs.push(propValue)
: ((name = {
type: "style",
chunks: [],
state: 0,
props: { precedence: responseState, hrefs: [propValue] }
}),
resources.stylePrecedences.set(responseState, formTarget),
resources.stylePrecedences.set(responseState, name),
(propValue = new Set()),
propValue.add(formTarget),
propValue.add(name),
resources.precedences.set(responseState, propValue));
resources.stylesMap.set(propValue$jscomp$0, formTarget);
resources.boundaryResources &&
resources.boundaryResources.add(formTarget);
responseState = formTarget.chunks;
resources.stylesMap.set(propValue$jscomp$0, name);
resources.boundaryResources && resources.boundaryResources.add(name);
responseState = name.chunks;
resources = propValue = null;
for (selected in props)
if (
@@ -3889,4 +3900,4 @@ exports.renderToString = function (children, options) {
'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
);
};
exports.version = "18.3.0-www-modern-07269b39";
exports.version = "18.3.0-www-modern-6ee2853c";
compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
+66 -39
View File
@@ -2847,7 +2847,7 @@ function pushStringAttribute(target, name, value) {
attributeEnd
);
}
} // Since this will likely be repeated a lot in the HTML, we use a more concise message
}
// than on the client and hopefully it's googleable.
stringToPrecomputedChunk(
@@ -2856,6 +2856,30 @@ stringToPrecomputedChunk(
"javascript:throw new Error('A React form was unexpectedly submitted.')"
)
);
var startHiddenInputChunk = stringToPrecomputedChunk('<input type="hidden"');
function pushAdditionalFormField(value, key) {
var target = this;
target.push(startHiddenInputChunk);
if (typeof value !== "string") {
throw new Error(
"File/Blob fields are not yet supported in progressive forms. " +
"It probably means you are closing over binary data or FormData in a Server Action."
);
}
pushStringAttribute(target, "name", key);
pushStringAttribute(target, "value", value);
target.push(endOfStartTagSelfClosing);
}
function pushAdditionalFormFields(target, formData) {
if (formData !== null) {
// $FlowFixMe[prop-missing]: FormData has forEach.
formData.forEach(pushAdditionalFormField, target);
}
}
function pushFormActionAttribute(
target,
@@ -2866,28 +2890,29 @@ function pushFormActionAttribute(
formTarget,
name
) {
{
// Plain form actions support all the properties, so we have to emit them.
if (name !== null) {
pushAttribute(target, "name", name);
}
var formData = null;
if (formAction !== null) {
pushAttribute(target, "formAction", formAction);
}
if (formEncType !== null) {
pushAttribute(target, "formEncType", formEncType);
}
if (formMethod !== null) {
pushAttribute(target, "formMethod", formMethod);
}
if (formTarget !== null) {
pushAttribute(target, "formTarget", formTarget);
}
if (name !== null) {
pushAttribute(target, "name", name);
}
if (formAction !== null) {
pushAttribute(target, "formAction", formAction);
}
if (formEncType !== null) {
pushAttribute(target, "formEncType", formEncType);
}
if (formMethod !== null) {
pushAttribute(target, "formMethod", formMethod);
}
if (formTarget !== null) {
pushAttribute(target, "formTarget", formTarget);
}
return formData;
}
function pushAttribute(target, name, value) {
@@ -3542,26 +3567,24 @@ function pushStartForm(target, props, responseState) {
}
}
{
// Plain form actions support all the properties, so we have to emit them.
if (formAction !== null) {
pushAttribute(target, "action", formAction);
}
if (formAction !== null) {
pushAttribute(target, "action", formAction);
}
if (formEncType !== null) {
pushAttribute(target, "encType", formEncType);
}
if (formEncType !== null) {
pushAttribute(target, "encType", formEncType);
}
if (formMethod !== null) {
pushAttribute(target, "method", formMethod);
}
if (formMethod !== null) {
pushAttribute(target, "method", formMethod);
}
if (formTarget !== null) {
pushAttribute(target, "target", formTarget);
}
if (formTarget !== null) {
pushAttribute(target, "target", formTarget);
}
target.push(endOfStartTag);
pushInnerHTML(target, innerHTML, children);
if (typeof children === "string") {
@@ -3665,7 +3688,7 @@ function pushInput(target, props, responseState) {
}
}
pushFormActionAttribute(
var formData = pushFormActionAttribute(
target,
responseState,
formAction,
@@ -3719,7 +3742,9 @@ function pushInput(target, props, responseState) {
pushAttribute(target, "value", defaultValue);
}
target.push(endOfStartTagSelfClosing);
target.push(endOfStartTagSelfClosing); // We place any additional hidden form fields after the input.
pushAdditionalFormFields(target, formData);
return null;
}
@@ -3792,7 +3817,7 @@ function pushStartButton(target, props, responseState) {
}
}
pushFormActionAttribute(
var formData = pushFormActionAttribute(
target,
responseState,
formAction,
@@ -3801,7 +3826,9 @@ function pushStartButton(target, props, responseState) {
formTarget,
name
);
target.push(endOfStartTag);
target.push(endOfStartTag); // We place any additional hidden form fields we need to include inside the button itself.
pushAdditionalFormFields(target, formData);
pushInnerHTML(target, innerHTML, children);
if (typeof children === "string") {
compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
+78 -64
View File
@@ -294,6 +294,16 @@ function pushStringAttribute(target, name, value) {
escapeTextForBrowser(
"javascript:throw new Error('A React form was unexpectedly submitted.')"
);
function pushAdditionalFormField(value, key) {
this.push('<input type="hidden"');
if ("string" !== typeof value)
throw Error(
"File/Blob fields are not yet supported in progressive forms. It probably means you are closing over binary data or FormData in a Server Action."
);
pushStringAttribute(this, "name", key);
pushStringAttribute(this, "value", value);
this.push("/>");
}
function pushFormActionAttribute(
target,
responseState,
@@ -308,6 +318,7 @@ function pushFormActionAttribute(
null !== formEncType && pushAttribute(target, "formEncType", formEncType);
null !== formMethod && pushAttribute(target, "formMethod", formMethod);
null !== formTarget && pushAttribute(target, "formTarget", formTarget);
return null;
}
function pushAttribute(target, name, value) {
switch (name) {
@@ -859,14 +870,15 @@ function pushStartInstance(
return null;
case "input":
target.push(startChunkForTag("input"));
var formTarget =
(propValue$jscomp$0 =
selected =
resources =
textEmbedded =
null),
defaultValue = (propKey$jscomp$0 = null);
propKey = propKey$jscomp$1 = null;
var name = null,
formEncType = (propKey$jscomp$0 = null);
propValue$jscomp$0 =
selected =
resources =
textEmbedded =
propKey =
propKey$jscomp$1 =
null;
for (propValue in props)
if (hasOwnProperty.call(props, propValue)) {
var propValue$jscomp$1 = props[propValue];
@@ -878,58 +890,60 @@ function pushStartInstance(
"input is a self-closing tag and must neither have `children` nor use `dangerouslySetInnerHTML`."
);
case "name":
textEmbedded = propValue$jscomp$1;
name = propValue$jscomp$1;
break;
case "formAction":
resources = propValue$jscomp$1;
propKey$jscomp$0 = propValue$jscomp$1;
break;
case "formEncType":
selected = propValue$jscomp$1;
formEncType = propValue$jscomp$1;
break;
case "formMethod":
propValue$jscomp$0 = propValue$jscomp$1;
break;
case "formTarget":
formTarget = propValue$jscomp$1;
break;
case "defaultChecked":
propKey = propValue$jscomp$1;
break;
case "defaultValue":
defaultValue = propValue$jscomp$1;
break;
case "checked":
propKey$jscomp$1 = propValue$jscomp$1;
break;
case "formTarget":
propKey = propValue$jscomp$1;
break;
case "defaultChecked":
propValue$jscomp$0 = propValue$jscomp$1;
break;
case "defaultValue":
resources = propValue$jscomp$1;
break;
case "checked":
selected = propValue$jscomp$1;
break;
case "value":
propKey$jscomp$0 = propValue$jscomp$1;
textEmbedded = propValue$jscomp$1;
break;
default:
pushAttribute(target, propValue, propValue$jscomp$1);
}
}
pushFormActionAttribute(
props = pushFormActionAttribute(
target,
responseState,
resources,
selected,
propValue$jscomp$0,
formTarget,
textEmbedded
propKey$jscomp$0,
formEncType,
propKey$jscomp$1,
propKey,
name
);
null !== propKey$jscomp$1
? pushBooleanAttribute(target, "checked", propKey$jscomp$1)
: null !== propKey && pushBooleanAttribute(target, "checked", propKey);
null !== propKey$jscomp$0
? pushAttribute(target, "value", propKey$jscomp$0)
: null !== defaultValue && pushAttribute(target, "value", defaultValue);
null !== selected
? pushBooleanAttribute(target, "checked", selected)
: null !== propValue$jscomp$0 &&
pushBooleanAttribute(target, "checked", propValue$jscomp$0);
null !== textEmbedded
? pushAttribute(target, "value", textEmbedded)
: null !== resources && pushAttribute(target, "value", resources);
target.push("/>");
null !== props && props.forEach(pushAdditionalFormField, target);
return null;
case "button":
target.push(startChunkForTag("button"));
defaultValue =
formEncType =
propKey$jscomp$0 =
formTarget =
name =
selected =
resources =
propValue =
@@ -955,27 +969,28 @@ function pushStartInstance(
selected = propKey$jscomp$1;
break;
case "formEncType":
formTarget = propKey$jscomp$1;
name = propKey$jscomp$1;
break;
case "formMethod":
propKey$jscomp$0 = propKey$jscomp$1;
break;
case "formTarget":
defaultValue = propKey$jscomp$1;
formEncType = propKey$jscomp$1;
break;
default:
pushAttribute(target, propValue$jscomp$0, propKey$jscomp$1);
}
pushFormActionAttribute(
props = pushFormActionAttribute(
target,
responseState,
selected,
formTarget,
name,
propKey$jscomp$0,
defaultValue,
formEncType,
resources
);
target.push(">");
null !== props && props.forEach(pushAdditionalFormField, target);
pushInnerHTML(target, propValue, textEmbedded);
"string" === typeof textEmbedded
? (target.push(escapeTextForBrowser(textEmbedded)), (target = null))
@@ -990,12 +1005,12 @@ function pushStartInstance(
textEmbedded =
responseState =
null;
for (formTarget in props)
for (name in props)
if (
hasOwnProperty.call(props, formTarget) &&
((propKey$jscomp$0 = props[formTarget]), null != propKey$jscomp$0)
hasOwnProperty.call(props, name) &&
((propKey$jscomp$0 = props[name]), null != propKey$jscomp$0)
)
switch (formTarget) {
switch (name) {
case "children":
responseState = propKey$jscomp$0;
break;
@@ -1015,7 +1030,7 @@ function pushStartInstance(
propValue$jscomp$0 = propKey$jscomp$0;
break;
default:
pushAttribute(target, formTarget, propKey$jscomp$0);
pushAttribute(target, name, propKey$jscomp$0);
}
null !== propValue && pushAttribute(target, "action", propValue);
null !== resources && pushAttribute(target, "encType", resources);
@@ -1138,12 +1153,12 @@ function pushStartInstance(
) {
target.push(startChunkForTag("style"));
textEmbedded = responseState = null;
for (defaultValue in props)
for (formEncType in props)
if (
hasOwnProperty.call(props, defaultValue) &&
((propValue = props[defaultValue]), null != propValue)
hasOwnProperty.call(props, formEncType) &&
((propValue = props[formEncType]), null != propValue)
)
switch (defaultValue) {
switch (formEncType) {
case "children":
responseState = propValue;
break;
@@ -1151,7 +1166,7 @@ function pushStartInstance(
textEmbedded = propValue;
break;
default:
pushAttribute(target, defaultValue, propValue);
pushAttribute(target, formEncType, propValue);
}
target.push(">");
props = Array.isArray(responseState)
@@ -1169,24 +1184,23 @@ function pushStartInstance(
target = null;
} else {
propValue$jscomp$0 = "[style]" + propValue;
formTarget = resources.stylesMap.get(propValue$jscomp$0);
if (!formTarget) {
(formTarget = resources.stylePrecedences.get(responseState))
? formTarget.props.hrefs.push(propValue)
: ((formTarget = {
name = resources.stylesMap.get(propValue$jscomp$0);
if (!name) {
(name = resources.stylePrecedences.get(responseState))
? name.props.hrefs.push(propValue)
: ((name = {
type: "style",
chunks: [],
state: 0,
props: { precedence: responseState, hrefs: [propValue] }
}),
resources.stylePrecedences.set(responseState, formTarget),
resources.stylePrecedences.set(responseState, name),
(propValue = new Set()),
propValue.add(formTarget),
propValue.add(name),
resources.precedences.set(responseState, propValue));
resources.stylesMap.set(propValue$jscomp$0, formTarget);
resources.boundaryResources &&
resources.boundaryResources.add(formTarget);
responseState = formTarget.chunks;
resources.stylesMap.set(propValue$jscomp$0, name);
resources.boundaryResources && resources.boundaryResources.add(name);
responseState = name.chunks;
resources = propValue = null;
for (selected in props)
if (