const eventTypes = { // Start of inline: the below functions were inlined from // EventPropagator.js, as they deviated from ReactDOM's newer // implementations.++function getParent(inst) {

 export default function accumulateTwoPhaseListeners(             dispatchInstances.push(node);           }         }+      } else if (enableScopeAPI && node.tag === ScopeComponent) {

 import type {EventPriority} from 'shared/ReactTypes'; import type {TopLevelType} from './TopLevelEventTypes';  export type DispatchConfig = {|-  dependencies: Array<TopLevelType>,-  phasedRegistrationNames?: {|-    bubbled: string,-    captured: string,+  dependencies?: Array<TopLevelType>,+  phasedRegistrationNames: {|+    bubbled: null | string,+    captured: null | string,   |},   registrationName?: string,   eventPriority: EventPriority, |}; +export type CustomDispatchConfig = {|+  phasedRegistrationNames: {|+    bubbled: null,+    captured: null,+  |},+  customEvent?: boolean,

 describe('DOMModernPluginEventSystem', () => {             dispatchClickEvent(button);             expect(clickEvent).toHaveBeenCalledTimes(1);           });++          it('handle propagation of custom user events', () => {+            const buttonRef = React.createRef();+            const divRef = React.createRef();+            const log = [];+            const onCustomEvent = jest.fn(e =>+              log.push(['bubble', e.currentTarget]),+            );+            const onCustomEventCapture = jest.fn(e =>+              log.push(['capture', e.currentTarget]),+            );++            function Test() {+              let custom;++              // Test that we get a warning when we don't provide an explicit priortiy+              expect(() => {+                custom = ReactDOM.unstable_useEvent('custom-event');+              }).toWarnDev(+                'Warning: The event "type" provided to useEvent() does not have a known priority type. ' ++                  'It is recommended to provide a "priority" option to specify a priority.',+              );++              custom = ReactDOM.unstable_useEvent('custom-event', {+                priority: 0, // Discrete+              });++              const customCapture = ReactDOM.unstable_useEvent('custom-event', {

 describe('DOMModernPluginEventSystem', () => {             dispatchClickEvent(button);             expect(clickEvent).toHaveBeenCalledTimes(1);           });++          it('handle propagation of custom user events', () => {+            const buttonRef = React.createRef();+            const divRef = React.createRef();+            const log = [];+            const onCustomEvent = jest.fn(e =>+              log.push(['bubble', e.currentTarget]),+            );+            const onCustomEventCapture = jest.fn(e =>+              log.push(['capture', e.currentTarget]),+            );++            function Test() {+              let custom;

 describe('DOMModernPluginEventSystem', () => {             dispatchClickEvent(button);             expect(clickEvent).toHaveBeenCalledTimes(1);           });++          it('handle propagation of custom user events', () => {+            const buttonRef = React.createRef();+            const divRef = React.createRef();+            const log = [];+            const onCustomEvent = jest.fn(e =>+              log.push(['bubble', e.currentTarget]),+            );+            const onCustomEventCapture = jest.fn(e =>+              log.push(['capture', e.currentTarget]),+            );++            function Test() {+              let custom;++              // Test that we get a warning when we don't provide an explicit priortiy+              expect(() => {+                custom = ReactDOM.unstable_useEvent('custom-event');+              }).toWarnDev(+                'Warning: The event "type" provided to useEvent() does not have a known priority type. ' ++                  'It is recommended to provide a "priority" option to specify a priority.',

 export function attachElementListener(listener: ReactDOMListener): void {     listeners = new Set();     initListenersSet(target, listeners);   }-  // Finally, add our listener to the listeners Set.+  // Add our listener to the listeners Set.   listeners.add(listener);+  // Finally, add the event to our known event types list.+  let dispatchConfig = topLevelEventsToDispatchConfig.get(type);+  // If we don't have a dispatchConfig, then we're dealing with+  // an event type that React does not know about (i.e. a custom event).+  // We need to register an event config for this or the SimpleEventPlugin+  // will not appropiately provide a SyntheticEvent, so we use out empty

 import type {EventPriority} from 'shared/ReactTypes'; import type {TopLevelType} from './TopLevelEventTypes';  export type DispatchConfig = {|-  dependencies: Array<TopLevelType>,-  phasedRegistrationNames?: {|-    bubbled: string,-    captured: string,+  dependencies?: Array<TopLevelType>,+  phasedRegistrationNames: {|+    bubbled: null | string,+    captured: null | string,   |},   registrationName?: string,-  eventPriority: EventPriority,+  eventPriority?: EventPriority,+  customEvent?: boolean, |};

 describe('DOMModernPluginEventSystem', () => {             dispatchClickEvent(button);             expect(clickEvent).toHaveBeenCalledTimes(1);           });++          it('handle propagation of custom user events', () => {

 const SimpleEventPlugin: PluginModule<MouseEvent> = {         break;       default:         if (__DEV__) {-          if (knownHTMLTopLevelTypes.indexOf(topLevelType) === -1) {+          if (+            knownHTMLTopLevelTypes.indexOf(topLevelType) === -1 &&

 export default function accumulateTwoPhaseListeners(           }         }       }-      // Standard React on* listeners, i.e. onClick prop-      const captureListener = getListener(node, captured);-      if (captureListener != null) {-        // Capture listeners/instances should go at the start, so we-        // unshift them to the start of the array.-        dispatchListeners.unshift(captureListener);-        dispatchInstances.unshift(node);+      //

 export function listenToEvent(   } } -const validFBLegacyPrimerRels = new Set([-  'dialog',-  'dialog-post',-  'async',-  'async-post',-  'theater',-  'toggle',-]);--function willDeferLaterForFBLegacyPrimer(nativeEvent: any): boolean {-  let node = nativeEvent.target;-  const type = nativeEvent.type;-  if (type !== 'click') {+function willDeferLaterForLegacyFBSupport(+  topLevelType: DOMTopLevelEventType,+  targetContainer: EventTarget,+): boolean {+  if (topLevelType !== TOP_CLICK) {     return false;   }-  while (node !== null) {-    // Primer works by intercepting a click event on an <a> element-    // that has a "rel" attribute that matches one of the valid ones-    // in the Set above. If we intercept this before Primer does, we-    // will need to defer the current event till later and discontinue-    // execution of the current event. To do this we can add a document-    // event listener and continue again later after propagation.-    if (node.tagName === 'A' && validFBLegacyPrimerRels.has(node.rel)) {-      const legacyFBSupport = true;-      const isCapture = nativeEvent.eventPhase === 1;-      addTrappedEventListener(-        null,-        ((type: any): DOMTopLevelEventType),-        isCapture,-        legacyFBSupport,-      );-      return true;-    }-    node = node.parentNode;-  }-  return false;+  // We defer all click events with legacy FB support mode on.+  // This means we add a one time event listener to trigger+  // after the FB delegated listeners fire.+  const legacyFBSupport = true;

 export function listenToEvent(   } } -const validFBLegacyPrimerRels = new Set([-  'dialog',-  'dialog-post',-  'async',-  'async-post',-  'theater',-  'toggle',-]);--function willDeferLaterForFBLegacyPrimer(nativeEvent: any): boolean {-  let node = nativeEvent.target;-  const type = nativeEvent.type;-  if (type !== 'click') {+function willDeferLaterForLegacyFBSupport(+  topLevelType: DOMTopLevelEventType,+  targetContainer: EventTarget,+): boolean {+  if (topLevelType !== TOP_CLICK) {     return false;   }-  while (node !== null) {-    // Primer works by intercepting a click event on an <a> element-    // that has a "rel" attribute that matches one of the valid ones-    // in the Set above. If we intercept this before Primer does, we-    // will need to defer the current event till later and discontinue-    // execution of the current event. To do this we can add a document-    // event listener and continue again later after propagation.-    if (node.tagName === 'A' && validFBLegacyPrimerRels.has(node.rel)) {-      const legacyFBSupport = true;-      const isCapture = nativeEvent.eventPhase === 1;-      addTrappedEventListener(-        null,-        ((type: any): DOMTopLevelEventType),-        isCapture,-        legacyFBSupport,-      );-      return true;-    }-    node = node.parentNode;-  }-  return false;+  // We defer all click events with legacy FB support mode on.+  // This means we add a one time event listener to trigger+  // after the FB delegated listeners fire.+  const legacyFBSupport = true;+  addTrappedEventListener(+    targetContainer,+    topLevelType,+    false,+    legacyFBSupport,

 export function dispatchEventForPluginEventSystem(       // TODO: useEvent for document and window       return;     }-    // If we detect the FB legacy primer system, we+    // If we are using the legacy FB support flag, we     // defer the event to the null with a one     // time event listener so we can defer the event.     if (-      enableLegacyFBPrimerSupport &&-      willDeferLaterForFBLegacyPrimer(nativeEvent)+      enableLegacyFBSupport &&+      (eventSystemFlags & LEGACY_FB_SUPPORT) === 0 &&

 export function addTrappedEventListener(   if (passive === true && !passiveBrowserEventsSupported) {     passive = false;   }+  const eventSystemFlags =+    enableLegacyFBSupport && legacyFBSupport

 export function listenToEvent(   } } -const validFBLegacyPrimerRels = new Set([-  'dialog',-  'dialog-post',-  'async',-  'async-post',-  'theater',-  'toggle',-]);--function willDeferLaterForFBLegacyPrimer(nativeEvent: any): boolean {-  let node = nativeEvent.target;-  const type = nativeEvent.type;-  if (type !== 'click') {+function willDeferLaterForLegacyFBSupport(+  topLevelType: DOMTopLevelEventType,+  targetContainer: EventTarget,+): boolean {+  if ((topLevelType: any) !== 'click') {

 export function addTrappedEventListener(     targetContainer = document;   } -  const validTargetContainer = ((targetContainer: any): EventTarget);+  const targetContainerToUse =

 export function dispatchEventForPluginEventSystem(       // TODO: useEvent for document and window       return;     }-    // If we detect the FB legacy primer system, we+    // If we are using the legacy FB support flag, we     // defer the event to the null with a one     // time event listener so we can defer the event.     if (-      enableLegacyFBPrimerSupport &&-      willDeferLaterForFBLegacyPrimer(nativeEvent)+      enableLegacyFBSupport &&+      (eventSystemFlags & LEGACY_FB_SUPPORT) === 0 &&

 export function listenToEvent(   } } -const validFBLegacyPrimerRels = new Set([-  'dialog',-  'dialog-post',-  'async',-  'async-post',-  'theater',-  'toggle',-]);--function willDeferLaterForFBLegacyPrimer(nativeEvent: any): boolean {-  let node = nativeEvent.target;-  const type = nativeEvent.type;-  if (type !== 'click') {+function willDeferLaterForLegacyFBSupport(+  topLevelType: DOMTopLevelEventType,+  targetContainer: EventTarget,+): boolean {+  if ((topLevelType: any) !== 'click') {

 describe('DOMModernPluginEventSystem', () => {       expect(listenerMaps.length).toEqual(2);       expect(listenerMaps[0]).toEqual(listenerMaps[1]);     });++    it('can render correctly with the ReactDOMServer', () => {+      const clickEvent = jest.fn();++      function Test() {+        const divRef = React.useRef(null);+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(divRef.current, clickEvent);+        });++        return <div ref={divRef}>Hello world</div>;+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(`<div data-reactroot="">Hello world</div>`);+    });++    it('can render correctly with the ReactDOMServer hydration', () => {+      const clickEvent = jest.fn();+      const spanRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(spanRef.current, clickEvent);+        });++        return (+          <div>+            <span ref={spanRef}>Hello world</span>+          </div>+        );+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(+        `<div data-reactroot=""><span>Hello world</span></div>`,+      );+      container.innerHTML = output;+      ReactDOM.hydrate(<Test />, container);+      Scheduler.unstable_flushAll();+      dispatchClickEvent(spanRef.current);+      expect(clickEvent).toHaveBeenCalledTimes(1);+    });++    it('should correctly work for a basic "click" listener', () => {+      const log = [];+      const clickEvent = jest.fn(event => {+        log.push({+          eventPhase: event.eventPhase,+          type: event.type,+          currentTarget: event.currentTarget,+          target: event.target,+        });+      });+      const divRef = React.createRef();+      const buttonRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      expect(container.innerHTML).toBe('<button><div>Click me!</div></button>');++      // Clicking the button should trigger the event callback+      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(log[0]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: buttonRef.current,+        target: divRef.current,+      });++      // Unmounting the container and clicking should not work+      ReactDOM.render(null, container);+      Scheduler.unstable_flushAll();++      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(1);++      // Re-rendering the container and clicking should work+      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(2);++      // Clicking the button should also work+      let buttonElement = buttonRef.current;+      dispatchClickEvent(buttonElement);+      expect(log[2]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: buttonRef.current,+        target: buttonRef.current,+      });++      function Test2({clickEvent2}) {+        const click = ReactDOM.unstable_useEvent('click', clickEvent2);++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent2);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      let clickEvent2 = jest.fn();+      ReactDOM.render(<Test2 clickEvent2={clickEvent2} />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent2).toBeCalledTimes(1);++      // Reset the function we pass in, so it's different+      clickEvent2 = jest.fn();+      ReactDOM.render(<Test2 clickEvent2={clickEvent2} />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent2).toBeCalledTimes(1);+    });++    it('should correctly work for setting and clearing a basic "click" listener', () => {+      const log = [];+      const clickEvent = jest.fn(event => {+        log.push({+          eventPhase: event.eventPhase,+          type: event.type,+          currentTarget: event.currentTarget,+          target: event.target,+        });+      });+      const divRef = React.createRef();+      const buttonRef = React.createRef();++      function Test({off}) {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent);+        });++        React.useEffect(() => {+          if (off) {+            click.setListener(buttonRef.current, null);+          }+        }, [off]);++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test off={false} />, container);+      Scheduler.unstable_flushAll();++      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(1);++      // The listener should get unmounted in the second effect+      ReactDOM.render(<Test off={true} />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(1);

 describe('DOMModernPluginEventSystem', () => {       expect(listenerMaps.length).toEqual(2);       expect(listenerMaps[0]).toEqual(listenerMaps[1]);     });++    it('can render correctly with the ReactDOMServer', () => {+      const clickEvent = jest.fn();++      function Test() {+        const divRef = React.useRef(null);+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(divRef.current, clickEvent);+        });++        return <div ref={divRef}>Hello world</div>;+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(`<div data-reactroot="">Hello world</div>`);+    });++    it('can render correctly with the ReactDOMServer hydration', () => {+      const clickEvent = jest.fn();+      const spanRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(spanRef.current, clickEvent);+        });++        return (+          <div>+            <span ref={spanRef}>Hello world</span>+          </div>+        );+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(+        `<div data-reactroot=""><span>Hello world</span></div>`,+      );+      container.innerHTML = output;+      ReactDOM.hydrate(<Test />, container);+      Scheduler.unstable_flushAll();+      dispatchClickEvent(spanRef.current);+      expect(clickEvent).toHaveBeenCalledTimes(1);+    });++    it('should correctly work for a basic "click" listener', () => {+      const log = [];+      const clickEvent = jest.fn(event => {+        log.push({+          eventPhase: event.eventPhase,+          type: event.type,+          currentTarget: event.currentTarget,+          target: event.target,+        });+      });+      const divRef = React.createRef();+      const buttonRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      expect(container.innerHTML).toBe('<button><div>Click me!</div></button>');++      // Clicking the button should trigger the event callback+      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(log[0]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: buttonRef.current,+        target: divRef.current,+      });++      // Unmounting the container and clicking should not work+      ReactDOM.render(null, container);+      Scheduler.unstable_flushAll();++      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(1);++      // Re-rendering the container and clicking should work+      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();+

 describe('DOMModernPluginEventSystem', () => {       expect(listenerMaps.length).toEqual(2);       expect(listenerMaps[0]).toEqual(listenerMaps[1]);     });++    it('can render correctly with the ReactDOMServer', () => {+      const clickEvent = jest.fn();++      function Test() {+        const divRef = React.useRef(null);+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(divRef.current, clickEvent);+        });++        return <div ref={divRef}>Hello world</div>;+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(`<div data-reactroot="">Hello world</div>`);+    });++    it('can render correctly with the ReactDOMServer hydration', () => {+      const clickEvent = jest.fn();+      const spanRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(spanRef.current, clickEvent);+        });++        return (+          <div>+            <span ref={spanRef}>Hello world</span>+          </div>+        );+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(+        `<div data-reactroot=""><span>Hello world</span></div>`,+      );+      container.innerHTML = output;+      ReactDOM.hydrate(<Test />, container);+      Scheduler.unstable_flushAll();+      dispatchClickEvent(spanRef.current);+      expect(clickEvent).toHaveBeenCalledTimes(1);+    });++    it('should correctly work for a basic "click" listener', () => {+      const log = [];+      const clickEvent = jest.fn(event => {+        log.push({+          eventPhase: event.eventPhase,+          type: event.type,+          currentTarget: event.currentTarget,+          target: event.target,+        });+      });+      const divRef = React.createRef();+      const buttonRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      expect(container.innerHTML).toBe('<button><div>Click me!</div></button>');++      // Clicking the button should trigger the event callback+      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(log[0]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: buttonRef.current,+        target: divRef.current,+      });++      // Unmounting the container and clicking should not work+      ReactDOM.render(null, container);+      Scheduler.unstable_flushAll();++      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(1);++      // Re-rendering the container and clicking should work+      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(2);++      // Clicking the button should also work+      let buttonElement = buttonRef.current;+      dispatchClickEvent(buttonElement);+      expect(log[2]).toEqual({

 describe('DOMModernPluginEventSystem', () => {       expect(listenerMaps.length).toEqual(2);       expect(listenerMaps[0]).toEqual(listenerMaps[1]);     });++    it('can render correctly with the ReactDOMServer', () => {+      const clickEvent = jest.fn();++      function Test() {+        const divRef = React.useRef(null);+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(divRef.current, clickEvent);+        });++        return <div ref={divRef}>Hello world</div>;+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(`<div data-reactroot="">Hello world</div>`);+    });++    it('can render correctly with the ReactDOMServer hydration', () => {+      const clickEvent = jest.fn();+      const spanRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(spanRef.current, clickEvent);+        });++        return (+          <div>+            <span ref={spanRef}>Hello world</span>+          </div>+        );+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(+        `<div data-reactroot=""><span>Hello world</span></div>`,+      );+      container.innerHTML = output;+      ReactDOM.hydrate(<Test />, container);+      Scheduler.unstable_flushAll();+      dispatchClickEvent(spanRef.current);+      expect(clickEvent).toHaveBeenCalledTimes(1);+    });++    it('should correctly work for a basic "click" listener', () => {+      const log = [];+      const clickEvent = jest.fn(event => {+        log.push({+          eventPhase: event.eventPhase,+          type: event.type,+          currentTarget: event.currentTarget,+          target: event.target,+        });+      });+      const divRef = React.createRef();+      const buttonRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      expect(container.innerHTML).toBe('<button><div>Click me!</div></button>');++      // Clicking the button should trigger the event callback+      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(log[0]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: buttonRef.current,+        target: divRef.current,+      });++      // Unmounting the container and clicking should not work+      ReactDOM.render(null, container);+      Scheduler.unstable_flushAll();++      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(1);++      // Re-rendering the container and clicking should work+      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(2);++      // Clicking the button should also work+      let buttonElement = buttonRef.current;+      dispatchClickEvent(buttonElement);+      expect(log[2]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: buttonRef.current,+        target: buttonRef.current,+      });++      function Test2({clickEvent2}) {+        const click = ReactDOM.unstable_useEvent('click', clickEvent2);++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent2);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      let clickEvent2 = jest.fn();+      ReactDOM.render(<Test2 clickEvent2={clickEvent2} />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent2).toBeCalledTimes(1);++      // Reset the function we pass in, so it's different+      clickEvent2 = jest.fn();+      ReactDOM.render(<Test2 clickEvent2={clickEvent2} />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent2).toBeCalledTimes(1);+    });++    it('should correctly work for setting and clearing a basic "click" listener', () => {+      const log = [];

 function dispatchAction<S, A>(  const noOpMount = () => {}; +function validateNotInFunctionRender(): boolean {+  if (currentlyRenderingFiber === null) {+    return true;+  }+  if (__DEV__) {+    console.warn(+      'Event listener methods from useEvent() cannot be used during render.' +

 function dispatchAction<S, A>(  const noOpMount = () => {}; +function validateNotInFunctionRender(): boolean {+  if (currentlyRenderingFiber === null) {+    return true;+  }+  if (__DEV__) {+    console.warn(+      'Event listener methods from useEvent() cannot be used during render.' +

 describe('DOMModernPluginEventSystem', () => {       expect(listenerMaps.length).toEqual(2);       expect(listenerMaps[0]).toEqual(listenerMaps[1]);     });++    it('can render correctly with the ReactDOMServer', () => {+      const clickEvent = jest.fn();++      function Test() {+        const divRef = React.useRef(null);+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(divRef.current, clickEvent);+        });++        return <div ref={divRef}>Hello world</div>;+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(`<div data-reactroot="">Hello world</div>`);+    });++    it('can render correctly with the ReactDOMServer hydration', () => {+      const clickEvent = jest.fn();+      const spanRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(spanRef.current, clickEvent);+        });++        return (+          <div>+            <span ref={spanRef}>Hello world</span>+          </div>+        );+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(+        `<div data-reactroot=""><span>Hello world</span></div>`,+      );+      container.innerHTML = output;+      ReactDOM.hydrate(<Test />, container);+      Scheduler.unstable_flushAll();+      dispatchClickEvent(spanRef.current);+      expect(clickEvent).toHaveBeenCalledTimes(1);+    });++    it('should correctly work for a basic "click" listener', () => {+      const log = [];+      const clickEvent = jest.fn(event => {+        log.push({+          eventPhase: event.eventPhase,+          type: event.type,+          currentTarget: event.currentTarget,+          target: event.target,+        });+      });+      const divRef = React.createRef();+      const buttonRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      expect(container.innerHTML).toBe('<button><div>Click me!</div></button>');++      // Clicking the button should trigger the event callback+      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(log[0]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: buttonRef.current,+        target: divRef.current,+      });++      // Unmounting the container and clicking should not work+      ReactDOM.render(null, container);+      Scheduler.unstable_flushAll();++      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(1);++      // Re-rendering the container and clicking should work+      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(2);++      // Clicking the button should also work+      let buttonElement = buttonRef.current;+      dispatchClickEvent(buttonElement);+      expect(log[2]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: buttonRef.current,+        target: buttonRef.current,+      });++      function Test2({clickEvent2}) {+        const click = ReactDOM.unstable_useEvent('click', clickEvent2);++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent2);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      let clickEvent2 = jest.fn();+      ReactDOM.render(<Test2 clickEvent2={clickEvent2} />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent2).toBeCalledTimes(1);++      // Reset the function we pass in, so it's different+      clickEvent2 = jest.fn();+      ReactDOM.render(<Test2 clickEvent2={clickEvent2} />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent2).toBeCalledTimes(1);+    });++    it('should correctly work for setting and clearing a basic "click" listener', () => {+      const log = [];+      const clickEvent = jest.fn(event => {+        log.push({+          eventPhase: event.eventPhase,+          type: event.type,+          currentTarget: event.currentTarget,+          target: event.target,+        });+      });+      const divRef = React.createRef();+      const buttonRef = React.createRef();++      function Test({off}) {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent);+        });++        React.useEffect(() => {+          if (off) {+            click.setListener(buttonRef.current, null);+          }+        }, [off]);++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test off={false} />, container);+      Scheduler.unstable_flushAll();++      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(1);++      // The listener should get unmounted in the second effect+      ReactDOM.render(<Test off={true} />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(1);+    });++    it('handle propagation of click events', () => {+      const buttonRef = React.createRef();+      const divRef = React.createRef();+      const log = [];+      const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));+      const onClickCapture = jest.fn(e =>+        log.push(['capture', e.currentTarget]),+      );++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');+        const clickCapture = ReactDOM.unstable_useEvent('click', {+          capture: true,+        });++        React.useEffect(() => {+          click.setListener(buttonRef.current, onClick);+          clickCapture.setListener(buttonRef.current, onClickCapture);+          click.setListener(divRef.current, onClick);+          clickCapture.setListener(divRef.current, onClickCapture);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      let buttonElement = buttonRef.current;+      dispatchClickEvent(buttonElement);+      expect(onClick).toHaveBeenCalledTimes(1);+      expect(onClickCapture).toHaveBeenCalledTimes(1);+      expect(log[0]).toEqual(['capture', buttonElement]);+      expect(log[1]).toEqual(['bubble', buttonElement]);++      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(onClick).toHaveBeenCalledTimes(3);+      expect(onClickCapture).toHaveBeenCalledTimes(3);+      expect(log[2]).toEqual(['capture', buttonElement]);+      expect(log[3]).toEqual(['capture', divElement]);+      expect(log[4]).toEqual(['bubble', divElement]);+      expect(log[5]).toEqual(['bubble', buttonElement]);+    });++    it('should correctly work for a basic "click" listener on the outer target', () => {+      const log = [];+      const clickEvent = jest.fn(event => {+        log.push({+          eventPhase: event.eventPhase,+          type: event.type,+          currentTarget: event.currentTarget,+          target: event.target,+        });+      });+      const divRef = React.createRef();+      const buttonRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(divRef.current, clickEvent);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      expect(container.innerHTML).toBe('<button><div>Click me!</div></button>');++      // Clicking the button should trigger the event callback+      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(log[0]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: divRef.current,+        target: divRef.current,+      });++      // Unmounting the container and clicking should not work+      ReactDOM.render(null, container);+      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(1);++      // Re-rendering the container and clicking should work+      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(clickEvent).toBeCalledTimes(2);++      // Clicking the button should not work+      let buttonElement = buttonRef.current;+      dispatchClickEvent(buttonElement);+      expect(clickEvent).toBeCalledTimes(2);+    });++    it('should correctly handle many nested target listeners', () => {+      const buttonRef = React.createRef();+      const targetListerner1 = jest.fn();

 export default function accumulateTwoPhaseListeners(   while (node !== null) {     // We only care for listeners that are on HostComponents (i.e. <div>)     if (node.tag === HostComponent) {+      // For useEvent listenrs+      if (enableUseEventAPI && accumulateUseEventListeners) {+        // useEvent event listeners+        const instance = node.stateNode;+        const targetType = event.type;+        const listeners = getListenersFromTarget(instance);++        if (listeners !== null) {+          const listenersArr = Array.from(listeners);+          for (let i = 0; i < listenersArr.length; i++) {+            const listener = listenersArr[i];+            const {+              callback,+              event: {capture, type},+            } = listener;+            if (type === targetType) {+              if (capture) {

 describe('DOMModernPluginEventSystem', () => {       expect(listenerMaps.length).toEqual(2);       expect(listenerMaps[0]).toEqual(listenerMaps[1]);     });++    it('can render correctly with the ReactDOMServer', () => {+      const clickEvent = jest.fn();++      function Test() {+        const divRef = React.useRef(null);+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(divRef.current, clickEvent);+        });++        return <div ref={divRef}>Hello world</div>;+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(`<div data-reactroot="">Hello world</div>`);+    });++    it('can render correctly with the ReactDOMServer hydration', () => {+      const clickEvent = jest.fn();+      const spanRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(spanRef.current, clickEvent);+        });++        return (+          <div>+            <span ref={spanRef}>Hello world</span>+          </div>+        );+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(+        `<div data-reactroot=""><span>Hello world</span></div>`,+      );+      container.innerHTML = output;+      ReactDOM.hydrate(<Test />, container);+      Scheduler.unstable_flushAll();+      dispatchClickEvent(spanRef.current);+      expect(clickEvent).toHaveBeenCalledTimes(1);+    });++    it('should correctly work for a basic "click" listener', () => {+      const log = [];+      const clickEvent = jest.fn(event => {+        log.push({+          eventPhase: event.eventPhase,+          type: event.type,+          currentTarget: event.currentTarget,+          target: event.target,+        });+      });+      const divRef = React.createRef();+      const buttonRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      expect(container.innerHTML).toBe('<button><div>Click me!</div></button>');++      // Clicking the button should trigger the event callback+      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(log[0]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: buttonRef.current,+        target: divRef.current,+      });

 export function beforeRemoveInstance(   ) {     dispatchBeforeDetachedBlur(((instance: any): HTMLElement));   }+  if (enableUseEventAPI) {+    // It's unfortunate that we have to do this cleanup, but+    // it's necessary otherwise we will leak the host instances+    // from the useEvent hook instances Map. We call destroy+    // on each listener to ensure we properly remove the instance+    // from the instances Map. Note: we have this Map so that we+    // can properly unmount instances when the function component+    // that the hook is attached to gets unmounted.+    const listenersSet = getListenersFromTarget(instance);+    if (listenersSet !== null) {+      const listeners = Array.from(listenersSet);

 describe('DOMModernPluginEventSystem', () => {       expect(listenerMaps.length).toEqual(2);       expect(listenerMaps[0]).toEqual(listenerMaps[1]);     });++    it('can render correctly with the ReactDOMServer', () => {+      const clickEvent = jest.fn();++      function Test() {+        const divRef = React.useRef(null);+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(divRef.current, clickEvent);+        });++        return <div ref={divRef}>Hello world</div>;+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(`<div data-reactroot="">Hello world</div>`);+    });++    it('can render correctly with the ReactDOMServer hydration', () => {+      const clickEvent = jest.fn();+      const spanRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(spanRef.current, clickEvent);+        });++        return (+          <div>+            <span ref={spanRef}>Hello world</span>+          </div>+        );+      }+      const output = ReactDOMServer.renderToString(<Test />);+      expect(output).toBe(+        `<div data-reactroot=""><span>Hello world</span></div>`,+      );+      container.innerHTML = output;+      ReactDOM.hydrate(<Test />, container);+      Scheduler.unstable_flushAll();+      dispatchClickEvent(spanRef.current);+      expect(clickEvent).toHaveBeenCalledTimes(1);+    });++    it('should correctly work for a basic "click" listener', () => {+      const log = [];+      const clickEvent = jest.fn(event => {+        log.push({+          eventPhase: event.eventPhase,+          type: event.type,+          currentTarget: event.currentTarget,+          target: event.target,+        });+      });+      const divRef = React.createRef();+      const buttonRef = React.createRef();++      function Test() {+        const click = ReactDOM.unstable_useEvent('click');++        React.useEffect(() => {+          click.setListener(buttonRef.current, clickEvent);+        });++        return (+          <button ref={buttonRef}>+            <div ref={divRef}>Click me!</div>+          </button>+        );+      }++      ReactDOM.render(<Test />, container);+      Scheduler.unstable_flushAll();++      expect(container.innerHTML).toBe('<button><div>Click me!</div></button>');++      // Clicking the button should trigger the event callback+      let divElement = divRef.current;+      dispatchClickEvent(divElement);+      expect(log[0]).toEqual({+        eventPhase: 3,+        type: 'click',+        currentTarget: buttonRef.current,+        target: divRef.current,+      });+

 title: "GraphQL Introduction" author: [schrockn] --- -At the React.js conference in late January 2015, we revealed our next major technology in the React family: [Relay](http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html). +At the React.js conference in late January 2015, we revealed our next major technology in the React family: [Relay](https://reactjs.org/blog/2015/02/20/introducing-relay-and-graphql.html). 

 export function addResponderEventSystemEvent(     document,   );   if (passiveBrowserEventsSupported) {-    addEventCaptureListenerWithPassiveFlag(+    fbListener = addEventCaptureListenerWithPassiveFlag(       document,       topLevelType,       listener,       passive,     );   } else {-    addEventCaptureListener(document, topLevelType, listener);+    fbListener = addEventCaptureListener(document, topLevelType, listener);   }-  return listener;+  return fbListener || listener;

 export function addResponderEventSystemEvent(     document,   );   if (passiveBrowserEventsSupported) {-    addEventCaptureListenerWithPassiveFlag(+    fbListener = addEventCaptureListenerWithPassiveFlag(       document,       topLevelType,       listener,       passive,     );   } else {-    addEventCaptureListener(document, topLevelType, listener);+    fbListener = addEventCaptureListener(document, topLevelType, listener);   }-  return listener;+  return fbListener || listener; } -export function removeActiveResponderEventSystemEvent(+export function removePassiveResponderEventSystemEvent(   document: Document,   topLevelType: string,   listener: any => void, ) {-  if (passiveBrowserEventsSupported) {-    document.removeEventListener(topLevelType, listener, {-      capture: true,-      passive: false,-    });+  if (listener.remove) {