From 70e7e58c379a68ac3b73628bae8abb6cf54aacb1 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Thu, 27 Oct 2022 17:33:47 -0700 Subject: [PATCH] Update react next channel (#42021) Update react channel for `fetch` patching updates x-ref: [slack thread](https://vercel.slack.com/archives/C03ENM5HB4K/p1666802006931969?thread_ts=1666799939.726859&cid=C03ENM5HB4K) --- package.json | 6 +- ...t-dom-server-legacy.browser.development.js | 69 ++++---- ...om-server-legacy.browser.production.min.js | 20 ++- ...eact-dom-server-legacy.node.development.js | 69 ++++---- ...t-dom-server-legacy.node.production.min.js | 20 ++- ...t-dom-server-rendering-stub.development.js | 2 +- ...om-server-rendering-stub.production.min.js | 2 +- .../react-dom-server.browser.development.js | 68 ++++---- ...react-dom-server.browser.production.min.js | 21 +-- .../cjs/react-dom-server.node.development.js | 68 ++++---- .../react-dom-server.node.production.min.js | 23 +-- .../react-dom/cjs/react-dom.development.js | 40 +++-- .../react-dom/cjs/react-dom.production.min.js | 11 +- .../react-dom/cjs/react-dom.profiling.min.js | 11 +- packages/next/compiled/react-dom/package.json | 6 +- .../compiled/react/cjs/react.development.js | 2 +- .../react/cjs/react.production.min.js | 2 +- .../cjs/react.shared-subset.development.js | 159 +++++++++--------- .../cjs/react.shared-subset.production.min.js | 32 ++-- packages/next/compiled/react/package.json | 2 +- pnpm-lock.yaml | 36 ++-- 21 files changed, 363 insertions(+), 306 deletions(-) diff --git a/package.json b/package.json index 3d0a2a0a7eb48..11ae75860fb41 100644 --- a/package.json +++ b/package.json @@ -178,11 +178,11 @@ "random-seed": "0.3.0", "react": "18.2.0", "react-17": "npm:react@17.0.2", - "react-builtin": "npm:react@18.3.0-next-d925a8d0b-20221024", + "react-builtin": "npm:react@18.3.0-next-28a574ea8-20221027", "react-dom": "18.2.0", "react-dom-17": "npm:react-dom@17.0.2", - "react-dom-builtin": "npm:react-dom@18.3.0-next-d925a8d0b-20221024", - "react-server-dom-webpack": "18.3.0-next-d925a8d0b-20221024", + "react-dom-builtin": "npm:react-dom@18.3.0-next-28a574ea8-20221027", + "react-server-dom-webpack": "18.3.0-next-28a574ea8-20221027", "react-ssr-prepass": "1.0.8", "react-virtualized": "9.22.3", "relay-compiler": "13.0.2", diff --git a/packages/next/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js b/packages/next/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js index edd848dec76b0..21db6b765d4ff 100644 --- a/packages/next/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js +++ b/packages/next/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js @@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") { var React = require('react'); var ReactDOM = require('react-dom'); -var ReactVersion = '18.3.0-next-d925a8d0b-20221024'; +var ReactVersion = '18.3.0-next-28a574ea8-20221027'; var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; @@ -2710,7 +2710,11 @@ function resourcesFromLink(props) { } if (props.onLoad || props.onError) { - return false; + // When a link has these props we can't treat it is a Resource but if we rendered it on the + // server it would look like a Resource in the rendered html (the onLoad/onError aren't emitted) + // Instead we expect the client to insert them rather than hydrate them which also guarantees + // that the onLoad and onError won't fire before the event handlers are attached + return true; } var sizes = typeof props.sizes === 'string' ? props.sizes : ''; @@ -2938,52 +2942,56 @@ var HTML_TABLE_ROW_MODE = 6; var HTML_COLGROUP_MODE = 7; // We have a greater than HTML_TABLE_MODE check elsewhere. If you add more cases here, make sure it // still makes sense -function createFormatContext(insertionMode, selectedValue) { +function createFormatContext(insertionMode, selectedValue, noscriptTagInScope) { return { insertionMode: insertionMode, - selectedValue: selectedValue + selectedValue: selectedValue, + noscriptTagInScope: noscriptTagInScope }; } function getChildFormatContext(parentContext, type, props) { switch (type) { + case 'noscript': + return createFormatContext(HTML_MODE, null, true); + case 'select': - return createFormatContext(HTML_MODE, props.value != null ? props.value : props.defaultValue); + return createFormatContext(HTML_MODE, props.value != null ? props.value : props.defaultValue, parentContext.noscriptTagInScope); case 'svg': - return createFormatContext(SVG_MODE, null); + return createFormatContext(SVG_MODE, null, parentContext.noscriptTagInScope); case 'math': - return createFormatContext(MATHML_MODE, null); + return createFormatContext(MATHML_MODE, null, parentContext.noscriptTagInScope); case 'foreignObject': - return createFormatContext(HTML_MODE, null); + return createFormatContext(HTML_MODE, null, parentContext.noscriptTagInScope); // Table parents are special in that their children can only be created at all if they're // wrapped in a table parent. So we need to encode that we're entering this mode. case 'table': - return createFormatContext(HTML_TABLE_MODE, null); + return createFormatContext(HTML_TABLE_MODE, null, parentContext.noscriptTagInScope); case 'thead': case 'tbody': case 'tfoot': - return createFormatContext(HTML_TABLE_BODY_MODE, null); + return createFormatContext(HTML_TABLE_BODY_MODE, null, parentContext.noscriptTagInScope); case 'colgroup': - return createFormatContext(HTML_COLGROUP_MODE, null); + return createFormatContext(HTML_COLGROUP_MODE, null, parentContext.noscriptTagInScope); case 'tr': - return createFormatContext(HTML_TABLE_ROW_MODE, null); + return createFormatContext(HTML_TABLE_ROW_MODE, null, parentContext.noscriptTagInScope); } if (parentContext.insertionMode >= HTML_TABLE_MODE) { // Whatever tag this was, it wasn't a table parent or other special parent, so we must have // entered plain HTML again. - return createFormatContext(HTML_MODE, null); + return createFormatContext(HTML_MODE, null, parentContext.noscriptTagInScope); } if (parentContext.insertionMode === ROOT_HTML_MODE) { // We've emitted the root and is now in plain HTML mode. - return createFormatContext(HTML_MODE, null); + return createFormatContext(HTML_MODE, null, parentContext.noscriptTagInScope); } return parentContext; @@ -3663,8 +3671,8 @@ function pushStartTextArea(target, props, responseState) { return null; } -function pushBase(target, props, responseState, textEmbedded) { - if ( resourcesFromElement('base', props)) { +function pushBase(target, props, responseState, textEmbedded, noscriptTagInScope) { + if ( !noscriptTagInScope && resourcesFromElement('base', props)) { if (textEmbedded) { // This link follows text but we aren't writing a tag. while not as efficient as possible we need // to be safe and assume text will follow by inserting a textSeparator @@ -3679,8 +3687,8 @@ function pushBase(target, props, responseState, textEmbedded) { return pushSelfClosing(target, props, 'base', responseState); } -function pushMeta(target, props, responseState, textEmbedded) { - if ( resourcesFromElement('meta', props)) { +function pushMeta(target, props, responseState, textEmbedded, noscriptTagInScope) { + if ( !noscriptTagInScope && resourcesFromElement('meta', props)) { if (textEmbedded) { // This link follows text but we aren't writing a tag. while not as efficient as possible we need // to be safe and assume text will follow by inserting a textSeparator @@ -3695,8 +3703,8 @@ function pushMeta(target, props, responseState, textEmbedded) { return pushSelfClosing(target, props, 'meta', responseState); } -function pushLink(target, props, responseState, textEmbedded) { - if ( resourcesFromLink(props)) { +function pushLink(target, props, responseState, textEmbedded, noscriptTagInScope) { + if ( !noscriptTagInScope && resourcesFromLink(props)) { if (textEmbedded) { // This link follows text but we aren't writing a tag. while not as efficient as possible we need // to be safe and assume text will follow by inserting a textSeparator @@ -3805,7 +3813,7 @@ function pushStartMenuItem(target, props, responseState) { return null; } -function pushTitle(target, props, responseState) { +function pushTitle(target, props, responseState, noscriptTagInScope) { { var children = props.children; var childForValidation = Array.isArray(children) && children.length < 2 ? children[0] || null : children; @@ -3819,7 +3827,7 @@ function pushTitle(target, props, responseState) { } } - if ( resourcesFromElement('title', props)) { + if ( !noscriptTagInScope && resourcesFromElement('title', props)) { // We have converted this link exclusively to a resource and no longer // need to emit it return null; @@ -3884,8 +3892,8 @@ function pushStartHtml(target, preamble, props, tag, responseState, formatContex return pushStartGenericElement(target, props, tag, responseState); } -function pushScript(target, props, responseState, textEmbedded) { - if ( resourcesFromScript(props)) { +function pushScript(target, props, responseState, textEmbedded, noscriptTagInScope) { + if ( !noscriptTagInScope && resourcesFromScript(props)) { if (textEmbedded) { // This link follows text but we aren't writing a tag. while not as efficient as possible we need // to be safe and assume text will follow by inserting a textSeparator @@ -4170,19 +4178,19 @@ function pushStartInstance(target, preamble, type, props, responseState, formatC return pushStartMenuItem(target, props, responseState); case 'title': - return pushTitle(target, props, responseState) ; + return pushTitle(target, props, responseState, formatContext.noscriptTagInScope) ; case 'link': - return pushLink(target, props, responseState, textEmbedded); + return pushLink(target, props, responseState, textEmbedded, formatContext.noscriptTagInScope); case 'script': - return pushScript(target, props, responseState, textEmbedded) ; + return pushScript(target, props, responseState, textEmbedded, formatContext.noscriptTagInScope) ; case 'meta': - return pushMeta(target, props, responseState, textEmbedded); + return pushMeta(target, props, responseState, textEmbedded, formatContext.noscriptTagInScope); case 'base': - return pushBase(target, props, responseState, textEmbedded); + return pushBase(target, props, responseState, textEmbedded, formatContext.noscriptTagInScope); // Newline eating tags case 'listing': @@ -5099,7 +5107,8 @@ function createRootFormatContext() { return { insertionMode: HTML_MODE, // We skip the root mode because we don't want to emit the DOCTYPE in legacy mode. - selectedValue: null + selectedValue: null, + noscriptTagInScope: false }; } function pushTextInstance$1(target, text, responseState, textEmbedded) { diff --git a/packages/next/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.min.js b/packages/next/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.min.js index a05d8cd32aae2..37355f50a1e1f 100644 --- a/packages/next/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +++ b/packages/next/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.min.js @@ -28,9 +28,11 @@ function ya(a,b){if(!x)throw Error(m(445));var c=x;switch(a){case "title":var d= else if("string"===typeof b.name)e="name::"+b.name+a;else if("string"===typeof b.itemProp)e="itemProp::"+b.itemProp+a;else if("string"===typeof b.property){var f=b.property;e="property::"+f+a;d=f;a=f.split(":").slice(0,-1).join(":");(a=c.structuredMetaKeys.get(a))&&(e=a.key+"::child::"+e)}e&&!c.headsMap.has(e)&&(b={type:"meta",key:e,props:w({},b),flushed:!1},c.headsMap.set(e,b),"charSet"===e?c.charset=b:(d&&c.structuredMetaKeys.set(d,b),c.headResources.add(b)));return!0;case "base":return e=b.target, d=b.href,e="base"+("string"===typeof d?'[href="'+d+'"]':":not([href])")+("string"===typeof e?'[target="'+e+'"]':":not([target])"),c.headsMap.has(e)||(b={type:"base",props:w({},b),flushed:!1},c.headsMap.set(e,b),c.bases.add(b)),!0}return!1} function za(a){if(!x)throw Error(m(445));var b=x,c=a.rel,d=a.href;if(!d||"string"!==typeof d||!c||"string"!==typeof c)return!1;switch(c){case "stylesheet":var e=a.onLoad,f=a.onError;c=a.precedence;var g=a.disabled;if("string"!==typeof c||e||f||null!=g)return c=b.preloadsMap.get(d),c||(c=z(b,d,"style",wa(d,a)),b.usedStylePreloads.add(c)),!1;e=b.stylesMap.get(d);e||(a=w({},a),a.href=d,a.rel="stylesheet",a["data-precedence"]=c,delete a.precedence,e=ua(x,d,c,a),b.usedStylePreloads.add(e.hint));b.boundaryResources? -b.boundaryResources.add(e):e.set.add(e);return!0;case "preload":switch(e=a.as,e){case "script":case "style":case "font":c=b.preloadsMap.get(d);if(!c)switch(a=w({},a),a.href=d,a.rel="preload",a.as=e,"font"===e&&(a.crossOrigin=""),c=z(b,d,e,a),e){case "script":b.explicitScriptPreloads.add(c);break;case "style":b.explicitStylePreloads.add(c);break;case "font":b.fontPreloads.add(c)}return!0}}if(a.onLoad||a.onError)return!1;d="rel:"+c+"::href:"+d+"::sizes:"+("string"===typeof a.sizes?a.sizes:"")+"::media:"+ +b.boundaryResources.add(e):e.set.add(e);return!0;case "preload":switch(e=a.as,e){case "script":case "style":case "font":c=b.preloadsMap.get(d);if(!c)switch(a=w({},a),a.href=d,a.rel="preload",a.as=e,"font"===e&&(a.crossOrigin=""),c=z(b,d,e,a),e){case "script":b.explicitScriptPreloads.add(c);break;case "style":b.explicitStylePreloads.add(c);break;case "font":b.fontPreloads.add(c)}return!0}}if(a.onLoad||a.onError)return!0;d="rel:"+c+"::href:"+d+"::sizes:"+("string"===typeof a.sizes?a.sizes:"")+"::media:"+ ("string"===typeof a.media?a.media:"");e=b.headsMap.get(d);if(!e)switch(e={type:"link",props:w({},a),flushed:!1},b.headsMap.set(d,e),c){case "preconnect":case "dns-prefetch":b.preconnects.add(e);break;default:b.headResources.add(e)}return!0}function Aa(a,b){var c=a.boundaryResources;c&&(b.forEach(function(a){return c.add(a)}),b.clear())}function Ba(a,b){b.forEach(function(a){return a.set.add(a)});b.clear()}var Ca=ba.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Dispatcher; -function A(a,b){return{insertionMode:a,selectedValue:b}}function Da(a,b,c){switch(b){case "select":return A(1,null!=c.value?c.value:c.defaultValue);case "svg":return A(2,null);case "math":return A(3,null);case "foreignObject":return A(1,null);case "table":return A(4,null);case "thead":case "tbody":case "tfoot":return A(5,null);case "colgroup":return A(7,null);case "tr":return A(6,null)}return 4<=a.insertionMode||0===a.insertionMode?A(1,null):a}var Ea=new Map; +function A(a,b,c){return{insertionMode:a,selectedValue:b,noscriptTagInScope:c}} +function Da(a,b,c){switch(b){case "noscript":return A(1,null,!0);case "select":return A(1,null!=c.value?c.value:c.defaultValue,a.noscriptTagInScope);case "svg":return A(2,null,a.noscriptTagInScope);case "math":return A(3,null,a.noscriptTagInScope);case "foreignObject":return A(1,null,a.noscriptTagInScope);case "table":return A(4,null,a.noscriptTagInScope);case "thead":case "tbody":case "tfoot":return A(5,null,a.noscriptTagInScope);case "colgroup":return A(7,null,a.noscriptTagInScope);case "tr":return A(6, +null,a.noscriptTagInScope)}return 4<=a.insertionMode||0===a.insertionMode?A(1,null,a.noscriptTagInScope):a}var Ea=new Map; function Fa(a,b,c){if("object"!==typeof c)throw Error(m(62));b=!0;for(var d in c)if(q.call(c,d)){var e=c[d];if(null!=e&&"boolean"!==typeof e&&""!==e){if(0===d.indexOf("--")){var f=v(d);e=v((""+e).trim())}else{f=d;var g=Ea.get(f);void 0!==g?f=g:(g=v(f.replace(ma,"-$1").toLowerCase().replace(na,"-ms-")),Ea.set(f,g),f=g);e="number"===typeof e?0===e||q.call(ja,d)?""+e:e+"px":v((""+e).trim())}b?(b=!1,a.push(' style="',f,":",e)):a.push(";",f,":",e)}}b||a.push('"')} function C(a,b,c,d){switch(c){case "style":Fa(a,b,d);return;case "defaultValue":case "defaultChecked":case "innerHTML":case "suppressContentEditableWarning":case "suppressHydrationWarning":return}if(!(2");D(a,h,g);return g;case "option":g=f.selectedValue;a.push(H("option"));var p=l=k=null,n=null;for(h in d)if(q.call(d,h)){var r=d[h];if(null!=r)switch(h){case "children":k=r;break;case "selected":p=r;break;case "dangerouslySetInnerHTML":n= r;break;case "value":l=r;default:C(a,e,h,r)}}if(null!=g)if(d=null!==l?""+l:Ga(k),oa(g))for(e=0;e");D(a,n,k);return k;case "textarea":a.push(H("textarea"));k=h=g=null;for(n in d)if(q.call(d,n)&&(l=d[n],null!=l))switch(n){case "children":k=l;break;case "value":g=l;break;case "defaultValue":h=l;break;case "dangerouslySetInnerHTML":throw Error(m(91));default:C(a,e, n,l)}null===g&&null!==h&&(g=h);a.push(">");if(null!=k){if(null!=g)throw Error(m(92));if(oa(k)&&1");return null;case "menuitem":a.push(H("menuitem"));for(var y in d)if(q.call(d,y)&&(g=d[y],null!=g))switch(y){case "children":case "dangerouslySetInnerHTML":throw Error(m(400));default:C(a,e,y,g)}a.push(">");return null;case "title":return a=ya("title",d)?null:Ha(a,d,e),a;case "link":return za(d)?(g&&a.push("\x3c!-- --\x3e"),a=null):a=G(a,d,e),a;case "script":if(!x)throw Error(m(445)); -h=x;k=d.src;n=d.onLoad;l=d.onError;k&&"string"===typeof k?d.async?(n||l?(n=h.preloadsMap.get(k),n||(n=z(h,k,"script",xa(k,d)),h.usedScriptPreloads.add(n))):(n=h.scriptsMap.get(k),n||(n=w({},d),n.src=k,n=va(h,k,n),h.scripts.add(n))),h=!0):h=!1:h=!1;h?(g&&a.push("\x3c!-- --\x3e"),a=null):a=Ia(a,d,e);return a;case "meta":return ya("meta",d)?(g&&a.push("\x3c!-- --\x3e"),a=null):a=I(a,d,"meta",e),a;case "base":return ya("base",d)?(g&&a.push("\x3c!-- --\x3e"),a=null):a=I(a,d,"base",e),a;case "listing":case "pre":a.push(H(c)); -h=g=null;for(p in d)if(q.call(d,p)&&(k=d[p],null!=k))switch(p){case "children":g=k;break;case "dangerouslySetInnerHTML":h=k;break;default:C(a,e,p,k)}a.push(">");if(null!=h){if(null!=g)throw Error(m(60));if("object"!==typeof h||!("__html"in h))throw Error(m(61));d=h.__html;null!==d&&void 0!==d&&("string"===typeof d&&0"),J(b,d,c,e);default:if(-1===c.indexOf("-")&&"string"!==typeof d.is)return J(a,d,c,e);a.push(H(c));h=g=null;for(r in d)if(q.call(d,r)&&(k=d[r],null!=k))switch(r){case "children":g=k;break;case "dangerouslySetInnerHTML":h= -k;break;case "style":Fa(a,e,k);break;case "suppressContentEditableWarning":case "suppressHydrationWarning":break;default:fa(r)&&"function"!==typeof k&&"symbol"!==typeof k&&a.push(" ",r,'="',v(k),'"')}a.push(">");D(a,h,g);return g}} +default:C(a,e,k,p)}null!==n?C(a,e,"checked",n):null!==l&&C(a,e,"checked",l);null!==g?C(a,e,"value",g):null!==h&&C(a,e,"value",h);a.push("/>");return null;case "menuitem":a.push(H("menuitem"));for(var y in d)if(q.call(d,y)&&(g=d[y],null!=g))switch(y){case "children":case "dangerouslySetInnerHTML":throw Error(m(400));default:C(a,e,y,g)}a.push(">");return null;case "title":return a=!f.noscriptTagInScope&&ya("title",d)?null:Ha(a,d,e),a;case "link":return!f.noscriptTagInScope&&za(d)?(g&&a.push("\x3c!-- --\x3e"), +a=null):a=G(a,d,e),a;case "script":if(h=!f.noscriptTagInScope){if(!x)throw Error(m(445));h=x;k=d.src;n=d.onLoad;l=d.onError;k&&"string"===typeof k?d.async?(n||l?(n=h.preloadsMap.get(k),n||(n=z(h,k,"script",xa(k,d)),h.usedScriptPreloads.add(n))):(n=h.scriptsMap.get(k),n||(n=w({},d),n.src=k,n=va(h,k,n),h.scripts.add(n))),h=!0):h=!1:h=!1}h?(g&&a.push("\x3c!-- --\x3e"),a=null):a=Ia(a,d,e);return a;case "meta":return!f.noscriptTagInScope&&ya("meta",d)?(g&&a.push("\x3c!-- --\x3e"),a=null):a=I(a,d,"meta", +e),a;case "base":return!f.noscriptTagInScope&&ya("base",d)?(g&&a.push("\x3c!-- --\x3e"),a=null):a=I(a,d,"base",e),a;case "listing":case "pre":a.push(H(c));h=g=null;for(p in d)if(q.call(d,p)&&(k=d[p],null!=k))switch(p){case "children":g=k;break;case "dangerouslySetInnerHTML":h=k;break;default:C(a,e,p,k)}a.push(">");if(null!=h){if(null!=g)throw Error(m(60));if("object"!==typeof h||!("__html"in h))throw Error(m(61));d=h.__html;null!==d&&void 0!==d&&("string"===typeof d&&0"), +J(b,d,c,e);default:if(-1===c.indexOf("-")&&"string"!==typeof d.is)return J(a,d,c,e);a.push(H(c));h=g=null;for(r in d)if(q.call(d,r)&&(k=d[r],null!=k))switch(r){case "children":g=k;break;case "dangerouslySetInnerHTML":h=k;break;case "style":Fa(a,e,k);break;case "suppressContentEditableWarning":case "suppressHydrationWarning":break;default:fa(r)&&"function"!==typeof k&&"symbol"!==typeof k&&a.push(" ",r,'="',v(k),'"')}a.push(">");D(a,h,g);return g}} function Ma(a,b,c){switch(c){case "title":case "script":case "area":case "base":case "br":case "col":case "embed":case "hr":case "img":case "input":case "keygen":case "link":case "meta":case "param":case "source":case "track":case "wbr":return;case "body":b.unshift("");return;case "html":b.push("");return}a.push("")}function Na(a,b,c){a.push('\x3c!--$?--\x3e')} function Oa(a,b,c,d){switch(c.insertionMode){case 0:case 1:return a.push('