Track namespaces instead of creating instances early

While we might want to create instance in the begin phase, we shouldn't let DOM guide reconciler design.
Instead, we are adding a new concept of "host context". In case of ReactDOMFiber, it's just the current namespace.
We are keeping a stack of host context values, ignoring those that are referentially equal.
The renderer receives the parent context and type, and can return a new context.

Author: gaearon

src/renderers/dom/fiber/ReactDOMFiber.js

@@ -33,7 +33,7 @@ var warning = require('warning');
 
 var {
   createElement,
-  isNewHostContainer,
+  getNamespace,
   setInitialProperties,
   updateProperties,
 } = ReactDOMFiberComponent;
@@ -61,8 +61,8 @@ let selectionInformation : ?mixed = null;
 
 var DOMRenderer = ReactFiberReconciler({
 
-  isContainerType(type : string) {
-    return isNewHostContainer(type);
+  getHostContext(parentHostContext : string | null, type : string) {
+    return getNamespace(parentHostContext, type);
   },
 
   prepareForCommit() : void {
@@ -82,10 +82,10 @@ var DOMRenderer = ReactFiberReconciler({
     type : string,
     props : Props,
     rootContainerInstance : Container,
-    containerInstance : Instance | Container,
+    hostContext : string | null,
     internalInstanceHandle : Object,
   ) : Instance {
-    const domElement : Instance = createElement(type, props, rootContainerInstance, containerInstance);
+    const domElement : Instance = createElement(type, props, rootContainerInstance, hostContext);
     precacheFiberNode(internalInstanceHandle, domElement);
     return domElement;
   },

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -46,6 +46,11 @@ var CHILDREN = 'children';
 var STYLE = 'style';
 var HTML = '__html';
 
+var {
+  svg: SVG_NAMESPACE,
+  math: MATH_NAMESPACE,
+} = DOMNamespaces;
+
 // Node type for document fragments (Node.DOCUMENT_FRAGMENT_NODE).
 var DOC_FRAGMENT_TYPE = 11;
 
@@ -452,49 +457,38 @@ function updateDOMProperties(
 }
 
 var ReactDOMFiberComponent = {
-
-  // TODO: Does this need to check the current namespace? In case these tags
-  // happen to be valid in some other namespace.
-  isNewHostContainer(type : string) {
-    // We don't need convert user-provided "type" to a lowercase "tag" because
-    // both cases we're comparing against are SVG tags, which is case sensitive.
-    return (
-      type === 'svg' ||
-      type === 'foreignObject'
-    );
+  getNamespace(parentNamespace : string | null, type : string) : string | null {
+    if (parentNamespace == null) {
+      switch (type) {
+        case 'svg':
+          return SVG_NAMESPACE;
+        case 'math':
+          return MATH_NAMESPACE;
+        default:
+          return null;
+      }
+    }
+    if (parentNamespace === SVG_NAMESPACE && type === 'foreignObject') {
+      return null;
+    }
+    return parentNamespace;
   },
 
   createElement(
     type : string,
     props : Object,
     rootContainerElement : Element,
-    containerElement : Element
+    namespaceURI : string | null
   ) : Element {
     validateDangerousTag(type);
     // TODO:
     // const tag = type.toLowerCase(); Do we need to apply lower case only on non-custom elements?
 
     // We create tags in the namespace of their parent container, except HTML
     // tags get no namespace.
-    var namespaceURI = containerElement.namespaceURI;
-    if (namespaceURI == null ||
-        namespaceURI === DOMNamespaces.svg &&
-        // We don't need convert to lowercase because SVG is case sensitive:
-        containerElement.tagName === 'foreignObject') {
-      namespaceURI = DOMNamespaces.html;
-    }
-    if (namespaceURI === DOMNamespaces.html) {
-      // We don't need convert to lowercase because SVG is case sensitive.
-      if (type === 'svg') {
-        namespaceURI = DOMNamespaces.svg;
-      } else if (type === 'math') {
-        namespaceURI = DOMNamespaces.mathml;
-      }
-    }
-
     var ownerDocument = rootContainerElement.ownerDocument;
     var domElement : Element;
-    if (namespaceURI === DOMNamespaces.html) {
+    if (namespaceURI == null) {
       const tag = type.toLowerCase();
       if (tag === 'script') {
         // Create the script via .innerHTML so its "parser-inserted" flag is

src/renderers/noop/ReactNoop.js

@@ -40,8 +40,8 @@ var instanceCounter = 0;
 
 var NoopRenderer = ReactFiberReconciler({
 
-  isContainerType() {
-    return false;
+  getHostContext() {
+    return null;
   },
 
   createInstance(type : string, props : Props) : Instance {

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -58,22 +58,15 @@ var {
 var ReactCurrentOwner = require('ReactCurrentOwner');
 var ReactFiberClassComponent = require('ReactFiberClassComponent');
 
-module.exports = function<T, P, I, TI, C>(
-  config : HostConfig<T, P, I, TI, C>,
-  hostContext : HostContext<I, C>,
+module.exports = function<T, P, I, TI, C, CX>(
+  config : HostConfig<T, P, I, TI, C, CX>,
+  hostContext : HostContext<C, CX>,
   scheduleUpdate : (fiber: Fiber) => void
 ) {
 
   const {
-    createInstance,
-    createTextInstance,
-    isContainerType,
-  } = config;
-
-  const {
-    getHostContainerOnStack,
-    getRootHostContainerOnStack,
-    pushHostContainer,
+    setRootHostContainer,
+    maybePushHostContext,
     saveHostContextToPortal,
   } = hostContext;
 
@@ -233,22 +226,6 @@ module.exports = function<T, P, I, TI, C>(
       // avoids allocating another HostText fiber and traversing it.
       nextChildren = null;
     }
-    if (!current && workInProgress.stateNode == null) {
-      const newProps = workInProgress.pendingProps;
-      const containerInstance = getHostContainerOnStack();
-      const rootContainerInstance = getRootHostContainerOnStack();
-      if (rootContainerInstance == null) {
-        throw new Error('Expected to find a root instance on the host stack.');
-      }
-      const instance = createInstance(
-        workInProgress.type,
-        newProps,
-        rootContainerInstance,
-        containerInstance,
-        workInProgress
-      );
-      workInProgress.stateNode = instance;
-    }
     if (workInProgress.pendingProps.hidden &&
         workInProgress.pendingWorkPriority !== OffscreenPriority) {
       // If this host component is hidden, we can bail out on the children.
@@ -285,9 +262,7 @@ module.exports = function<T, P, I, TI, C>(
       // Abort and don't process children yet.
       return null;
     } else {
-      if (isContainerType(workInProgress.type)) {
-        pushHostContainer(workInProgress.stateNode);
-      }
+      maybePushHostContext(workInProgress);
       reconcileChildren(current, workInProgress, nextChildren);
       return workInProgress.child;
     }
@@ -422,9 +397,7 @@ module.exports = function<T, P, I, TI, C>(
 
     // Put context on the stack because we will work on children
     if (isHostComponent) {
-      if (isContainerType(workInProgress.type)) {
-        pushHostContainer(workInProgress.stateNode);
-      }
+      maybePushHostContext(workInProgress);
     } else {
       switch (workInProgress.tag) {
         case ClassComponent:
@@ -433,7 +406,7 @@ module.exports = function<T, P, I, TI, C>(
           }
           break;
         case HostContainer:
-          pushHostContainer(workInProgress.stateNode.containerInfo);
+          setRootHostContainer(workInProgress.stateNode.containerInfo);
           break;
         case Portal:
           saveHostContextToPortal(workInProgress);
@@ -499,7 +472,7 @@ module.exports = function<T, P, I, TI, C>(
         } else {
           pushTopLevelContextObject(root.context, false);
         }
-        pushHostContainer(workInProgress.stateNode.containerInfo);
+        setRootHostContainer(workInProgress.stateNode.containerInfo);
         reconcileChildren(current, workInProgress, workInProgress.pendingProps);
         // A yield component is just a placeholder, we can just run through the
         // next one immediately.
@@ -508,15 +481,8 @@ module.exports = function<T, P, I, TI, C>(
       case HostComponent:
         return updateHostComponent(current, workInProgress);
       case HostText:
-        const newText = workInProgress.pendingProps;
-        if (typeof newText !== 'string') {
-          throw new Error('We must have new props for new mounts.');
-        }
-        if (!current) {
-          const textInstance = createTextInstance(newText, workInProgress);
-          workInProgress.stateNode = textInstance;
-        }
-        // This is terminal. We'll do the completion step immediately after.
+        // Nothing to do here. This is terminal. We'll do the completion step
+        // immediately after.
         return null;
       case CoroutineHandlerPhase:
         // This is a restart. Reset the tag to the initial phase.

src/renderers/shared/fiber/ReactFiberCommitWork.js

@@ -33,9 +33,9 @@ var {
   Callback,
 } = require('ReactTypeOfSideEffect');
 
-module.exports = function<T, P, I, TI, C>(
-  config : HostConfig<T, P, I, TI, C>,
-  hostContext : HostContext<I, C>,
+module.exports = function<T, P, I, TI, C, CX>(
+  config : HostConfig<T, P, I, TI, C, CX>,
+  hostContext : HostContext<C, CX>,
   trapError : (failedFiber : Fiber, error: Error, isUnmounting : boolean) => void
 ) {
 
@@ -48,7 +48,7 @@ module.exports = function<T, P, I, TI, C>(
   } = config;
 
   const {
-    getRootHostContainerOnStack,
+    getRootHostContainer,
   } = hostContext;
 
   function detachRef(current : Fiber) {
@@ -310,10 +310,7 @@ module.exports = function<T, P, I, TI, C>(
           // Commit the work prepared earlier.
           const newProps = finishedWork.memoizedProps;
           const oldProps = current.memoizedProps;
-          const rootContainerInstance = getRootHostContainerOnStack();
-          if (rootContainerInstance == null) {
-            throw new Error('Expected to find a root instance on the host stack.');
-          }
+          const rootContainerInstance = getRootHostContainer();
           commitUpdate(instance, oldProps, newProps, rootContainerInstance, finishedWork);
         }
         detachRefIfNeeded(current, finishedWork);

src/renderers/shared/fiber/ReactFiberCompleteWork.js

@@ -44,20 +44,22 @@ var {
   Callback,
 } = ReactTypeOfSideEffect;
 
-module.exports = function<T, P, I, TI, C>(
-  config : HostConfig<T, P, I, TI, C>,
-  hostContext : HostContext<I, C>,
+module.exports = function<T, P, I, TI, C, CX>(
+  config : HostConfig<T, P, I, TI, C, CX>,
+  hostContext : HostContext<C, CX>,
 ) {
   const {
+    createInstance,
+    createTextInstance,
     appendInitialChild,
     finalizeInitialChildren,
     prepareUpdate,
   } = config;
 
   const {
-    getRootHostContainerOnStack,
-    getHostContainerOnStack,
-    popHostContainer,
+    getRootHostContainer,
+    maybePopHostContext,
+    getCurrentHostContext,
     restoreHostContextFromPortal,
   } = hostContext;
 
@@ -212,15 +214,8 @@ module.exports = function<T, P, I, TI, C>(
         return null;
       }
       case HostComponent:
-        const instance : I = workInProgress.stateNode;
-        if (!instance) {
-          throw new Error('Expected host instance to be created in begin phase.');
-        }
-        if (instance === getHostContainerOnStack()) {
-          popHostContainer();
-        }
         let newProps = workInProgress.pendingProps;
-        if (current) {
+        if (current && workInProgress.stateNode != null) {
           // If we have an alternate, that means this is an update and we need to
           // schedule a side-effect to do the updates.
           const oldProps = current.memoizedProps;
@@ -231,6 +226,7 @@ module.exports = function<T, P, I, TI, C>(
           if (!newProps) {
             newProps = workInProgress.memoizedProps || oldProps;
           }
+          const instance : I = workInProgress.stateNode;
           if (prepareUpdate(instance, oldProps, newProps)) {
             // This returns true if there was something to update.
             markUpdate(workInProgress);
@@ -245,29 +241,35 @@ module.exports = function<T, P, I, TI, C>(
             }
           }
 
-          const rootContainerInstance = getRootHostContainerOnStack();
-          if (rootContainerInstance == null) {
-            throw new Error('Expected to find a root instance on the host stack.');
-          }
-          // TODO: Keep the instance on a context "stack" as the parent.
-          // Then append children as we go in beginWork or completeWork
-          // depending on we want to add then top->down or bottom->up.
-          // Top->down is faster in IE11.
-          // Finally, finalizeInitialChildren here in completeWork.
+          const rootContainerInstance = getRootHostContainer();
+          const currentHostContext = getCurrentHostContext();
+          // TODO: Move createInstance to beginWork and keep it on a context
+          // "stack" as the parent. Then append children as we go in beginWork
+          // or completeWork depending on we want to add then top->down or
+          // bottom->up. Top->down is faster in IE11.
+          const instance = createInstance(
+            workInProgress.type,
+            newProps,
+            rootContainerInstance,
+            currentHostContext,
+            workInProgress
+          );
           appendAllChildren(instance, workInProgress);
           finalizeInitialChildren(instance, newProps, rootContainerInstance);
 
+          workInProgress.stateNode = instance;
           if (workInProgress.ref) {
             // If there is a ref on a host node we need to schedule a callback
             markUpdate(workInProgress);
           }
         }
+        maybePopHostContext(workInProgress);
         workInProgress.memoizedProps = newProps;
         return null;
       case HostText:
         let newText = workInProgress.pendingProps;
         if (current && workInProgress.stateNode != null) {
-          const oldText = current.memoizedProps;          
+          const oldText = current.memoizedProps;
           if (newText === null) {
             // If this was a bail out we need to fall back to memoized text.
             // This works the same way as HostComponent.
@@ -281,6 +283,17 @@ module.exports = function<T, P, I, TI, C>(
           if (oldText !== newText) {
             markUpdate(workInProgress);
           }
+        } else {
+          if (typeof newText !== 'string') {
+            if (workInProgress.stateNode === null) {
+              throw new Error('We must have new props for new mounts.');
+            } else {
+              // This can happen when we abort work.
+              return null;
+            }
+          }
+          const textInstance = createTextInstance(newText, workInProgress);
+          workInProgress.stateNode = textInstance;
         }
         workInProgress.memoizedProps = newText;
         return null;