From 5188da824e6ec022681e0c7ca17f50e94430ef85 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 23 Oct 2018 12:54:51 -0700 Subject: [PATCH 1/2] Add enableStableConcurrentModeAPIs feature flag --- packages/shared/ReactFeatureFlags.js | 4 ++++ packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js | 1 + packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js | 1 + packages/shared/forks/ReactFeatureFlags.native-fb.js | 1 + packages/shared/forks/ReactFeatureFlags.native-oss.js | 1 + packages/shared/forks/ReactFeatureFlags.persistent.js | 1 + packages/shared/forks/ReactFeatureFlags.test-renderer.js | 1 + packages/shared/forks/ReactFeatureFlags.test-renderer.www.js | 1 + packages/shared/forks/ReactFeatureFlags.www.js | 2 ++ 9 files changed, 13 insertions(+) diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 75b27ac32e644..ada19d784e042 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -42,3 +42,7 @@ export function addUserTimingListener() { // React Fire: prevent the value and checked attributes from syncing // with their related DOM properties export const disableInputAttributeSyncing = false; + +// These APIs will no longer be "unstable" in the upcoming 16.7 release, +// Control this behavior with a flag to support 16.6 minor releases in the meanwhile. +export const enableStableConcurrentModeAPIs = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js index e71c6a46b636f..af1f294596c22 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fabric-fb.js @@ -21,6 +21,7 @@ export const enableProfilerTimer = __PROFILE__; export const enableSchedulerTracing = __PROFILE__; export const enableSuspenseServerRenderer = false; export const disableInputAttributeSyncing = false; +export const enableStableConcurrentModeAPIs = false; // Only used in www builds. export function addUserTimingListener() { diff --git a/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js b/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js index 7fb1144016287..20e5ba6f6f684 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fabric-oss.js @@ -21,6 +21,7 @@ export const enableProfilerTimer = __PROFILE__; export const enableSchedulerTracing = __PROFILE__; export const enableSuspenseServerRenderer = false; export const disableInputAttributeSyncing = false; +export const enableStableConcurrentModeAPIs = false; // Only used in www builds. export function addUserTimingListener() { diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 932f643b0beab..737035b32c5d3 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -26,6 +26,7 @@ export const enableUserTimingAPI = __DEV__; export const enableProfilerTimer = __PROFILE__; export const enableSchedulerTracing = __PROFILE__; export const enableSuspenseServerRenderer = false; +export const enableStableConcurrentModeAPIs = false; // Only used in www builds. export function addUserTimingListener() { diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 2a7f9776be400..bd11e8daf7702 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -21,6 +21,7 @@ export const enableProfilerTimer = __PROFILE__; export const enableSchedulerTracing = __PROFILE__; export const enableSuspenseServerRenderer = false; export const disableInputAttributeSyncing = false; +export const enableStableConcurrentModeAPIs = false; // Only used in www builds. export function addUserTimingListener() { diff --git a/packages/shared/forks/ReactFeatureFlags.persistent.js b/packages/shared/forks/ReactFeatureFlags.persistent.js index 6c45eb2ca7009..6880b7fa72bec 100644 --- a/packages/shared/forks/ReactFeatureFlags.persistent.js +++ b/packages/shared/forks/ReactFeatureFlags.persistent.js @@ -21,6 +21,7 @@ export const enableProfilerTimer = __PROFILE__; export const enableSchedulerTracing = __PROFILE__; export const enableSuspenseServerRenderer = false; export const disableInputAttributeSyncing = false; +export const enableStableConcurrentModeAPIs = false; // Only used in www builds. export function addUserTimingListener() { diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 1697d85818f8f..94ab168cd025b 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -21,6 +21,7 @@ export const enableProfilerTimer = false; export const enableSchedulerTracing = false; export const enableSuspenseServerRenderer = false; export const disableInputAttributeSyncing = false; +export const enableStableConcurrentModeAPIs = false; // Only used in www builds. export function addUserTimingListener() { diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 5c51317f212da..c3f67290eb750 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -20,6 +20,7 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false; export const enableProfilerTimer = false; export const enableSchedulerTracing = false; export const enableSuspenseServerRenderer = false; +export const enableStableConcurrentModeAPIs = false; // Only used in www builds. export function addUserTimingListener() { diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 83ba20a659077..755d418ed796a 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -31,6 +31,8 @@ export let enableUserTimingAPI = __DEV__; export const enableProfilerTimer = __PROFILE__; export const enableSchedulerTracing = __PROFILE__; +export const enableStableConcurrentModeAPIs = false; + let refCount = 0; export function addUserTimingListener() { if (__DEV__) { From edb032e3a7f75e23eceaefd8e7e5337aa53eb961 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 23 Oct 2018 12:55:08 -0700 Subject: [PATCH 2/2] Conditionally name concurrent API based on enableStableConcurrentModeAPIs flag --- packages/react-dom/src/client/ReactDOM.js | 14 +++++++++----- packages/react/src/React.js | 11 +++++++++-- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index 9803142d41fb3..ffd34d6e48c11 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -34,6 +34,7 @@ import getComponentName from 'shared/getComponentName'; import invariant from 'shared/invariant'; import lowPriorityWarning from 'shared/lowPriorityWarning'; import warningWithoutStack from 'shared/warningWithoutStack'; +import {enableStableConcurrentModeAPIs} from 'shared/ReactFeatureFlags'; import * as ReactDOMComponentTree from './ReactDOMComponentTree'; import {restoreControlledState} from './ReactDOMComponent'; @@ -770,17 +771,20 @@ type RootOptions = { hydrate?: boolean, }; -ReactDOM.unstable_createRoot = function createRoot( - container: DOMContainer, - options?: RootOptions, -): ReactRoot { +function createRoot(container: DOMContainer, options?: RootOptions): ReactRoot { invariant( isValidContainer(container), 'unstable_createRoot(...): Target container is not a DOM element.', ); const hydrate = options != null && options.hydrate === true; return new ReactRoot(container, true, hydrate); -}; +} + +if (enableStableConcurrentModeAPIs) { + ReactDOM.createRoot = createRoot; +} else { + ReactDOM.unstable_createRoot = createRoot; +} const foundDevTools = DOMRenderer.injectIntoDevTools({ findFiberByHostInstance: ReactDOMComponentTree.getClosestInstanceFromNode, diff --git a/packages/react/src/React.js b/packages/react/src/React.js index feaf958b4bcfc..b04aef44cc693 100644 --- a/packages/react/src/React.js +++ b/packages/react/src/React.js @@ -33,6 +33,7 @@ import { cloneElementWithValidation, } from './ReactElementValidator'; import ReactSharedInternals from './ReactSharedInternals'; +import {enableStableConcurrentModeAPIs} from 'shared/ReactFeatureFlags'; const React = { Children: { @@ -54,9 +55,7 @@ const React = { Fragment: REACT_FRAGMENT_TYPE, StrictMode: REACT_STRICT_MODE_TYPE, - unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE, Suspense: REACT_SUSPENSE_TYPE, - unstable_Profiler: REACT_PROFILER_TYPE, createElement: __DEV__ ? createElementWithValidation : createElement, cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement, @@ -68,4 +67,12 @@ const React = { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals, }; +if (enableStableConcurrentModeAPIs) { + React.ConcurrentMode = REACT_CONCURRENT_MODE_TYPE; + React.Profiler = REACT_PROFILER_TYPE; +} else { + React.unstable_ConcurrentMode = REACT_CONCURRENT_MODE_TYPE; + React.unstable_Profiler = REACT_PROFILER_TYPE; +} + export default React;