event system, element rendering and updating

Author: Edvin Erikson

src/renderers/native/ReactNative.js

@@ -17,9 +17,15 @@ var ReactNativeComponentTree = require('ReactNativeComponentTree');
 var ReactNativeInjection = require('ReactNativeInjection');
 var ReactNativeStackInjection = require('ReactNativeStackInjection');
 
-const useFiber = true;
+var ReactNativeFeatureFlags = require('ReactNativeFeatureFlags');
 
-var ReactNativeMount = useFiber ? require('ReactNativeFiber') : require('ReactNativeMount');
+var ReactNativeMount;
+if (ReactNativeFeatureFlags.useFiber) {
+  ReactNativeMount = require('ReactNativeFiber');
+
+} else {
+  ReactNativeMount = require('ReactNativeMount');
+}
 var ReactUpdates = require('ReactUpdates');
 
 var findNodeHandle = require('findNodeHandle');

src/renderers/native/ReactNativeComponentTree.js

@@ -7,11 +7,15 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule ReactNativeComponentTree
+ * @flow
  */
 
 'use strict';
 
+import type { Fiber } from 'ReactFiber';
+
 var invariant = require('invariant');
+var { useFiber } = require('ReactNativeFeatureFlags');
 
 var instanceCache = {};
 
@@ -34,33 +38,43 @@ function getRenderedHostOrTextFromComponent(component) {
  * Populate `_hostNode` on the rendered host/text component with the given
  * DOM node. The passed `inst` can be a composite.
  */
-function precacheNode(inst, tag) {
+function precacheNode(inst: Object, tag: number) {
   var nativeInst = getRenderedHostOrTextFromComponent(inst);
   instanceCache[tag] = nativeInst;
 }
 
-function uncacheNode(inst) {
+function precacheFiberNode(inst: Object, tag: number) {
+  instanceCache[tag] = inst;
+}
+
+function uncacheNode(inst: Object) {
   var tag = inst._rootNodeID;
   if (tag) {
     delete instanceCache[tag];
   }
 }
 
-function getInstanceFromTag(tag) {
+function getInstanceFromTag(tag: number) {
   return instanceCache[tag] || null;
 }
 
-function getTagFromInstance(inst) {
+function getTagFromFiber(fiber: Fiber) {
+  invariant(fiber.stateNode, 'All native instances should have a tag.');
+  return fiber.stateNode._rootNodeID;
+}
+
+function getTagFromInstance(inst: Object) {
   invariant(inst._rootNodeID, 'All native instances should have a tag.');
   return inst._rootNodeID;
 }
 
 var ReactNativeComponentTree = {
   getClosestInstanceFromNode: getInstanceFromTag,
   getInstanceFromNode: getInstanceFromTag,
-  getNodeFromInstance: getTagFromInstance,
+  getNodeFromInstance: useFiber ? getTagFromFiber : getTagFromInstance,
   precacheNode: precacheNode,
   uncacheNode: uncacheNode,
+  precacheFiberNode: precacheFiberNode,
 };
 
 module.exports = ReactNativeComponentTree;

src/renderers/native/ReactNativeFeatureFlags.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule ReactNativeFeatureFlags
+ * @flow
+ */
+
+'use strict';
+
+var ReactNativeFeatureFlags = {
+  useFiber: true,
+};
+
+module.exports = ReactNativeFeatureFlags;

src/renderers/native/createReactNativeComponentClass.js

@@ -19,7 +19,9 @@ type ReactNativeBaseComponentViewConfig = {
   propTypes?: Object,
 }
 
-var configMap = new Map();
+var ReactNativeFeatureFlags = require('ReactNativeFeatureFlags');
+var ReactNativeFiberComponent = require('ReactNativeFiberComponent');
+var ReactNativeBaseComponent = require('ReactNativeBaseComponent');
 
 /**
  * @param {string} config iOS View configuration.
@@ -28,21 +30,26 @@ var configMap = new Map();
 var createReactNativeComponentClass = function(
   viewConfig: ReactNativeBaseComponentViewConfig
 ): ReactClass<*> {
-  var name = viewConfig.uiViewClassName;
-  if (configMap.has(name)) {
-    throw new Error(name + ' was configured twice');
-  } else {
-    configMap.set(name, viewConfig);
+  if (ReactNativeFeatureFlags.useFiber) {
+    return ReactNativeFiberComponent.createComponent(viewConfig);
   }
 
-  var component = function(props) {
-    return React.createElement(name, props);
+  var Constructor = function(element) {
+    this._currentElement = element;
+    this._topLevelWrapper = null;
+    this._hostParent = null;
+    this._hostContainerInfo = null;
+    this._rootNodeID = 0;
+    this._renderedChildren = null;
   };
+  Constructor.displayName = viewConfig.uiViewClassName;
+  Constructor.viewConfig = viewConfig;
+  Constructor.propTypes = viewConfig.propTypes;
+  Constructor.prototype = new ReactNativeBaseComponent(viewConfig);
+  Constructor.prototype.constructor = Constructor;
 
-  component.propTypes = viewConfig.propTypes;
-  return component;
-};
+  return ((Constructor: any): ReactClass<any>);
 
-createReactNativeComponentClass.configMap = configMap;
+};
 
 module.exports = createReactNativeComponentClass;