@samitouri / QOS-React / commits / 7ccb37161f

Temporary fix for grabbing wrong rAF polyfill in ReactScheduler (#12837)

* Temporary fix for grabbing wrong rAF polyfill in ReactScheduler **what is the change?:** For now... We need to grab a slightly different implementation of rAF internally at FB than in Open Source. Making rAF a dependency of the ReactScheduler module allows us to fork the dependency at FB. NOTE: After this lands we have an alternative plan to make this module separate from React and require it before our Facebook timer polyfills are applied. But want to land this now to keep master in a working state and fix bugs folks are seeing at Facebook. Thanks @sebmarkbage @acdlite and @sophiebits for discussing the options and trade-offs for solving this issue. **why make this change?:** This fixes a problem we're running into when experimenting with ReactScheduler internally at Facebook, **and* it's part of our long term plan to use dependency injection with the scheduler to make it easier to test and adjust. **test plan:** Ran tests, lint, flow, and will manually test when syncing into Facebook's codebase. **issue:** See internal task T29442940 * ran prettier

Flarnie Marchan committed May 17, 2018 at 08:57 UTC 7ccb37161ffcbea33d6ede1397098faa567751f3
4 files changed +52 -16
packages/react-scheduler/src/ReactScheduler.js
+3 -16
@@ -39,20 +39,7 @@ type CallbackConfigType = {|
39 |};
40
41 import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
42 -import warning from 'fbjs/lib/warning';
43 -
44 -if (__DEV__) {
45 - if (
46 - ExecutionEnvironment.canUseDOM &&
47 - typeof requestAnimationFrame !== 'function'
48 - ) {
49 - warning(
50 - false,
51 - 'React depends on requestAnimationFrame. Make sure that you load a ' +
52 - 'polyfill in older browsers. https://fb.me/react-polyfills',
53 - );
54 - }
55 -}
42 +import requestAnimationFrameForReact from 'shared/requestAnimationFrameForReact';
43
44 const hasNativePerformanceNow =
45 typeof performance === 'object' && typeof performance.now === 'function';
@@ -232,7 +219,7 @@ if (!ExecutionEnvironment.canUseDOM) {
219 if (!isAnimationFrameScheduled) {
220 // Schedule another animation callback so we retry later.
221 isAnimationFrameScheduled = true;
235 - requestAnimationFrame(animationTick);
222 + requestAnimationFrameForReact(animationTick);
223 }
224 }
225 };
@@ -298,7 +285,7 @@ if (!ExecutionEnvironment.canUseDOM) {
285 // might want to still have setTimeout trigger scheduleWork as a backup to ensure
286 // that we keep performing work.
287 isAnimationFrameScheduled = true;
301 - requestAnimationFrame(animationTick);
288 + requestAnimationFrameForReact(animationTick);
289 }
290 return newCallbackId;
291 };
packages/shared/forks/requestAnimationFrameForReact.www.js new
+10
@@ -0,0 +1,10 @@
1 +/**
2 + * Copyright (c) 2013-present, Facebook, Inc.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + */
7 +
8 +'use strict';
9 +
10 +export default require('requestAnimationFrameForReact');
packages/shared/requestAnimationFrameForReact.js new
+28
@@ -0,0 +1,28 @@
1 +/**
2 + * Copyright (c) 2013-present, Facebook, Inc.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 + */
9 +
10 +'use strict';
11 +
12 +import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
13 +import warning from 'fbjs/lib/warning';
14 +
15 +if (__DEV__) {
16 + if (
17 + ExecutionEnvironment.canUseDOM &&
18 + typeof requestAnimationFrame !== 'function'
19 + ) {
20 + warning(
21 + false,
22 + 'React depends on requestAnimationFrame. Make sure that you load a ' +
23 + 'polyfill in older browsers. https://fb.me/react-polyfills',
24 + );
25 + }
26 +}
27 +
28 +export default requestAnimationFrame;
scripts/rollup/forks.js
+11
@@ -74,6 +74,17 @@ const forks = Object.freeze({
74 return null;
75 },
76
77 + // This logic is forked on www to use the 'acrossTransitions' version.
78 + 'shared/requestAnimationFrameForReact': (bundleType, entry) => {
79 + switch (bundleType) {
80 + case FB_WWW_DEV:
81 + case FB_WWW_PROD:
82 + return 'shared/forks/requestAnimationFrameForReact.www.js';
83 + default:
84 + return null;
85 + }
86 + },
87 +
88 // This logic is forked on www to blacklist warnings.
89 'shared/lowPriorityWarning': (bundleType, entry) => {
90 switch (bundleType) {