[flow][libdef] Kill React.StatelessFunctionalComponent

Summary: Changelog: [libdef] We removed `StatelessFunctionalComponent` type from the 'react' module and `React$StatelessFunctionalComponent` type. The name might give an incorrect assumption that Flow can actually check that a function component doesn't use stateful hooks or can be called directly. If you have code that still uses this type, we recommend you use the `React.AbstractComponent` type, since it forces you to not make any assumption of what kind of React component you are dealing with. Reviewed By: panagosg7 Differential Revision: D51674594 fbshipit-source-id: 329b196e5ee69f1dc2ca54463d3d9b0432e58e53
facebook · Nov 30, 2023 · 521317c · 521317c
1 parent 5cb0c8d
commit 521317c
Show file tree

Hide file tree

Showing 26 changed files with 397 additions and 413 deletions.
diff --git a/lib/react.js b/lib/react.js
@@ -114,19 +114,6 @@ declare type React$AbstractComponentStatics = {
  ...
 };
 
-/**
- * The type of a stateless functional component. In most cases these components
- * are a single function. However, they may have some static properties that we
- * can type check.
- */
-declare type React$StatelessFunctionalComponent<Props> = {
- (props: Props, context: any): React$Node,
- displayName?: ?string,
- propTypes?: any,
- contextTypes?: any,
- ...
-};
-
 /**
  * The type of a component in React. A React component may be a:
  *
@@ -306,8 +293,6 @@ declare module react {
  * @see https://react.dev/reference/react/PureComponent
  */
  declare export var PureComponent: typeof React$PureComponent;
- declare export type StatelessFunctionalComponent<P> =
- React$StatelessFunctionalComponent<P>;
  declare export type ComponentType<-P> = React$ComponentType<P>;
  declare export type AbstractComponent<
  -Config,

diff --git a/src/services/code_action/insert_type_utils.ml b/src/services/code_action/insert_type_utils.ml
@@ -612,8 +612,7 @@ class patch_up_react_mapper ?(imports_react = false) () =
  Reason.OrdinaryName
  ( ( "AbstractComponent" | "ChildrenArray" | "ComponentType" | "Config"
  | "Context" | "Element" | "MixedElement" | "ElementConfig" | "ElementProps"
- | "ElementRef" | "ElementType" | "Key" | "Node" | "Portal" | "Ref"
- | "StatelessFunctionalComponent" ) as name
+ | "ElementRef" | "ElementType" | "Key" | "Node" | "Portal" | "Ref" ) as name
  );
  sym_provenance = Ty_symbol.Library { Ty_symbol.imported_as = None };
  sym_def_loc;

diff --git a/tests/badly_positioned_react/badly_positioned_react.exp b/tests/badly_positioned_react/badly_positioned_react.exp
@@ -14,8 +14,8 @@ References:
  test.js:21:29
  21| const Foo1 = create(create1<{||}>(Foo));
  ^^^^ [2]
- <BUILTINS>/react.js:311:38
- 311| declare export type ComponentType<-P> = React$ComponentType<P>;
+ <BUILTINS>/react.js:296:38
+ 296| declare export type ComponentType<-P> = React$ComponentType<P>;
  ^ [3]
 
 

diff --git a/tests/component_syntax/component_syntax.exp b/tests/component_syntax/component_syntax.exp
@@ -170,11 +170,11 @@ References:
  annotation.js:48:39
  48| declare var InlineRef: component(ref: number); // error
  ^^^^^^ [1]
- <BUILTINS>/react.js:186:5
- 186| | { -current: T | null, ... }
+ <BUILTINS>/react.js:173:5
+ 173| | { -current: T | null, ... }
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:187:6
- 187| | ((T | null) => mixed);
+ <BUILTINS>/react.js:174:6
+ 174| | ((T | null) => mixed);
  ^^^^^^^^^^^^^^^^^^^ [3]
 
 
@@ -632,8 +632,8 @@ References:
  component_in_type_position.js:10:25
  10| const polyElemBad: Poly<number> = <Poly prop="STRING" />; // ERROR
  ^^^^^^ [2]
- <BUILTINS>/react.js:160:69
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:69
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^ [3]
 
 
@@ -1048,11 +1048,11 @@ References:
  declared.js:50:34
  50| declare component InlineRef(ref: number); // error
  ^^^^^^ [1]
- <BUILTINS>/react.js:186:5
- 186| | { -current: T | null, ... }
+ <BUILTINS>/react.js:173:5
+ 173| | { -current: T | null, ... }
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:187:6
- 187| | ((T | null) => mixed);
+ <BUILTINS>/react.js:174:6
+ 174| | ((T | null) => mixed);
  ^^^^^^^^^^^^^^^^^^^ [3]
 
 
@@ -1782,8 +1782,8 @@ References:
  import_component_in_type_position.js:12:31
  12| const polyElemError: PolyType<string> = <Poly prop={3} />;
  ^^^^^^ [2]
- <BUILTINS>/react.js:160:69
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:69
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^ [3]
 
 
@@ -1803,8 +1803,8 @@ References:
  component_in_type_position.js:3:8
  3| export component Foo() { return null }
  ^^^^^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:160:36
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:36
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^^^^^^^^^^^ [3]
 
 
@@ -1927,11 +1927,11 @@ References:
  names.js:22:29
  22| export component NoRef(ref: string) { return <div /> }; // Error
  ^^^^^^ [1]
- <BUILTINS>/react.js:186:5
- 186| | { -current: T | null, ... }
+ <BUILTINS>/react.js:173:5
+ 173| | { -current: T | null, ... }
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:187:6
- 187| | ((T | null) => mixed);
+ <BUILTINS>/react.js:174:6
+ 174| | ((T | null) => mixed);
  ^^^^^^^^^^^^^^^^^^^ [3]
 
 
@@ -1993,8 +1993,8 @@ Cannot cast `Foo` to `React.AbstractComponent` because `React.Element` [1] is in
  ^^^
 
 References:
- <BUILTINS>/react.js:162:35
- 162| declare type React$MixedElement = React$Element<React$ElementType>;
+ <BUILTINS>/react.js:149:35
+ 149| declare type React$MixedElement = React$Element<React$ElementType>;
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
  nominal.js:17:43
  17| Foo as React.AbstractComponent<{}, mixed, null>; // ERROR, default render is React.Node
@@ -2390,8 +2390,8 @@ References:
  propsof.js:26:18
  26| component C(ref: React.RefSetter<React.RefOf<A>>) {
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
- <BUILTINS>/react.js:177:5
- 177| | { -current: React$ElementRef<ElementType> | null, ... }
+ <BUILTINS>/react.js:164:5
+ 164| | { -current: React$ElementRef<ElementType> | null, ... }
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
  propsof.js:26:34
  26| component C(ref: React.RefSetter<React.RefOf<A>>) {
@@ -2422,8 +2422,8 @@ References:
  propsof.js:26:18
  26| component C(ref: React.RefSetter<React.RefOf<A>>) {
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [3]
- <BUILTINS>/react.js:178:6
- 178| | ((React$ElementRef<ElementType> | null) => mixed)
+ <BUILTINS>/react.js:165:6
+ 165| | ((React$ElementRef<ElementType> | null) => mixed)
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [4]
 
 
@@ -2479,17 +2479,17 @@ The `ref` parameter must be a subtype of `React.RefSetter`.
  ^^^
 
 References:
- <BUILTINS>/react.js:186:21
- 186| | { -current: T | null, ... }
+ <BUILTINS>/react.js:173:21
+ 173| | { -current: T | null, ... }
  ^^^^ [1]
  refs.js:3:30
  3| component Foo(ref: {current: typeof Reffed}) { return null };
  ^^^^^^^^^^^^^ [2]
  refs.js:3:20
  3| component Foo(ref: {current: typeof Reffed}) { return null };
  ^^^^^^^^^^^^^^^^^^^^^^^^ [3]
- <BUILTINS>/react.js:187:6
- 187| | ((T | null) => mixed);
+ <BUILTINS>/react.js:174:6
+ 174| | ((T | null) => mixed);
  ^^^^^^^^^^^^^^^^^^^ [4]
 
 
@@ -2509,14 +2509,14 @@ References:
  refs.js:5:22
  5| component Bar(ref: ((typeof Reffed) => mixed)) { return null };
  ^^^^^^^^^^^^^ [1]
- <BUILTINS>/react.js:187:11
- 187| | ((T | null) => mixed);
+ <BUILTINS>/react.js:174:11
+ 174| | ((T | null) => mixed);
  ^^^^ [2]
  refs.js:5:21
  5| component Bar(ref: ((typeof Reffed) => mixed)) { return null };
  ^^^^^^^^^^^^^^^^^^^^^^^^ [3]
- <BUILTINS>/react.js:186:5
- 186| | { -current: T | null, ... }
+ <BUILTINS>/react.js:173:5
+ 173| | { -current: T | null, ... }
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^ [4]
 
 
@@ -2586,8 +2586,8 @@ References:
  refs.js:60:43
  60| component MyInput(label: string, ref: React$RefSetter<?HTMLInputElement>, ...otherProps: { other: string}) {
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
- <BUILTINS>/react.js:177:5
- 177| | { -current: React$ElementRef<ElementType> | null, ... }
+ <BUILTINS>/react.js:164:5
+ 164| | { -current: React$ElementRef<ElementType> | null, ... }
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [2]
  refs.js:56:66
  56| component MyNestedInput(other: string, ref: React$RefSetter<?HTMLElement>) {
@@ -2625,8 +2625,8 @@ References:
  refs.js:60:43
  60| component MyInput(label: string, ref: React$RefSetter<?HTMLInputElement>, ...otherProps: { other: string}) {
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [4]
- <BUILTINS>/react.js:178:6
- 178| | ((React$ElementRef<ElementType> | null) => mixed)
+ <BUILTINS>/react.js:165:6
+ 165| | ((React$ElementRef<ElementType> | null) => mixed)
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [5]
 
 

diff --git a/tests/constrain_writes/constrain_writes.exp b/tests/constrain_writes/constrain_writes.exp
@@ -261,8 +261,8 @@ References:
  wiki_examples.js:18:32
  18| declare var OtherComponent: (OtherProps) => React.Node;
  ^^^^^^^^^^ [2]
- <BUILTINS>/react.js:160:69
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:69
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />
@@ -286,8 +286,8 @@ References:
  wiki_examples.js:12:28
  12| let Component = ({prop}: Props) => { return <>{prop}</> }
  ^^^^^ [2]
- <BUILTINS>/react.js:160:69
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:69
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />
@@ -311,8 +311,8 @@ References:
  wiki_examples.js:18:32
  18| declare var OtherComponent: (OtherProps) => React.Node;
  ^^^^^^^^^^ [2]
- <BUILTINS>/react.js:160:36
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:36
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^^^^^^^^^^^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />
@@ -336,8 +336,8 @@ References:
  wiki_examples.js:12:28
  12| let Component = ({prop}: Props) => { return <>{prop}</> }
  ^^^^^ [2]
- <BUILTINS>/react.js:160:36
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:36
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^^^^^^^^^^^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />
@@ -361,8 +361,8 @@ References:
  wiki_examples.js:12:47
  12| let Component = ({prop}: Props) => { return <>{prop}</> }
  ^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:160:36
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:36
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^^^^^^^^^^^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />
@@ -386,8 +386,8 @@ References:
  wiki_examples.js:12:47
  12| let Component = ({prop}: Props) => { return <>{prop}</> }
  ^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:160:36
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:36
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^^^^^^^^^^^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />
@@ -411,8 +411,8 @@ References:
  wiki_examples.js:12:47
  12| let Component = ({prop}: Props) => { return <>{prop}</> }
  ^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:160:36
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:36
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^^^^^^^^^^^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />
@@ -436,8 +436,8 @@ References:
  wiki_examples.js:12:47
  12| let Component = ({prop}: Props) => { return <>{prop}</> }
  ^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:160:36
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:36
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^^^^^^^^^^^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />
@@ -461,8 +461,8 @@ References:
  wiki_examples.js:12:47
  12| let Component = ({prop}: Props) => { return <>{prop}</> }
  ^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:160:36
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:36
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^^^^^^^^^^^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />
@@ -486,8 +486,8 @@ References:
  wiki_examples.js:12:47
  12| let Component = ({prop}: Props) => { return <>{prop}</> }
  ^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:160:36
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:36
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^^^^^^^^^^^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />
@@ -511,8 +511,8 @@ References:
  wiki_examples.js:12:47
  12| let Component = ({prop}: Props) => { return <>{prop}</> }
  ^^^^^^^^^^^ [2]
- <BUILTINS>/react.js:160:36
- 160| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
+ <BUILTINS>/react.js:147:36
+ 147| declare opaque type React$Element<+ElementType: React$ElementType, +P = React$ElementProps<ElementType>>: {...};
  ^^^^^^^^^^^ [3]
  wiki_examples.js:14:7
  14| let element = <Component {...props} />