fix: remove VFC, FC type usage (#2290)

Author: faergeek

examples/rspack/src/react-env.d.ts

@@ -122,7 +122,7 @@ declare module "*.gif" {
     export default src;
 }
 declare module "*.svg" {
-    const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+    const ReactComponent: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
     const content: string;
 
     // export { ReactComponent };

packages/react/macro/index.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, VFC, FC } from "react"
+import type { ReactNode } from "react"
 import type { TransRenderCallbackOrComponent, I18nContext } from "@lingui/react"
 import type {
   MacroMessageDescriptor,
@@ -52,7 +52,7 @@ type SelectChoiceProps = {
  * <Trans id="custom.id">Hello {username}.</Trans>
  * ```
  */
-export const Trans: FC<TransProps>
+export const Trans: (props: TransProps) => ReactNode
 
 /**
  * Props of Plural macro are transformed into plural format.
@@ -67,7 +67,7 @@ export const Trans: FC<TransProps>
  * <Trans id="{numBooks, plural, one {Book} other {Books}}" values={{ numBooks }} />
  * ```
  */
-export const Plural: VFC<PluralChoiceProps>
+export const Plural: (props: PluralChoiceProps) => ReactNode
 /**
  * Props of SelectOrdinal macro are transformed into selectOrdinal format.
  *
@@ -86,7 +86,7 @@ export const Plural: VFC<PluralChoiceProps>
  * />
  * ```
  */
-export const SelectOrdinal: VFC<PluralChoiceProps>
+export const SelectOrdinal: (props: PluralChoiceProps) => ReactNode
 
 /**
  * Props of Select macro are transformed into select format
@@ -105,7 +105,7 @@ export const SelectOrdinal: VFC<PluralChoiceProps>
  * />
  * ```
  */
-export const Select: VFC<SelectChoiceProps>
+export const Select: (props: SelectChoiceProps) => ReactNode
 
 declare function _t(descriptor: MacroMessageDescriptor): string
 declare function _t(

packages/react/src/I18nProvider.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, FunctionComponent } from "react"
+import React, { ComponentType } from "react"
 import type { I18n } from "@lingui/core"
 import type { TransRenderProps } from "./TransNoContext"
 
@@ -31,11 +31,11 @@ export function useLingui(): I18nContext {
   return useLinguiInternal()
 }
 
-export const I18nProvider: FunctionComponent<I18nProviderProps> = ({
+export function I18nProvider({
   i18n,
   defaultComponent,
   children,
-}) => {
+}: I18nProviderProps) {
   const latestKnownLocale = React.useRef<string | undefined>(i18n.locale)
   /**
    * We can't pass `i18n` object directly through context, because even when locale

packages/react/src/Trans.test.tsx

@@ -270,10 +270,10 @@ describe("Trans component", () => {
   })
 
   it("should render nested elements with `asChild` pattern", () => {
-    const ComponentThatExpectsSingleElementChild: React.FC<{
+    function ComponentThatExpectsSingleElementChild(props: {
       asChild: boolean
       children?: React.ReactElement
-    }> = (props) => {
+    }) {
       if (props.asChild && React.isValidElement(props.children)) {
         return props.children
       }
@@ -387,9 +387,7 @@ describe("Trans component", () => {
     })
 
     it("should take defaultComponent prop with a custom component", () => {
-      const ComponentFC: React.FunctionComponent<TransRenderProps> = (
-        props
-      ) => {
+      function ComponentFC(props: TransRenderProps) {
         return <div>{props.children}</div>
       }
       const span = render(
@@ -406,9 +404,7 @@ describe("Trans component", () => {
     ])(
       "should ignore defaultComponent when `component` or `render` is null",
       (props) => {
-        const ComponentFC: React.FunctionComponent<TransRenderProps> = (
-          props
-        ) => {
+        function ComponentFC(props: TransRenderProps) {
           return <div>{props.children}</div>
         }
         const translation = render(
@@ -434,9 +430,7 @@ describe("Trans component", () => {
 
     it("should render function component as simple prop", () => {
       const propsSpy = jest.fn()
-      const ComponentFC: React.FunctionComponent<TransRenderProps> = (
-        props
-      ) => {
+      function ComponentFC(props: TransRenderProps) {
         propsSpy(props)
         const [state] = React.useState("value")
         return <div id={props.id}>{state}</div>
@@ -454,18 +448,18 @@ describe("Trans component", () => {
   })
 
   describe("I18nProvider defaultComponent accepts render-like props", () => {
-    const DefaultComponent: React.FunctionComponent<TransRenderProps> = (
-      props
-    ) => (
-      <>
-        <div data-testid="children">{props.children}</div>
-        {props.id && <div data-testid="id">{props.id}</div>}
-        {props.message && <div data-testid="message">{props.message}</div>}
-        {props.translation && (
-          <div data-testid="translation">{props.translation}</div>
-        )}
-      </>
-    )
+    function DefaultComponent(props: TransRenderProps) {
+      return (
+        <>
+          <div data-testid="children">{props.children}</div>
+          {props.id && <div data-testid="id">{props.id}</div>}
+          {props.message && <div data-testid="message">{props.message}</div>}
+          {props.translation && (
+            <div data-testid="translation">{props.translation}</div>
+          )}
+        </>
+      )
+    }
 
     it("should render defaultComponent with Trans props", () => {
       const markup = render(