From 5a304817cbe8c66602ec3f61d5ca6354bb0f862f Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Thu, 23 Feb 2023 00:24:26 +0100 Subject: [PATCH] Update app-dir react bundle to leverage edge build (#46208) Leverage edge build of react-server-dom-webpack on server and keep browser build of it for client build Closes NEXT-606 --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- package.json | 6 +- packages/next/src/build/webpack-config.ts | 2 +- .../build/webpack/loaders/next-app-loader.ts | 2 +- .../nextjs-require-cache-hot-reloader.ts | 2 +- .../router-reducer/fetch-server-response.ts | 1 + ...t-dom-server-legacy.browser.development.js | 6 +- ...om-server-legacy.browser.production.min.js | 4 +- ...eact-dom-server-legacy.node.development.js | 6 +- ...t-dom-server-legacy.node.production.min.js | 4 +- ...t-dom-server-rendering-stub.development.js | 2 +- ...om-server-rendering-stub.production.min.js | 2 +- .../react-dom-server.browser.development.js | 10 +- ...react-dom-server.browser.production.min.js | 6 +- .../cjs/react-dom-server.edge.development.js | 9241 +++++++++++++++++ .../react-dom-server.edge.production.min.js | 136 + .../cjs/react-dom-server.node.development.js | 6 +- .../react-dom-server.node.production.min.js | 4 +- .../react-dom/cjs/react-dom.development.js | 412 +- .../react-dom/cjs/react-dom.production.min.js | 726 +- .../react-dom/cjs/react-dom.profiling.min.js | 763 +- .../next/src/compiled/react-dom/package.json | 10 +- .../src/compiled/react-dom/server.edge.js | 18 + .../compiled/react-server-dom-webpack/LICENSE | 21 + ...-dom-webpack-client.browser.development.js | 947 ++ ...m-webpack-client.browser.production.min.js | 28 + ...t-server-dom-webpack-client.development.js | 889 ++ ...ver-dom-webpack-client.edge.development.js | 947 ++ ...-dom-webpack-client.edge.production.min.js | 28 + ...ver-dom-webpack-client.node.development.js | 947 ++ ...-dom-webpack-client.node.production.min.js | 28 + ...bpack-client.node.unbundled.development.js | 947 ++ ...ck-client.node.unbundled.production.min.js | 28 + ...erver-dom-webpack-client.production.min.js | 26 + .../react-server-dom-webpack-node-register.js | 283 + .../cjs/react-server-dom-webpack-plugin.js | 259 + ...-dom-webpack-server.browser.development.js | 2469 +++++ ...m-webpack-server.browser.production.min.js | 59 + ...ver-dom-webpack-server.edge.development.js | 2481 +++++ ...-dom-webpack-server.edge.production.min.js | 60 + ...ver-dom-webpack-server.node.development.js | 2539 +++++ ...-dom-webpack-server.node.production.min.js | 62 + ...bpack-server.node.unbundled.development.js | 2580 +++++ ...ck-server.node.unbundled.production.min.js | 63 + .../client.browser.js | 7 + .../react-server-dom-webpack/client.edge.js | 7 + .../react-server-dom-webpack/client.js | 999 +- .../react-server-dom-webpack/client.node.js | 7 + .../client.node.unbundled.js | 7 + .../react-server-dom-webpack/index.js | 12 + .../react-server-dom-webpack/node-register.js | 3 + .../react-server-dom-webpack/package.json | 72 +- .../react-server-dom-webpack/plugin.js | 3 + .../server.browser.js | 2632 +---- .../react-server-dom-webpack/server.edge.js | 7 + .../react-server-dom-webpack/server.js | 6 + .../react-server-dom-webpack/server.node.js | 7 + .../server.node.unbundled.js | 7 + .../compiled/react/cjs/react.development.js | 2 +- .../react/cjs/react.production.min.js | 2 +- .../cjs/react.shared-subset.development.js | 2 +- .../cjs/react.shared-subset.production.min.js | 2 +- packages/next/src/compiled/react/package.json | 2 +- packages/next/taskfile.js | 57 +- packages/next/types/misc.d.ts | 5 + pnpm-lock.yaml | 36 +- 65 files changed, 26263 insertions(+), 4681 deletions(-) create mode 100644 packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.development.js create mode 100644 packages/next/src/compiled/react-dom/cjs/react-dom-server.edge.production.min.js create mode 100644 packages/next/src/compiled/react-dom/server.edge.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/LICENSE create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.min.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.development.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.min.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.development.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.unbundled.production.min.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.production.min.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-node-register.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-plugin.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.development.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.min.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.development.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.production.min.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.development.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.node.unbundled.production.min.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/client.browser.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/client.edge.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/client.node.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/client.node.unbundled.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/index.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/node-register.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/plugin.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/server.edge.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/server.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/server.node.js create mode 100644 packages/next/src/compiled/react-server-dom-webpack/server.node.unbundled.js diff --git a/package.json b/package.json index 017aa6104ade8..2e2802e140e9c 100644 --- a/package.json +++ b/package.json @@ -189,11 +189,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-4bf2113a1-20230206", + "react-builtin": "npm:react@18.3.0-next-6ddcbd4f9-20230209", "react-dom": "18.2.0", "react-dom-17": "npm:react-dom@17.0.2", - "react-dom-builtin": "npm:react-dom@18.3.0-next-4bf2113a1-20230206", - "react-server-dom-webpack": "18.3.0-next-4bf2113a1-20230206", + "react-dom-builtin": "npm:react-dom@18.3.0-next-6ddcbd4f9-20230209", + "react-server-dom-webpack": "18.3.0-next-6ddcbd4f9-20230209", "react-ssr-prepass": "1.0.8", "react-virtualized": "9.22.3", "relay-compiler": "13.0.2", diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts index ec8c97c24ed26..afa908ef08d69 100644 --- a/packages/next/src/build/webpack-config.ts +++ b/packages/next/src/build/webpack-config.ts @@ -1164,7 +1164,7 @@ export default async function getBaseWebpackConfig( if (layer === WEBPACK_LAYERS.server) { if ( reactPackagesRegex.test(request) || - request === 'next/dist/compiled/react-server-dom-webpack/server.browser' + request === 'next/dist/compiled/react-server-dom-webpack/server.edge' ) { return } diff --git a/packages/next/src/build/webpack/loaders/next-app-loader.ts b/packages/next/src/build/webpack/loaders/next-app-loader.ts index f21ca8b701104..2fd5396b54347 100644 --- a/packages/next/src/build/webpack/loaders/next-app-loader.ts +++ b/packages/next/src/build/webpack/loaders/next-app-loader.ts @@ -415,7 +415,7 @@ const nextAppLoader: AppLoader = async function nextAppLoader() { export * as serverHooks from 'next/dist/client/components/hooks-server-context' - export { renderToReadableStream } from 'next/dist/compiled/react-server-dom-webpack/server.browser' + export { renderToReadableStream } from 'next/dist/compiled/react-server-dom-webpack/server.edge' export const __next_app_webpack_require__ = __webpack_require__ ` diff --git a/packages/next/src/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts b/packages/next/src/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts index 1cd9b47d1df0f..37b1208651faf 100644 --- a/packages/next/src/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts +++ b/packages/next/src/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts @@ -11,7 +11,7 @@ const originModules = [ require.resolve('../../../server/require'), require.resolve('../../../server/load-components'), require.resolve('../../../server/next-server'), - require.resolve('../../../compiled/react-server-dom-webpack/client'), + require.resolve('../../../compiled/react-server-dom-webpack/client.edge'), ] const RUNTIME_NAMES = ['webpack-runtime', 'webpack-api-runtime'] diff --git a/packages/next/src/client/components/router-reducer/fetch-server-response.ts b/packages/next/src/client/components/router-reducer/fetch-server-response.ts index 1e7317a701957..e500aa6bcf40b 100644 --- a/packages/next/src/client/components/router-reducer/fetch-server-response.ts +++ b/packages/next/src/client/components/router-reducer/fetch-server-response.ts @@ -1,4 +1,5 @@ 'use client' + import { createFromFetch } from 'next/dist/compiled/react-server-dom-webpack/client' import { FlightRouterState, FlightData } from '../../../server/app-render' import { diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js index 99d41648a12f7..fa5a6f7a32c50 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.development.js +++ b/packages/next/src/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-4bf2113a1-20230206'; +var ReactVersion = '18.3.0-next-6ddcbd4f9-20230209'; var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; @@ -421,7 +421,7 @@ var capitalize = function (token) { // scraping the MDN documentation. -['accent-height', 'alignment-baseline', 'arabic-form', 'baseline-shift', 'cap-height', 'clip-path', 'clip-rule', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'dominant-baseline', 'enable-background', 'fill-opacity', 'fill-rule', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'glyph-name', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'horiz-adv-x', 'horiz-origin-x', 'image-rendering', 'letter-spacing', 'lighting-color', 'marker-end', 'marker-mid', 'marker-start', 'overline-position', 'overline-thickness', 'paint-order', 'panose-1', 'pointer-events', 'rendering-intent', 'shape-rendering', 'stop-color', 'stop-opacity', 'strikethrough-position', 'strikethrough-thickness', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-anchor', 'text-decoration', 'text-rendering', 'underline-position', 'underline-thickness', 'unicode-bidi', 'unicode-range', 'units-per-em', 'v-alphabetic', 'v-hanging', 'v-ideographic', 'v-mathematical', 'vector-effect', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'word-spacing', 'writing-mode', 'xmlns:xlink', 'x-height' // NOTE: if you add a camelCased prop to this list, +['accent-height', 'alignment-baseline', 'arabic-form', 'baseline-shift', 'cap-height', 'clip-path', 'clip-rule', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'dominant-baseline', 'enable-background', 'fill-opacity', 'fill-rule', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'glyph-name', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'horiz-adv-x', 'horiz-origin-x', 'image-rendering', 'letter-spacing', 'lighting-color', 'marker-end', 'marker-mid', 'marker-start', 'overline-position', 'overline-thickness', 'paint-order', 'panose-1', 'pointer-events', 'rendering-intent', 'shape-rendering', 'stop-color', 'stop-opacity', 'strikethrough-position', 'strikethrough-thickness', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-anchor', 'text-decoration', 'text-rendering', 'transform-origin', 'underline-position', 'underline-thickness', 'unicode-bidi', 'unicode-range', 'units-per-em', 'v-alphabetic', 'v-hanging', 'v-ideographic', 'v-mathematical', 'vector-effect', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'word-spacing', 'writing-mode', 'xmlns:xlink', 'x-height' // NOTE: if you add a camelCased prop to this list, // you'll need to set attributeName to name.toLowerCase() // instead in the assignment below. ].forEach(function (attributeName) { @@ -1181,6 +1181,8 @@ var possibleStandardNames = { 'text-rendering': 'textRendering', to: 'to', transform: 'transform', + transformorigin: 'transformOrigin', + 'transform-origin': 'transformOrigin', typeof: 'typeof', u1: 'u1', u2: 'u2', diff --git a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.min.js b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.min.js index d65945cb4781e..a6849bba774b9 100644 --- a/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.min.js +++ b/packages/next/src/compiled/react-dom/cjs/react-dom-server-legacy.browser.production.min.js @@ -13,7 +13,7 @@ function fa(a){if(q.call(ea,a))return!0;if(q.call(da,a))return!1;if(ca.test(a))r "children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(a){v[a]=new t(a,0,!1,a,null,!1,!1)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(a){var b=a[0];v[b]=new t(b,1,!1,a[1],null,!1,!1)});["contentEditable","draggable","spellCheck","value"].forEach(function(a){v[a]=new t(a,2,!1,a.toLowerCase(),null,!1,!1)}); ["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(a){v[a]=new t(a,2,!1,a,null,!1,!1)});"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(a){v[a]=new t(a,3,!1,a.toLowerCase(),null,!1,!1)}); ["checked","multiple","muted","selected"].forEach(function(a){v[a]=new t(a,3,!0,a,null,!1,!1)});["capture","download"].forEach(function(a){v[a]=new t(a,4,!1,a,null,!1,!1)});["cols","rows","size","span"].forEach(function(a){v[a]=new t(a,6,!1,a,null,!1,!1)});["rowSpan","start"].forEach(function(a){v[a]=new t(a,5,!1,a.toLowerCase(),null,!1,!1)});var ha=/[\-:]([a-z])/g;function ia(a){return a[1].toUpperCase()} -"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(a){var b=a.replace(ha, +"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering transform-origin underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height".split(" ").forEach(function(a){var b=a.replace(ha, ia);v[b]=new t(b,1,!1,a,null,!1,!1)});"xlink:actuate xlink:arcrole xlink:role xlink:show xlink:title xlink:type".split(" ").forEach(function(a){var b=a.replace(ha,ia);v[b]=new t(b,1,!1,a,"http://www.w3.org/1999/xlink",!1,!1)});["xml:base","xml:lang","xml:space"].forEach(function(a){var b=a.replace(ha,ia);v[b]=new t(b,1,!1,a,"http://www.w3.org/XML/1998/namespace",!1,!1)});["tabIndex","crossOrigin"].forEach(function(a){v[a]=new t(a,1,!1,a.toLowerCase(),null,!1,!1)}); v.xlinkHref=new t("xlinkHref",1,!1,"xlink:href","http://www.w3.org/1999/xlink",!0,!1);["src","href","action","formAction"].forEach(function(a){v[a]=new t(a,1,!1,a.toLowerCase(),null,!0,!0)}); var ja={animationIterationCount:!0,aspectRatio:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0, @@ -122,4 +122,4 @@ c);return}}M.splice(0,c);var sa=a.completedBoundaries;for(c=0;c