From 3e809bf5d46dbabdc2ccbec41e030c5cb1efeac4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Thu, 27 Feb 2020 11:33:44 -0800 Subject: [PATCH] Convert React Native builds to named exports (#18136) These don't need any forks because we always export the same things atm. --- packages/react-native-renderer/fabric.js | 12 +- packages/react-native-renderer/index.js | 12 +- .../react-native-renderer/src/ReactFabric.js | 137 ++++++++-------- .../src/ReactNativeRenderer.js | 151 +++++++++--------- .../src/ReactNativeTypes.js | 3 - 5 files changed, 162 insertions(+), 153 deletions(-) diff --git a/packages/react-native-renderer/fabric.js b/packages/react-native-renderer/fabric.js index bf03978669cfe..9ae4ad3925d78 100644 --- a/packages/react-native-renderer/fabric.js +++ b/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'; diff --git a/packages/react-native-renderer/index.js b/packages/react-native-renderer/index.js index bbf51e65b39cf..8e18de966be6b 100644 --- a/packages/react-native-renderer/index.js +++ b/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'; diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js index 013a4ec77ea4e..54da153f84024 100644 --- a/packages/react-native-renderer/src/ReactFabric.js +++ b/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) { + 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, + 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) { - 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, 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; diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js index c8ddd3457a18b..9d156026eb28c 100644 --- a/packages/react-native-renderer/src/ReactNativeRenderer.js +++ b/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) { + 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, + 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) { - 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, 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; diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js index 48f89b7d858b3..4c2df9a44fe06 100644 --- a/packages/react-native-renderer/src/ReactNativeTypes.js +++ b/packages/react-native-renderer/src/ReactNativeTypes.js @@ -100,8 +100,6 @@ type SecretInternalsType = { ... }; -type SecretInternalsFabricType = {...}; - /** * Flat ReactNative renderer bundles are too big for Flow to parse efficiently. * Provide minimal Flow typing for the high-level RN API and call it a day. @@ -137,7 +135,6 @@ export type ReactFabricType = { callback: ?Function, ): any, unmountComponentAtNode(containerTag: number): any, - __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsFabricType, ... };