Convert React Native builds to named exports (#18136)

These don't need any forks because we always export the same things atm.

Author: sebmarkbage

packages/react-native-renderer/fabric.js

@@ -7,10 +7,10 @@
  * @flow
  */
 
-'use strict';
+import type {ReactFabricType} from './src/ReactNativeTypes';
+import * as ReactFabric from './src/ReactFabric';
+// Assert that the exports line up with the type we're going to expose.
+// eslint-disable-next-line no-unused-expressions
+(ReactFabric: ReactFabricType);
 
-const ReactFabric = require('./src/ReactFabric');
-
-// TODO: decide on the top-level export form.
-// This is hacky but makes it work with both Rollup and Jest.
-module.exports = ReactFabric.default || ReactFabric;
+export * from './src/ReactFabric';

packages/react-native-renderer/index.js

@@ -7,10 +7,10 @@
  * @flow
  */
 
-'use strict';
+import type {ReactNativeType} from './src/ReactNativeTypes';
+import * as ReactNative from './src/ReactNativeRenderer';
+// Assert that the exports line up with the type we're going to expose.
+// eslint-disable-next-line no-unused-expressions
+(ReactNative: ReactNativeType);
 
-const ReactNativeRenderer = require('./src/ReactNativeRenderer');
-
-// TODO: decide on the top-level export form.
-// This is hacky but makes it work with both Rollup and Jest.
-module.exports = ReactNativeRenderer.default || ReactNativeRenderer;
+export * from './src/ReactNativeRenderer';

packages/react-native-renderer/src/ReactFabric.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactFabricType, HostComponent} from './ReactNativeTypes';
+import type {HostComponent} from './ReactNativeTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {ElementRef} from 'react';
 
@@ -26,7 +26,7 @@ import {
   getPublicRootInstance,
 } from 'react-reconciler/inline.fabric';
 
-import {createPortal} from 'shared/ReactPortal';
+import {createPortal as createPortalImpl} from 'shared/ReactPortal';
 import {setBatchingImplementation} from 'legacy-events/ReactGenericBatching';
 import ReactVersion from 'shared/ReactVersion';
 
@@ -144,6 +144,69 @@ function findNodeHandle(componentOrHandle: any): ?number {
   return hostInstance._nativeTag;
 }
 
+function dispatchCommand(handle: any, command: string, args: Array<any>) {
+  if (handle._nativeTag == null) {
+    if (__DEV__) {
+      console.error(
+        "dispatchCommand was called with a ref that isn't a " +
+          'native component. Use React.forwardRef to get access to the underlying native component',
+      );
+    }
+
+    return;
+  }
+
+  if (handle._internalInstanceHandle) {
+    nativeFabricUIManager.dispatchCommand(
+      handle._internalInstanceHandle.stateNode.node,
+      command,
+      args,
+    );
+  } else {
+    UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
+  }
+}
+
+function render(
+  element: React$Element<any>,
+  containerTag: any,
+  callback: ?Function,
+) {
+  let root = roots.get(containerTag);
+
+  if (!root) {
+    // TODO (bvaughn): If we decide to keep the wrapper component,
+    // We could create a wrapper for containerTag as well to reduce special casing.
+    root = createContainer(containerTag, LegacyRoot, false, null);
+    roots.set(containerTag, root);
+  }
+  updateContainer(element, root, null, callback);
+
+  return getPublicRootInstance(root);
+}
+
+function unmountComponentAtNode(containerTag: number) {
+  this.stopSurface(containerTag);
+}
+
+function stopSurface(containerTag: number) {
+  const root = roots.get(containerTag);
+  if (root) {
+    // TODO: Is it safe to reset this now or should I wait since this unmount could be deferred?
+    updateContainer(null, root, null, () => {
+      roots.delete(containerTag);
+    });
+  }
+}
+
+function createPortal(
+  children: ReactNodeList,
+  containerTag: number,
+  key: ?string = null,
+) {
+  return createPortalImpl(children, containerTag, null, key);
+}
+
 setBatchingImplementation(
   batchedUpdatesImpl,
   discreteUpdates,
@@ -153,74 +216,18 @@ setBatchingImplementation(
 
 const roots = new Map();
 
-const ReactFabric: ReactFabricType = {
+export {
   // This is needed for implementation details of TouchableNativeFeedback
   // Remove this once TouchableNativeFeedback doesn't use cloneElement
   findHostInstance_DEPRECATED,
   findNodeHandle,
-
-  dispatchCommand(handle: any, command: string, args: Array<any>) {
-    if (handle._nativeTag == null) {
-      if (__DEV__) {
-        console.error(
-          "dispatchCommand was called with a ref that isn't a " +
-            'native component. Use React.forwardRef to get access to the underlying native component',
-        );
-      }
-
-      return;
-    }
-
-    if (handle._internalInstanceHandle) {
-      nativeFabricUIManager.dispatchCommand(
-        handle._internalInstanceHandle.stateNode.node,
-        command,
-        args,
-      );
-    } else {
-      UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
-    }
-  },
-
-  render(element: React$Element<any>, containerTag: any, callback: ?Function) {
-    let root = roots.get(containerTag);
-
-    if (!root) {
-      // TODO (bvaughn): If we decide to keep the wrapper component,
-      // We could create a wrapper for containerTag as well to reduce special casing.
-      root = createContainer(containerTag, LegacyRoot, false, null);
-      roots.set(containerTag, root);
-    }
-    updateContainer(element, root, null, callback);
-
-    return getPublicRootInstance(root);
-  },
-
+  dispatchCommand,
+  render,
   // Deprecated - this function is being renamed to stopSurface, use that instead.
   // TODO (T47576999): Delete this once it's no longer called from native code.
-  unmountComponentAtNode(containerTag: number) {
-    this.stopSurface(containerTag);
-  },
-
-  stopSurface(containerTag: number) {
-    const root = roots.get(containerTag);
-    if (root) {
-      // TODO: Is it safe to reset this now or should I wait since this unmount could be deferred?
-      updateContainer(null, root, null, () => {
-        roots.delete(containerTag);
-      });
-    }
-  },
-
-  createPortal(
-    children: ReactNodeList,
-    containerTag: number,
-    key: ?string = null,
-  ) {
-    return createPortal(children, containerTag, null, key);
-  },
-
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {},
+  unmountComponentAtNode,
+  stopSurface,
+  createPortal,
 };
 
 injectIntoDevTools({
@@ -230,5 +237,3 @@ injectIntoDevTools({
   version: ReactVersion,
   rendererPackageName: 'react-native-renderer',
 });
-
-export default ReactFabric;

packages/react-native-renderer/src/ReactNativeRenderer.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactNativeType, HostComponent} from './ReactNativeTypes';
+import type {HostComponent} from './ReactNativeTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
 import './ReactNativeInjection';
@@ -26,7 +26,7 @@ import {
 } from 'react-reconciler/inline.native';
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getStackByFiberInDevAndProd} from 'react-reconciler/src/ReactCurrentFiber';
-import {createPortal} from 'shared/ReactPortal';
+import {createPortal as createPortalImpl} from 'shared/ReactPortal';
 import {
   setBatchingImplementation,
   batchedUpdates,
@@ -144,6 +144,71 @@ function findNodeHandle(componentOrHandle: any): ?number {
   return hostInstance._nativeTag;
 }
 
+function dispatchCommand(handle: any, command: string, args: Array<any>) {
+  if (handle._nativeTag == null) {
+    if (__DEV__) {
+      console.error(
+        "dispatchCommand was called with a ref that isn't a " +
+          'native component. Use React.forwardRef to get access to the underlying native component',
+      );
+    }
+    return;
+  }
+
+  if (handle._internalInstanceHandle) {
+    nativeFabricUIManager.dispatchCommand(
+      handle._internalInstanceHandle.stateNode.node,
+      command,
+      args,
+    );
+  } else {
+    UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
+  }
+}
+
+function render(
+  element: React$Element<any>,
+  containerTag: any,
+  callback: ?Function,
+) {
+  let root = roots.get(containerTag);
+
+  if (!root) {
+    // TODO (bvaughn): If we decide to keep the wrapper component,
+    // We could create a wrapper for containerTag as well to reduce special casing.
+    root = createContainer(containerTag, LegacyRoot, false, null);
+    roots.set(containerTag, root);
+  }
+  updateContainer(element, root, null, callback);
+
+  return getPublicRootInstance(root);
+}
+
+function unmountComponentAtNode(containerTag: number) {
+  const root = roots.get(containerTag);
+  if (root) {
+    // TODO: Is it safe to reset this now or should I wait since this unmount could be deferred?
+    updateContainer(null, root, null, () => {
+      roots.delete(containerTag);
+    });
+  }
+}
+
+function unmountComponentAtNodeAndRemoveContainer(containerTag: number) {
+  unmountComponentAtNode(containerTag);
+
+  // Call back into native to remove all of the subviews from this container
+  UIManager.removeRootView(containerTag);
+}
+
+function createPortal(
+  children: ReactNodeList,
+  containerTag: number,
+  key: ?string = null,
+) {
+  return createPortalImpl(children, containerTag, null, key);
+}
+
 setBatchingImplementation(
   batchedUpdatesImpl,
   discreteUpdates,
@@ -161,78 +226,22 @@ function computeComponentStackForErrorReporting(reactTag: number): string {
 
 const roots = new Map();
 
-const ReactNativeRenderer: ReactNativeType = {
+const Internals = {
+  computeComponentStackForErrorReporting,
+};
+
+export {
   // This is needed for implementation details of TouchableNativeFeedback
   // Remove this once TouchableNativeFeedback doesn't use cloneElement
   findHostInstance_DEPRECATED,
   findNodeHandle,
-
-  dispatchCommand(handle: any, command: string, args: Array<any>) {
-    if (handle._nativeTag == null) {
-      if (__DEV__) {
-        console.error(
-          "dispatchCommand was called with a ref that isn't a " +
-            'native component. Use React.forwardRef to get access to the underlying native component',
-        );
-      }
-      return;
-    }
-
-    if (handle._internalInstanceHandle) {
-      nativeFabricUIManager.dispatchCommand(
-        handle._internalInstanceHandle.stateNode.node,
-        command,
-        args,
-      );
-    } else {
-      UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
-    }
-  },
-
-  render(element: React$Element<any>, containerTag: any, callback: ?Function) {
-    let root = roots.get(containerTag);
-
-    if (!root) {
-      // TODO (bvaughn): If we decide to keep the wrapper component,
-      // We could create a wrapper for containerTag as well to reduce special casing.
-      root = createContainer(containerTag, LegacyRoot, false, null);
-      roots.set(containerTag, root);
-    }
-    updateContainer(element, root, null, callback);
-
-    return getPublicRootInstance(root);
-  },
-
-  unmountComponentAtNode(containerTag: number) {
-    const root = roots.get(containerTag);
-    if (root) {
-      // TODO: Is it safe to reset this now or should I wait since this unmount could be deferred?
-      updateContainer(null, root, null, () => {
-        roots.delete(containerTag);
-      });
-    }
-  },
-
-  unmountComponentAtNodeAndRemoveContainer(containerTag: number) {
-    ReactNativeRenderer.unmountComponentAtNode(containerTag);
-
-    // Call back into native to remove all of the subviews from this container
-    UIManager.removeRootView(containerTag);
-  },
-
-  createPortal(
-    children: ReactNodeList,
-    containerTag: number,
-    key: ?string = null,
-  ) {
-    return createPortal(children, containerTag, null, key);
-  },
-
-  unstable_batchedUpdates: batchedUpdates,
-
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
-    computeComponentStackForErrorReporting,
-  },
+  dispatchCommand,
+  render,
+  unmountComponentAtNode,
+  unmountComponentAtNodeAndRemoveContainer,
+  createPortal,
+  batchedUpdates as unstable_batchedUpdates,
+  Internals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
 };
 
 injectIntoDevTools({
@@ -242,5 +251,3 @@ injectIntoDevTools({
   version: ReactVersion,
   rendererPackageName: 'react-native-renderer',
 });
-
-export default ReactNativeRenderer;