From 89feb7e2bc5901575b1c0988a6b0488e5d12a627 Mon Sep 17 00:00:00 2001 From: sebmarkbage Date: Tue, 2 Apr 2024 19:05:34 +0000 Subject: [PATCH] Make ART Concurrent if Legacy Mode is disabled (#28662) Pulling this out of #28657. This runs react-art in concurrent mode if disableLegacyMode is true. Effectively this means that the OSS version will be in concurrent mode and the `.modern.js` version for Meta will be in concurrent mode, once the flag flips for modern, but the `.classic.js` version for Meta will be in legacy mode. Updates flowing in from above flush synchronously so that they commit as a unit. This also ensures that refs are resolved before the parent life cycles. setStates deep in the tree will now be batched using "discrete" priority but should still happen same task. DiffTrain build for [5fcaa0a832db9573364cb73738e0a3b4cf2d27f2](https://github.com/facebook/react/commit/5fcaa0a832db9573364cb73738e0a3b4cf2d27f2) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/ReactART-dev.classic.js | 45 ++++-- compiled/facebook-www/ReactART-dev.modern.js | 45 ++++-- .../facebook-www/ReactART-prod.classic.js | 152 ++++++++++++------ compiled/facebook-www/ReactART-prod.modern.js | 152 ++++++++++++------ 5 files changed, 275 insertions(+), 121 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index ee6cf94fd0cf7..e2eb2eec0e37e 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -8cb6a1c0347a69ad4c580c5cf5f28d8be544d6d4 +5fcaa0a832db9573364cb73738e0a3b4cf2d27f2 diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js index 08b5c56bcf7fb..44e98b6c5fbe7 100644 --- a/compiled/facebook-www/ReactART-dev.classic.js +++ b/compiled/facebook-www/ReactART-dev.classic.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "19.0.0-www-classic-cbebd2c1"; + var ReactVersion = "19.0.0-www-classic-19a521f0"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -31074,6 +31074,8 @@ if (__DEV__) { var _proto4 = Surface.prototype; _proto4.componentDidMount = function componentDidMount() { + var _this = this; + var _this$props = this.props, height = _this$props.height, width = _this$props.width; @@ -31085,14 +31087,20 @@ if (__DEV__) { false, false, "" - ); - updateContainer(this.props.children, this._mountNode, this); + ); // We synchronously flush updates coming from above so that they commit together + // and so that refs resolve before the parent life cycles. + + flushSync(function () { + updateContainer(_this.props.children, _this._mountNode, _this); + }); }; _proto4.componentDidUpdate = function componentDidUpdate( prevProps, prevState ) { + var _this2 = this; + var props = this.props; if ( @@ -31100,9 +31108,12 @@ if (__DEV__) { props.width !== prevProps.width ) { this._surface.resize(+props.width, +props.height); - } + } // We synchronously flush updates coming from above so that they commit together + // and so that refs resolve before the parent life cycles. - updateContainer(this.props.children, this._mountNode, this); + flushSync(function () { + updateContainer(_this2.props.children, _this2._mountNode, _this2); + }); if (this._surface.render) { this._surface.render(); @@ -31110,11 +31121,17 @@ if (__DEV__) { }; _proto4.componentWillUnmount = function componentWillUnmount() { - updateContainer(null, this._mountNode, this); + var _this3 = this; + + // We synchronously flush updates coming from above so that they commit together + // and so that refs resolve before the parent life cycles. + flushSync(function () { + updateContainer(null, _this3._mountNode, _this3); + }); }; _proto4.render = function render() { - var _this = this; + var _this4 = this; // This is going to be a placeholder because we don't know what it will // actually resolve to because ART may render canvas, vml or svg tags here. @@ -31125,7 +31142,7 @@ if (__DEV__) { var Tag = Mode$1.Surface.tagName; return /*#__PURE__*/ React.createElement(Tag, { ref: function (ref) { - return (_this._tagRef = ref); + return (_this4._tagRef = ref); }, accessKey: props.accessKey, className: props.className, @@ -31144,25 +31161,25 @@ if (__DEV__) { _inheritsLoose(Text, _React$Component2); function Text(props) { - var _this2; + var _this5; - _this2 = _React$Component2.call(this, props) || this; // We allow reading these props. Ideally we could expose the Text node as + _this5 = _React$Component2.call(this, props) || this; // We allow reading these props. Ideally we could expose the Text node as // ref directly. ["height", "width", "x", "y"].forEach(function (key) { - Object.defineProperty(_assertThisInitialized(_this2), key, { + Object.defineProperty(_assertThisInitialized(_this5), key, { get: function () { return this._text ? this._text[key] : undefined; } }); }); - return _this2; + return _this5; } var _proto5 = Text.prototype; _proto5.render = function render() { - var _this3 = this; + var _this6 = this; // This means you can't have children that render into strings... var T = TYPES.TEXT; @@ -31170,7 +31187,7 @@ if (__DEV__) { T, _extends({}, this.props, { ref: function (t) { - return (_this3._text = t); + return (_this6._text = t); } }), childrenAsString(this.props.children) diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js index 548daa724ee23..93f1fac8fa3db 100644 --- a/compiled/facebook-www/ReactART-dev.modern.js +++ b/compiled/facebook-www/ReactART-dev.modern.js @@ -66,7 +66,7 @@ if (__DEV__) { return self; } - var ReactVersion = "19.0.0-www-modern-62398be5"; + var ReactVersion = "19.0.0-www-modern-55690e70"; var LegacyRoot = 0; var ConcurrentRoot = 1; @@ -30724,6 +30724,8 @@ if (__DEV__) { var _proto4 = Surface.prototype; _proto4.componentDidMount = function componentDidMount() { + var _this = this; + var _this$props = this.props, height = _this$props.height, width = _this$props.width; @@ -30735,14 +30737,20 @@ if (__DEV__) { false, false, "" - ); - updateContainer(this.props.children, this._mountNode, this); + ); // We synchronously flush updates coming from above so that they commit together + // and so that refs resolve before the parent life cycles. + + flushSync(function () { + updateContainer(_this.props.children, _this._mountNode, _this); + }); }; _proto4.componentDidUpdate = function componentDidUpdate( prevProps, prevState ) { + var _this2 = this; + var props = this.props; if ( @@ -30750,9 +30758,12 @@ if (__DEV__) { props.width !== prevProps.width ) { this._surface.resize(+props.width, +props.height); - } + } // We synchronously flush updates coming from above so that they commit together + // and so that refs resolve before the parent life cycles. - updateContainer(this.props.children, this._mountNode, this); + flushSync(function () { + updateContainer(_this2.props.children, _this2._mountNode, _this2); + }); if (this._surface.render) { this._surface.render(); @@ -30760,11 +30771,17 @@ if (__DEV__) { }; _proto4.componentWillUnmount = function componentWillUnmount() { - updateContainer(null, this._mountNode, this); + var _this3 = this; + + // We synchronously flush updates coming from above so that they commit together + // and so that refs resolve before the parent life cycles. + flushSync(function () { + updateContainer(null, _this3._mountNode, _this3); + }); }; _proto4.render = function render() { - var _this = this; + var _this4 = this; // This is going to be a placeholder because we don't know what it will // actually resolve to because ART may render canvas, vml or svg tags here. @@ -30775,7 +30792,7 @@ if (__DEV__) { var Tag = Mode$1.Surface.tagName; return /*#__PURE__*/ React.createElement(Tag, { ref: function (ref) { - return (_this._tagRef = ref); + return (_this4._tagRef = ref); }, accessKey: props.accessKey, className: props.className, @@ -30794,25 +30811,25 @@ if (__DEV__) { _inheritsLoose(Text, _React$Component2); function Text(props) { - var _this2; + var _this5; - _this2 = _React$Component2.call(this, props) || this; // We allow reading these props. Ideally we could expose the Text node as + _this5 = _React$Component2.call(this, props) || this; // We allow reading these props. Ideally we could expose the Text node as // ref directly. ["height", "width", "x", "y"].forEach(function (key) { - Object.defineProperty(_assertThisInitialized(_this2), key, { + Object.defineProperty(_assertThisInitialized(_this5), key, { get: function () { return this._text ? this._text[key] : undefined; } }); }); - return _this2; + return _this5; } var _proto5 = Text.prototype; _proto5.render = function render() { - var _this3 = this; + var _this6 = this; // This means you can't have children that render into strings... var T = TYPES.TEXT; @@ -30820,7 +30837,7 @@ if (__DEV__) { T, _extends({}, this.props, { ref: function (t) { - return (_this3._text = t); + return (_this6._text = t); } }), childrenAsString(this.props.children) diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js index a3ec91519ff57..07605a07bc65c 100644 --- a/compiled/facebook-www/ReactART-prod.classic.js +++ b/compiled/facebook-www/ReactART-prod.classic.js @@ -9331,6 +9331,29 @@ function performSyncWorkOnRoot(root, lanes) { ensureRootIsScheduled(root); return null; } +function flushSync(fn) { + null !== rootWithPendingPassiveEffects && + 0 === rootWithPendingPassiveEffects.tag && + 0 === (executionContext & 6) && + flushPassiveEffects(); + var prevExecutionContext = executionContext; + executionContext |= 1; + var prevTransition = ReactCurrentBatchConfig.transition, + previousPriority = currentUpdatePriority; + try { + if ( + ((ReactCurrentBatchConfig.transition = null), + (currentUpdatePriority = 2), + fn) + ) + return fn(); + } finally { + (currentUpdatePriority = previousPriority), + (ReactCurrentBatchConfig.transition = prevTransition), + (executionContext = prevExecutionContext), + 0 === (executionContext & 6) && flushSyncWorkAcrossRoots_impl(!1); + } +} function resetWorkInProgressStack() { if (null !== workInProgress) { if (0 === workInProgressSuspendedReason) @@ -10408,6 +10431,51 @@ function FiberRootNode( ) containerInfo.push(null); } +function createContainer( + containerInfo, + tag, + hydrationCallbacks, + isStrictMode, + concurrentUpdatesByDefaultOverride, + identifierPrefix, + onUncaughtError, + onCaughtError, + onRecoverableError, + transitionCallbacks +) { + containerInfo = new FiberRootNode( + containerInfo, + tag, + !1, + identifierPrefix, + onUncaughtError, + onCaughtError, + onRecoverableError, + null + ); + containerInfo.hydrationCallbacks = hydrationCallbacks; + enableTransitionTracing && + (containerInfo.transitionCallbacks = transitionCallbacks); + 1 === tag + ? ((tag = 1), + !0 === isStrictMode && (tag |= 24), + concurrentUpdatesByDefaultOverride && (tag |= 32)) + : (tag = 0); + isStrictMode = createFiber(3, null, null, tag); + containerInfo.current = isStrictMode; + isStrictMode.stateNode = containerInfo; + concurrentUpdatesByDefaultOverride = createCache(); + concurrentUpdatesByDefaultOverride.refCount++; + containerInfo.pooledCache = concurrentUpdatesByDefaultOverride; + concurrentUpdatesByDefaultOverride.refCount++; + isStrictMode.memoizedState = { + element: null, + isDehydrated: !1, + cache: concurrentUpdatesByDefaultOverride + }; + initializeUpdateQueue(isStrictMode); + return containerInfo; +} function updateContainer(element, container, parentComponent, callback) { var current = container.current, lane = requestUpdateLane(current); @@ -10503,49 +10571,41 @@ var slice = Array.prototype.slice, _inheritsLoose(Surface, _React$Component); var _proto4 = Surface.prototype; _proto4.componentDidMount = function () { - var _this$props = this.props; + var $jscomp$this = this, + _this$props = this.props; this._surface = Mode$1.Surface( +_this$props.width, +_this$props.height, this._tagRef ); - _this$props = new FiberRootNode( - this._surface, - 0, - !1, - "", - void 0, - void 0, - void 0, - null - ); - _this$props.hydrationCallbacks = null; - enableTransitionTracing && (_this$props.transitionCallbacks = void 0); - var JSCompiler_inline_result = createFiber(3, null, null, 0); - _this$props.current = JSCompiler_inline_result; - JSCompiler_inline_result.stateNode = _this$props; - var initialCache = createCache(); - initialCache.refCount++; - _this$props.pooledCache = initialCache; - initialCache.refCount++; - JSCompiler_inline_result.memoizedState = { - element: null, - isDehydrated: !1, - cache: initialCache - }; - initializeUpdateQueue(JSCompiler_inline_result); - this._mountNode = _this$props; - updateContainer(this.props.children, this._mountNode, this); + this._mountNode = createContainer(this._surface, 0, null, !1, !1, ""); + flushSync(function () { + updateContainer( + $jscomp$this.props.children, + $jscomp$this._mountNode, + $jscomp$this + ); + }); }; _proto4.componentDidUpdate = function (prevProps) { - var props = this.props; + var $jscomp$this = this, + props = this.props; (props.height === prevProps.height && props.width === prevProps.width) || this._surface.resize(+props.width, +props.height); - updateContainer(this.props.children, this._mountNode, this); + flushSync(function () { + updateContainer( + $jscomp$this.props.children, + $jscomp$this._mountNode, + $jscomp$this + ); + }); this._surface.render && this._surface.render(); }; _proto4.componentWillUnmount = function () { - updateContainer(null, this._mountNode, this); + var $jscomp$this = this; + flushSync(function () { + updateContainer(null, $jscomp$this._mountNode, $jscomp$this); + }); }; _proto4.render = function () { var $jscomp$this = this, @@ -10592,19 +10652,19 @@ var slice = Array.prototype.slice, }; return Text; })(React.Component), - devToolsConfig$jscomp$inline_1109 = { + devToolsConfig$jscomp$inline_1119 = { findFiberByHostInstance: function () { return null; }, bundleType: 0, - version: "19.0.0-www-classic-aebe0d0d", + version: "19.0.0-www-classic-26116729", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1314 = { - bundleType: devToolsConfig$jscomp$inline_1109.bundleType, - version: devToolsConfig$jscomp$inline_1109.version, - rendererPackageName: devToolsConfig$jscomp$inline_1109.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1109.rendererConfig, +var internals$jscomp$inline_1313 = { + bundleType: devToolsConfig$jscomp$inline_1119.bundleType, + version: devToolsConfig$jscomp$inline_1119.version, + rendererPackageName: devToolsConfig$jscomp$inline_1119.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1119.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -10621,26 +10681,26 @@ var internals$jscomp$inline_1314 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1109.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1119.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-www-classic-aebe0d0d" + reconcilerVersion: "19.0.0-www-classic-26116729" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1315 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1314 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1315.isDisabled && - hook$jscomp$inline_1315.supportsFiber + !hook$jscomp$inline_1314.isDisabled && + hook$jscomp$inline_1314.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1315.inject( - internals$jscomp$inline_1314 + (rendererID = hook$jscomp$inline_1314.inject( + internals$jscomp$inline_1313 )), - (injectedHook = hook$jscomp$inline_1315); + (injectedHook = hook$jscomp$inline_1314); } catch (err) {} } var Path = Mode$1.Path; diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js index 6a55a7a0bd4d8..5277e214681ac 100644 --- a/compiled/facebook-www/ReactART-prod.modern.js +++ b/compiled/facebook-www/ReactART-prod.modern.js @@ -9032,6 +9032,29 @@ function performSyncWorkOnRoot(root, lanes) { ensureRootIsScheduled(root); return null; } +function flushSync(fn) { + null !== rootWithPendingPassiveEffects && + 0 === rootWithPendingPassiveEffects.tag && + 0 === (executionContext & 6) && + flushPassiveEffects(); + var prevExecutionContext = executionContext; + executionContext |= 1; + var prevTransition = ReactCurrentBatchConfig.transition, + previousPriority = currentUpdatePriority; + try { + if ( + ((ReactCurrentBatchConfig.transition = null), + (currentUpdatePriority = 2), + fn) + ) + return fn(); + } finally { + (currentUpdatePriority = previousPriority), + (ReactCurrentBatchConfig.transition = prevTransition), + (executionContext = prevExecutionContext), + 0 === (executionContext & 6) && flushSyncWorkAcrossRoots_impl(!1); + } +} function resetWorkInProgressStack() { if (null !== workInProgress) { if (0 === workInProgressSuspendedReason) @@ -10105,6 +10128,51 @@ function FiberRootNode( ) containerInfo.push(null); } +function createContainer( + containerInfo, + tag, + hydrationCallbacks, + isStrictMode, + concurrentUpdatesByDefaultOverride, + identifierPrefix, + onUncaughtError, + onCaughtError, + onRecoverableError, + transitionCallbacks +) { + containerInfo = new FiberRootNode( + containerInfo, + tag, + !1, + identifierPrefix, + onUncaughtError, + onCaughtError, + onRecoverableError, + null + ); + containerInfo.hydrationCallbacks = hydrationCallbacks; + enableTransitionTracing && + (containerInfo.transitionCallbacks = transitionCallbacks); + 1 === tag + ? ((tag = 1), + !0 === isStrictMode && (tag |= 24), + concurrentUpdatesByDefaultOverride && (tag |= 32)) + : (tag = 0); + isStrictMode = createFiber(3, null, null, tag); + containerInfo.current = isStrictMode; + isStrictMode.stateNode = containerInfo; + concurrentUpdatesByDefaultOverride = createCache(); + concurrentUpdatesByDefaultOverride.refCount++; + containerInfo.pooledCache = concurrentUpdatesByDefaultOverride; + concurrentUpdatesByDefaultOverride.refCount++; + isStrictMode.memoizedState = { + element: null, + isDehydrated: !1, + cache: concurrentUpdatesByDefaultOverride + }; + initializeUpdateQueue(isStrictMode); + return containerInfo; +} function updateContainer(element, container, parentComponent, callback) { parentComponent = container.current; var lane = requestUpdateLane(parentComponent); @@ -10160,49 +10228,41 @@ var slice = Array.prototype.slice, _inheritsLoose(Surface, _React$Component); var _proto4 = Surface.prototype; _proto4.componentDidMount = function () { - var _this$props = this.props; + var $jscomp$this = this, + _this$props = this.props; this._surface = Mode$1.Surface( +_this$props.width, +_this$props.height, this._tagRef ); - _this$props = new FiberRootNode( - this._surface, - 0, - !1, - "", - void 0, - void 0, - void 0, - null - ); - _this$props.hydrationCallbacks = null; - enableTransitionTracing && (_this$props.transitionCallbacks = void 0); - var JSCompiler_inline_result = createFiber(3, null, null, 0); - _this$props.current = JSCompiler_inline_result; - JSCompiler_inline_result.stateNode = _this$props; - var initialCache = createCache(); - initialCache.refCount++; - _this$props.pooledCache = initialCache; - initialCache.refCount++; - JSCompiler_inline_result.memoizedState = { - element: null, - isDehydrated: !1, - cache: initialCache - }; - initializeUpdateQueue(JSCompiler_inline_result); - this._mountNode = _this$props; - updateContainer(this.props.children, this._mountNode, this); + this._mountNode = createContainer(this._surface, 0, null, !1, !1, ""); + flushSync(function () { + updateContainer( + $jscomp$this.props.children, + $jscomp$this._mountNode, + $jscomp$this + ); + }); }; _proto4.componentDidUpdate = function (prevProps) { - var props = this.props; + var $jscomp$this = this, + props = this.props; (props.height === prevProps.height && props.width === prevProps.width) || this._surface.resize(+props.width, +props.height); - updateContainer(this.props.children, this._mountNode, this); + flushSync(function () { + updateContainer( + $jscomp$this.props.children, + $jscomp$this._mountNode, + $jscomp$this + ); + }); this._surface.render && this._surface.render(); }; _proto4.componentWillUnmount = function () { - updateContainer(null, this._mountNode, this); + var $jscomp$this = this; + flushSync(function () { + updateContainer(null, $jscomp$this._mountNode, $jscomp$this); + }); }; _proto4.render = function () { var $jscomp$this = this, @@ -10249,19 +10309,19 @@ var slice = Array.prototype.slice, }; return Text; })(React.Component), - devToolsConfig$jscomp$inline_1089 = { + devToolsConfig$jscomp$inline_1099 = { findFiberByHostInstance: function () { return null; }, bundleType: 0, - version: "19.0.0-www-modern-ee94f26b", + version: "19.0.0-www-modern-0c8ed270", rendererPackageName: "react-art" }; -var internals$jscomp$inline_1294 = { - bundleType: devToolsConfig$jscomp$inline_1089.bundleType, - version: devToolsConfig$jscomp$inline_1089.version, - rendererPackageName: devToolsConfig$jscomp$inline_1089.rendererPackageName, - rendererConfig: devToolsConfig$jscomp$inline_1089.rendererConfig, +var internals$jscomp$inline_1293 = { + bundleType: devToolsConfig$jscomp$inline_1099.bundleType, + version: devToolsConfig$jscomp$inline_1099.version, + rendererPackageName: devToolsConfig$jscomp$inline_1099.rendererPackageName, + rendererConfig: devToolsConfig$jscomp$inline_1099.rendererConfig, overrideHookState: null, overrideHookStateDeletePath: null, overrideHookStateRenamePath: null, @@ -10278,26 +10338,26 @@ var internals$jscomp$inline_1294 = { return null === fiber ? null : fiber.stateNode; }, findFiberByHostInstance: - devToolsConfig$jscomp$inline_1089.findFiberByHostInstance || + devToolsConfig$jscomp$inline_1099.findFiberByHostInstance || emptyFindFiberByHostInstance, findHostInstancesForRefresh: null, scheduleRefresh: null, scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "19.0.0-www-modern-ee94f26b" + reconcilerVersion: "19.0.0-www-modern-0c8ed270" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { - var hook$jscomp$inline_1295 = __REACT_DEVTOOLS_GLOBAL_HOOK__; + var hook$jscomp$inline_1294 = __REACT_DEVTOOLS_GLOBAL_HOOK__; if ( - !hook$jscomp$inline_1295.isDisabled && - hook$jscomp$inline_1295.supportsFiber + !hook$jscomp$inline_1294.isDisabled && + hook$jscomp$inline_1294.supportsFiber ) try { - (rendererID = hook$jscomp$inline_1295.inject( - internals$jscomp$inline_1294 + (rendererID = hook$jscomp$inline_1294.inject( + internals$jscomp$inline_1293 )), - (injectedHook = hook$jscomp$inline_1295); + (injectedHook = hook$jscomp$inline_1294); } catch (err) {} } var Path = Mode$1.Path;