[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} />