Fiber: renderSubtreeIntoContainer (#8368)

Author: sophiebits

scripts/fiber/tests-failing.txt

@@ -6,11 +6,6 @@ src/addons/__tests__/ReactFragment-test.js
 * should throw if a plain object even if it is in an owner
 * should throw if a plain object looks like an old element
 
-src/addons/__tests__/renderSubtreeIntoContainer-test.js
-* should pass context when rendering subtree elsewhere
-* should update context if it changes due to setState
-* should update context if it changes due to re-render
-
 src/isomorphic/classic/__tests__/ReactContextValidator-test.js
 * should pass previous context to lifecycles
 

scripts/fiber/tests-passing.txt

@@ -44,7 +44,10 @@ src/addons/__tests__/ReactFragment-test.js
 * should warn if passing a ReactElement to createFragment
 
 src/addons/__tests__/renderSubtreeIntoContainer-test.js
+* should pass context when rendering subtree elsewhere
 * should throw if parentComponent is invalid
+* should update context if it changes due to setState
+* should update context if it changes due to re-render
 
 src/addons/__tests__/update-test.js
 * pushes

src/renderers/dom/ReactDOM.js

@@ -23,7 +23,6 @@ var ReactVersion = require('ReactVersion');
 
 var findDOMNode = require('findDOMNode');
 var getHostComponentFromComposite = require('getHostComponentFromComposite');
-var renderSubtreeIntoContainer = require('renderSubtreeIntoContainer');
 var warning = require('warning');
 
 ReactDOMInjection.inject();
@@ -37,7 +36,7 @@ var ReactDOM = {
 
   /* eslint-disable camelcase */
   unstable_batchedUpdates: ReactUpdates.batchedUpdates,
-  unstable_renderSubtreeIntoContainer: renderSubtreeIntoContainer,
+  unstable_renderSubtreeIntoContainer: ReactMount.renderSubtreeIntoContainer,
   /* eslint-enable camelcase */
 };
 

src/renderers/dom/fiber/ReactDOMFiber.js

@@ -16,15 +16,22 @@ import type { Fiber } from 'ReactFiber';
 import type { HostChildren } from 'ReactFiberReconciler';
 
 var ReactControlledComponent = require('ReactControlledComponent');
-var ReactFiberReconciler = require('ReactFiberReconciler');
 var ReactDOMComponentTree = require('ReactDOMComponentTree');
 var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
 var ReactDOMFiberComponent = require('ReactDOMFiberComponent');
 var ReactDOMInjection = require('ReactDOMInjection');
+var ReactFiberReconciler = require('ReactFiberReconciler');
+var ReactInstanceMap = require('ReactInstanceMap');
 
 var findDOMNode = require('findDOMNode');
+var invariant = require('invariant');
 var warning = require('warning');
 
+ReactDOMInjection.inject();
+ReactControlledComponent.injection.injectFiberControlledHostComponent(
+  ReactDOMFiberComponent
+);
+
 var {
   createElement,
   setInitialProperties,
@@ -147,18 +154,29 @@ function warnAboutUnstableUse() {
   warned = true;
 }
 
+function renderSubtreeIntoContainer(parentComponent : ?ReactComponent<any, any, any>, element : ReactElement<any>, container : DOMContainerElement, callback: ?Function) {
+  let root;
+  if (!container._reactRootContainer) {
+    root = container._reactRootContainer = DOMRenderer.mountContainer(element, container, parentComponent, callback);
+  } else {
+    DOMRenderer.updateContainer(element, root = container._reactRootContainer, parentComponent, callback);
+  }
+  return DOMRenderer.getPublicRootInstance(root);
+}
+
 var ReactDOM = {
 
   render(element : ReactElement<any>, container : DOMContainerElement, callback: ?Function) {
     warnAboutUnstableUse();
-    let root;
+    return renderSubtreeIntoContainer(null, element, container, callback);
+  },
 
-    if (!container._reactRootContainer) {
-      root = container._reactRootContainer = DOMRenderer.mountContainer(element, container, callback);
-    } else {
-      DOMRenderer.updateContainer(element, root = container._reactRootContainer, callback);
-    }
-    return DOMRenderer.getPublicRootInstance(root);
+  unstable_renderSubtreeIntoContainer(parentComponent : ReactComponent<any, any, any>, element : ReactElement<any>, container : DOMContainerElement, callback: ?Function) {
+    invariant(
+      parentComponent != null && ReactInstanceMap.has(parentComponent),
+      'parentComponent must be a valid React Component'
+    );
+    return renderSubtreeIntoContainer(parentComponent, element, container, callback);
   },
 
   unmountComponentAtNode(container : DOMContainerElement) {

src/renderers/dom/stack/client/ReactMount.js

@@ -27,7 +27,7 @@ var ReactReconciler = require('ReactReconciler');
 var ReactUpdateQueue = require('ReactUpdateQueue');
 var ReactUpdates = require('ReactUpdates');
 
-var emptyObject = require('emptyObject');
+var getContextForSubtree = require('getContextForSubtree');
 var instantiateReactComponent = require('instantiateReactComponent');
 var invariant = require('invariant');
 var setInnerHTML = require('setInnerHTML');
@@ -466,14 +466,7 @@ var ReactMount = {
       { child: nextElement }
     );
 
-    var nextContext;
-    if (parentComponent) {
-      var parentInst = ReactInstanceMap.get(parentComponent);
-      nextContext = parentInst._processChildContext(parentInst._context);
-    } else {
-      nextContext = emptyObject;
-    }
-
+    var nextContext = getContextForSubtree(parentComponent);
     var prevComponent = getTopLevelWrapperInContainer(container);
 
     if (prevComponent) {

src/renderers/dom/stack/client/renderSubtreeIntoContainer.js

@@ -11,6 +11,6 @@
 
 'use strict';
 
-var ReactMount = require('ReactMount');
+var ReactDOM = require('ReactDOM');
 
-module.exports = ReactMount.renderSubtreeIntoContainer;
+module.exports = ReactDOM.unstable_renderSubtreeIntoContainer;

src/renderers/noop/ReactNoop.js

@@ -182,12 +182,12 @@ var ReactNoop = {
     if (!roots.has(rootID)) {
       const container = { rootID: rootID, children: [] };
       rootContainers.set(rootID, container);
-      const root = NoopRenderer.mountContainer(element, container, callback);
+      const root = NoopRenderer.mountContainer(element, container, null, callback);
       roots.set(rootID, root);
     } else {
       const root = roots.get(rootID);
       if (root) {
-        NoopRenderer.updateContainer(element, root, callback);
+        NoopRenderer.updateContainer(element, root, null, callback);
       }
     }
   },

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -14,6 +14,7 @@
 
 import type { ReactCoroutine } from 'ReactCoroutine';
 import type { Fiber } from 'ReactFiber';
+import type { FiberRoot } from 'ReactFiberRoot';
 import type { HostConfig } from 'ReactFiberReconciler';
 import type { PriorityLevel } from 'ReactPriorityLevel';
 
@@ -30,6 +31,7 @@ var {
   isContextProvider,
   hasContextChanged,
   pushContextProvider,
+  pushTopLevelContextObject,
   resetContext,
 } = require('ReactFiberContext');
 var {
@@ -411,11 +413,21 @@ module.exports = function<T, P, I, TI, C>(
         return updateFunctionalComponent(current, workInProgress);
       case ClassComponent:
         return updateClassComponent(current, workInProgress);
-      case HostContainer:
+      case HostContainer: {
+        const root = (workInProgress.stateNode : FiberRoot);
+        if (root.pendingContext) {
+          pushTopLevelContextObject(
+            root.pendingContext,
+            root.pendingContext !== root.context
+          );
+        } else {
+          pushTopLevelContextObject(root.context, false);
+        }
         reconcileChildren(current, workInProgress, workInProgress.pendingProps);
         // A yield component is just a placeholder, we can just run through the
         // next one immediately.
         return workInProgress.child;
+      }
       case HostComponent:
         if (workInProgress.stateNode && typeof config.beginUpdate === 'function') {
           config.beginUpdate(workInProgress.stateNode);

src/renderers/shared/fiber/ReactFiberCompleteWork.js

@@ -14,6 +14,7 @@
 
 import type { ReactCoroutine } from 'ReactCoroutine';
 import type { Fiber } from 'ReactFiber';
+import type { FiberRoot } from 'ReactFiberRoot';
 import type { HostConfig } from 'ReactFiberReconciler';
 import type { ReifiedYield } from 'ReactReifiedYield';
 
@@ -157,15 +158,22 @@ module.exports = function<T, P, I, TI, C>(config : HostConfig<T, P, I, TI, C>) {
           markCallback(workInProgress);
         }
         return null;
-      case HostContainer:
+      case HostContainer: {
         transferOutput(workInProgress.child, workInProgress);
+        popContextProvider();
+        const fiberRoot = (workInProgress.stateNode : FiberRoot);
+        if (fiberRoot.pendingContext) {
+          fiberRoot.context = fiberRoot.pendingContext;
+          fiberRoot.pendingContext = null;
+        }
         // We don't know if a container has updated any children so we always
         // need to update it right now. We schedule this side-effect before
         // all the other side-effects in the subtree. We need to schedule it
         // before so that the entire tree is up-to-date before the life-cycles
         // are invoked.
         markUpdate(workInProgress);
         return null;
+      }
       case HostComponent:
         let newProps = workInProgress.pendingProps;
         if (current && workInProgress.stateNode != null) {

src/renderers/shared/fiber/ReactFiberContext.js

@@ -18,6 +18,7 @@ var emptyObject = require('emptyObject');
 var invariant = require('invariant');
 var {
   getComponentName,
+  isFiberMounted,
 } = require('ReactFiberTreeReflection');
 var {
   ClassComponent,
@@ -64,45 +65,58 @@ exports.hasContextChanged = function() : boolean {
   return index > -1 && didPerformWorkStack[index];
 };
 
-exports.isContextProvider = function(fiber : Fiber) : boolean {
+function isContextProvider(fiber : Fiber) : boolean {
   return (
     fiber.tag === ClassComponent &&
     typeof fiber.stateNode.getChildContext === 'function'
   );
-};
+}
+exports.isContextProvider = isContextProvider;
 
 exports.popContextProvider = function() : void {
   contextStack[index] = emptyObject;
   didPerformWorkStack[index] = false;
   index--;
 };
 
-exports.pushContextProvider = function(fiber : Fiber, didPerformWork : boolean) : void {
+exports.pushTopLevelContextObject = function(context : Object, didChange : boolean) : void {
+  invariant(index === -1, 'Unexpected context found on stack');
+  index++;
+  contextStack[index] = context;
+  didPerformWorkStack[index] = didChange;
+};
+
+function processChildContext(fiber : Fiber, parentContext : Object): Object {
   const instance = fiber.stateNode;
   const childContextTypes = fiber.type.childContextTypes;
+  const childContext = instance.getChildContext();
+  for (let contextKey in childContext) {
+    invariant(
+      contextKey in childContextTypes,
+      '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
+      getComponentName(fiber),
+      contextKey
+    );
+  }
+  if (__DEV__) {
+    const name = getComponentName(fiber);
+    const debugID = 0; // TODO: pass a real ID
+    checkReactTypeSpec(childContextTypes, childContext, 'childContext', name, null, debugID);
+  }
+  return {...parentContext, ...childContext};
+}
+exports.processChildContext = processChildContext;
 
+exports.pushContextProvider = function(fiber : Fiber, didPerformWork : boolean) : void {
+  const instance = fiber.stateNode;
   const memoizedMergedChildContext = instance.__reactInternalMemoizedMergedChildContext;
   const canReuseMergedChildContext = !didPerformWork && memoizedMergedChildContext != null;
 
   let mergedContext = null;
   if (canReuseMergedChildContext) {
     mergedContext = memoizedMergedChildContext;
   } else {
-    const childContext = instance.getChildContext();
-    for (let contextKey in childContext) {
-      invariant(
-        contextKey in childContextTypes,
-        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentName(fiber),
-        contextKey
-      );
-    }
-    if (__DEV__) {
-      const name = getComponentName(fiber);
-      const debugID = 0; // TODO: pass a real ID
-      checkReactTypeSpec(childContextTypes, childContext, 'childContext', name, null, debugID);
-    }
-    mergedContext = {...getUnmaskedContext(), ...childContext};
+    mergedContext = processChildContext(fiber, getUnmaskedContext());
     instance.__reactInternalMemoizedMergedChildContext = mergedContext;
   }
 
@@ -115,3 +129,20 @@ exports.resetContext = function() : void {
   index = -1;
 };
 
+exports.findCurrentUnmaskedContext = function(fiber: Fiber) : Object {
+  // Currently this is only used with renderSubtreeIntoContainer; not sure if it
+  // makes sense elsewhere
+  invariant(
+    isFiberMounted(fiber) && fiber.tag === ClassComponent,
+    'Expected subtree parent to be a mounted class component'
+  );
+
+  let node : ?Fiber = parent;
+  while (node) {
+    if (isContextProvider(fiber)) {
+      return fiber.stateNode.__reactInternalMemoizedMergedChildContext;
+    }
+    node = node.return;
+  }
+  return emptyObject;
+};