[CS] Split Host Config Out into a Mutable or Immutable Mode (facebook#11213)

* CS renderer

Because we didn't have enough RN experiments. I want to add one more.

* Split out hydration from the host config object

This makes it easier to do feature detection on the configuration.

* Move mutation host config to separate optional object

* Refs and life-cycles should happen even in immutable mode

* Unmount components even in non-mutation mode

This is the same as committing deletions but instead of finding host
components to delete, it only invokes componentWillUnmount and detaching
of refs.

* Add persistent updates API

This mode will use a clone based API instead of mutating host instances.

Needs implementation still.

It's awkward that there can be more than one child inserted into the root.
So we need a new API to create a "root" instance so that we can update it
atomically. Alternatively we could keep the mutable API for containers
and assume that most use cases would only have a single root.

* Package up CS renderer

* Fix reconciler package fixture

Author: sebmarkbage

fixtures/reconciler/index.js

@@ -115,28 +115,12 @@ var NoopRenderer = ReactFiberReconciler({
     return UPDATE_SIGNAL;
   },
 
-  commitMount(instance: Instance, type: string, newProps: Props): void {
-    // Noop
-  },
-
-  commitUpdate(
-    instance: Instance,
-    updatePayload: Object,
-    type: string,
-    oldProps: Props,
-    newProps: Props
-  ): void {
-    instance.prop = newProps.prop;
-  },
-
   shouldSetTextContent(type: string, props: Props): boolean {
     return (
       typeof props.children === 'string' || typeof props.children === 'number'
     );
   },
 
-  resetTextContent(instance: Instance): void {},
-
   shouldDeprioritizeSubtree(type: string, props: Props): boolean {
     return !!props.hidden;
   },
@@ -155,21 +139,6 @@ var NoopRenderer = ReactFiberReconciler({
     return inst;
   },
 
-  commitTextUpdate(
-    textInstance: TextInstance,
-    oldText: string,
-    newText: string
-  ): void {
-    textInstance.text = newText;
-  },
-
-  appendChild: appendChild,
-  appendChildToContainer: appendChild,
-  insertBefore: insertBefore,
-  insertInContainerBefore: insertBefore,
-  removeChild: removeChild,
-  removeChildFromContainer: removeChild,
-
   scheduleDeferredCallback(callback) {
     if (scheduledCallback) {
       throw new Error(
@@ -183,6 +152,39 @@ var NoopRenderer = ReactFiberReconciler({
   prepareForCommit(): void {},
 
   resetAfterCommit(): void {},
+
+  mutation: {
+    commitMount(instance: Instance, type: string, newProps: Props): void {
+      // Noop
+    },
+
+    commitUpdate(
+      instance: Instance,
+      updatePayload: Object,
+      type: string,
+      oldProps: Props,
+      newProps: Props
+    ): void {
+      instance.prop = newProps.prop;
+    },
+
+    commitTextUpdate(
+      textInstance: TextInstance,
+      oldText: string,
+      newText: string
+    ): void {
+      textInstance.text = newText;
+    },
+
+    appendChild: appendChild,
+    appendChildToContainer: appendChild,
+    insertBefore: insertBefore,
+    insertInContainerBefore: insertBefore,
+    removeChild: removeChild,
+    removeChildFromContainer: removeChild,
+
+    resetTextContent(instance: Instance): void {},
+  },
 });
 
 var rootContainers = new Map();

scripts/rollup/build.js

@@ -21,6 +21,7 @@ const Stats = require('./stats');
 const syncReactDom = require('./sync').syncReactDom;
 const syncReactNative = require('./sync').syncReactNative;
 const syncReactNativeRT = require('./sync').syncReactNativeRT;
+const syncReactNativeCS = require('./sync').syncReactNativeCS;
 const Packaging = require('./packaging');
 const Header = require('./header');
 const closure = require('rollup-plugin-closure-compiler-js');
@@ -571,6 +572,7 @@ rimraf('build', () => {
     Packaging.createFacebookWWWBuild,
     Packaging.createReactNativeBuild,
     Packaging.createReactNativeRTBuild,
+    Packaging.createReactNativeCSBuild,
   ];
   for (const bundle of Bundles.bundles) {
     tasks.push(
@@ -591,6 +593,9 @@ rimraf('build', () => {
     tasks.push(() =>
       syncReactNativeRT(join('build', 'react-native-rt'), syncFbsource)
     );
+    tasks.push(() =>
+      syncReactNativeCS(join('build', 'react-native-cs'), syncFbsource)
+    );
   } else if (syncWww) {
     tasks.push(() => syncReactDom(join('build', 'facebook-www'), syncWww));
   }

scripts/rollup/bundles.js

@@ -298,7 +298,7 @@ const bundles = [
     useFiber: true,
   },
 
-  /******* React Native *******/
+  /******* React Native RT *******/
   {
     babelOpts: babelOptsReact,
     bundleTypes: [RN_DEV, RN_PROD],
@@ -332,6 +332,32 @@ const bundles = [
     useFiber: true,
   },
 
+  /******* React Native CS *******/
+  {
+    babelOpts: babelOptsReact,
+    bundleTypes: [RN_DEV, RN_PROD],
+    config: {
+      destDir: 'build/',
+      moduleName: 'ReactNativeCSFiber',
+      sourceMap: false,
+    },
+    entry: 'src/renderers/native-cs/ReactNativeCSFiberEntry',
+    externals: ['prop-types/checkPropTypes'],
+    hasteName: 'ReactNativeCSFiber',
+    isRenderer: true,
+    label: 'native-cs-fiber',
+    manglePropertiesOnProd: false,
+    name: 'react-native-cs-renderer',
+    paths: [
+      'src/renderers/native-cs/**/*.js',
+      'src/renderers/shared/**/*.js',
+
+      'src/ReactVersion.js',
+      'src/shared/**/*.js',
+    ],
+    useFiber: true,
+  },
+
   /******* React Test Renderer *******/
   {
     babelOpts: babelOptsReact,

scripts/rollup/packaging.js

@@ -33,6 +33,11 @@ const reactNativeRTSrcDependencies = [
   'src/renderers/native-rt/ReactNativeRTTypes.js',
 ];
 
+// these files need to be copied to the react-native-cs build
+const reactNativeCSSrcDependencies = [
+  'src/renderers/native-cs/ReactNativeCSTypes.js',
+];
+
 function getPackageName(name) {
   if (name.indexOf('/') !== -1) {
     return name.split('/')[0];
@@ -81,6 +86,25 @@ function createReactNativeRTBuild() {
   return Promise.all(promises);
 }
 
+function createReactNativeCSBuild() {
+  // create the react-native-cs folder for FB bundles
+  fs.mkdirSync(join('build', 'react-native-cs'));
+  // create the react-native-cs shims folder for FB shims
+  fs.mkdirSync(join('build', 'react-native-cs', 'shims'));
+
+  const to = join('build', 'react-native-cs', 'shims');
+
+  let promises = [];
+  // we also need to copy over some specific files from src
+  // defined in reactNativeCSSrcDependencies
+  for (const srcDependency of reactNativeCSSrcDependencies) {
+    promises.push(
+      asyncCopyTo(resolve(srcDependency), join(to, basename(srcDependency)))
+    );
+  }
+  return Promise.all(promises);
+}
+
 function createFacebookWWWBuild() {
   // create the facebookWWW folder for FB bundles
   fs.mkdirSync(join('build', facebookWWW));
@@ -191,4 +215,5 @@ module.exports = {
   createFacebookWWWBuild,
   createReactNativeBuild,
   createReactNativeRTBuild,
+  createReactNativeCSBuild,
 };

scripts/rollup/results.json

@@ -25,28 +25,28 @@
       "gzip": 6703
     },
     "react-dom.development.js (UMD_DEV)": {
-      "size": 630418,
-      "gzip": 145239
+      "size": 625837,
+      "gzip": 144320
     },
     "react-dom.production.min.js (UMD_PROD)": {
-      "size": 101638,
-      "gzip": 32128
+      "size": 100866,
+      "gzip": 31848
     },
     "react-dom.development.js (NODE_DEV)": {
-      "size": 592683,
-      "gzip": 136496
+      "size": 588106,
+      "gzip": 135609
     },
     "react-dom.production.min.js (NODE_PROD)": {
-      "size": 106507,
-      "gzip": 33538
+      "size": 105343,
+      "gzip": 33129
     },
     "ReactDOMFiber-dev.js (FB_DEV)": {
-      "size": 589582,
-      "gzip": 135915
+      "size": 584995,
+      "gzip": 135013
     },
     "ReactDOMFiber-prod.js (FB_PROD)": {
-      "size": 419983,
-      "gzip": 93676
+      "size": 414881,
+      "gzip": 92663
     },
     "react-dom-test-utils.development.js (NODE_DEV)": {
       "size": 41660,
@@ -113,44 +113,44 @@
       "gzip": 6214
     },
     "react-art.development.js (UMD_DEV)": {
-      "size": 376896,
-      "gzip": 83318
+      "size": 372576,
+      "gzip": 82452
     },
     "react-art.production.min.js (UMD_PROD)": {
-      "size": 83700,
-      "gzip": 25995
+      "size": 83057,
+      "gzip": 25828
     },
     "react-art.development.js (NODE_DEV)": {
-      "size": 301201,
-      "gzip": 64095
+      "size": 296909,
+      "gzip": 63228
     },
     "react-art.production.min.js (NODE_PROD)": {
-      "size": 53531,
-      "gzip": 16898
+      "size": 52508,
+      "gzip": 16427
     },
     "ReactARTFiber-dev.js (FB_DEV)": {
-      "size": 300073,
-      "gzip": 64131
+      "size": 295771,
+      "gzip": 63258
     },
     "ReactARTFiber-prod.js (FB_PROD)": {
-      "size": 224585,
-      "gzip": 46566
+      "size": 219800,
+      "gzip": 45628
     },
     "ReactNativeFiber-dev.js (RN_DEV)": {
-      "size": 283095,
-      "gzip": 49176
+      "size": 279764,
+      "gzip": 48665
     },
     "ReactNativeFiber-prod.js (RN_PROD)": {
-      "size": 221913,
-      "gzip": 38509
+      "size": 218506,
+      "gzip": 37873
     },
     "react-test-renderer.development.js (NODE_DEV)": {
-      "size": 304971,
-      "gzip": 64484
+      "size": 300619,
+      "gzip": 63624
     },
     "ReactTestRendererFiber-dev.js (FB_DEV)": {
-      "size": 303833,
-      "gzip": 64527
+      "size": 299471,
+      "gzip": 63657
     },
     "react-test-renderer-shallow.development.js (NODE_DEV)": {
       "size": 9215,
@@ -161,8 +161,8 @@
       "gzip": 2221
     },
     "react-noop-renderer.development.js (NODE_DEV)": {
-      "size": 292571,
-      "gzip": 61440
+      "size": 288214,
+      "gzip": 60549
     },
     "react-dom-server.development.js (UMD_DEV)": {
       "size": 120897,
@@ -189,16 +189,16 @@
       "gzip": 7520
     },
     "ReactNativeRTFiber-dev.js (RN_DEV)": {
-      "size": 215098,
-      "gzip": 36673
+      "size": 211687,
+      "gzip": 36145
     },
     "ReactNativeRTFiber-prod.js (RN_PROD)": {
-      "size": 163687,
-      "gzip": 27527
+      "size": 160200,
+      "gzip": 26880
     },
     "react-test-renderer.production.min.js (NODE_PROD)": {
-      "size": 55085,
-      "gzip": 17135
+      "size": 54076,
+      "gzip": 16776
     },
     "react-test-renderer-shallow.production.min.js (NODE_PROD)": {
       "size": 4536,
@@ -209,12 +209,20 @@
       "gzip": 4241
     },
     "react-reconciler.development.js (NODE_DEV)": {
-      "size": 279927,
-      "gzip": 58576
+      "size": 275518,
+      "gzip": 57698
     },
     "react-reconciler.production.min.js (NODE_PROD)": {
-      "size": 38630,
-      "gzip": 12165
+      "size": 37979,
+      "gzip": 11842
+    },
+    "ReactNativeCSFiber-dev.js (RN_DEV)": {
+      "size": 204077,
+      "gzip": 34318
+    },
+    "ReactNativeCSFiber-prod.js (RN_PROD)": {
+      "size": 155097,
+      "gzip": 25642
     }
   }
 }