Rename variables to remove references to 'global' global (#12931)

flarnie · web-flow · commit 79a740c6e32c · 2018-05-29T17:54:38.000-07:00
**what is the change?:** In a recent PR we were referencing some global variables and storing local references to them. To make things more natural, we co-opted the original name of the global for our local reference. To make this work with Flow, we get the original reference from 'window.requestAnimationFrame' and assign it to 'const requestAnimationFrame'. Sometimes React is used in an environment where 'window' is not defined - in that case we need to use something else, or hide the 'window' reference somewhere. We opted to use 'global' thinking that Babel transforms would fill that in with the proper thing. But for some of our fixtures we are not doing that transform on the bundle. **why make this change?:** I want to unbreak this on master and then investigate more about what we should do to fix this. **test plan:** run `yarn build` and open the fixtures. **issue:** facebook/react#12930
diff --git a/packages/react-scheduler/src/ReactScheduler.js b/packages/react-scheduler/src/ReactScheduler.js
@@ -47,9 +47,9 @@ import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
 // We capture a local reference to any global, in case it gets polyfilled after
 // this module is initially evaluated.
 // We want to be using a consistent implementation.
-const Date = global.Date;
-const setTimeout = global.setTimeout;
-const clearTimeout = global.clearTimeout;
+const localDate = Date;
+const localSetTimeout = setTimeout;
+const localClearTimeout = clearTimeout;
 
 const hasNativePerformanceNow =
   typeof performance === 'object' && typeof performance.now === 'function';
@@ -62,7 +62,7 @@ if (hasNativePerformanceNow) {
   };
 } else {
   now = function() {
-    return Date.now();
+    return localDate.now();
   };
 }
 
@@ -86,7 +86,7 @@ if (!ExecutionEnvironment.canUseDOM) {
       next: null,
       prev: null,
     };
-    const timeoutId = setTimeout(() => {
+    const timeoutId = localSetTimeout(() => {
       callback({
         timeRemaining() {
           return Infinity;
@@ -101,7 +101,7 @@ if (!ExecutionEnvironment.canUseDOM) {
     const callback = callbackId.scheduledCallback;
     const timeoutId = timeoutIds.get(callback);
     timeoutIds.delete(callbackId);
-    clearTimeout(timeoutId);
+    localClearTimeout(timeoutId);
   };
 } else {
   let headOfPendingCallbacksLinkedList: CallbackConfigType | null = null;
@@ -232,7 +232,7 @@ if (!ExecutionEnvironment.canUseDOM) {
   };
   // Assumes that we have addEventListener in this environment. Might need
   // something better for old IE.
-  global.addEventListener('message', idleTick, false);
+  window.addEventListener('message', idleTick, false);
 
   const animationTick = function(rafTime) {
     isAnimationFrameScheduled = false;
diff --git a/packages/shared/requestAnimationFrameForReact.js b/packages/shared/requestAnimationFrameForReact.js
@@ -15,12 +15,12 @@ import warning from 'fbjs/lib/warning';
 // We capture a local reference to any global, in case it gets polyfilled after
 // this module is initially evaluated.
 // We want to be using a consistent implementation.
-const requestAnimationFrame = global.requestAnimationFrame;
+const localRequestAnimationFrame = requestAnimationFrame;
 
 if (__DEV__) {
   if (
     ExecutionEnvironment.canUseDOM &&
-    typeof requestAnimationFrame !== 'function'
+    typeof localRequestAnimationFrame !== 'function'
   ) {
     warning(
       false,
@@ -30,4 +30,4 @@ if (__DEV__) {
   }
 }
 
-export default requestAnimationFrame;
+export default localRequestAnimationFrame;
