[WIP][Fiber] React Native Fiber

.babelrc

@@ -1,28 +1,10 @@
 {
-  "presets": ["react"],
   "ignore": ["third_party"],
   "plugins": [
-    "transform-class-properties",
+    "syntax-flow",
+    "syntax-jsx",
+    "syntax-class-properties",
     "syntax-trailing-function-commas",
-    "transform-object-rest-spread",
-    "transform-es2015-template-literals",
-    "transform-es2015-literals",
-    "transform-es2015-arrow-functions",
-    "transform-es2015-block-scoped-functions",
-    ["transform-es2015-classes", { "loose": true }],
-    "transform-es2015-object-super",
-    "transform-es2015-shorthand-properties",
-    "transform-es2015-computed-properties",
-    "transform-es2015-for-of",
-    "check-es2015-constants",
-    ["transform-es2015-spread", { "loose": true }],
-    "transform-es2015-parameters",
-    ["transform-es2015-destructuring", { "loose": true }],
-    "transform-es2015-block-scoping",
-    "transform-es2015-modules-commonjs",
-    "transform-es3-member-expression-literals",
-    "transform-es3-property-literals",
-    "./scripts/babel/transform-object-assign-require",
-    "transform-react-jsx-source"
-  ]
+    "syntax-object-rest-spread"
+      ]
 }

flow/react-native-host-hooks.js

@@ -18,7 +18,7 @@ declare module 'deepFreezeAndThrowOnMutationInDev' {
   declare function exports<T>(obj : T) : T;
 }
 declare module 'flattenStyle' { }
-declare module 'InitializeJavaScriptAppEngine' { }
+declare module 'InitializeCore' { }
 declare module 'RCTEventEmitter' {
   declare function register() : void;
 }
@@ -30,7 +30,14 @@ declare module 'UIManager' {
   declare var customBubblingEventTypes : Object;
   declare var customDirectEventTypes : Object;
   declare function createView() : void;
-  declare function manageChildren() : void;
+  declare function manageChildren(
+    tag: number,
+    moveFromIndices: Array<number>,
+    moveToIndices: Array<number>,
+    addChildTags: Array<number>,
+    addAtIndices: Array<number>,
+    removeAtIndices: Array<number>
+    ) : void;
   declare function measure() : void;
   declare function measureInWindow() : void;
   declare function measureLayout() : void;

gulpfile.js

@@ -76,7 +76,7 @@ var paths = {
       '!src/**/__tests__/**/*.js',
       '!src/**/__mocks__/**/*.js',
     ],
-    lib: 'build/node_modules/react-native/lib',
+    lib: '../react-native/Libraries/Renderer',
   },
   reactTestRenderer: {
     src: [
@@ -139,19 +139,19 @@ var moduleMapReactDOM = Object.assign(
   moduleMapBase
 );
 
-var moduleMapReactNative = Object.assign(
-  {
-    // React Native Hooks
-    deepDiffer: 'react-native/lib/deepDiffer',
-    deepFreezeAndThrowOnMutationInDev: 'react-native/lib/deepFreezeAndThrowOnMutationInDev',
-    flattenStyle: 'react-native/lib/flattenStyle',
-    InitializeJavaScriptAppEngine: 'react-native/lib/InitializeJavaScriptAppEngine',
-    RCTEventEmitter: 'react-native/lib/RCTEventEmitter',
-    TextInputState: 'react-native/lib/TextInputState',
-    UIManager: 'react-native/lib/UIManager',
-    UIManagerStatTracker: 'react-native/lib/UIManagerStatTracker',
-    View: 'react-native/lib/View',
-  },
+var moduleMapReactNative = Object.assign({},
+  //{
+  //   // React Native Hooks
+  //   deepDiffer: 'react-native/lib/deepDiffer',
+  //   deepFreezeAndThrowOnMutationInDev: 'react-native/lib/deepFreezeAndThrowOnMutationInDev',
+  //   flattenStyle: 'react-native/lib/flattenStyle',
+  //   InitializeJavaScriptAppEngine: 'react-native/lib/InitializeJavaScriptAppEngine',
+  //   RCTEventEmitter: 'react-native/lib/RCTEventEmitter',
+  //   TextInputState: 'react-native/lib/TextInputState',
+  //   UIManager: 'react-native/lib/UIManager',
+  //   UIManagerStatTracker: 'react-native/lib/UIManagerStatTracker',
+  //   View: 'react-native/lib/View',
+  // },
   rendererSharedState,
   moduleMapBase
 );
@@ -189,8 +189,7 @@ var babelOptsReactDOM = {
 
 var babelOptsReactNative = {
   plugins: [
-    devExpressionWithCodes, // this pass has to run before `rewrite-modules`
-    [babelPluginModules, {map: moduleMapReactNative}],
+    [babelPluginModules, {map: moduleMapReactNative, 'prefix': ''}],
   ],
 };
 
@@ -227,42 +226,10 @@ gulp.task('react:clean', function() {
 });
 
 gulp.task('react:modules', function() {
-  return merge(
-    gulp
-      .src(paths.react.src)
-      .pipe(babel(babelOptsReact))
-      .pipe(stripProvidesModule())
-      .pipe(flatten())
-      .pipe(gulp.dest(paths.react.lib)),
-
-    gulp
-      .src(paths.reactDOM.src)
-      .pipe(babel(babelOptsReactDOM))
-      .pipe(stripProvidesModule())
-      .pipe(flatten())
-      .pipe(gulp.dest(paths.reactDOM.lib)),
-
-    gulp
-      .src(paths.reactNative.src)
-      .pipe(babel(babelOptsReactNative))
-      .pipe(stripProvidesModule())
-      .pipe(flatten())
-      .pipe(gulp.dest(paths.reactNative.lib)),
-
-    gulp
-      .src(paths.reactTestRenderer.src)
-      .pipe(stripProvidesModule())
-      .pipe(babel(babelOptsReactTestRenderer))
-      .pipe(flatten())
-      .pipe(gulp.dest(paths.reactTestRenderer.lib)),
-
-    gulp
-      .src(paths.reactNoopRenderer.src)
-      .pipe(stripProvidesModule())
-      .pipe(babel(babelOptsReactNoopRenderer))
-      .pipe(flatten())
-      .pipe(gulp.dest(paths.reactNoopRenderer.lib))
-  );
+  return gulp
+    .src(paths.reactNative.src, { base: '.' })
+    .pipe(babel(babelOptsReactNative))
+    .pipe(gulp.dest(paths.reactNative.lib));
 });
 
 gulp.task('react:extract-errors', function() {

src/renderers/native/ReactNative.js

@@ -9,69 +9,16 @@
  * @providesModule ReactNative
  * @flow
  */
-'use strict';
-
-// Require ReactNativeDefaultInjection first for its side effects of setting up
-// the JS environment
-var ReactNativeComponentTree = require('ReactNativeComponentTree');
-var ReactNativeInjection = require('ReactNativeInjection');
-var ReactNativeStackInjection = require('ReactNativeStackInjection');
-
-var ReactNativeMount = require('ReactNativeMount');
-var ReactUpdates = require('ReactUpdates');
-
-var findNodeHandle = require('findNodeHandle');
 
-ReactNativeInjection.inject();
-ReactNativeStackInjection.inject();
-
-var render = function(
-  element: ReactElement<any>,
-  mountInto: number,
-  callback?: ?(() => void)
-): ?ReactComponent<any, any, any> {
-  return ReactNativeMount.renderComponent(element, mountInto, callback);
-};
-
-var ReactNative = {
-  hasReactNativeInitialized: false,
-  findNodeHandle: findNodeHandle,
-  render: render,
-  unmountComponentAtNode: ReactNativeMount.unmountComponentAtNode,
-
-  /* eslint-disable camelcase */
-  unstable_batchedUpdates: ReactUpdates.batchedUpdates,
-  /* eslint-enable camelcase */
+'use strict';
 
-  unmountComponentAtNodeAndRemoveContainer: ReactNativeMount.unmountComponentAtNodeAndRemoveContainer,
-};
+var ReactNativeFeatureFlags = require('ReactNativeFeatureFlags');
 
-// Inject the runtime into a devtools global hook regardless of browser.
-// Allows for debugging when the hook is injected on the page.
-/* globals __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.inject === 'function') {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.inject({
-    ComponentTree: {
-      getClosestInstanceFromNode: function(node) {
-        return ReactNativeComponentTree.getClosestInstanceFromNode(node);
-      },
-      getNodeFromInstance: function(inst) {
-        // inst is an internal instance (but could be a composite)
-        while (inst._renderedComponent) {
-          inst = inst._renderedComponent;
-        }
-        if (inst) {
-          return ReactNativeComponentTree.getNodeFromInstance(inst);
-        } else {
-          return null;
-        }
-      },
-    },
-    Mount: ReactNativeMount,
-    Reconciler: require('ReactReconciler'),
-  });
+var ReactNative;
+if (ReactNativeFeatureFlags.useFiber) {
+  ReactNative = require('ReactNativeFiber');
+} else {
+  ReactNative = require('ReactNativeStack');
 }
 
 module.exports = ReactNative;