Add hydrate option to createRoot

Author: acdlite

src/renderers/dom/fiber/ReactDOMFiberEntry.js

@@ -732,7 +732,7 @@ function renderSubtreeIntoContainer(
         );
       }
     }
-    const newRoot = DOMRenderer.createContainer(container);
+    const newRoot = DOMRenderer.createContainer(container, shouldHydrate);
     root = container._reactRootContainer = newRoot;
     // Initial mount should not be batched.
     DOMRenderer.unbatchedUpdates(() => {
@@ -769,7 +769,7 @@ type RootOptions = {
 };
 
 function ReactRoot(container: Container, hydrate: boolean) {
-  const root = DOMRenderer.createContainer(container);
+  const root = DOMRenderer.createContainer(container, hydrate);
   this._reactRootContainer = root;
 }
 ReactRoot.prototype.render = function(

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

@@ -11,6 +11,7 @@
 
 var React = require('react');
 var ReactDOM = require('react-dom');
+var ReactDOMServer = require('react-dom/server');
 
 describe('ReactDOMRoot', () => {
   let container;
@@ -32,4 +33,39 @@ describe('ReactDOMRoot', () => {
     root.unmount();
     expect(container.textContent).toEqual('');
   });
+
+  it('supports hydration', async () => {
+    const markup = await new Promise(resolve =>
+      resolve(
+        ReactDOMServer.renderToString(<div><span className="extra" /></div>),
+      ),
+    );
+
+    spyOn(console, 'error');
+
+    // Does not hydrate by default
+    const container1 = document.createElement('div');
+    container1.innerHTML = markup;
+    const root1 = ReactDOM.createRoot(container1);
+    root1.render(<div><span /></div>);
+    expect(console.error.calls.count()).toBe(0);
+
+    // Accepts `hydrate` option
+    const container2 = document.createElement('div');
+    container2.innerHTML = markup;
+    const root2 = ReactDOM.createRoot(container2, {hydrate: true});
+    root2.render(<div><span /></div>);
+    expect(console.error.calls.count()).toBe(1);
+    expect(console.error.calls.argsFor(0)[0]).toMatch('Extra attributes');
+  });
+
+  it('does not clear existing children', async () => {
+    spyOn(console, 'error');
+    container.innerHTML = '<div>a</div><div>b</div>';
+    const root = ReactDOM.createRoot(container);
+    root.render(<div><span>c</span><span>d</span></div>);
+    expect(container.textContent).toEqual('abcd');
+    root.render(<div><span>d</span><span>c</span></div>);
+    expect(container.textContent).toEqual('abdc');
+  });
 });

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

@@ -2638,6 +2638,12 @@ describe('ReactDOMServerIntegration', () => {
       it('should error reconnecting different element types', () =>
         expectMarkupMismatch(<div />, <span />));
 
+      it('should error reconnecting fewer root children', () =>
+        expectMarkupMismatch(<span key="a" />, [
+          <span key="a" />,
+          <span key="b" />,
+        ]));
+
       it('should error reconnecting missing attributes', () =>
         expectMarkupMismatch(<div id="foo" />, <div />));
 

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

@@ -396,7 +396,7 @@ describe('rendering React components at document', () => {
       expect(container.textContent).toBe('parsnip');
       expectDev(console.error.calls.count()).toBe(1);
       expectDev(console.error.calls.argsFor(0)[0]).toContain(
-        'Did not expect server HTML to contain the text node "potato" in <div>.',
+        'Expected server HTML to contain a matching <div> in <div>.',
       );
     });
 

src/renderers/native-cs/ReactNativeCSFiberEntry.js

@@ -194,7 +194,7 @@ const ReactNativeCSFiber: ReactNativeCSType = {
     if (!root) {
       // TODO (bvaughn): If we decide to keep the wrapper component,
       // We could create a wrapper for containerTag as well to reduce special casing.
-      root = ReactNativeCSFiberRenderer.createContainer(containerTag);
+      root = ReactNativeCSFiberRenderer.createContainer(containerTag, false);
       roots.set(containerTag, root);
     }
     ReactNativeCSFiberRenderer.updateContainer(element, root, null, callback);

src/renderers/native-rt/ReactNativeRTFiberEntry.js

@@ -53,7 +53,7 @@ const ReactNativeRTFiber: ReactNativeRTType = {
     if (!root) {
       // TODO (bvaughn): If we decide to keep the wrapper component,
       // We could create a wrapper for containerTag as well to reduce special casing.
-      root = ReactNativeRTFiberRenderer.createContainer(containerTag);
+      root = ReactNativeRTFiberRenderer.createContainer(containerTag, false);
       roots.set(containerTag, root);
     }
     ReactNativeRTFiberRenderer.updateContainer(element, root, null, callback);

src/renderers/native/ReactNativeFiberEntry.js

@@ -52,7 +52,7 @@ const ReactNativeFiber: ReactNativeType = {
     if (!root) {
       // TODO (bvaughn): If we decide to keep the wrapper component,
       // We could create a wrapper for containerTag as well to reduce special casing.
-      root = ReactNativeFiberRenderer.createContainer(containerTag);
+      root = ReactNativeFiberRenderer.createContainer(containerTag, false);
       roots.set(containerTag, root);
     }
     ReactNativeFiberRenderer.updateContainer(element, root, null, callback);

src/renderers/noop/ReactNoopEntry.js

@@ -269,7 +269,7 @@ var ReactNoop = {
     if (!root) {
       const container = {rootID: rootID, children: []};
       rootContainers.set(rootID, container);
-      root = NoopRenderer.createContainer(container);
+      root = NoopRenderer.createContainer(container, false);
       roots.set(rootID, root);
     }
     NoopRenderer.updateContainer(element, root, null, callback);

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -338,8 +338,10 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
         return bailoutOnAlreadyFinishedWork(current, workInProgress);
       }
       const element = state.element;
+      const root: FiberRoot = workInProgress.stateNode;
       if (
         (current === null || current.child === null) &&
+        root.hydrate &&
         enterHydrationState(workInProgress)
       ) {
         // If we don't have any current children this might be the first pass.

src/renderers/shared/fiber/ReactFiberHydrationContext.js

@@ -77,9 +77,8 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     didNotMatchHydratedTextInstance,
     didNotHydrateContainerInstance,
     didNotHydrateInstance,
-    // TODO: These are currently unused, see below.
-    // didNotFindHydratableContainerInstance,
-    // didNotFindHydratableContainerTextInstance,
+    didNotFindHydratableContainerInstance,
+    didNotFindHydratableContainerTextInstance,
     didNotFindHydratableInstance,
     didNotFindHydratableTextInstance,
   } = hydration;
@@ -140,25 +139,25 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     fiber.effectTag |= Placement;
     if (__DEV__) {
       switch (returnFiber.tag) {
-        // TODO: Currently we don't warn for insertions into the root because
-        // we always insert into the root in the non-hydrating case. We just
-        // delete the existing content. Reenable this once we have a better
-        // strategy for determining if we're hydrating or not.
-        // case HostRoot: {
-        //   const parentContainer = returnFiber.stateNode.containerInfo;
-        //   switch (fiber.tag) {
-        //     case HostComponent:
-        //       const type = fiber.type;
-        //       const props = fiber.pendingProps;
-        //       didNotFindHydratableContainerInstance(parentContainer, type, props);
-        //       break;
-        //     case HostText:
-        //       const text = fiber.pendingProps;
-        //       didNotFindHydratableContainerTextInstance(parentContainer, text);
-        //       break;
-        //   }
-        //   break;
-        // }
+        case HostRoot: {
+          const parentContainer = returnFiber.stateNode.containerInfo;
+          switch (fiber.tag) {
+            case HostComponent:
+              const type = fiber.type;
+              const props = fiber.pendingProps;
+              didNotFindHydratableContainerInstance(
+                parentContainer,
+                type,
+                props,
+              );
+              break;
+            case HostText:
+              const text = fiber.pendingProps;
+              didNotFindHydratableContainerTextInstance(parentContainer, text);
+              break;
+          }
+          break;
+        }
         case HostComponent: {
           const parentType = returnFiber.type;
           const parentProps = returnFiber.memoizedProps;