experimental.d.ts 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. /**
  2. * These are types for things that are present in the `experimental` builds of React but not yet
  3. * on a stable build.
  4. *
  5. * Once they are promoted to stable they can just be moved to the main index file.
  6. *
  7. * To load the types declared here in an actual project, there are three ways. The easiest one,
  8. * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section,
  9. * is to add `"react/experimental"` to the `"types"` array.
  10. *
  11. * Alternatively, a specific import syntax can to be used from a typescript file.
  12. * This module does not exist in reality, which is why the {} is important:
  13. *
  14. * ```ts
  15. * import {} from 'react/experimental'
  16. * ```
  17. *
  18. * It is also possible to include it through a triple-slash reference:
  19. *
  20. * ```ts
  21. * /// <reference types="react/experimental" />
  22. * ```
  23. *
  24. * Either the import or the reference only needs to appear once, anywhere in the project.
  25. */
  26. // See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared,
  27. // and https://github.com/facebook/react/blob/master/packages/shared/ReactFeatureFlags.js to verify which APIs are
  28. // flagged experimental or not. Experimental APIs will be tagged with `__EXPERIMENTAL__`.
  29. //
  30. // For the inputs of types exported as simply a fiber tag, the `beginWork` function of ReactFiberBeginWork.js
  31. // is a good place to start looking for details; it generally calls prop validation functions or delegates
  32. // all tasks done as part of the render phase (the concurrent part of the React update cycle).
  33. //
  34. // Suspense-related handling can be found in ReactFiberThrow.js.
  35. import React = require('./next');
  36. export {};
  37. declare module '.' {
  38. export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';
  39. export type SuspenseListTailMode = 'collapsed' | 'hidden';
  40. export interface SuspenseListCommonProps {
  41. /**
  42. * Note that SuspenseList require more than one child;
  43. * it is a runtime warning to provide only a single child.
  44. *
  45. * It does, however, allow those children to be wrapped inside a single
  46. * level of `<React.Fragment>`.
  47. */
  48. children: ReactElement | Iterable<ReactElement>;
  49. }
  50. interface DirectionalSuspenseListProps extends SuspenseListCommonProps {
  51. /**
  52. * Defines the order in which the `SuspenseList` children should be revealed.
  53. */
  54. revealOrder: 'forwards' | 'backwards';
  55. /**
  56. * Dictates how unloaded items in a SuspenseList is shown.
  57. *
  58. * - By default, `SuspenseList` will show all fallbacks in the list.
  59. * - `collapsed` shows only the next fallback in the list.
  60. * - `hidden` doesn’t show any unloaded items.
  61. */
  62. tail?: SuspenseListTailMode | undefined;
  63. }
  64. interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {
  65. /**
  66. * Defines the order in which the `SuspenseList` children should be revealed.
  67. */
  68. revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps['revealOrder']> | undefined;
  69. /**
  70. * The tail property is invalid when not using the `forwards` or `backwards` reveal orders.
  71. */
  72. tail?: never | undefined;
  73. }
  74. export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;
  75. /**
  76. * `SuspenseList` helps coordinate many components that can suspend by orchestrating the order
  77. * in which these components are revealed to the user.
  78. *
  79. * When multiple components need to fetch data, this data may arrive in an unpredictable order.
  80. * However, if you wrap these items in a `SuspenseList`, React will not show an item in the list
  81. * until previous items have been displayed (this behavior is adjustable).
  82. *
  83. * @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist
  84. * @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist
  85. */
  86. export const SuspenseList: ExoticComponent<SuspenseListProps>;
  87. /**
  88. * @param effect Imperative function that can return a cleanup function
  89. * @param deps If present, effect will only activate if the values in the list change.
  90. *
  91. * @see https://github.com/facebook/react/pull/21913
  92. */
  93. export function unstable_useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void;
  94. }