Flat ReactNative renderer bundle [WIP]

Reviewed By: trueadm

Differential Revision: D5013497

fbshipit-source-id: 1e23b08751b8b6e2dd570ff584c815c8a9b8f35f

.flowconfig

@@ -18,7 +18,6 @@
 ; For RN Apps installed via npm, "Libraries" folder is inside
 ; "node_modules/react-native" but in the source repo it is in the root
 .*/Libraries/react-native/React.js
-.*/Libraries/react-native/ReactNative.js
 
 [include]
 

Libraries/Renderer/shims/NativeMethodsMixin.js

@@ -0,0 +1,23 @@
+/**
+ * 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 NativeMethodsMixin
+ * @flow
+ */
+
+'use strict';
+
+const {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+} = require('ReactNative');
+
+import type {NativeMethodsMixinType} from 'ReactNativeTypes';
+
+const {NativeMethodsMixin} = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+module.exports = ((NativeMethodsMixin: any): $Exact<NativeMethodsMixinType>);

Libraries/Renderer/src/shared/utils/PooledClass.js → Libraries/Renderer/shims/PooledClass.js

@@ -95,8 +95,8 @@ var addPoolingTo = function<T>(
   CopyConstructor: Class<T>,
   pooler: Pooler,
 ): Class<T> & {
-  getPooled(...args: $ReadOnlyArray<mixed>): /* arguments of the constructor */ T,
-  release(instance: mixed): void,
+  getPooled(): /* arguments of the constructor */ T,
+  release(): void,
 } {
   // Casting as any so that flow ignores the actual implementation and trusts
   // it to match the type we declared

Libraries/Renderer/src/shared/types/ReactPropTypesSecret.js → Libraries/Renderer/shims/ReactDebugTool.js

@@ -6,12 +6,14 @@
  * 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.
  *
- * @flow
- * @providesModule ReactPropTypesSecret
+ * @providesModule ReactDebugTool
  */
 
 'use strict';
 
-const ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+const {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+} = require('ReactNative');
 
-module.exports = ReactPropTypesSecret;
+module.exports =
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactDebugTool;

Libraries/Renderer/shims/ReactGlobalSharedState.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 ReactGlobalSharedState
+ */
+
+'use strict';
+
+const {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+} = require('ReactNative');
+
+module.exports =
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactGlobalSharedState;

Libraries/Renderer/src/renderers/native/ReactNative.js → Libraries/Renderer/shims/ReactNative.js

@@ -13,6 +13,18 @@
 
 const ReactNativeFeatureFlags = require('ReactNativeFeatureFlags');
 
-module.exports = ReactNativeFeatureFlags.useFiber
-  ? require('ReactNativeFiber')
-  : require('ReactNativeStack');
+import type {ReactNativeType} from 'ReactNativeTypes';
+
+let ReactNative;
+
+if (__DEV__) {
+  ReactNative = ReactNativeFeatureFlags.useFiber
+    ? require('ReactNativeFiber-dev')
+    : require('ReactNativeStack-dev');
+} else {
+  ReactNative = ReactNativeFeatureFlags.useFiber
+    ? require('ReactNativeFiber-prod')
+    : require('ReactNativeStack-prod');
+}
+
+module.exports = (ReactNative: ReactNativeType);

Libraries/Renderer/shims/ReactNativeComponentTree.js

@@ -0,0 +1,20 @@
+/**
+ * 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 ReactNativeComponentTree
+ * @flow
+ */
+
+'use strict';
+
+const {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+} = require('ReactNative');
+
+module.exports =
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactNativeComponentTree;

Libraries/Renderer/shims/ReactNativePropRegistry.js

@@ -0,0 +1,20 @@
+/**
+ * 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 ReactNativePropRegistry
+ * @flow
+ */
+
+'use strict';
+
+const {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+} = require('ReactNative');
+
+module.exports =
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactNativePropRegistry;

Libraries/Renderer/shims/ReactNativeTypes.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2015-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 ReactNativeTypes
+ * @flow
+ */
+'use strict';
+
+import type React from 'react';
+
+export type MeasureOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageX: number,
+  pageY: number,
+) => void;
+
+export type MeasureInWindowOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+) => void;
+
+export type MeasureLayoutOnSuccessCallback = (
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+) => void;
+
+/**
+ * This type keeps ReactNativeFiberHostComponent and NativeMethodsMixin in sync.
+ * It can also provide types for ReactNative applications that use NMM or refs.
+ */
+export type NativeMethodsMixinType = {
+  blur(): void,
+  focus(): void,
+  measure(callback: MeasureOnSuccessCallback): void,
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void,
+  measureLayout(
+    relativeToNativeNode: number,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail: () => void,
+  ): void,
+  setNativeProps(nativeProps: Object): void,
+};
+
+type ReactNativeBaseComponentViewConfig = {
+  validAttributes: Object,
+  uiViewClassName: string,
+  propTypes?: Object,
+};
+
+type SecretInternalsType = {
+  NativeMethodsMixin: NativeMethodsMixinType,
+  createReactNativeComponentClass(
+    viewConfig: ReactNativeBaseComponentViewConfig,
+  ): any,
+  ReactNativeComponentTree: any,
+  ReactNativePropRegistry: any,
+  // TODO (bvaughn) Decide which additional types to expose here?
+  // And how much information to fill in for the above types.
+};
+
+/**
+  * Flat ReactNative renderer bundles are too big for Flow to parse effeciently.
+  * Provide minimal Flow typing for the high-level RN API and call it a day.
+  */
+export type ReactNativeType = {
+  findNodeHandle(componentOrHandle: any): ?number,
+  render(
+    element: React.Element<any>,
+    containerTag: any,
+    callback: ?Function,
+  ): any,
+  unmountComponentAtNode(containerTag: number): any,
+  unmountComponentAtNodeAndRemoveContainer(containerTag: number): any,
+  unstable_batchedUpdates: any, // TODO (bvaughn) Add types
+
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType,
+};

Libraries/Renderer/src/shared/utils/getNextDebugID.js → Libraries/Renderer/shims/ReactPerf.js

@@ -6,16 +6,13 @@
  * 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 getNextDebugID
- * @flow
+ * @providesModule ReactPerf
  */
 
 'use strict';
 
-var nextDebugID = 1;
+const {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+} = require('ReactNative');
 
-function getNextDebugID(): number {
-  return nextDebugID++;
-}
-
-module.exports = getNextDebugID;
+module.exports = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactPerf;

Libraries/Renderer/src/renderers/shared/fiber/isomorphic/ReactTypes.js → Libraries/Renderer/shims/ReactTypes.js

@@ -12,9 +12,6 @@
 
 'use strict';
 
-import type {ReactCoroutine, ReactYield} from 'ReactCoroutine';
-import type {ReactPortal} from 'ReactPortal';
-
 export type ReactNode =
   | ReactElement<any>
   | ReactCoroutine
@@ -30,3 +27,26 @@ export type ReactNodeList = ReactEmpty | ReactNode;
 export type ReactText = string | number;
 
 export type ReactEmpty = null | void | boolean;
+
+export type ReactCoroutine = {
+  $$typeof: Symbol | number,
+  key: null | string,
+  children: any,
+  // This should be a more specific CoroutineHandler
+  handler: (props: any, yields: Array<mixed>) => ReactNodeList,
+  props: any,
+};
+
+export type ReactYield = {
+  $$typeof: Symbol | number,
+  value: mixed,
+};
+
+export type ReactPortal = {
+  $$typeof: Symbol | number,
+  key: null | string,
+  containerInfo: any,
+  children: ReactNodeList,
+  // TODO: figure out the API for cross-renderer implementation.
+  implementation: any,
+};

Libraries/Renderer/src/ReactVersion.js → Libraries/Renderer/shims/TouchHistoryMath.js

@@ -6,9 +6,14 @@
  * 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 ReactVersion
+ * @providesModule TouchHistoryMath
  */
 
 'use strict';
 
-module.exports = '16.0.0-alpha.12';
+const {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+} = require('ReactNative');
+
+module.exports =
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.TouchHistoryMath;

Libraries/Renderer/shims/createReactNativeComponentClass.js

@@ -0,0 +1,20 @@
+/**
+ * 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 createReactNativeComponentClass
+ * @flow
+ */
+
+'use strict';
+
+const {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+} = require('ReactNative');
+
+module.exports =
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.createReactNativeComponentClass;

Libraries/Renderer/src/renderers/shared/fiber/ReactTypeOfInternalContext.js → Libraries/Renderer/shims/takeSnapshot.js

@@ -6,15 +6,14 @@
  * 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 ReactTypeOfInternalContext
- * @flow
+ * @providesModule takeSnapshot
  */
 
 'use strict';
 
-export type TypeOfInternalContext = number;
+const {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+} = require('ReactNative');
 
-module.exports = {
-  NoContext: 0,
-  AsyncUpdates: 1,
-};
+module.exports =
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.takeSnapshot;