From ccab49473897aacae43bb4d55c1061065892403c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Mon, 24 Feb 2020 08:57:49 -0800 Subject: [PATCH] Move type DOMContainer to HostConfig (#18112) Exports from ReactDOM represents React's public API. This include types exported by React. At some point we'll start building Flow types from these files. The duplicate name between DOMContainer and Container seems confusing too since it was used in the same files even though they're the same. --- packages/react-dom/src/client/ReactDOM.js | 8 ++------ .../react-dom/src/client/ReactDOMHostConfig.js | 9 ++++++--- packages/react-dom/src/client/ReactDOMLegacy.js | 16 ++++++++-------- packages/react-dom/src/client/ReactDOMRoot.js | 14 +++++++------- .../src/events/ReactDOMEventReplaying.js | 3 +-- 5 files changed, 24 insertions(+), 26 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index 9983f1418c3a3..791fc098293a1 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -7,8 +7,8 @@ * @flow */ -import type {RootType} from './ReactDOMRoot'; import type {ReactNodeList} from 'shared/ReactTypes'; +import type {Container} from './ReactDOMHostConfig'; import '../shared/checkReact'; import './ReactDOMClientInjection'; @@ -116,13 +116,9 @@ setBatchingImplementation( batchedEventUpdates, ); -export type DOMContainer = - | (Element & {_reactRootContainer: ?RootType, ...}) - | (Document & {_reactRootContainer: ?RootType, ...}); - function createPortal( children: ReactNodeList, - container: DOMContainer, + container: Container, key: ?string = null, ) { invariant( diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index 4baee93d58b9d..f15805cee7470 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -7,6 +7,8 @@ * @flow */ +import type {RootType} from './ReactDOMRoot'; + import { precacheFiberNode, updateFiberProps, @@ -45,7 +47,6 @@ import { } from '../shared/HTMLNodeType'; import dangerousStyleValue from '../shared/dangerousStyleValue'; -import type {DOMContainer} from './ReactDOM'; import type { ReactDOMEventResponder, ReactDOMEventResponderInstance, @@ -99,7 +100,9 @@ export type EventTargetChildElement = { }, ... }; -export type Container = DOMContainer; +export type Container = + | (Element & {_reactRootContainer: ?RootType, ...}) + | (Document & {_reactRootContainer: ?RootType, ...}); export type Instance = Element; export type TextInstance = Text; export type SuspenseInstance = Comment & {_reactRetry?: () => void, ...}; @@ -419,7 +422,7 @@ export function appendChild( } export function appendChildToContainer( - container: DOMContainer, + container: Container, child: Instance | TextInstance, ): void { let parentNode; diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js index 519a0be3bb551..d074ecf577ec6 100644 --- a/packages/react-dom/src/client/ReactDOMLegacy.js +++ b/packages/react-dom/src/client/ReactDOMLegacy.js @@ -7,7 +7,7 @@ * @flow */ -import type {DOMContainer} from './ReactDOM'; +import type {Container} from './ReactDOMHostConfig'; import type {RootType} from './ReactDOMRoot'; import type {ReactNodeList} from 'shared/ReactTypes'; @@ -43,7 +43,7 @@ let topLevelUpdateWarnings; let warnedAboutHydrateAPI = false; if (__DEV__) { - topLevelUpdateWarnings = (container: DOMContainer) => { + topLevelUpdateWarnings = (container: Container) => { if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) { const hostInstance = findHostInstanceWithNoPortals( container._reactRootContainer._internalRoot.current, @@ -111,7 +111,7 @@ function shouldHydrateDueToLegacyHeuristic(container) { } function legacyCreateRootFromDOMContainer( - container: DOMContainer, + container: Container, forceHydrate: boolean, ): RootType { const shouldHydrate = @@ -175,7 +175,7 @@ function warnOnInvalidCallback(callback: mixed, callerName: string): void { function legacyRenderSubtreeIntoContainer( parentComponent: ?React$Component, children: ReactNodeList, - container: DOMContainer, + container: Container, forceHydrate: boolean, callback: ?Function, ) { @@ -255,7 +255,7 @@ export function findDOMNode( export function hydrate( element: React$Node, - container: DOMContainer, + container: Container, callback: ?Function, ) { invariant( @@ -286,7 +286,7 @@ export function hydrate( export function render( element: React$Element, - container: DOMContainer, + container: Container, callback: ?Function, ) { invariant( @@ -317,7 +317,7 @@ export function render( export function unstable_renderSubtreeIntoContainer( parentComponent: React$Component, element: React$Element, - containerNode: DOMContainer, + containerNode: Container, callback: ?Function, ) { invariant( @@ -337,7 +337,7 @@ export function unstable_renderSubtreeIntoContainer( ); } -export function unmountComponentAtNode(container: DOMContainer) { +export function unmountComponentAtNode(container: Container) { invariant( isValidContainer(container), 'unmountComponentAtNode(...): Target container is not a DOM element.', diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js index da256457e0fb7..7cbbbbd939201 100644 --- a/packages/react-dom/src/client/ReactDOMRoot.js +++ b/packages/react-dom/src/client/ReactDOMRoot.js @@ -7,7 +7,7 @@ * @flow */ -import type {DOMContainer} from './ReactDOM'; +import type {Container} from './ReactDOMHostConfig'; import type {RootTag} from 'shared/ReactRootTags'; import type {ReactNodeList} from 'shared/ReactTypes'; // TODO: This type is shared between the reconciler and ReactDOM, but will @@ -49,12 +49,12 @@ import {createContainer, updateContainer} from 'react-reconciler/inline.dom'; import invariant from 'shared/invariant'; import {BlockingRoot, ConcurrentRoot, LegacyRoot} from 'shared/ReactRootTags'; -function ReactDOMRoot(container: DOMContainer, options: void | RootOptions) { +function ReactDOMRoot(container: Container, options: void | RootOptions) { this._internalRoot = createRootImpl(container, ConcurrentRoot, options); } function ReactDOMBlockingRoot( - container: DOMContainer, + container: Container, tag: RootTag, options: void | RootOptions, ) { @@ -108,7 +108,7 @@ ReactDOMRoot.prototype.unmount = ReactDOMBlockingRoot.prototype.unmount = functi }; function createRootImpl( - container: DOMContainer, + container: Container, tag: RootTag, options: void | RootOptions, ) { @@ -129,7 +129,7 @@ function createRootImpl( } export function createRoot( - container: DOMContainer, + container: Container, options?: RootOptions, ): RootType { invariant( @@ -141,7 +141,7 @@ export function createRoot( } export function createBlockingRoot( - container: DOMContainer, + container: Container, options?: RootOptions, ): RootType { invariant( @@ -153,7 +153,7 @@ export function createBlockingRoot( } export function createLegacyRoot( - container: DOMContainer, + container: Container, options?: RootOptions, ): RootType { return new ReactDOMBlockingRoot(container, LegacyRoot, options); diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js index 48ff7a5b00190..096a87aedae4d 100644 --- a/packages/react-dom/src/events/ReactDOMEventReplaying.js +++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js @@ -12,7 +12,6 @@ import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig'; import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes'; import type {EventSystemFlags} from 'legacy-events/EventSystemFlags'; import type {FiberRoot} from 'react-reconciler/src/ReactFiberRoot'; -import type {DOMContainer} from '../client/ReactDOM'; import { enableDeprecatedFlareAPI, @@ -238,7 +237,7 @@ function trapReplayableEventForDocument( } export function eagerlyTrapReplayableEvents( - container: DOMContainer, + container: Container, document: Document, ) { const listenerMapForDoc = getListenerMapForElement(document);