[Flare] Fix ES6 issues with IE11 (#15834)

packages/react-dom/src/events/DOMEventResponderSystem.js

@@ -79,17 +79,17 @@ type PartialEventObject = {
 
 type ResponderTimeout = {|
   id: TimeoutID,
-  timers: Map<Symbol, ResponderTimer>,
+  timers: Map<number, ResponderTimer>,
 |};
 
 type ResponderTimer = {|
   instance: ReactEventComponentInstance,
   func: () => void,
-  id: Symbol,
+  id: number,
   timeStamp: number,
 |};
 
-const activeTimeouts: Map<Symbol, ResponderTimeout> = new Map();
+const activeTimeouts: Map<number, ResponderTimeout> = new Map();
 const rootEventTypesToEventComponentInstances: Map<
   DOMTopLevelEventType | string,
   Set<ReactEventComponentInstance>,
@@ -117,6 +117,7 @@ let currentTimeStamp = 0;
 let currentTimers = new Map();
 let currentInstance: null | ReactEventComponentInstance = null;
 let currentEventQueue: null | EventQueue = null;
+let currentTimerIDCounter = 0;
 
 const eventResponderContext: ReactResponderContext = {
   dispatchEvent(
@@ -340,14 +341,14 @@ const eventResponderContext: ReactResponderContext = {
       ((currentInstance: any): ReactEventComponentInstance),
     );
   },
-  setTimeout(func: () => void, delay): Symbol {
+  setTimeout(func: () => void, delay): number {
     validateResponderContext();
     if (currentTimers === null) {
       currentTimers = new Map();
     }
     let timeout = currentTimers.get(delay);
 
-    const timerId = Symbol();
+    const timerId = currentTimerIDCounter++;
     if (timeout === undefined) {
       const timers = new Map();
       const id = setTimeout(() => {
@@ -368,7 +369,7 @@ const eventResponderContext: ReactResponderContext = {
     activeTimeouts.set(timerId, timeout);
     return timerId;
   },
-  clearTimeout(timerId: Symbol): void {
+  clearTimeout(timerId: number): void {
     validateResponderContext();
     const timeout = activeTimeouts.get(timerId);
 
@@ -550,7 +551,7 @@ function isFiberHostComponentFocusable(fiber: Fiber): boolean {
 }
 
 function processTimers(
-  timers: Map<Symbol, ResponderTimer>,
+  timers: Map<number, ResponderTimer>,
   delay: number,
 ): void {
   const timersArr = Array.from(timers.values());

packages/react-events/src/Hover.js

@@ -33,8 +33,8 @@ type HoverState = {
   isHovered: boolean,
   isOverTouchHitTarget: boolean,
   isTouched: boolean,
-  hoverStartTimeout: null | Symbol,
-  hoverEndTimeout: null | Symbol,
+  hoverStartTimeout: null | number,
+  hoverEndTimeout: null | number,
   ignoreEmulatedMouseEvents: boolean,
 };
 

packages/react-events/src/Press.js

@@ -53,11 +53,11 @@ type PressState = {
   isLongPressed: boolean,
   isPressed: boolean,
   isPressWithinResponderRegion: boolean,
-  longPressTimeout: null | Symbol,
+  longPressTimeout: null | number,
   pointerType: PointerType,
   pressTarget: null | Element,
-  pressEndTimeout: null | Symbol,
-  pressStartTimeout: null | Symbol,
+  pressEndTimeout: null | number,
+  pressStartTimeout: null | number,
   responderRegionOnActivation: null | $ReadOnly<{|
     bottom: number,
     left: number,

packages/react/src/ReactCreateEventComponent.js

@@ -11,12 +11,34 @@ import {enableEventAPI} from 'shared/ReactFeatureFlags';
 
 import {REACT_EVENT_COMPONENT_TYPE} from 'shared/ReactSymbols';
 
+let hasBadMapPolyfill;
+
+if (__DEV__) {
+  hasBadMapPolyfill = false;
+  try {
+    const frozenObject = Object.freeze({});
+    const testMap = new Map([[frozenObject, null]]);
+    const testSet = new Set([frozenObject]);
+    // This is necessary for Rollup to not consider these unused.
+    // https://github.com/rollup/rollup/issues/1771
+    // TODO: we can remove these if Rollup fixes the bug.
+    testMap.set(0, 0);
+    testSet.add(0);
+  } catch (e) {
+    // TODO: Consider warning about bad polyfills
+    hasBadMapPolyfill = true;
+  }
+}
+
 export function createEventComponent(
   responder: ReactEventResponder,
   displayName: string,
 ): ?ReactEventComponent {
   if (enableEventAPI) {
-    if (__DEV__) {
+    // We use responder as a Map key later on. When we have a bad
+    // polyfill, then we can't use it as a key as the polyfill tries
+    // to add a property to the object.
+    if (__DEV__ && !hasBadMapPolyfill) {
       Object.freeze(responder);
     }
     const eventComponent = {

packages/shared/ReactTypes.js

@@ -187,8 +187,8 @@ export type ReactResponderContext = {
   requestResponderOwnership: () => boolean,
   requestGlobalOwnership: () => boolean,
   releaseOwnership: () => boolean,
-  setTimeout: (func: () => void, timeout: number) => Symbol,
-  clearTimeout: (timerId: Symbol) => void,
+  setTimeout: (func: () => void, timeout: number) => number,
+  clearTimeout: (timerId: number) => void,
   getFocusableElementsInScope(): Array<HTMLElement>,
   getActiveDocument(): Document,
   objectAssign: Function,