From a73fbc35ec16d4d06efc754c858dde6161009e09 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 10 Feb 2020 19:39:39 +0000 Subject: [PATCH 1/8] Move getIsHydrating from FB fork to Experimental flag --- packages/react-dom/src/client/ReactDOM.js | 3 +++ packages/react-dom/src/client/ReactDOMFB.js | 3 --- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index ee54497f232..0b28b8bcb31 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -37,6 +37,7 @@ import { attemptHydrationAtCurrentPriority, act, } from 'react-reconciler/inline.dom'; +import {getIsHydrating} from 'react-reconciler/src/ReactFiberHydrationContext'; import {createPortal as createPortalImpl} from 'shared/ReactPortal'; import {canUseDOM} from 'shared/ExecutionEnvironment'; import {setBatchingImplementation} from 'legacy-events/ReactGenericBatching'; @@ -179,6 +180,8 @@ if (exposeConcurrentModeAPIs) { queueExplicitHydrationTarget(target); } }; + + ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.getIsHydrating = getIsHydrating; } if (!disableUnstableRenderSubtreeIntoContainer) { diff --git a/packages/react-dom/src/client/ReactDOMFB.js b/packages/react-dom/src/client/ReactDOMFB.js index a995f485578..877c7d2ea3f 100644 --- a/packages/react-dom/src/client/ReactDOMFB.js +++ b/packages/react-dom/src/client/ReactDOMFB.js @@ -7,7 +7,6 @@ * @flow */ -import {getIsHydrating} from 'react-reconciler/src/ReactFiberHydrationContext'; import {addUserTimingListener} from 'shared/ReactFeatureFlags'; import ReactDOM from './ReactDOM'; @@ -26,8 +25,6 @@ Object.assign( }, // Perf experiment addUserTimingListener, - - getIsHydrating, }, ); From cef433bc02ae23c9c96a3c6d40858002a39a1c3e Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 10 Feb 2020 18:56:47 +0000 Subject: [PATCH 2/8] Add FB_WWW_MODERN bundle types --- scripts/rollup/build.js | 43 ++++++++++++++++++++++++++++++--- scripts/rollup/bundles.js | 9 +++++++ scripts/rollup/forks.js | 30 ++++++++++++++++++++++- scripts/rollup/packaging.js | 6 +++++ scripts/rollup/wrappers.js | 48 +++++++++++++++++++++++++++++++++++++ 5 files changed, 132 insertions(+), 4 deletions(-) diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js index ec0cc2c1754..46d86141b2b 100644 --- a/scripts/rollup/build.js +++ b/scripts/rollup/build.js @@ -54,6 +54,9 @@ const { FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING, + FB_WWW_MODERN_DEV, + FB_WWW_MODERN_PROD, + FB_WWW_MODERN_PROFILING, RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING, @@ -139,6 +142,9 @@ function getBabelConfig( case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: return Object.assign({}, options, { plugins: options.plugins.concat([ // Minify invariant messages @@ -214,6 +220,9 @@ function getFormat(bundleType) { case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: case RN_OSS_DEV: case RN_OSS_PROD: case RN_OSS_PROFILING: @@ -244,14 +253,20 @@ function getFilename(name, globalName, bundleType) { case RN_OSS_DEV: case RN_FB_DEV: return `${globalName}-dev.js`; + case FB_WWW_MODERN_DEV: + return `${globalName}Modern-dev.js`; case FB_WWW_PROD: case RN_OSS_PROD: case RN_FB_PROD: return `${globalName}-prod.js`; + case FB_WWW_MODERN_PROD: + return `${globalName}Modern-prod.js`; case FB_WWW_PROFILING: case RN_FB_PROFILING: case RN_OSS_PROFILING: return `${globalName}-profiling.js`; + case FB_WWW_MODERN_PROFILING: + return `${globalName}Modern-profiling.js`; } } @@ -260,6 +275,7 @@ function isProductionBundleType(bundleType) { case UMD_DEV: case NODE_DEV: case FB_WWW_DEV: + case FB_WWW_MODERN_DEV: case RN_OSS_DEV: case RN_FB_DEV: return false; @@ -269,6 +285,8 @@ function isProductionBundleType(bundleType) { case NODE_PROFILING: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: case RN_OSS_PROD: case RN_OSS_PROFILING: case RN_FB_PROD: @@ -283,6 +301,8 @@ function isProfilingBundleType(bundleType) { switch (bundleType) { case FB_WWW_DEV: case FB_WWW_PROD: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: case NODE_DEV: case NODE_PROD: case RN_FB_DEV: @@ -293,6 +313,7 @@ function isProfilingBundleType(bundleType) { case UMD_PROD: return false; case FB_WWW_PROFILING: + case FB_WWW_MODERN_PROFILING: case NODE_PROFILING: case RN_FB_PROFILING: case RN_OSS_PROFILING: @@ -336,10 +357,15 @@ function getPlugins( bundleType === UMD_DEV || bundleType === UMD_PROD || bundleType === UMD_PROFILING; - const isFBBundle = + const isFBClassicBundle = bundleType === FB_WWW_DEV || bundleType === FB_WWW_PROD || bundleType === FB_WWW_PROFILING; + const isFBModernBundle = + bundleType === FB_WWW_MODERN_DEV || + bundleType === FB_WWW_MODERN_PROD || + bundleType === FB_WWW_MODERN_PROFILING; + const isFBBundle = isFBClassicBundle || isFBModernBundle; const isRNBundle = bundleType === RN_OSS_DEV || bundleType === RN_OSS_PROD || @@ -485,10 +511,15 @@ async function createBundle(bundle, bundleType) { const packageName = Packaging.getPackageName(bundle.entry); let resolvedEntry = require.resolve(bundle.entry); - const isFBBundle = + const isFBClassicBundle = bundleType === FB_WWW_DEV || bundleType === FB_WWW_PROD || bundleType === FB_WWW_PROFILING; + const isFBModernBundle = + bundleType === FB_WWW_MODERN_DEV || + bundleType === FB_WWW_MODERN_PROD || + bundleType === FB_WWW_MODERN_PROFILING; + const isFBBundle = isFBClassicBundle || isFBModernBundle; if (isFBBundle) { const resolvedFBEntry = resolvedEntry.replace('.js', '.fb.js'); if (fs.existsSync(resolvedFBEntry)) { @@ -545,7 +576,10 @@ async function createBundle(bundle, bundleType) { legacy: bundleType === FB_WWW_DEV || bundleType === FB_WWW_PROD || - bundleType === FB_WWW_PROFILING, + bundleType === FB_WWW_PROFILING || + bundleType === FB_WWW_MODERN_DEV || + bundleType === FB_WWW_MODERN_PROD || + bundleType === FB_WWW_MODERN_PROFILING, }; const [mainOutputPath, ...otherOutputPaths] = Packaging.getBundleOutputPaths( bundleType, @@ -695,6 +729,9 @@ async function buildEverything() { [bundle, FB_WWW_DEV], [bundle, FB_WWW_PROD], [bundle, FB_WWW_PROFILING], + [bundle, FB_WWW_MODERN_DEV], + [bundle, FB_WWW_MODERN_PROD], + [bundle, FB_WWW_MODERN_PROFILING], [bundle, RN_FB_DEV], [bundle, RN_FB_PROD], [bundle, RN_FB_PROFILING] diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index fd262e49f40..557de96ce4e 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -10,6 +10,9 @@ const bundleTypes = { FB_WWW_DEV: 'FB_WWW_DEV', FB_WWW_PROD: 'FB_WWW_PROD', FB_WWW_PROFILING: 'FB_WWW_PROFILING', + FB_WWW_MODERN_DEV: 'FB_WWW_MODERN_DEV', + FB_WWW_MODERN_PROD: 'FB_WWW_MODERN_PROD', + FB_WWW_MODERN_PROFILING: 'FB_WWW_MODERN_PROFILING', RN_OSS_DEV: 'RN_OSS_DEV', RN_OSS_PROD: 'RN_OSS_PROD', RN_OSS_PROFILING: 'RN_OSS_PROFILING', @@ -28,6 +31,9 @@ const { FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING, + FB_WWW_MODERN_DEV, + FB_WWW_MODERN_PROD, + FB_WWW_MODERN_PROFILING, RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING, @@ -88,6 +94,9 @@ const bundles = [ FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING, + FB_WWW_MODERN_DEV, + FB_WWW_MODERN_PROD, + FB_WWW_MODERN_PROFILING, ], moduleType: RENDERER, entry: 'react-dom', diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js index 9f1f3c41bdd..faff3c6644a 100644 --- a/scripts/rollup/forks.js +++ b/scripts/rollup/forks.js @@ -10,6 +10,9 @@ const { FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING, + FB_WWW_MODERN_DEV, + FB_WWW_MODERN_PROD, + FB_WWW_MODERN_PROFILING, RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING, @@ -103,6 +106,9 @@ const forks = Object.freeze({ case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: return 'shared/forks/ReactFeatureFlags.test-renderer.www.js'; } return 'shared/forks/ReactFeatureFlags.test-renderer.js'; @@ -115,6 +121,9 @@ const forks = Object.freeze({ case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: return 'shared/forks/ReactFeatureFlags.www.js'; } } @@ -163,7 +172,10 @@ const forks = Object.freeze({ if ( bundleType === FB_WWW_DEV || bundleType === FB_WWW_PROD || - bundleType === FB_WWW_PROFILING + bundleType === FB_WWW_PROFILING || + bundleType === FB_WWW_MODERN_DEV || + bundleType === FB_WWW_MODERN_PROD || + bundleType === FB_WWW_MODERN_PROFILING ) { return 'scheduler/src/forks/SchedulerFeatureFlags.www.js'; } @@ -185,6 +197,7 @@ const forks = Object.freeze({ 'shared/consoleWithStackDev': (bundleType, entry) => { switch (bundleType) { case FB_WWW_DEV: + case FB_WWW_MODERN_DEV: return 'shared/forks/consoleWithStackDev.www.js'; default: return null; @@ -198,6 +211,9 @@ const forks = Object.freeze({ case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: return 'react/src/forks/ReactCurrentOwner.www.js'; default: return null; @@ -211,6 +227,9 @@ const forks = Object.freeze({ case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: return 'react/src/forks/ReactCurrentDispatcher.www.js'; default: return null; @@ -234,6 +253,9 @@ const forks = Object.freeze({ case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: return 'shared/forks/invokeGuardedCallbackImpl.www.js'; default: return null; @@ -246,6 +268,9 @@ const forks = Object.freeze({ case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: // Use the www fork which shows an error dialog. return 'react-reconciler/src/forks/ReactFiberErrorDialog.www.js'; case RN_OSS_DEV: @@ -382,6 +407,9 @@ const forks = Object.freeze({ case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: // Use the www fork which is integrated with TimeSlice profiling. return 'react-dom/src/events/forks/EventListener-www.js'; default: diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js index c5ed04df5ab..c265cd2559d 100644 --- a/scripts/rollup/packaging.js +++ b/scripts/rollup/packaging.js @@ -19,6 +19,9 @@ const { FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING, + FB_WWW_MODERN_DEV, + FB_WWW_MODERN_PROD, + FB_WWW_MODERN_PROFILING, RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING, @@ -50,6 +53,9 @@ function getBundleOutputPaths(bundleType, filename, packageName) { case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + case FB_WWW_MODERN_DEV: + case FB_WWW_MODERN_PROD: + case FB_WWW_MODERN_PROFILING: return [`build/facebook-www/${filename}`]; case RN_OSS_DEV: case RN_OSS_PROD: diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js index f9ca412c436..a695e904b09 100644 --- a/scripts/rollup/wrappers.js +++ b/scripts/rollup/wrappers.js @@ -13,6 +13,9 @@ const { FB_WWW_DEV, FB_WWW_PROD, FB_WWW_PROFILING, + FB_WWW_MODERN_DEV, + FB_WWW_MODERN_PROD, + FB_WWW_MODERN_PROFILING, RN_OSS_DEV, RN_OSS_PROD, RN_OSS_PROFILING, @@ -169,6 +172,51 @@ ${license} * @preserve-invariant-messages */ +${source}`; + }, + + /****************** FB_WWW_MODERN_DEV ******************/ + [FB_WWW_MODERN_DEV](source, globalName, filename, moduleType) { + return `/** +${license} + * + * @noflow + * @preventMunge + * @preserve-invariant-messages + */ + +'use strict'; + +if (__DEV__) { + (function() { +${source} + })(); +}`; + }, + + /****************** FB_WWW_MODERN_PROD ******************/ + [FB_WWW_MODERN_PROD](source, globalName, filename, moduleType) { + return `/** +${license} + * + * @noflow + * @preventMunge + * @preserve-invariant-messages + */ + +${source}`; + }, + + /****************** FB_WWW_MODERN_PROFILING ******************/ + [FB_WWW_MODERN_PROFILING](source, globalName, filename, moduleType) { + return `/** +${license} + * + * @noflow + * @preventMunge + * @preserve-invariant-messages + */ + ${source}`; }, From 6b32ea00da7d32a6e31b523c31a78e81a81f0697 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 10 Feb 2020 20:05:12 +0000 Subject: [PATCH 3/8] Use unforked entry points for modern builds For example, ReactDOM rather than ReactDOMFB. --- scripts/rollup/build.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js index 46d86141b2b..3e201df29ca 100644 --- a/scripts/rollup/build.js +++ b/scripts/rollup/build.js @@ -520,7 +520,10 @@ async function createBundle(bundle, bundleType) { bundleType === FB_WWW_MODERN_PROD || bundleType === FB_WWW_MODERN_PROFILING; const isFBBundle = isFBClassicBundle || isFBModernBundle; - if (isFBBundle) { + + if (isFBClassicBundle) { + // Only do this for the classis bundles so that modern entry points + // match the ones we use in the open source. const resolvedFBEntry = resolvedEntry.replace('.js', '.fb.js'); if (fs.existsSync(resolvedFBEntry)) { resolvedEntry = resolvedFBEntry; From b390105792ed482481b0ab94665b4cb8617c2a3f Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 10 Feb 2020 20:25:44 +0000 Subject: [PATCH 4/8] Only use EventListener shim in classic WWW builds --- .../{EventListener-www.js => EventListener.www-classic.js} | 2 +- scripts/rollup/forks.js | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) rename packages/react-dom/src/events/forks/{EventListener-www.js => EventListener.www-classic.js} (93%) diff --git a/packages/react-dom/src/events/forks/EventListener-www.js b/packages/react-dom/src/events/forks/EventListener.www-classic.js similarity index 93% rename from packages/react-dom/src/events/forks/EventListener-www.js rename to packages/react-dom/src/events/forks/EventListener.www-classic.js index 99b337f0e78..c433976289f 100644 --- a/packages/react-dom/src/events/forks/EventListener-www.js +++ b/packages/react-dom/src/events/forks/EventListener.www-classic.js @@ -10,7 +10,7 @@ const EventListenerWWW = require('EventListener'); import typeof * as EventListenerType from '../EventListener'; -import typeof * as EventListenerShimType from './EventListener-www'; +import typeof * as EventListenerShimType from './EventListener.www-classic'; export function addEventBubbleListener( element: Element, diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js index faff3c6644a..c94ca7eefe6 100644 --- a/scripts/rollup/forks.js +++ b/scripts/rollup/forks.js @@ -401,17 +401,14 @@ const forks = Object.freeze({ ); }, - // We wrap top-level listeners into guards on www. + // We wrap top-level listeners into guards on www classic builds. 'react-dom/src/events/EventListener': (bundleType, entry) => { switch (bundleType) { case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: - case FB_WWW_MODERN_DEV: - case FB_WWW_MODERN_PROD: - case FB_WWW_MODERN_PROFILING: // Use the www fork which is integrated with TimeSlice profiling. - return 'react-dom/src/events/forks/EventListener-www.js'; + return 'react-dom/src/events/forks/EventListener.www-classic.js'; default: return null; } From 3899446802ef72c627a52bbb4a4707bb08caa4e4 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 10 Feb 2020 20:27:27 +0000 Subject: [PATCH 5/8] Fork feature flags for modern and classic WWW This doesn't change any of them yet. --- .../forks/ReactFeatureFlags.www-classic.js | 113 ++++++++++++++++++ ...www.js => ReactFeatureFlags.www-modern.js} | 2 +- scripts/rollup/forks.js | 3 +- 3 files changed, 116 insertions(+), 2 deletions(-) create mode 100644 packages/shared/forks/ReactFeatureFlags.www-classic.js rename packages/shared/forks/{ReactFeatureFlags.www.js => ReactFeatureFlags.www-modern.js} (99%) diff --git a/packages/shared/forks/ReactFeatureFlags.www-classic.js b/packages/shared/forks/ReactFeatureFlags.www-classic.js new file mode 100644 index 00000000000..4c0c31b54b0 --- /dev/null +++ b/packages/shared/forks/ReactFeatureFlags.www-classic.js @@ -0,0 +1,113 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags'; +import typeof * as FeatureFlagsShimType from './ReactFeatureFlags.www-classic'; + +// Re-export dynamic flags from the www version. +export const { + debugRenderPhaseSideEffectsForStrictMode, + disableInputAttributeSyncing, + enableTrustedTypesIntegration, + deferPassiveEffectCleanupDuringUnmount, + warnAboutShorthandPropertyCollision, +} = require('ReactFeatureFlags'); + +// In www, we have experimental support for gathering data +// from User Timing API calls in production. By default, we +// only emit performance.mark/measure calls in __DEV__. But if +// somebody calls addUserTimingListener() which is exposed as an +// experimental FB-only export, we call performance.mark/measure +// as long as there is more than a single listener. +export let enableUserTimingAPI = __DEV__; + +export const enableProfilerTimer = __PROFILE__; +export const enableSchedulerTracing = __PROFILE__; +export const enableSchedulerDebugging = true; + +export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false; +export const warnAboutDeprecatedLifecycles = true; +export const disableLegacyContext = false; +export const warnAboutStringRefs = false; +export const warnAboutDefaultPropsOnFunctionComponents = false; +export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; + +export const enableTrainModelFix = true; + +export const exposeConcurrentModeAPIs = __EXPERIMENTAL__; + +export const enableSuspenseServerRenderer = true; +export const enableSelectiveHydration = true; + +export const enableChunksAPI = __EXPERIMENTAL__; + +export const disableJavaScriptURLs = true; + +let refCount = 0; +export function addUserTimingListener() { + if (__DEV__) { + // Noop. + return () => {}; + } + refCount++; + updateFlagOutsideOfReactCallStack(); + return () => { + refCount--; + updateFlagOutsideOfReactCallStack(); + }; +} + +// The flag is intentionally updated in a timeout. +// We don't support toggling it during reconciliation or +// commit since that would cause mismatching user timing API calls. +let timeout = null; +function updateFlagOutsideOfReactCallStack() { + if (!timeout) { + timeout = setTimeout(() => { + timeout = null; + enableUserTimingAPI = refCount > 0; + }); + } +} + +export const enableDeprecatedFlareAPI = true; + +export const enableFundamentalAPI = false; + +export const enableScopeAPI = true; + +export const enableJSXTransformAPI = true; + +export const warnAboutUnmockedScheduler = true; + +export const enableSuspenseCallback = true; + +export const flushSuspenseFallbacksInTests = true; + +export const enableNativeTargetAsInstance = false; + +export const disableCreateFactory = false; + +export const disableTextareaChildren = false; + +export const disableMapsAsChildren = false; + +export const disableUnstableRenderSubtreeIntoContainer = false; + +export const warnUnstableRenderSubtreeIntoContainer = false; + +export const disableUnstableCreatePortal = false; + +export const isTestEnvironment = false; + +// Flow magic to verify the exports of this file match the original version. +// eslint-disable-next-line no-unused-vars +type Check<_X, Y: _X, X: Y = _X> = null; +// eslint-disable-next-line no-unused-expressions +(null: Check); diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www-modern.js similarity index 99% rename from packages/shared/forks/ReactFeatureFlags.www.js rename to packages/shared/forks/ReactFeatureFlags.www-modern.js index 74f346b017b..5a0e310bcdf 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www-modern.js @@ -8,7 +8,7 @@ */ import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags'; -import typeof * as FeatureFlagsShimType from './ReactFeatureFlags.www'; +import typeof * as FeatureFlagsShimType from './ReactFeatureFlags.www-modern'; // Re-export dynamic flags from the www version. export const { diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js index c94ca7eefe6..26b79aefc33 100644 --- a/scripts/rollup/forks.js +++ b/scripts/rollup/forks.js @@ -121,10 +121,11 @@ const forks = Object.freeze({ case FB_WWW_DEV: case FB_WWW_PROD: case FB_WWW_PROFILING: + return 'shared/forks/ReactFeatureFlags.www-classic.js'; case FB_WWW_MODERN_DEV: case FB_WWW_MODERN_PROD: case FB_WWW_MODERN_PROFILING: - return 'shared/forks/ReactFeatureFlags.www.js'; + return 'shared/forks/ReactFeatureFlags.www-modern.js'; } } return null; From c3d4f6aaa4d803659629ebe458e6cd205c9631df Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 10 Feb 2020 20:30:14 +0000 Subject: [PATCH 6/8] Disable a bunch of classic features for modern builds --- .../forks/ReactFeatureFlags.www-modern.js | 43 +++---------------- 1 file changed, 7 insertions(+), 36 deletions(-) diff --git a/packages/shared/forks/ReactFeatureFlags.www-modern.js b/packages/shared/forks/ReactFeatureFlags.www-modern.js index 5a0e310bcdf..04c8da3360e 100644 --- a/packages/shared/forks/ReactFeatureFlags.www-modern.js +++ b/packages/shared/forks/ReactFeatureFlags.www-modern.js @@ -19,13 +19,7 @@ export const { warnAboutShorthandPropertyCollision, } = require('ReactFeatureFlags'); -// In www, we have experimental support for gathering data -// from User Timing API calls in production. By default, we -// only emit performance.mark/measure calls in __DEV__. But if -// somebody calls addUserTimingListener() which is exposed as an -// experimental FB-only export, we call performance.mark/measure -// as long as there is more than a single listener. -export let enableUserTimingAPI = __DEV__; +export let enableUserTimingAPI = false; export const enableProfilerTimer = __PROFILE__; export const enableSchedulerTracing = __PROFILE__; @@ -33,7 +27,7 @@ export const enableSchedulerDebugging = true; export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false; export const warnAboutDeprecatedLifecycles = true; -export const disableLegacyContext = false; +export const disableLegacyContext = true; export const warnAboutStringRefs = false; export const warnAboutDefaultPropsOnFunctionComponents = false; export const disableSchedulerTimeoutBasedOnReactExpirationTime = false; @@ -49,31 +43,8 @@ export const enableChunksAPI = __EXPERIMENTAL__; export const disableJavaScriptURLs = true; -let refCount = 0; export function addUserTimingListener() { - if (__DEV__) { - // Noop. - return () => {}; - } - refCount++; - updateFlagOutsideOfReactCallStack(); - return () => { - refCount--; - updateFlagOutsideOfReactCallStack(); - }; -} - -// The flag is intentionally updated in a timeout. -// We don't support toggling it during reconciliation or -// commit since that would cause mismatching user timing API calls. -let timeout = null; -function updateFlagOutsideOfReactCallStack() { - if (!timeout) { - timeout = setTimeout(() => { - timeout = null; - enableUserTimingAPI = refCount > 0; - }); - } + throw new Error('Not implemented.'); } export const enableDeprecatedFlareAPI = true; @@ -94,15 +65,15 @@ export const enableNativeTargetAsInstance = false; export const disableCreateFactory = false; -export const disableTextareaChildren = false; +export const disableTextareaChildren = true; -export const disableMapsAsChildren = false; +export const disableMapsAsChildren = true; -export const disableUnstableRenderSubtreeIntoContainer = false; +export const disableUnstableRenderSubtreeIntoContainer = true; export const warnUnstableRenderSubtreeIntoContainer = false; -export const disableUnstableCreatePortal = false; +export const disableUnstableCreatePortal = true; export const isTestEnvironment = false; From 4c8e018d6120f9e5dd4dd8644aea6ff90502239b Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 10 Feb 2020 20:53:15 +0000 Subject: [PATCH 7/8] Add a flag to disable legacy ReactDOM APIs and set it for modern builds --- packages/react-dom/src/client/ReactDOM.js | 14 ++++++++------ packages/shared/ReactFeatureFlags.js | 2 ++ .../shared/forks/ReactFeatureFlags.native-fb.js | 1 + .../shared/forks/ReactFeatureFlags.native-oss.js | 1 + .../shared/forks/ReactFeatureFlags.persistent.js | 1 + .../forks/ReactFeatureFlags.test-renderer.js | 1 + .../forks/ReactFeatureFlags.test-renderer.www.js | 1 + packages/shared/forks/ReactFeatureFlags.testing.js | 1 + .../shared/forks/ReactFeatureFlags.www-classic.js | 2 ++ .../shared/forks/ReactFeatureFlags.www-modern.js | 2 ++ 10 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index 0b28b8bcb31..2ca128485b6 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -57,6 +57,7 @@ import ReactVersion from 'shared/ReactVersion'; import invariant from 'shared/invariant'; import { exposeConcurrentModeAPIs, + disableLegacyReactDOMAPIs, disableUnstableCreatePortal, disableUnstableRenderSubtreeIntoContainer, warnUnstableRenderSubtreeIntoContainer, @@ -134,12 +135,6 @@ function createPortal( const ReactDOM: Object = { createPortal, - // Legacy - findDOMNode, - hydrate, - render, - unmountComponentAtNode, - unstable_batchedUpdates: batchedUpdates, flushSync: flushSync, @@ -167,6 +162,13 @@ const ReactDOM: Object = { version: ReactVersion, }; +if (!disableLegacyReactDOMAPIs) { + ReactDOM.findDOMNode = findDOMNode; + ReactDOM.hydrate = hydrate; + ReactDOM.render = render; + ReactDOM.unmountComponentAtNode = unmountComponentAtNode; +} + if (exposeConcurrentModeAPIs) { ReactDOM.createRoot = createRoot; ReactDOM.createBlockingRoot = createBlockingRoot; diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index c73997f1dce..ad9c544c06a 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -114,6 +114,8 @@ export const disableLegacyContext = false; // Disables React.createFactory export const disableCreateFactory = false; +export const disableLegacyReactDOMAPIs = false; + // Disables children for