From 897af6238e9ea18ce9c6d06f1adb1a622ea1e02c Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 19 Oct 2022 08:09:49 -0700 Subject: [PATCH] Upgrade react-server-dom-webpack and precompiled assets (#41547) Upgrade `react-server-dom-webpack` for exports renaming purpose x-ref: https://github.com/facebook/react/pull/25504 --- packages/next/build/webpack-config.ts | 2 +- .../build/webpack/loaders/next-app-loader.ts | 2 +- .../nextjs-require-cache-hot-reloader.ts | 12 +- packages/next/client/app-index.tsx | 2 +- .../next/client/components/app-router.tsx | 2 +- packages/next/compiled/react-dom/LICENSE | 2 +- ...t-dom-server-legacy.browser.development.js | 839 +++--- ...om-server-legacy.browser.production.min.js | 189 +- ...eact-dom-server-legacy.node.development.js | 839 +++--- ...t-dom-server-legacy.node.production.min.js | 208 +- ...t-dom-server-rendering-stub.development.js | 4 +- ...om-server-rendering-stub.production.min.js | 4 +- .../react-dom-server.browser.development.js | 841 +++--- ...react-dom-server.browser.production.min.js | 204 +- .../cjs/react-dom-server.node.development.js | 841 +++--- .../react-dom-server.node.production.min.js | 219 +- .../react-dom-static.browser.development.js | 841 +++--- ...react-dom-static.browser.production.min.js | 202 +- .../cjs/react-dom-static.node.development.js | 841 +++--- .../react-dom-static.node.production.min.js | 218 +- .../cjs/react-dom-test-utils.development.js | 2 +- .../react-dom-test-utils.production.min.js | 2 +- .../react-dom-unstable_testing.development.js | 99 +- ...act-dom-unstable_testing.production.min.js | 200 +- .../react-dom/cjs/react-dom.development.js | 505 +++- .../react-dom/cjs/react-dom.production.min.js | 686 ++--- .../react-dom/cjs/react-dom.profiling.min.js | 724 +++--- packages/next/compiled/react-dom/package.json | 7 +- packages/next/compiled/react-dom/profiling.js | 38 - .../next/compiled/react-dom/server.node.js | 17 - .../next/compiled/react-dom/static.browser.js | 7 - packages/next/compiled/react-dom/static.js | 3 - .../next/compiled/react-dom/static.node.js | 7 - .../next/compiled/react-dom/test-utils.js | 7 - .../compiled/react-dom/unstable_testing.js | 38 - ...bpack-writer.browser.development.server.js | 2265 ----------------- ...ck-writer.browser.production.min.server.js | 53 - .../react-server-dom-webpack.development.js | 893 ------- ...react-server-dom-webpack.production.min.js | 26 - .../{index.js => client.js} | 20 +- ...er.browser.server.js => server.browser.js} | 651 ++--- packages/next/compiled/react/LICENSE | 2 +- .../cjs/react-jsx-dev-runtime.development.js | 2 +- .../react-jsx-dev-runtime.production.min.js | 2 +- .../react-jsx-dev-runtime.profiling.min.js | 2 +- .../cjs/react-jsx-runtime.development.js | 2 +- .../cjs/react-jsx-runtime.production.min.js | 2 +- .../cjs/react-jsx-runtime.profiling.min.js | 2 +- .../compiled/react/cjs/react.development.js | 4 +- .../react/cjs/react.production.min.js | 4 +- .../cjs/react.shared-subset.development.js | 4 +- .../cjs/react.shared-subset.production.min.js | 4 +- packages/next/compiled/react/package.json | 2 +- packages/next/compiled/scheduler/LICENSE | 2 +- packages/next/compiled/scheduler/index.js | 10 +- packages/next/package.json | 6 +- packages/next/server/app-render.tsx | 2 +- packages/next/taskfile.js | 55 +- packages/next/types/misc.d.ts | 4 +- pnpm-lock.yaml | 36 +- 60 files changed, 5282 insertions(+), 7427 deletions(-) delete mode 100644 packages/next/compiled/react-dom/profiling.js delete mode 100644 packages/next/compiled/react-dom/server.node.js delete mode 100644 packages/next/compiled/react-dom/static.browser.js delete mode 100644 packages/next/compiled/react-dom/static.js delete mode 100644 packages/next/compiled/react-dom/static.node.js delete mode 100644 packages/next/compiled/react-dom/test-utils.js delete mode 100644 packages/next/compiled/react-dom/unstable_testing.js delete mode 100644 packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js delete mode 100644 packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js delete mode 100644 packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.development.js delete mode 100644 packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack.production.min.js rename packages/next/compiled/react-server-dom-webpack/{index.js => client.js} (98%) rename packages/next/compiled/react-server-dom-webpack/{writer.browser.server.js => server.browser.js} (73%) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index a5a25db391230..65a861f8af11f 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -125,7 +125,7 @@ function isResourceInPackages(resource: string, packageNames?: string[]) { const builtInReactImports = [ 'react', 'react/jsx-runtime', - 'next/dist/compiled/react-server-dom-webpack/writer.browser.server', + 'next/dist/compiled/react-server-dom-webpack/server.browser', ] export function getDefineEnv({ diff --git a/packages/next/build/webpack/loaders/next-app-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts index 1f1ea4dd7458b..515417f016aa8 100644 --- a/packages/next/build/webpack/loaders/next-app-loader.ts +++ b/packages/next/build/webpack/loaders/next-app-loader.ts @@ -201,7 +201,7 @@ const nextAppLoader: webpack.LoaderDefinitionFunction<{ export const serverHooks = require('next/dist/client/components/hooks-server-context.js') - export const renderToReadableStream = require('next/dist/compiled/react-server-dom-webpack/writer.browser.server').renderToReadableStream + export const renderToReadableStream = require('next/dist/compiled/react-server-dom-webpack/server.browser').renderToReadableStream export const __next_app_webpack_require__ = __webpack_require__ ` diff --git a/packages/next/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts b/packages/next/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts index a7321570c8db4..d661c1f3f379e 100644 --- a/packages/next/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts +++ b/packages/next/build/webpack/plugins/nextjs-require-cache-hot-reloader.ts @@ -82,18 +82,18 @@ export class NextJsRequireCacheHotReloader implements WebpackPluginInstance { if (hasAppPath) { // ensure we reset the cache for sc_server components // loaded via react-server-dom-webpack - const reactWebpackModId = require.resolve( - 'next/dist/compiled/react-server-dom-webpack' + const reactServerDomModId = require.resolve( + 'next/dist/compiled/react-server-dom-webpack/client' ) - const reactWebpackMod = require.cache[reactWebpackModId] + const reactServerDomMod = require.cache[reactServerDomModId] - if (reactWebpackMod) { - for (const child of reactWebpackMod.children) { + if (reactServerDomMod) { + for (const child of reactServerDomMod.children) { child.parent = null delete require.cache[child.id] } } - delete require.cache[reactWebpackModId] + delete require.cache[reactServerDomModId] } entries.forEach((page) => { diff --git a/packages/next/client/app-index.tsx b/packages/next/client/app-index.tsx index 22d723fb02d49..7578677a474e7 100644 --- a/packages/next/client/app-index.tsx +++ b/packages/next/client/app-index.tsx @@ -4,7 +4,7 @@ import '../build/polyfills/polyfill-module' import ReactDOMClient from 'react-dom/client' // TODO-APP: change to React.use once it becomes stable import React, { experimental_use as use } from 'react' -import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack' +import { createFromReadableStream } from 'next/dist/compiled/react-server-dom-webpack/client' import measureWebVitals from './performance-relayer' import { HeadManagerContext } from '../shared/lib/head-manager-context' diff --git a/packages/next/client/components/app-router.tsx b/packages/next/client/components/app-router.tsx index 2136181ff1ae9..89c694031af62 100644 --- a/packages/next/client/components/app-router.tsx +++ b/packages/next/client/components/app-router.tsx @@ -2,7 +2,7 @@ import type { ReactNode } from 'react' import React, { useEffect, useMemo, useCallback } from 'react' -import { createFromFetch } from 'next/dist/compiled/react-server-dom-webpack' +import { createFromFetch } from 'next/dist/compiled/react-server-dom-webpack/client' import { AppRouterContext, LayoutRouterContext, diff --git a/packages/next/compiled/react-dom/LICENSE b/packages/next/compiled/react-dom/LICENSE index b96dcb0480a0b..b93be90515ccd 100644 --- a/packages/next/compiled/react-dom/LICENSE +++ b/packages/next/compiled/react-dom/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) Facebook, Inc. and its affiliates. +Copyright (c) Meta Platforms, Inc. and affiliates. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal 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 341a5ad48243e..39ab6e7f29336 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 @@ -2,7 +2,7 @@ * @license React * react-dom-server-legacy.browser.development.js * - * Copyright (c) Facebook, Inc. and its affiliates. + * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. @@ -17,7 +17,7 @@ if (process.env.NODE_ENV !== "production") { var React = require('react'); var ReactDOM = require('react-dom'); -var ReactVersion = '18.3.0-experimental-a8c16a004-20221012'; +var ReactVersion = '18.3.0-experimental-9cdf8a99e-20221018'; var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; @@ -1711,7 +1711,7 @@ function validatePreloadResourceDifference(originalProps, originalImplicit, late } if (missingProps || extraProps || differentProps) { - warnDifferentProps(href, originalWarningName, latestWarningName, extraProps, missingProps, differentProps); + warnDifferentProps(href, 'href', originalWarningName, latestWarningName, extraProps, missingProps, differentProps); } } } @@ -1736,7 +1736,7 @@ function validateStyleResourceDifference(originalProps, latestProps) { var originalValue = originalProps[propName]; if (propValue != null && propValue !== originalValue) { - propName = propName === 'data-rprec' ? 'precedence' : propName; + propName = propName === 'data-precedence' ? 'precedence' : propName; if (originalValue == null) { extraProps = extraProps || {}; @@ -1752,7 +1752,39 @@ function validateStyleResourceDifference(originalProps, latestProps) { } if (missingProps || extraProps || differentProps) { - warnDifferentProps(href, originalWarningName, latestWarningName, extraProps, missingProps, differentProps); + warnDifferentProps(href, 'href', originalWarningName, latestWarningName, extraProps, missingProps, differentProps); + } + } +} +function validateScriptResourceDifference(originalProps, latestProps) { + { + var src = originalProps.src; // eslint-disable-next-line no-labels + + var originalWarningName = getResourceNameForWarning('script', originalProps, false); + var latestWarningName = getResourceNameForWarning('script', latestProps, false); + var extraProps = null; + var differentProps = null; + + for (var propName in latestProps) { + var propValue = latestProps[propName]; + var originalValue = originalProps[propName]; + + if (propValue != null && propValue !== originalValue) { + if (originalValue == null) { + extraProps = extraProps || {}; + extraProps[propName] = propValue; + } else { + differentProps = differentProps || {}; + differentProps[propName] = { + original: originalValue, + latest: propValue + }; + } + } + } + + if (extraProps || differentProps) { + warnDifferentProps(src, 'src', originalWarningName, latestWarningName, extraProps, null, differentProps); } } } @@ -1763,7 +1795,7 @@ function validateStyleAndHintProps(preloadProps, styleProps, implicitPreload) { var latestWarningName = getResourceNameForWarning('style', styleProps, false); if (preloadProps.as !== 'style') { - error('While creating a %s for href "%s" a %s for this same href was found. When preloading a stylesheet the' + ' "as" prop must be of type "style". This most likely ocurred by rending a preload link with an incorrect' + ' "as" prop or by calling ReactDOM.preload with an incorrect "as" option.', latestWarningName, href, originalWarningName); + error('While creating a %s for href "%s" a %s for this same href was found. When preloading a stylesheet the' + ' "as" prop must be of type "style". This most likely ocurred by rendering a preload link with an incorrect' + ' "as" prop or by calling ReactDOM.preload with an incorrect "as" option.', latestWarningName, href, originalWarningName); } var missingProps = null; @@ -1802,14 +1834,63 @@ function validateStyleAndHintProps(preloadProps, styleProps, implicitPreload) { } if (missingProps || extraProps || differentProps) { - warnDifferentProps(href, originalWarningName, latestWarningName, extraProps, missingProps, differentProps); + warnDifferentProps(href, 'href', originalWarningName, latestWarningName, extraProps, missingProps, differentProps); + } + } +} +function validateScriptAndHintProps(preloadProps, scriptProps, implicitPreload) { + { + var href = preloadProps.href; + var originalWarningName = getResourceNameForWarning('preload', preloadProps, implicitPreload); + var latestWarningName = getResourceNameForWarning('script', scriptProps, false); + + if (preloadProps.as !== 'script') { + error('While creating a %s for href "%s" a %s for this same url was found. When preloading a script the' + ' "as" prop must be of type "script". This most likely ocurred by rendering a preload link with an incorrect' + ' "as" prop or by calling ReactDOM.preload with an incorrect "as" option.', latestWarningName, href, originalWarningName); + } + + var missingProps = null; + var extraProps = null; + var differentProps = null; + + for (var propName in scriptProps) { + var scriptValue = scriptProps[propName]; + var preloadValue = preloadProps[propName]; + + switch (propName) { + // Check for difference on specific props that cross over or influence + // the relationship between the preload and stylesheet + case 'crossOrigin': + case 'referrerPolicy': + case 'integrity': + { + if (preloadValue !== scriptValue && !(preloadValue == null && scriptValue == null)) { + if (scriptValue == null) { + missingProps = missingProps || {}; + missingProps[propName] = preloadValue; + } else if (preloadValue == null) { + extraProps = extraProps || {}; + extraProps[propName] = scriptValue; + } else { + differentProps = differentProps || {}; + differentProps[propName] = { + original: preloadValue, + latest: scriptValue + }; + } + } + } + } + } + + if (missingProps || extraProps || differentProps) { + warnDifferentProps(href, 'href', originalWarningName, latestWarningName, extraProps, missingProps, differentProps); } } } -function warnDifferentProps(href, originalName, latestName, extraProps, missingProps, differentProps) { +function warnDifferentProps(url, urlPropKey, originalName, latestName, extraProps, missingProps, differentProps) { { - var juxtaposedNameStatement = latestName === originalName ? 'an earlier instance of this Resource' : "a " + originalName + " with the same href"; + var juxtaposedNameStatement = latestName === originalName ? 'an earlier instance of this Resource' : "a " + originalName + " with the same " + urlPropKey; var comparisonStatement = ''; if (missingProps !== null && typeof missingProps === 'object') { @@ -1830,7 +1911,7 @@ function warnDifferentProps(href, originalName, latestName, extraProps, missingP } } - error('A %s with href "%s" has props that disagree with those found on %s. Resources always use the props' + ' that were provided the first time they are encountered so any differences will be ignored. Please' + ' update Resources that share an href to have props that agree. The differences are described below.%s', latestName, href, juxtaposedNameStatement, comparisonStatement); + error('A %s with %s "%s" has props that disagree with those found on %s. Resources always use the props' + ' that were provided the first time they are encountered so any differences will be ignored. Please' + ' update Resources that share an %s to have props that agree. The differences are described below.%s', latestName, urlPropKey, url, juxtaposedNameStatement, urlPropKey, comparisonStatement); } } @@ -1842,6 +1923,11 @@ function getResourceNameForWarning(type, props, implicit) { return 'style Resource'; } + case 'script': + { + return 'script Resource'; + } + case 'preload': { if (implicit) { @@ -1969,6 +2055,7 @@ function validatePreinitArguments(href, options) { switch (as) { case 'style': + case 'script': { break; } @@ -1978,7 +2065,7 @@ function validatePreinitArguments(href, options) { { var typeOfAs = getValueDescriptorExpectingEnumForWarning(as); - error('ReactDOM.preinit() expected the second argument to be an options argument containing at least an "as" property' + ' specifying the Resource type. It found %s instead. Currently, the only valid resource type for preinit is "style".' + ' The href for the preinit call where this warning originated is "%s".', typeOfAs, href); + error('ReactDOM.preinit() expected the second argument to be an options argument containing at least an "as" property' + ' specifying the Resource type. It found %s instead. Currently, valid resource types for for preinit are "style"' + ' and "script". The href for the preinit call where this warning originated is "%s".', typeOfAs, href); } } } @@ -1999,10 +2086,17 @@ function createResources() { // persistent preloadsMap: new Map(), stylesMap: new Map(), + scriptsMap: new Map(), // cleared on flush - explicitPreloads: new Set(), - implicitPreloads: new Set(), + fontPreloads: new Set(), + // usedImagePreloads: new Set(), precedences: new Map(), + usedStylePreloads: new Set(), + scripts: new Set(), + usedScriptPreloads: new Set(), + explicitStylePreloads: new Set(), + // explicitImagePreloads: new Set(), + explicitScriptPreloads: new Set(), // like a module global for currently rendering boundary boundaryResources: null }; @@ -2010,11 +2104,6 @@ function createResources() { function createBoundaryResources() { return new Set(); } -function mergeBoundaryResources(target, source) { - source.forEach(function (resource) { - return target.add(resource); - }); -} var currentResources = null; var currentResourcesStack = []; function prepareToRenderResources(resources) { @@ -2043,14 +2132,15 @@ function preload(href, options) { return; } + var resources = currentResources; + { validatePreloadArguments(href, options); } if (typeof href === 'string' && href && typeof options === 'object' && options !== null) { - var as = options.as; // $FlowFixMe[incompatible-use] found when upgrading Flow - - var resource = currentResources.preloadsMap.get(href); + var as = options.as; + var resource = resources.preloadsMap.get(href); if (resource) { { @@ -2059,12 +2149,28 @@ function preload(href, options) { validatePreloadResourceDifference(resource.props, originallyImplicit, latestProps, false); } } else { - resource = createPreloadResource( // $FlowFixMe[incompatible-call] found when upgrading Flow - currentResources, href, as, preloadPropsFromPreloadOptions(href, as, options)); - } // $FlowFixMe[incompatible-call] found when upgrading Flow + resource = createPreloadResource(resources, href, as, preloadPropsFromPreloadOptions(href, as, options)); + } + switch (as) { + case 'font': + { + resources.fontPreloads.add(resource); + break; + } - captureExplicitPreloadResourceDependency(currentResources, resource); + case 'style': + { + resources.explicitStylePreloads.add(resource); + break; + } + + case 'script': + { + resources.explicitScriptPreloads.add(resource); + break; + } + } } } @@ -2079,6 +2185,8 @@ function preinit(href, options) { return; } + var resources = currentResources; + { validatePreinitArguments(href, options); } @@ -2089,24 +2197,42 @@ function preinit(href, options) { switch (as) { case 'style': { - var precedence = options.precedence || 'default'; // $FlowFixMe[incompatible-use] found when upgrading Flow - - var resource = currentResources.stylesMap.get(href); + var resource = resources.stylesMap.get(href); if (resource) { { - var latestProps = stylePropsFromPreinitOptions(href, precedence, options); + var latestProps = stylePropsFromPreinitOptions(href, resource.precedence, options); validateStyleResourceDifference(resource.props, latestProps); } } else { + var precedence = options.precedence || 'default'; var resourceProps = stylePropsFromPreinitOptions(href, precedence, options); - resource = createStyleResource( // $FlowFixMe[incompatible-call] found when upgrading Flow - currentResources, href, precedence, resourceProps); - } // Do not associate preinit style resources with any specific boundary regardless of where it is called - // $FlowFixMe[incompatible-call] found when upgrading Flow + resource = createStyleResource(resources, href, precedence, resourceProps); + } + + resource.set.add(resource); + resources.explicitStylePreloads.add(resource.hint); + return; + } + + case 'script': + { + var src = href; + + var _resource = resources.scriptsMap.get(src); + + if (_resource) { + { + var _latestProps = scriptPropsFromPreinitOptions(src, options); + validateScriptResourceDifference(_resource.props, _latestProps); + } + } else { + var scriptProps = scriptPropsFromPreinitOptions(src, options); + _resource = createScriptResource(resources, src, scriptProps); + resources.scripts.add(_resource); + } - captureStyleResourceDependency(currentResources, null, resource); return; } } @@ -2153,6 +2279,17 @@ function preloadAsStylePropsFromProps(href, props) { }; } +function preloadAsScriptPropsFromProps(href, props) { + return { + rel: 'preload', + as: 'script', + href: href, + crossOrigin: props.crossOrigin, + integrity: props.integrity, + referrerPolicy: props.referrerPolicy + }; +} + function createPreloadResource(resources, href, as, props) { var preloadsMap = resources.preloadsMap; @@ -2178,7 +2315,7 @@ function stylePropsFromRawProps(href, precedence, rawProps) { props.href = href; props.rel = 'stylesheet'; - props['data-rprec'] = precedence; + props['data-precedence'] = precedence; delete props.precedence; return props; } @@ -2187,7 +2324,7 @@ function stylePropsFromPreinitOptions(href, precedence, options) { return { rel: 'stylesheet', href: href, - 'data-rprec': precedence, + 'data-precedence': precedence, crossOrigin: options.crossOrigin }; } @@ -2200,7 +2337,17 @@ function createStyleResource(resources, href, precedence, props) { } var stylesMap = resources.stylesMap, - preloadsMap = resources.preloadsMap; + preloadsMap = resources.preloadsMap, + precedences = resources.precedences; // If this is the first time we've seen this precedence we encode it's position in our set even though + // we don't add the resource to this set yet + + var precedenceSet = precedences.get(precedence); + + if (!precedenceSet) { + precedenceSet = new Set(); + precedences.set(precedence, precedenceSet); + } + var hint = preloadsMap.get(href); if (hint) { @@ -2208,14 +2355,10 @@ function createStyleResource(resources, href, precedence, props) { // on the style Resource, primarily focussed on making sure the style network pathways utilize // the preload pathways. For instance if you have diffreent crossOrigin attributes for a preload // and a stylesheet the stylesheet will make a new request even if the preload had already loaded - var preloadProps = hint.props; - if (props.crossOrigin == null) props.crossOrigin = preloadProps.crossOrigin; - if (props.referrerPolicy == null) props.referrerPolicy = preloadProps.referrerPolicy; - if (props.media == null) props.media = preloadProps.media; - if (props.title == null) props.title = preloadProps.title; + adoptPreloadPropsForStyleProps(props, hint.props); { - validateStyleAndHintProps(preloadProps, props, hint._dev_implicit_construction); + validateStyleAndHintProps(hint.props, props, hint._dev_implicit_construction); } } else { var preloadResourceProps = preloadAsStylePropsFromProps(href, props); @@ -2225,7 +2368,7 @@ function createStyleResource(resources, href, precedence, props) { hint._dev_implicit_construction = true; } - captureImplicitPreloadResourceDependency(resources, hint); + resources.explicitStylePreloads.add(hint); } var resource = { @@ -2235,40 +2378,82 @@ function createStyleResource(resources, href, precedence, props) { flushed: false, inShell: false, props: props, - hint: hint + hint: hint, + set: precedenceSet }; stylesMap.set(href, resource); return resource; } -function captureStyleResourceDependency(resources, boundaryResources, styleResource) { - var precedences = resources.precedences; - var precedence = styleResource.precedence; +function adoptPreloadPropsForStyleProps(resourceProps, preloadProps) { + if (resourceProps.crossOrigin == null) resourceProps.crossOrigin = preloadProps.crossOrigin; + if (resourceProps.referrerPolicy == null) resourceProps.referrerPolicy = preloadProps.referrerPolicy; + if (resourceProps.title == null) resourceProps.title = preloadProps.title; +} - if (boundaryResources) { - boundaryResources.add(styleResource); +function scriptPropsFromPreinitOptions(src, options) { + return { + src: src, + async: true, + crossOrigin: options.crossOrigin, + integrity: options.integrity + }; +} - if (!precedences.has(precedence)) { - precedences.set(precedence, new Set()); +function scriptPropsFromRawProps(src, rawProps) { + var props = assign({}, rawProps); + + props.src = src; + return props; +} + +function createScriptResource(resources, src, props) { + { + if (resources.scriptsMap.has(src)) { + error('createScriptResource was called when a script Resource matching the same src already exists. This is a bug in React.'); + } + } + + var scriptsMap = resources.scriptsMap, + preloadsMap = resources.preloadsMap; + var hint = preloadsMap.get(src); + + if (hint) { + // If a preload for this style Resource already exists there are certain props we want to adopt + // on the style Resource, primarily focussed on making sure the style network pathways utilize + // the preload pathways. For instance if you have diffreent crossOrigin attributes for a preload + // and a stylesheet the stylesheet will make a new request even if the preload had already loaded + adoptPreloadPropsForScriptProps(props, hint.props); + + { + validateScriptAndHintProps(hint.props, props, hint._dev_implicit_construction); } } else { - var set = precedences.get(precedence); + var preloadResourceProps = preloadAsScriptPropsFromProps(src, props); + hint = createPreloadResource(resources, src, 'script', preloadResourceProps); - if (!set) { - set = new Set(); - precedences.set(precedence, set); + { + hint._dev_implicit_construction = true; } - set.add(styleResource); + resources.explicitScriptPreloads.add(hint); } -} -function captureExplicitPreloadResourceDependency(resources, preloadResource) { - resources.explicitPreloads.add(preloadResource); + var resource = { + type: 'script', + src: src, + flushed: false, + props: props, + hint: hint + }; + scriptsMap.set(src, resource); + return resource; } -function captureImplicitPreloadResourceDependency(resources, preloadResource) { - resources.implicitPreloads.add(preloadResource); +function adoptPreloadPropsForScriptProps(resourceProps, preloadProps) { + if (resourceProps.crossOrigin == null) resourceProps.crossOrigin = preloadProps.crossOrigin; + if (resourceProps.referrerPolicy == null) resourceProps.referrerPolicy = preloadProps.referrerPolicy; + if (resourceProps.integrity == null) resourceProps.integrity = preloadProps.integrity; } // Construct a resource from link props. @@ -2277,6 +2462,7 @@ function resourcesFromLink(props) { throw new Error('"currentResources" was expected to exist. This is a bug in React.'); } + var resources = currentResources; var rel = props.rel, href = props.href; @@ -2301,28 +2487,29 @@ function resourcesFromLink(props) { } // $FlowFixMe[incompatible-use] found when upgrading Flow - var preloadResource = currentResources.preloadsMap.get(href); + var preloadResource = resources.preloadsMap.get(href); if (!preloadResource) { preloadResource = createPreloadResource( // $FlowFixMe[incompatible-call] found when upgrading Flow - currentResources, href, 'style', preloadAsStylePropsFromProps(href, props)); + resources, href, 'style', preloadAsStylePropsFromProps(href, props)); { preloadResource._dev_implicit_construction = true; } + + resources.usedStylePreloads.add(preloadResource); } - captureImplicitPreloadResourceDependency( // $FlowFixMe[incompatible-call] found when upgrading Flow - currentResources, preloadResource); return false; } else { // We are able to convert this link element to a resource exclusively. We construct the relevant Resource // and return true indicating that this link was fully consumed. - var resource = currentResources.stylesMap.get(href); + var resource = resources.stylesMap.get(href); if (resource) { { var resourceProps = stylePropsFromRawProps(href, precedence, props); + adoptPreloadPropsForStyleProps(resourceProps, resource.hint.props); validateStyleResourceDifference(resource.props, resourceProps); } } else { @@ -2330,26 +2517,22 @@ function resourcesFromLink(props) { resource = createStyleResource( // $FlowFixMe[incompatible-call] found when upgrading Flow currentResources, href, precedence, _resourceProps); + resources.usedStylePreloads.add(resource.hint); + } + + if (resources.boundaryResources) { + resources.boundaryResources.add(resource); + } else { + resource.set.add(resource); } - captureStyleResourceDependency( // $FlowFixMe[incompatible-call] found when upgrading Flow - currentResources, // $FlowFixMe[incompatible-use] found when upgrading Flow - currentResources.boundaryResources, resource); return true; } } case 'preload': { - var as = props.as, - _onLoad = props.onLoad, - _onError = props.onError; - - if (_onLoad || _onError) { - // these props signal an opt-out of Resource semantics. We don't warn because there is no - // conflicting opt-in like there is with Style Resources - return false; - } + var as = props.as; switch (as) { case 'script': @@ -2358,24 +2541,40 @@ function resourcesFromLink(props) { { { validateLinkPropsForPreloadResource(props); - } // $FlowFixMe[incompatible-use] found when upgrading Flow - + } - var _resource = currentResources.preloadsMap.get(href); + var _resource2 = resources.preloadsMap.get(href); - if (_resource) { + if (_resource2) { { - var originallyImplicit = _resource._dev_implicit_construction === true; + var originallyImplicit = _resource2._dev_implicit_construction === true; var latestProps = preloadPropsFromRawProps(href, as, props); - validatePreloadResourceDifference(_resource.props, originallyImplicit, latestProps, false); + validatePreloadResourceDifference(_resource2.props, originallyImplicit, latestProps, false); } } else { - _resource = createPreloadResource( // $FlowFixMe[incompatible-call] found when upgrading Flow - currentResources, href, as, preloadPropsFromRawProps(href, as, props)); - } // $FlowFixMe[incompatible-call] found when upgrading Flow - + _resource2 = createPreloadResource(resources, href, as, preloadPropsFromRawProps(href, as, props)); + + switch (as) { + case 'script': + { + resources.explicitScriptPreloads.add(_resource2); + break; + } + + case 'style': + { + resources.explicitStylePreloads.add(_resource2); + break; + } + + case 'font': + { + resources.fontPreloads.add(_resource2); + break; + } + } + } - captureExplicitPreloadResourceDependency(currentResources, _resource); return true; } } @@ -2384,23 +2583,84 @@ function resourcesFromLink(props) { } } + return false; +} // Construct a resource from link props. + +function resourcesFromScript(props) { + if (!currentResources) { + throw new Error('"currentResources" was expected to exist. This is a bug in React.'); + } + + var resources = currentResources; + var src = props.src, + async = props.async, + onLoad = props.onLoad, + onError = props.onError; + + if (!src || typeof src !== 'string') { + return false; + } + + if (async) { + if (onLoad || onError) { + + var preloadResource = resources.preloadsMap.get(src); + + if (!preloadResource) { + preloadResource = createPreloadResource( // $FlowFixMe[incompatible-call] found when upgrading Flow + resources, src, 'script', preloadAsScriptPropsFromProps(src, props)); + + { + preloadResource._dev_implicit_construction = true; + } + + resources.usedScriptPreloads.add(preloadResource); + } + } else { + var resource = resources.scriptsMap.get(src); + + if (resource) { + { + var latestProps = scriptPropsFromRawProps(src, props); + adoptPreloadPropsForScriptProps(latestProps, resource.hint.props); + validateScriptResourceDifference(resource.props, latestProps); + } + } else { + var resourceProps = scriptPropsFromRawProps(src, props); + resource = createScriptResource(resources, src, resourceProps); + resources.scripts.add(resource); + } + } + + return true; + } + return false; } function hoistResources(resources, source) { - if (resources.boundaryResources) { - mergeBoundaryResources(resources.boundaryResources, source); + var currentBoundaryResources = resources.boundaryResources; + + if (currentBoundaryResources) { + source.forEach(function (resource) { + return currentBoundaryResources.add(resource); + }); source.clear(); } } function hoistResourcesToRoot(resources, boundaryResources) { boundaryResources.forEach(function (resource) { - // all precedences are set upon discovery. so we know we will have a set here - var set = resources.precedences.get(resource.precedence); - set.add(resource); + return resource.set.add(resource); }); boundaryResources.clear(); } +// The build script is at scripts/rollup/generate-inline-fizz-runtime.js. +// Run `yarn generate-inline-fizz-runtime` to generate. +var clientRenderBoundary = '$RX=function(b,c,d,e){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),b._reactRetry&&b._reactRetry())};'; +var completeBoundary = '$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}};'; +var completeBoundaryWithStyles = '$RM=new Map;\n$RR=function(p,q,v){function r(l){this.s=l}for(var t=$RC,u=$RM,m=new Map,n=document,g,e,f=n.querySelectorAll("link[data-precedence],style[data-precedence]"),d=0;e=f[d++];)m.set(e.dataset.precedence,g=e);e=0;f=[];for(var c,h,b,a;c=v[e++];){var k=0;h=c[k++];if(b=u.get(h))"l"!==b.s&&f.push(b);else{a=n.createElement("link");a.href=h;a.rel="stylesheet";for(a.dataset.precedence=d=c[k++];b=c[k++];)a.setAttribute(b,c[k++]);b=a._p=new Promise(function(l,w){a.onload=l;a.onerror=w});b.then(r.bind(b,\n"l"),r.bind(b,"e"));u.set(h,b);f.push(b);c=m.get(d)||g;c===g&&(g=a);m.set(d,a);c?c.parentNode.insertBefore(a,c.nextSibling):(d=n.head,d.insertBefore(a,d.firstChild))}}Promise.all(f).then(t.bind(null,p,q,""),t.bind(null,p,q,"Resource failed to load"))};'; +var completeSegment = '$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};'; + var ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; var ReactDOMCurrentDispatcher = ReactDOMSharedInternals.Dispatcher; @@ -2447,7 +2707,7 @@ var scriptReplacer = function (match, prefix, s, suffix) { }; // Allows us to keep track of what we've already written so we can refer back to it. -function createResponseState(identifierPrefix, nonce, bootstrapScriptContent, bootstrapScripts, bootstrapModules) { +function createResponseState(identifierPrefix, nonce, bootstrapScriptContent, bootstrapScripts, bootstrapModules, externalRuntimeConfig) { var idPrefix = identifierPrefix === undefined ? '' : identifierPrefix; var inlineScriptWithNonce = nonce === undefined ? startInlineScript : stringToPrecomputedChunk(''); @@ -4198,10 +4295,10 @@ function writeCompletedSegmentInstruction(destination, responseState, contentSeg writeChunk(destination, formattedID); return writeChunkAndReturn(destination, completeSegmentScript3); } -var completeBoundaryScript1Full = stringToPrecomputedChunk(completeBoundaryFunction + ';$RC("'); +var completeBoundaryScript1Full = stringToPrecomputedChunk(completeBoundary + ';$RC("'); var completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("'); -var completeBoundaryWithStylesScript1FullBoth = stringToPrecomputedChunk(completeBoundaryFunction + ';' + styleInsertionFunction + ';$RR("'); -var completeBoundaryWithStylesScript1FullPartial = stringToPrecomputedChunk(styleInsertionFunction + ';$RR("'); +var completeBoundaryWithStylesScript1FullBoth = stringToPrecomputedChunk(completeBoundary + ';' + completeBoundaryWithStyles + ';$RR("'); +var completeBoundaryWithStylesScript1FullPartial = stringToPrecomputedChunk(completeBoundaryWithStyles + ';$RR("'); var completeBoundaryWithStylesScript1Partial = stringToPrecomputedChunk('$RR("'); var completeBoundaryScript2 = stringToPrecomputedChunk('","'); var completeBoundaryScript2a = stringToPrecomputedChunk('",'); @@ -4255,7 +4352,7 @@ function writeCompletedBoundaryInstruction(destination, responseState, boundaryI return writeChunkAndReturn(destination, completeBoundaryScript4); } -var clientRenderScript1Full = stringToPrecomputedChunk(clientRenderFunction + ';$RX("'); +var clientRenderScript1Full = stringToPrecomputedChunk(clientRenderBoundary + ';$RX("'); var clientRenderScript1Partial = stringToPrecomputedChunk('$RX("'); var clientRenderScript1A = stringToPrecomputedChunk('"'); var clientRenderScript2 = stringToPrecomputedChunk(')'); @@ -4352,86 +4449,123 @@ function escapeJSObjectForInstructionScripts(input) { }); } +var precedencePlaceholderStart = stringToPrecomputedChunk(''); function writeInitialResources(destination, resources, responseState) { - var explicitPreloadsTarget = []; - var remainingTarget = []; - var precedences = resources.precedences, - explicitPreloads = resources.explicitPreloads, - implicitPreloads = resources.implicitPreloads; // Flush stylesheets first by earliest precedence - - precedences.forEach(function (precedenceResources) { - precedenceResources.forEach(function (resource) { - // resources should not already be flushed so we elide this check - pushLinkImpl(remainingTarget, resource.props, responseState); - resource.flushed = true; - resource.inShell = true; - resource.hint.flushed = true; - }); - }); - explicitPreloads.forEach(function (resource) { + function flushLinkResource(resource) { if (!resource.flushed) { - pushLinkImpl(explicitPreloadsTarget, resource.props, responseState); + pushLinkImpl(target, resource.props, responseState); resource.flushed = true; } + } + + var target = []; + var fontPreloads = resources.fontPreloads, + precedences = resources.precedences, + usedStylePreloads = resources.usedStylePreloads, + scripts = resources.scripts, + usedScriptPreloads = resources.usedScriptPreloads, + explicitStylePreloads = resources.explicitStylePreloads, + explicitScriptPreloads = resources.explicitScriptPreloads; + fontPreloads.forEach(function (r) { + // font preload Resources should not already be flushed so we elide this check + pushLinkImpl(target, r.props, responseState); + r.flushed = true; }); - explicitPreloads.clear(); - implicitPreloads.forEach(function (resource) { - if (!resource.flushed) { - pushLinkImpl(remainingTarget, resource.props, responseState); - resource.flushed = true; + fontPreloads.clear(); // Flush stylesheets first by earliest precedence + + precedences.forEach(function (p, precedence) { + if (p.size) { + p.forEach(function (r) { + // resources should not already be flushed so we elide this check + pushLinkImpl(target, r.props, responseState); + r.flushed = true; + r.inShell = true; + r.hint.flushed = true; + }); + p.clear(); + } else { + target.push(precedencePlaceholderStart, escapeTextForBrowser(stringToChunk(precedence)), precedencePlaceholderEnd); } }); - implicitPreloads.clear(); + usedStylePreloads.forEach(flushLinkResource); + usedStylePreloads.clear(); + scripts.forEach(function (r) { + // should never be flushed already + pushStartGenericElement(target, r.props, 'script', responseState); + pushEndInstance(target, target, 'script', r.props); + r.flushed = true; + r.hint.flushed = true; + }); + scripts.clear(); + usedScriptPreloads.forEach(flushLinkResource); + usedScriptPreloads.clear(); + explicitStylePreloads.forEach(flushLinkResource); + explicitStylePreloads.clear(); + explicitScriptPreloads.forEach(flushLinkResource); + explicitScriptPreloads.clear(); var i; var r = true; - for (i = 0; i < explicitPreloadsTarget.length - 1; i++) { - writeChunk(destination, explicitPreloadsTarget[i]); - } - - if (i < explicitPreloadsTarget.length) { - r = writeChunkAndReturn(destination, explicitPreloadsTarget[i]); - } - - for (i = 0; i < remainingTarget.length - 1; i++) { - writeChunk(destination, remainingTarget[i]); + for (i = 0; i < target.length - 1; i++) { + writeChunk(destination, target[i]); } - if (i < remainingTarget.length) { - r = writeChunkAndReturn(destination, remainingTarget[i]); + if (i < target.length) { + r = writeChunkAndReturn(destination, target[i]); } return r; } function writeImmediateResources(destination, resources, responseState) { - var explicitPreloads = resources.explicitPreloads, - implicitPreloads = resources.implicitPreloads; - var target = []; - explicitPreloads.forEach(function (resource) { + function flushLinkResource(resource) { if (!resource.flushed) { pushLinkImpl(target, resource.props, responseState); resource.flushed = true; } + } + + var target = []; + var fontPreloads = resources.fontPreloads, + usedStylePreloads = resources.usedStylePreloads, + scripts = resources.scripts, + usedScriptPreloads = resources.usedScriptPreloads, + explicitStylePreloads = resources.explicitStylePreloads, + explicitScriptPreloads = resources.explicitScriptPreloads; + fontPreloads.forEach(function (r) { + // font preload Resources should not already be flushed so we elide this check + pushLinkImpl(target, r.props, responseState); + r.flushed = true; }); - explicitPreloads.clear(); - implicitPreloads.forEach(function (resource) { - if (!resource.flushed) { - pushLinkImpl(target, resource.props, responseState); - resource.flushed = true; - } + fontPreloads.clear(); + usedStylePreloads.forEach(flushLinkResource); + usedStylePreloads.clear(); + scripts.forEach(function (r) { + // should never be flushed already + pushStartGenericElement(target, r.props, 'script', responseState); + pushEndInstance(target, target, 'script', r.props); + r.flushed = true; + r.hint.flushed = true; }); - implicitPreloads.clear(); - var i = 0; + scripts.clear(); + usedScriptPreloads.forEach(flushLinkResource); + usedScriptPreloads.clear(); + explicitStylePreloads.forEach(flushLinkResource); + explicitStylePreloads.clear(); + explicitScriptPreloads.forEach(flushLinkResource); + explicitScriptPreloads.clear(); + var i; + var r = true; - for (; i < target.length - 1; i++) { + for (i = 0; i < target.length - 1; i++) { writeChunk(destination, target[i]); } if (i < target.length) { - return writeChunkAndReturn(destination, target[i]); + r = writeChunkAndReturn(destination, target[i]); } - return false; + return r; } function hasStyleResourceDependencies(boundaryResources) { @@ -4519,7 +4653,7 @@ function writeStyleResourceDependency(destination, href, precedence, props) { case 'href': case 'rel': case 'precedence': - case 'data-rprec': + case 'data-precedence': { break; } @@ -4709,6 +4843,7 @@ var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen'); var REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden'); var REACT_CACHE_TYPE = Symbol.for('react.cache'); var REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for('react.default_value'); +var REACT_MEMO_CACHE_SENTINEL = Symbol.for('react.memo_cache_sentinel'); var MAYBE_ITERATOR_SYMBOL = Symbol.iterator; var FAUX_ITERATOR_SYMBOL = '@@iterator'; function getIteratorFn(maybeIterable) { @@ -6747,7 +6882,13 @@ function useCacheRefresh() { } function useMemoCache(size) { - return new Array(size); + var data = new Array(size); + + for (var i = 0; i < size; i++) { + data[i] = REACT_MEMO_CACHE_SENTINEL; + } + + return data; } function noop() {} 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 6fcd87364e750..9a2ff6f7d6467 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 @@ -2,14 +2,14 @@ * @license React * react-dom-server-legacy.browser.production.min.js * - * Copyright (c) Facebook, Inc. and its affiliates. + * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ 'use strict';var aa=require("react"),ba=require("react-dom");function m(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c