Don't hydrate any properties other than event listeners and text content

scripts/fiber/tests-failing.txt

@@ -1,5 +1 @@
-src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
-* should not blow away user-entered text on successful reconnect to an uncontrolled checkbox
-* should not blow away user-entered text on successful reconnect to a controlled checkbox
-* should not blow away user-selected value on successful reconnect to an uncontrolled select
-* should not blow away user-selected value on successful reconnect to an controlled select
+

scripts/fiber/tests-passing.txt

@@ -1226,6 +1226,10 @@ src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
 * renders a controlled select with client render on top of good server markup
 * should not blow away user-entered text on successful reconnect to an uncontrolled input
 * should not blow away user-entered text on successful reconnect to a controlled input
+* should not blow away user-entered text on successful reconnect to an uncontrolled checkbox
+* should not blow away user-entered text on successful reconnect to a controlled checkbox
+* should not blow away user-selected value on successful reconnect to an uncontrolled select
+* should not blow away user-selected value on successful reconnect to an controlled select
 * renders class child with context with server string render
 * renders class child with context with clean client render
 * renders class child with context with client render on top of good server markup

src/renderers/dom/fiber/ReactDOMFiber.js

@@ -48,6 +48,7 @@ var {
   setInitialProperties,
   diffProperties,
   updateProperties,
+  diffHydratedProperties,
 } = ReactDOMFiberComponent;
 var {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree;
 
@@ -409,19 +410,21 @@ var DOMRenderer = ReactFiberReconciler({
     props: Props,
     rootContainerInstance: Container,
     internalInstanceHandle: Object,
-  ): void {
+  ): null | Array<mixed> {
     precacheFiberNode(internalInstanceHandle, instance);
     // TODO: Possibly defer this until the commit phase where all the events
     // get attached.
     updateFiberProps(instance, props);
-    setInitialProperties(instance, type, props, rootContainerInstance);
+    return diffHydratedProperties(instance, type, props, rootContainerInstance);
   },
 
   hydrateTextInstance(
     textInstance: TextInstance,
+    text: string,
     internalInstanceHandle: Object,
-  ): void {
+  ): boolean {
     precacheFiberNode(internalInstanceHandle, textInstance);
+    return textInstance.nodeValue !== text;
   },
 
   scheduleAnimationCallback: ReactDOMFrameScheduling.rAF,

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -177,10 +177,10 @@ function setInitialDOMProperties(
   isCustomComponentTag: boolean,
 ): void {
   for (var propKey in nextProps) {
-    var nextProp = nextProps[propKey];
     if (!nextProps.hasOwnProperty(propKey)) {
       continue;
     }
+    var nextProp = nextProps[propKey];
     if (propKey === STYLE) {
       if (__DEV__) {
         if (nextProp) {
@@ -406,27 +406,27 @@ var ReactDOMFiberComponent = {
         props = rawProps;
         break;
       case 'input':
-        ReactDOMFiberInput.mountWrapper(domElement, rawProps);
+        ReactDOMFiberInput.initWrapperState(domElement, rawProps);
         props = ReactDOMFiberInput.getHostProps(domElement, rawProps);
         trapBubbledEventsLocal(domElement, tag);
         // For controlled components we always need to ensure we're listening
         // to onChange. Even if there is no listener.
         ensureListeningTo(rootContainerElement, 'onChange');
         break;
       case 'option':
-        ReactDOMFiberOption.mountWrapper(domElement, rawProps);
+        ReactDOMFiberOption.validateProps(domElement, rawProps);
         props = ReactDOMFiberOption.getHostProps(domElement, rawProps);
         break;
       case 'select':
-        ReactDOMFiberSelect.mountWrapper(domElement, rawProps);
+        ReactDOMFiberSelect.initWrapperState(domElement, rawProps);
         props = ReactDOMFiberSelect.getHostProps(domElement, rawProps);
         trapBubbledEventsLocal(domElement, tag);
         // For controlled components we always need to ensure we're listening
         // to onChange. Even if there is no listener.
         ensureListeningTo(rootContainerElement, 'onChange');
         break;
       case 'textarea':
-        ReactDOMFiberTextarea.mountWrapper(domElement, rawProps);
+        ReactDOMFiberTextarea.initWrapperState(domElement, rawProps);
         props = ReactDOMFiberTextarea.getHostProps(domElement, rawProps);
         trapBubbledEventsLocal(domElement, tag);
         // For controlled components we always need to ensure we're listening
@@ -462,6 +462,9 @@ var ReactDOMFiberComponent = {
       case 'option':
         ReactDOMFiberOption.postMountWrapper(domElement, rawProps);
         break;
+      case 'select':
+        ReactDOMFiberSelect.postMountWrapper(domElement, rawProps);
+        break;
       default:
         if (typeof props.onClick === 'function') {
           // TODO: This cast may not be sound for SVG, MathML or custom elements.
@@ -704,6 +707,131 @@ var ReactDOMFiberComponent = {
     }
   },
 
+  diffHydratedProperties(
+    domElement: Element,
+    tag: string,
+    rawProps: Object,
+    rootContainerElement: Element | Document,
+  ): null | Array<mixed> {
+    if (__DEV__) {
+      var isCustomComponentTag = isCustomComponent(tag, rawProps);
+      validatePropertiesInDevelopment(tag, rawProps);
+      if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {
+        warning(
+          false,
+          '%s is using shady DOM. Using shady DOM with React can ' +
+            'cause things to break subtly.',
+          getCurrentFiberOwnerName() || 'A component',
+        );
+        didWarnShadyDOM = true;
+      }
+    }
+
+    switch (tag) {
+      case 'audio':
+      case 'form':
+      case 'iframe':
+      case 'img':
+      case 'image':
+      case 'link':
+      case 'object':
+      case 'source':
+      case 'video':
+      case 'details':
+        trapBubbledEventsLocal(domElement, tag);
+        break;
+      case 'input':
+        ReactDOMFiberInput.initWrapperState(domElement, rawProps);
+        trapBubbledEventsLocal(domElement, tag);
+        // For controlled components we always need to ensure we're listening
+        // to onChange. Even if there is no listener.
+        ensureListeningTo(rootContainerElement, 'onChange');
+        break;
+      case 'option':
+        ReactDOMFiberOption.validateProps(domElement, rawProps);
+        break;
+      case 'select':
+        ReactDOMFiberSelect.initWrapperState(domElement, rawProps);
+        trapBubbledEventsLocal(domElement, tag);
+        // For controlled components we always need to ensure we're listening
+        // to onChange. Even if there is no listener.
+        ensureListeningTo(rootContainerElement, 'onChange');
+        break;
+      case 'textarea':
+        ReactDOMFiberTextarea.initWrapperState(domElement, rawProps);
+        trapBubbledEventsLocal(domElement, tag);
+        // For controlled components we always need to ensure we're listening
+        // to onChange. Even if there is no listener.
+        ensureListeningTo(rootContainerElement, 'onChange');
+        break;
+    }
+
+    assertValidProps(tag, rawProps, getCurrentFiberOwnerName);
+
+    var updatePayload = null;
+    for (var propKey in rawProps) {
+      if (!rawProps.hasOwnProperty(propKey)) {
+        continue;
+      }
+      var nextProp = rawProps[propKey];
+      if (propKey === CHILDREN) {
+        // For text content children we compare against textContent. This
+        // might match additional HTML that is hidden when we read it using
+        // textContent. E.g. "foo" will match "f<span>oo</span>" but that still
+        // satisfies our requirement. Our requirement is not to produce perfect
+        // HTML and attributes. Ideally we should preserve structure but it's
+        // ok not to if the visible content is still enough to indicate what
+        // even listeners these nodes might be wired up to.
+        // TODO: Warn if there is more than a single textNode as a child.
+        // TODO: Should we use domElement.firstChild.nodeValue to compare?
+        if (typeof nextProp === 'string') {
+          if (domElement.textContent !== nextProp) {
+            updatePayload = [CHILDREN, nextProp];
+          }
+        } else if (typeof nextProp === 'number') {
+          if (domElement.textContent !== '' + nextProp) {
+            updatePayload = [CHILDREN, '' + nextProp];
+          }
+        }
+      } else if (registrationNameModules.hasOwnProperty(propKey)) {
+        if (nextProp) {
+          ensureListeningTo(rootContainerElement, propKey);
+        }
+      }
+    }
+
+    switch (tag) {
+      case 'input':
+        // TODO: Make sure we check if this is still unmounted or do any clean
+        // up necessary since we never stop tracking anymore.
+        inputValueTracking.trackNode((domElement: any));
+        ReactDOMFiberInput.postMountWrapper(domElement, rawProps);
+        break;
+      case 'textarea':
+        // TODO: Make sure we check if this is still unmounted or do any clean
+        // up necessary since we never stop tracking anymore.
+        inputValueTracking.trackNode((domElement: any));
+        ReactDOMFiberTextarea.postMountWrapper(domElement, rawProps);
+        break;
+      case 'select':
+      case 'option':
+        // For input and textarea we current always set the value property at
+        // post mount to force it to diverge from attributes. However, for
+        // option and select we don't quite do the same thing and select
+        // is not resilient to the DOM state changing so we don't do that here.
+        // TODO: Consider not doing this for input and textarea.
+        break;
+      default:
+        if (typeof rawProps.onClick === 'function') {
+          // TODO: This cast may not be sound for SVG, MathML or custom elements.
+          trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
+        }
+        break;
+    }
+
+    return updatePayload;
+  },
+
   restoreControlledState(
     domElement: Element,
     tag: string,

src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js

@@ -89,7 +89,7 @@ var ReactDOMInput = {
     return hostProps;
   },
 
-  mountWrapper: function(element: Element, props: Object) {
+  initWrapperState: function(element: Element, props: Object) {
     if (__DEV__) {
       ReactControlledValuePropTypes.checkPropTypes(
         'input',

src/renderers/dom/fiber/wrappers/ReactDOMFiberOption.js

@@ -39,7 +39,7 @@ function flattenChildren(children) {
  * Implements an <option> host component that warns when `selected` is set.
  */
 var ReactDOMOption = {
-  mountWrapper: function(element: Element, props: Object) {
+  validateProps: function(element: Element, props: Object) {
     // TODO (yungsters): Remove support for `selected` in <option>.
     if (__DEV__) {
       warning(

src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js

@@ -136,7 +136,7 @@ var ReactDOMSelect = {
     });
   },
 
-  mountWrapper: function(element: Element, props: Object) {
+  initWrapperState: function(element: Element, props: Object) {
     var node = ((element: any): SelectWithWrapperState);
     if (__DEV__) {
       checkSelectPropTypes(props);
@@ -163,8 +163,12 @@ var ReactDOMSelect = {
       );
       didWarnValueDefaultValue = true;
     }
+  },
 
+  postMountWrapper: function(element: Element, props: Object) {
+    var node = ((element: any): SelectWithWrapperState);
     node.multiple = !!props.multiple;
+    var value = props.value;
     if (value != null) {
       updateOptions(node, !!props.multiple, value);
     } else if (props.defaultValue != null) {

src/renderers/dom/fiber/wrappers/ReactDOMFiberTextarea.js

@@ -66,7 +66,7 @@ var ReactDOMTextarea = {
     return hostProps;
   },
 
-  mountWrapper: function(element: Element, props: Object) {
+  initWrapperState: function(element: Element, props: Object) {
     var node = ((element: any): TextAreaWithWrapperState);
     if (__DEV__) {
       ReactControlledValuePropTypes.checkPropTypes(

src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js

@@ -106,11 +106,31 @@ const clientRenderOnServerString = async (element, errorCount = 0) => {
   return clientElement;
 };
 
-const clientRenderOnBadMarkup = (element, errorCount = 0) => {
+function BadMarkupExpected() {}
+
+const clientRenderOnBadMarkup = async (element, errorCount = 0) => {
+  // First we render the top of bad mark up.
   var domElement = document.createElement('div');
   domElement.innerHTML =
     '<div id="badIdWhichWillCauseMismatch" data-reactroot="" data-reactid="1"></div>';
-  return renderIntoDom(element, domElement, errorCount + 1);
+  await renderIntoDom(element, domElement, errorCount + 1);
+
+  // This gives us the resulting text content.
+  var hydratedTextContent = domElement.textContent;
+
+  // Next we render the element into a clean DOM node client side.
+  const cleanDomElement = document.createElement('div');
+  ExecutionEnvironment.canUseDOM = true;
+  await asyncReactDOMRender(element, cleanDomElement);
+  ExecutionEnvironment.canUseDOM = false;
+  // This gives us the expected text content.
+  const cleanTextContent = cleanDomElement.textContent;
+
+  // The only guarantee is that text content has been patched up if needed.
+  expect(hydratedTextContent).toBe(cleanTextContent);
+
+  // Abort any further expects. All bets are off at this point.
+  throw new BadMarkupExpected();
 };
 
 // runs a DOM rendering test as four different tests, with four different rendering
@@ -148,8 +168,17 @@ function itClientRenders(desc, testFn) {
     testFn(clientCleanRender));
   it(`renders ${desc} with client render on top of good server markup`, () =>
     testFn(clientRenderOnServerString));
-  it(`renders ${desc} with client render on top of bad server markup`, () =>
-    testFn(clientRenderOnBadMarkup));
+  it(`renders ${desc} with client render on top of bad server markup`, async () => {
+    try {
+      await testFn(clientRenderOnBadMarkup);
+    } catch (x) {
+      // We expect this to trigger the BadMarkupExpected rejection.
+      if (!(x instanceof BadMarkupExpected)) {
+        // If not, rethrow.
+        throw x;
+      }
+    }
+  });
 }
 
 function itThrows(desc, testFn) {
@@ -425,7 +454,7 @@ describe('ReactDOMServerIntegration', () => {
 
       itRenders('no dangerouslySetInnerHTML attribute', async render => {
         const e = await render(
-          <div dangerouslySetInnerHTML={{__html: 'foo'}} />,
+          <div dangerouslySetInnerHTML={{__html: '<foo />'}} />,
         );
         expect(e.getAttribute('dangerouslySetInnerHTML')).toBe(null);
       });

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -66,7 +66,7 @@ if (__DEV__) {
 module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   config: HostConfig<T, P, I, TI, PI, C, CX, PL>,
   hostContext: HostContext<C, CX>,
-  hydrationContext: HydrationContext<I, TI, C>,
+  hydrationContext: HydrationContext<C>,
   scheduleUpdate: (fiber: Fiber, priorityLevel: PriorityLevel) => void,
   getPriorityContext: (fiber: Fiber, forceAsync: boolean) => PriorityLevel,
 ) {

src/renderers/shared/fiber/ReactFiberCommitWork.js

@@ -392,10 +392,13 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       }
       case HostComponent: {
         const instance: I = finishedWork.stateNode;
-        if (instance != null && current !== null) {
+        if (instance != null) {
           // Commit the work prepared earlier.
           const newProps = finishedWork.memoizedProps;
-          const oldProps = current.memoizedProps;
+          // For hydration we reuse the update path but we treat the oldProps
+          // as the newProps. The updatePayload will contain the real change in
+          // this case.
+          const oldProps = current !== null ? current.memoizedProps : newProps;
           const type = finishedWork.type;
           // TODO: Type the updateQueue to be specific to host components.
           const updatePayload: null | PL = (finishedWork.updateQueue: any);
@@ -415,13 +418,18 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       }
       case HostText: {
         invariant(
-          finishedWork.stateNode !== null && current !== null,
-          'This should only be done during updates. This error is likely ' +
+          finishedWork.stateNode !== null,
+          'This should have a text node initialized. This error is likely ' +
             'caused by a bug in React. Please file an issue.',
         );
         const textInstance: TI = finishedWork.stateNode;
         const newText: string = finishedWork.memoizedProps;
-        const oldText: string = current.memoizedProps;
+        // For hydration we reuse the update path but we treat the oldProps
+        // as the newProps. The updatePayload will contain the real change in
+        // this case.
+        const oldText: string = current !== null
+          ? current.memoizedProps
+          : newText;
         commitTextUpdate(textInstance, oldText, newText);
         return;
       }