[CS] Persistent Updates

packages/react-cs-renderer/src/ReactNativeCSFeatureFlags.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule ReactNativeCSFeatureFlags
+ * @flow
+ */
+
+'use strict';
+
+import type {FeatureFlags} from 'ReactFeatureFlags';
+
+var ReactNativeCSFeatureFlags: FeatureFlags = {
+  enableAsyncSubtreeAPI: true,
+  enableAsyncSchedulingByDefaultInReactDOM: false,
+  // React Native CS uses persistent reconciler.
+  enableMutatingReconciler: false,
+  enableNoopReconciler: false,
+  enablePersistentReconciler: true,
+};
+
+module.exports = ReactNativeCSFeatureFlags;

packages/react-cs-renderer/src/ReactNativeCSFiberEntry.js

@@ -154,34 +154,37 @@ const ReactNativeCSFiberRenderer = ReactFiberReconciler({
   persistence: {
     cloneInstance(
       instance: Instance,
-      updatePayload: Object,
-      type: string,
-      oldProps: Props,
-      newProps: Props,
-      internalInstanceHandle: Object,
-      keepChildren: boolean,
-    ): Instance {
-      return 0;
-    },
-    tryToReuseInstance(
-      instance: Instance,
-      updatePayload: Object,
+      updatePayload: null | Object,
       type: string,
       oldProps: Props,
       newProps: Props,
       internalInstanceHandle: Object,
       keepChildren: boolean,
+      recyclableInstance: null | Instance,
     ): Instance {
       return 0;
     },
 
-    createRootInstance(
-      rootContainerInstance: Container,
-      hostContext: {},
-    ): Instance {
-      return 123;
+    createContainerChildSet(
+      container: Container,
+    ): Array<Instance | TextInstance> {
+      return [];
     },
-    commitRootInstance(rootInstance: Instance): void {},
+
+    appendChildToContainerChildSet(
+      childSet: Array<Instance | TextInstance>,
+      child: Instance | TextInstance,
+    ): void {},
+
+    finalizeContainerChildren(
+      container: Container,
+      newChildren: Array<Instance | TextInstance>,
+    ): void {},
+
+    replaceContainerChildren(
+      container: Container,
+      newChildren: Array<Instance | TextInstance>,
+    ): void {},
   },
 });
 

packages/react-cs-renderer/src/__tests__/ReactNativeCS-test.js

@@ -12,6 +12,8 @@
 var React;
 var ReactNativeCS;
 
+jest.mock('ReactFeatureFlags', () => require('ReactNativeCSFeatureFlags'));
+
 describe('ReactNativeCS', () => {
   beforeEach(() => {
     jest.resetModules();

packages/react-noop-renderer/src/ReactNoopEntry.js

@@ -20,6 +20,7 @@
 import type {Fiber} from 'ReactFiber';
 import type {UpdateQueue} from 'ReactFiberUpdateQueue';
 
+var ReactFeatureFlags = require('ReactFeatureFlags');
 var ReactFiberInstrumentation = require('ReactFiberInstrumentation');
 var ReactFiberReconciler = require('ReactFiberReconciler');
 var ReactInstanceMap = require('ReactInstanceMap');
@@ -85,7 +86,7 @@ function removeChild(
 
 let elapsedTimeInMs = 0;
 
-var NoopRenderer = ReactFiberReconciler({
+var SharedHostConfig = {
   getRootHostContext() {
     if (failInBeginPhase) {
       throw new Error('Error in host config.');
@@ -176,7 +177,10 @@ var NoopRenderer = ReactFiberReconciler({
   now(): number {
     return elapsedTimeInMs;
   },
+};
 
+var NoopRenderer = ReactFiberReconciler({
+  ...SharedHostConfig,
   mutation: {
     commitMount(instance: Instance, type: string, newProps: Props): void {
       // Noop
@@ -211,8 +215,64 @@ var NoopRenderer = ReactFiberReconciler({
   },
 });
 
+var PersistentNoopRenderer = ReactFeatureFlags.enablePersistentReconciler
+  ? ReactFiberReconciler({
+      ...SharedHostConfig,
+      persistence: {
+        cloneInstance(
+          instance: Instance,
+          updatePayload: null | Object,
+          type: string,
+          oldProps: Props,
+          newProps: Props,
+          internalInstanceHandle: Object,
+          keepChildren: boolean,
+          recyclableInstance: null | Instance,
+        ): Instance {
+          const clone = {
+            id: instance.id,
+            type: type,
+            children: keepChildren ? instance.children : [],
+            prop: newProps.prop,
+          };
+          Object.defineProperty(clone, 'id', {
+            value: clone.id,
+            enumerable: false,
+          });
+          return clone;
+        },
+
+        createContainerChildSet(
+          container: Container,
+        ): Array<Instance | TextInstance> {
+          return [];
+        },
+
+        appendChildToContainerChildSet(
+          childSet: Array<Instance | TextInstance>,
+          child: Instance | TextInstance,
+        ): void {
+          childSet.push(child);
+        },
+
+        finalizeContainerChildren(
+          container: Container,
+          newChildren: Array<Instance | TextInstance>,
+        ): void {},
+
+        replaceContainerChildren(
+          container: Container,
+          newChildren: Array<Instance | TextInstance>,
+        ): void {
+          container.children = newChildren;
+        },
+      },
+    })
+  : null;
+
 var rootContainers = new Map();
 var roots = new Map();
+var persistentRoots = new Map();
 var DEFAULT_ROOT_ID = '<default>';
 
 let yieldedValues = null;
@@ -275,6 +335,26 @@ var ReactNoop = {
     NoopRenderer.updateContainer(element, root, null, callback);
   },
 
+  renderToPersistentRootWithID(
+    element: React$Element<any>,
+    rootID: string,
+    callback: ?Function,
+  ) {
+    if (PersistentNoopRenderer === null) {
+      throw new Error(
+        'Enable ReactFeatureFlags.enablePersistentReconciler to use it in tests.',
+      );
+    }
+    let root = persistentRoots.get(rootID);
+    if (!root) {
+      const container = {rootID: rootID, children: []};
+      rootContainers.set(rootID, container);
+      root = PersistentNoopRenderer.createContainer(container, false);
+      persistentRoots.set(rootID, root);
+    }
+    PersistentNoopRenderer.updateContainer(element, root, null, callback);
+  },
+
   unmountRootWithID(rootID: string) {
     const root = roots.get(rootID);
     if (root) {

packages/react-reconciler/src/ReactFiber.js

@@ -445,6 +445,7 @@ exports.createFiberFromPortal = function(
   fiber.expirationTime = expirationTime;
   fiber.stateNode = {
     containerInfo: portal.containerInfo,
+    pendingChildren: null, // Used by persistent updates
     implementation: portal.implementation,
   };
   return fiber;

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -67,8 +67,8 @@ if (__DEV__) {
   var warnedAboutStatelessRefs = {};
 }
 
-module.exports = function<T, P, I, TI, PI, C, CX, PL>(
-  config: HostConfig<T, P, I, TI, PI, C, CX, PL>,
+module.exports = function<T, P, I, TI, PI, C, CC, CX, PL>(
+  config: HostConfig<T, P, I, TI, PI, C, CC, CX, PL>,
   hostContext: HostContext<C, CX>,
   hydrationContext: HydrationContext<C, CX>,
   scheduleWork: (fiber: Fiber, expirationTime: ExpirationTime) => void,