Files
react-native/scripts/build-types
Jakub Piasecki df5cd55cdb Flatten built-in utility types in the API snapshot (#52280)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52280

Changelog: [Internal]

Adds a type-simplifyng transform for the API snapshot, with the goal of resolving some built-in TS types during build time. Most notably, it's able to simplify `Omit` structures emitted by the `flow-api-translator` when translating Flow's type spread operator.

It builds upon a simplified type inlining transform from the previous approach. The type inlining transform is able to handle inlining type references and resolution of built-in TS types on literal types:
- `Omit`
- `Readonly`
- `Partial`
- `keyof`

Reference inlining is performed top-down and built-in type resolution is performed bottom-up, which makes it possible for the second step to assume working on type literals.

Type simplifying transform uses the type inlining to reduce type references encountered inside `Omits` to their literal shapes, which makes possible to determine whether `Omit` is neccessary case-by-case. If `Omit` is redundant, it can be safely removed. If it's not, the omitted keys can be reduced to represent a subset of keys existing in the target type.

It also keeps the ability to resolve `Partial` and `Readonly` types on type literals, simplifying the snapshot further.

An example diff the transform can handle:
Before:
```
export declare type AccessibilityProps = Readonly<
  Omit<
    AccessibilityPropsAndroid,
    | keyof {
        accessibilityActions?: ReadonlyArray<AccessibilityActionInfo>
        accessibilityHint?: string
        accessibilityLabel?: string
        accessibilityRole?: AccessibilityRole
        accessibilityState?: AccessibilityState
        accessibilityValue?: AccessibilityValue
        accessible?: boolean
        "aria-busy"?: boolean
        "aria-checked"?: "mixed" | (boolean | undefined)
        "aria-disabled"?: boolean
        "aria-expanded"?: boolean
        "aria-hidden"?: boolean
        "aria-label"?: string
        "aria-selected"?: boolean
        "aria-valuemax"?: AccessibilityValue["max"]
        "aria-valuemin"?: AccessibilityValue["min"]
        "aria-valuenow"?: AccessibilityValue["now"]
        "aria-valuetext"?: AccessibilityValue["text"]
        role?: Role
      }
    | keyof AccessibilityPropsIOS
  > &
    Omit<
      AccessibilityPropsIOS,
      keyof {
        accessibilityActions?: ReadonlyArray<AccessibilityActionInfo>
        accessibilityHint?: string
        accessibilityLabel?: string
        accessibilityRole?: AccessibilityRole
        accessibilityState?: AccessibilityState
        accessibilityValue?: AccessibilityValue
        accessible?: boolean
        "aria-busy"?: boolean
        "aria-checked"?: "mixed" | (boolean | undefined)
        "aria-disabled"?: boolean
        "aria-expanded"?: boolean
        "aria-hidden"?: boolean
        "aria-label"?: string
        "aria-selected"?: boolean
        "aria-valuemax"?: AccessibilityValue["max"]
        "aria-valuemin"?: AccessibilityValue["min"]
        "aria-valuenow"?: AccessibilityValue["now"]
        "aria-valuetext"?: AccessibilityValue["text"]
        role?: Role
      }
    > & {
      accessibilityActions?: ReadonlyArray<AccessibilityActionInfo>
      accessibilityHint?: string
      accessibilityLabel?: string
      accessibilityRole?: AccessibilityRole
      accessibilityState?: AccessibilityState
      accessibilityValue?: AccessibilityValue
      accessible?: boolean
      "aria-busy"?: boolean
      "aria-checked"?: "mixed" | (boolean | undefined)
      "aria-disabled"?: boolean
      "aria-expanded"?: boolean
      "aria-hidden"?: boolean
      "aria-label"?: string
      "aria-selected"?: boolean
      "aria-valuemax"?: AccessibilityValue["max"]
      "aria-valuemin"?: AccessibilityValue["min"]
      "aria-valuenow"?: AccessibilityValue["now"]
      "aria-valuetext"?: AccessibilityValue["text"]
      role?: Role
    }
>
```

After:
```
export declare type AccessibilityProps = Readonly<
  AccessibilityPropsAndroid &
    AccessibilityPropsIOS & {
      accessibilityActions?: ReadonlyArray<AccessibilityActionInfo>
      accessibilityHint?: string
      accessibilityLabel?: string
      accessibilityRole?: AccessibilityRole
      accessibilityState?: AccessibilityState
      accessibilityValue?: AccessibilityValue
      accessible?: boolean
      "aria-busy"?: boolean
      "aria-checked"?: "mixed" | (boolean | undefined)
      "aria-disabled"?: boolean
      "aria-expanded"?: boolean
      "aria-hidden"?: boolean
      "aria-label"?: string
      "aria-selected"?: boolean
      "aria-valuemax"?: AccessibilityValue["max"]
      "aria-valuemin"?: AccessibilityValue["min"]
      "aria-valuenow"?: AccessibilityValue["now"]
      "aria-valuetext"?: AccessibilityValue["text"]
      role?: Role
    }
>
```

Reviewed By: huntie

Differential Revision: D77295302

fbshipit-source-id: 213aef46035bde4f9783353b5344a6986a418399
2025-06-26 03:05:27 -07:00
..
2025-06-06 01:14:43 -07:00

scripts/build-types

TypeScript build pipeline for React Native's JavaScript API.

Overview

yarn build-types is a custom build pipeline for translating React Native's Flow source code to TypeScript.

Specifically, it reduces the runtime JavaScript API of react-native into two outputs:

  • Generated TypeScript types
    Public user types for react-native, shipped to npm
    packages/react-native/types_generated/
  • Public API snapshot (experimental)
    Snapshot file of the public API shape, used by maintainers
    packages/react-native/ReactNativeApi.d.ts

Dependencies

yarn build-types makes use of the following dependencies, composed with other pre/post transformation steps and dependency resolution.

Usage

yarn build-types is designed to be run by maintainers with minimal arguments.

API snapshot generation is currently experimental, and will be folded into the default behaviour when ready.

# Build types
yarn build-types

# Build types + API snapshot (experimental)
yarn build-types --withSnapshot [--validate]

Configuration

Sparse configuration options are defined and documented in scripts/build-types/config.js.

About the two formats

Generated TypeScript types

types_generated/

Directory providing TypeScript user types for the react-native package, distributed via npm.

  • Gitignored.
  • Scoped to the index.d.ts entry point via package.json#exports.
  • Preserves unstable_ and experimental_ APIs.
  • Preserves doc comments.
  • Preserves source file names (for go to definition).

Public API snapshot (experimental)

ReactNative.d.ts

Provides a human-readable, maintainable reference of the React Native's public JavaScript API, optimized for developers and diff tooling.

  • Committed to the repo.
  • Strips unstable_ and experimental_ APIs.
  • Strips doc comments.
  • Strips source file names and some un-exported type names (WIP).