[WIP] Replay load/error events that happen earlier than commit

packages/react-dom/src/__tests__/ReactDOMEarlyEvent-test.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let ConcurrentMode;
+
+beforeEach(() => {
+  React = require('react');
+  ConcurrentMode = React.unstable_ConcurrentMode;
+  ReactDOM = require('react-dom');
+});
+
+describe('ReactDOMImg', () => {
+  let container;
+
+  beforeEach(() => {
+    // TODO pull this into helper method, reduce repetition.
+    // mock the browser APIs which are used in schedule:
+    // - requestAnimationFrame should pass the DOMHighResTimeStamp argument
+    // - calling 'window.postMessage' should actually fire postmessage handlers
+    global.requestAnimationFrame = function(cb) {
+      return setTimeout(() => {
+        cb(Date.now());
+      });
+    };
+    const originalAddEventListener = global.addEventListener;
+    let postMessageCallback;
+    global.addEventListener = function(eventName, callback, useCapture) {
+      if (eventName === 'message') {
+        postMessageCallback = callback;
+      } else {
+        originalAddEventListener(eventName, callback, useCapture);
+      }
+    };
+    global.postMessage = function(messageKey, targetOrigin) {
+      const postMessageEvent = {source: window, data: messageKey};
+      if (postMessageCallback) {
+        postMessageCallback(postMessageEvent);
+      }
+    };
+    jest.resetModules();
+    container = document.createElement('div');
+    ReactDOM = require('react-dom');
+
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it('should trigger load events even if they fire early', () => {
+    const onLoadSpy = jest.fn();
+
+    const loadEvent = document.createEvent('Event');
+    loadEvent.initEvent('load', false, false);
+
+    // TODO: Write test
+
+    ReactDOM.render(
+      <ConcurrentMode>
+        <img onLoad={onLoadSpy} />
+      </ConcurrentMode>,
+    );
+
+    // someHowGetAnImage.dispatchEvent(loadEvent);
+
+    // expect(onLoadSpy).toHaveBeenCalled();
+  });
+});

packages/react-dom/src/client/ReactDOMComponent.js

@@ -491,8 +491,8 @@ export function setInitialProperties(
     case 'img':
     case 'image':
     case 'link':
-      trapBubbledEvent(TOP_ERROR, domElement);
-      trapBubbledEvent(TOP_LOAD, domElement);
+      trapBubbledEvent(TOP_ERROR, domElement, true);
+      trapBubbledEvent(TOP_LOAD, domElement, true);
       props = rawProps;
       break;
     case 'form':

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -27,6 +27,7 @@ import * as ReactInputSelection from './ReactInputSelection';
 import setTextContent from './setTextContent';
 import {validateDOMNesting, updatedAncestorInfo} from './validateDOMNesting';
 import * as ReactBrowserEventEmitter from '../events/ReactBrowserEventEmitter';
+import {replayEarlyEvent} from '../events/ReactBrowserEventEmitter';
 import {getChildNamespace} from '../shared/DOMNamespaces';
 import {
   ELEMENT_NODE,
@@ -41,6 +42,11 @@ import type {DOMContainer} from './ReactDOM';
 export type Type = string;
 export type Props = {
   autoFocus?: boolean,
+  'xlink:href'?: string,
+  src?: string,
+  href?: string,
+  onLoad?: Function,
+  onError?: Function,
   children?: mixed,
   hidden?: boolean,
   suppressHydrationWarning?: boolean,
@@ -76,17 +82,6 @@ if (__DEV__) {
 let eventsEnabled: ?boolean = null;
 let selectionInformation: ?mixed = null;
 
-function shouldAutoFocusHostComponent(type: string, props: Props): boolean {
-  switch (type) {
-    case 'button':
-    case 'input':
-    case 'select':
-    case 'textarea':
-      return !!props.autoFocus;
-  }
-  return false;
-}
-
 export * from 'shared/HostConfigWithNoPersistence';
 
 export function getRootHostContext(
@@ -210,7 +205,35 @@ export function finalizeInitialChildren(
   hostContext: HostContext,
 ): boolean {
   setInitialProperties(domElement, type, props, rootContainerInstance);
-  return shouldAutoFocusHostComponent(type, props);
+  switch (type) {
+    case 'button':
+    case 'input':
+    case 'select':
+    case 'textarea':
+      // should auto focus
+      return !!props.autoFocus;
+    case 'img':
+      // if src is set, we might get a load/error event before commit
+      // we need to schedule an effect to replay the event.
+      return (
+        !!props.src &&
+        (typeof props.onLoad === 'function' ||
+          typeof props.onError === 'function')
+      );
+    case 'image':
+      return (
+        !!props['xlink:href'] &&
+        (typeof props.onLoad === 'function' ||
+          typeof props.onError === 'function')
+      );
+    case 'link':
+      return (
+        !!props.href &&
+        (typeof props.onLoad === 'function' ||
+          typeof props.onError === 'function')
+      );
+  }
+  return false;
 }
 
 export function prepareUpdate(
@@ -296,16 +319,27 @@ export function commitMount(
 ): void {
   // Despite the naming that might imply otherwise, this method only
   // fires if there is an `Update` effect scheduled during mounting.
-  // This happens if `finalizeInitialChildren` returns `true` (which it
-  // does to implement the `autoFocus` attribute on the client). But
-  // there are also other cases when this might happen (such as patching
-  // up text content during hydration mismatch). So we'll check this again.
-  if (shouldAutoFocusHostComponent(type, newProps)) {
-    ((domElement: any):
-      | HTMLButtonElement
-      | HTMLInputElement
-      | HTMLSelectElement
-      | HTMLTextAreaElement).focus();
+  // This happens if `finalizeInitialChildren` returns `true`.
+  switch (type) {
+    case 'button':
+    case 'input':
+    case 'select':
+    case 'textarea': {
+      if (newProps.autoFocus) {
+        ((domElement: any):
+          | HTMLButtonElement
+          | HTMLInputElement
+          | HTMLSelectElement
+          | HTMLTextAreaElement).focus();
+      }
+      break;
+    }
+    case 'img':
+    case 'image':
+    case 'link': {
+      replayEarlyEvent(domElement);
+      break;
+    }
   }
 }
 

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

@@ -25,6 +25,7 @@ import {
   isEnabled,
   trapBubbledEvent,
   trapCapturedEvent,
+  replayEarlyEvent,
 } from './ReactDOMEventListener';
 import isEventSupported from './isEventSupported';
 
@@ -187,4 +188,10 @@ export function isListeningToAllDependencies(
   return true;
 }
 
-export {setEnabled, isEnabled, trapBubbledEvent, trapCapturedEvent};
+export {
+  setEnabled,
+  isEnabled,
+  trapBubbledEvent,
+  replayEarlyEvent,
+  trapCapturedEvent,
+};

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

@@ -137,13 +137,16 @@ export function isEnabled() {
 export function trapBubbledEvent(
   topLevelType: DOMTopLevelEventType,
   element: Document | Element,
+  expectEarlyEvents: boolean = false,
 ) {
   if (!element) {
     return null;
   }
   const dispatch = isInteractiveTopLevelEventType(topLevelType)
     ? dispatchInteractiveEvent
-    : dispatchEvent;
+    : expectEarlyEvents
+      ? dispatchAndStoreEvent
+      : dispatchEvent;
 
   addEventBubbleListener(
     element,
@@ -185,6 +188,21 @@ function dispatchInteractiveEvent(topLevelType, nativeEvent) {
   interactiveUpdates(dispatchEvent, topLevelType, nativeEvent);
 }
 
+function dispatchAndStoreEvent(
+  topLevelType: DOMTopLevelEventType,
+  nativeEvent: AnyNativeEvent,
+) {
+  (nativeEvent.target: any)._pendingEvent = nativeEvent;
+  dispatchEvent(topLevelType, nativeEvent);
+}
+
+export function replayEarlyEvent(element: Document | Element) {
+  let pendingEvent: Event = (element: any)._pendingEvent;
+  if (pendingEvent) {
+    element.dispatchEvent(pendingEvent);
+  }
+}
+
 export function dispatchEvent(
   topLevelType: DOMTopLevelEventType,
   nativeEvent: AnyNativeEvent,