Replace React.ComponentType<Props> with component(...Props) in relay

Reviewed By: panagosg7

Differential Revision: D71631538

fbshipit-source-id: e92c3edcefd6fa4d378a40e8ec97d3eda36e5ce3

Author: SamChou19815

packages/react-relay/ReactRelayContainerUtils.js

@@ -11,11 +11,11 @@
 
 'use strict';
 
-function getComponentName(component: React.ComponentType<any>): string {
+function getComponentName(component: component(...empty)): string {
   return component.displayName || component.name || 'Component';
 }
 
-function getContainerName(Component: React.ComponentType<any>): string {
+function getContainerName(Component: component(...empty)): string {
   return 'Relay(' + getComponentName(Component) + ')';
 }
 

packages/react-relay/ReactRelayFragmentContainer.js

@@ -46,13 +46,11 @@ type ContainerState = {
  */
 function createContainerWithFragments<
   Props: {...},
-  TComponent: React.ComponentType<Props>,
+  TComponent: component(...Props),
 >(
   Component: TComponent,
   fragments: FragmentMap,
-): React.ComponentType<
-  $RelayProps<React.ElementConfig<TComponent>, RelayProp>,
-> {
+): component(...$RelayProps<React.ElementConfig<TComponent>, RelayProp>) {
   const containerName = getContainerName(Component);
 
   return class extends React.Component<ContainerProps, ContainerState> {

packages/react-relay/ReactRelayPaginationContainer.js

@@ -319,14 +319,14 @@ function toObserver(observerOrCallback: ?ObserverOrCallback): Observer<void> {
 
 function createContainerWithFragments<
   Props: {...},
-  TComponent: React.ComponentType<Props>,
+  TComponent: component(...Props),
 >(
   Component: TComponent,
   fragments: FragmentMap,
   connectionConfig: ConnectionConfig,
-): React.ComponentType<
-  $RelayProps<React.ElementConfig<TComponent>, RelayPaginationProp>,
-> {
+): component(
+  ...$RelayProps<React.ElementConfig<TComponent>, RelayPaginationProp>
+) {
   const componentName = getComponentName(Component);
   const containerName = getContainerName(Component);
 
@@ -937,13 +937,13 @@ function createContainerWithFragments<
  * `fragmentSpec` is memoized once per environment, rather than once per
  * instance of the container constructed/rendered.
  */
-function createContainer<Props: {...}, TComponent: React.ComponentType<Props>>(
+function createContainer<Props: {...}, TComponent: component(...Props)>(
   Component: TComponent,
   fragmentSpec: GeneratedNodeMap,
   connectionConfig: ConnectionConfig,
-): React.ComponentType<
-  $RelayProps<React.ElementConfig<TComponent>, RelayPaginationProp>,
-> {
+): component(
+  ...$RelayProps<React.ElementConfig<TComponent>, RelayPaginationProp>
+) {
   // $FlowFixMe[incompatible-return]
   return buildReactRelayContainer(
     Component,

packages/react-relay/ReactRelayRefetchContainer.js

@@ -69,14 +69,14 @@ type ContainerState = {
  */
 function createContainerWithFragments<
   Props: {...},
-  TComponent: React.ComponentType<Props>,
+  TComponent: component(...Props),
 >(
   Component: TComponent,
   fragments: FragmentMap,
   taggedNode: GraphQLTaggedNode,
-): React.ComponentType<
-  $RelayProps<React.ElementConfig<TComponent>, RelayRefetchProp>,
-> {
+): component(
+  ...$RelayProps<React.ElementConfig<TComponent>, RelayRefetchProp>
+) {
   const containerName = getContainerName(Component);
 
   return class extends React.Component<ContainerProps, ContainerState> {
@@ -486,13 +486,13 @@ function getRelayProp(
  * `fragmentSpec` is memoized once per environment, rather than once per
  * instance of the container constructed/rendered.
  */
-function createContainer<Props: {...}, TComponent: React.ComponentType<Props>>(
+function createContainer<Props: {...}, TComponent: component(...Props)>(
   Component: TComponent,
   fragmentSpec: GeneratedNodeMap,
   taggedNode: GraphQLTaggedNode,
-): React.ComponentType<
-  $RelayProps<React.ElementConfig<TComponent>, RelayRefetchProp>,
-> {
+): component(
+  ...$RelayProps<React.ElementConfig<TComponent>, RelayRefetchProp>
+) {
   // $FlowFixMe[incompatible-return]
   return buildReactRelayContainer(
     Component,

packages/react-relay/ReactRelayTypes.js

@@ -144,14 +144,15 @@ type MapRelayProp<T> = [+t: T] extends [+t: {+$fragmentType: empty, ...}]
                 ? ?$ReadOnlyArray<?$FragmentRef<$NonMaybeType<V>>>
                 : T;
 
-export type RelayFragmentContainer<TComponent> = React.ComponentType<
-  $RelayProps<React.ElementConfig<TComponent>, RelayProp>,
->;
+export type RelayFragmentContainer<TComponent: component(...empty)> = component(
+  ...$RelayProps<React.ElementConfig<TComponent>, RelayProp>
+);
 
-export type RelayPaginationContainer<TComponent> = React.ComponentType<
-  $RelayProps<React.ElementConfig<TComponent>, RelayPaginationProp>,
->;
+export type RelayPaginationContainer<TComponent: component(...empty)> =
+  component(
+    ...$RelayProps<React.ElementConfig<TComponent>, RelayPaginationProp>
+  );
 
-export type RelayRefetchContainer<TComponent> = React.ComponentType<
-  $RelayProps<React.ElementConfig<TComponent>, RelayRefetchProp>,
->;
+export type RelayRefetchContainer<TComponent: component(...empty)> = component(
+  ...$RelayProps<React.ElementConfig<TComponent>, RelayRefetchProp>
+);

packages/react-relay/__flowtests__/ReactRelayPaginationContainer-flowtest.js

@@ -22,10 +22,7 @@ const {graphql} = require('relay-runtime');
  * type-checked correctly on Relay components.
  */
 
-/* $FlowFixMe(>=0.53.0) This comment suppresses an error
- * when upgrading Flow's support for React. Common errors found when upgrading
- * Flow's React support are documented at https://fburl.com/eq7bs81w */
-class FooComponent extends React.Component {
+class FooComponent extends React.Component<$FlowFixMe> {
   props: {
     optionalProp?: {foo: number, ...},
     defaultProp: string,
@@ -56,7 +53,7 @@ class FooComponent extends React.Component {
 }
 // Note that we must reassign to a new identifier to make sure flow doesn't propogate types without
 // the relay type definition doing the work.
-const Foo = createPaginationContainer(
+const Foo = createPaginationContainer<$FlowFixMe, _>(
   FooComponent,
   {
     viewer: graphql`

packages/react-relay/__flowtests__/ReactRelayRefetchContainer-flowtest.js

@@ -21,10 +21,7 @@ const {graphql} = require('relay-runtime');
  * Verifies that normal prop type checking works correctly on Relay components.
  */
 
-/* $FlowFixMe(>=0.53.0) This comment suppresses an error
- * when upgrading Flow's support for React. Common errors found when upgrading
- * Flow's React support are documented at https://fburl.com/eq7bs81w */
-class FooComponent extends React.Component {
+class FooComponent extends React.Component<$FlowFixMe> {
   props: {
     optionalProp?: {foo: number, ...},
     defaultProp: string,
@@ -55,7 +52,7 @@ class FooComponent extends React.Component {
 }
 // Note that we must reassign to a new identifier to make sure flow doesn't propogate types without
 // the relay type definition doing the work.
-const Foo = createRefetchContainer(
+const Foo = createRefetchContainer<$FlowFixMe, _>(
   FooComponent,
   {
     viewer: graphql`

packages/react-relay/buildReactRelayContainer.js

@@ -28,15 +28,15 @@ const {getFragment} = require('relay-runtime');
 const {useContext} = React;
 
 type ContainerCreator = (
-  Component: React.ComponentType<any>,
+  Component: component(...any),
   fragments: FragmentMap,
-) => React.ComponentType<any>;
+) => component(...any);
 
 /**
  * Helper to create the Relay HOCs with ref forwarding, setting the displayName
  * and reading the React context.
  */
-function buildReactRelayContainer<TBase: React.ComponentType<any>>(
+function buildReactRelayContainer<TBase: component(...empty)>(
   ComponentClass: TBase,
   fragmentSpec: GeneratedNodeMap,
   createContainerWithFragments: ContainerCreator,

packages/react-relay/relay-hooks/MatchContainer.js

@@ -95,7 +95,7 @@ export type MatchPointer = {
 
 export type MatchContainerProps<TProps: {...}, TFallback: React.Node> = {
   +fallback?: ?TFallback,
-  +loader: (module: mixed) => React.ComponentType<TProps>,
+  +loader: (module: mixed) => component(...TProps),
   +match: ?MatchPointer | ?TypenameOnlyPointer,
   +props?: TProps,
 };

packages/react-relay/relay-hooks/__tests__/MatchContainer-test.js

@@ -53,7 +53,7 @@ describe('MatchContainer', () => {
   beforeEach(() => {
     jest.resetModules();
 
-    loader = jest.fn<[mixed], React.ComponentType<any | {otherProp: string}>>();
+    loader = jest.fn<[mixed], component(...any)>();
     // $FlowFixMe[missing-local-annot] error found when enabling Flow LTI mode
     UserComponent = jest.fn(props => (
       <div>

packages/relay-test-utils/unwrapContainer.js

@@ -23,11 +23,11 @@ const invariant = require('invariant');
 /**
  * Returns original component class wrapped by e.g. createFragmentContainer
  */
-function unwrapContainer<Props>(
-  ComponentClass: React.ComponentType<
-    $RelayProps<Props, RelayProp | RelayPaginationProp | RelayRefetchProp>,
-  >,
-): React.ComponentType<Props> {
+function unwrapContainer<Props: {...}>(
+  ComponentClass: component(
+    ...$RelayProps<Props, RelayProp | RelayPaginationProp | RelayRefetchProp>
+  ),
+): component(...Props) {
   // $FlowExpectedError
   const unwrapped = ComponentClass.__ComponentClass;
   invariant(