Skip to content

Commit 8909b12

Browse files
authored
docs: Make it clearer which transforms are required for which React version (#431)
1 parent f7e5ef0 commit 8909b12

File tree

1 file changed

+36
-34
lines changed

1 file changed

+36
-34
lines changed

README.md

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -59,28 +59,33 @@ Examples:
5959

6060
## Available transforms
6161

62+
The transforms are meant to migrate old code.
63+
The transformed code is not intended to be used as a pattern for new code.
64+
6265
Some transforms change code they shouldn't actually change.
6366
Fixing all of these requires a lot of implementation effort.
6467
When considering false-positives vs false-negatives, codemods opt for false-positives.
6568
The reason being that a false-positive can be reverted easily (assuming you have the changed code in Version Control e.g. git) while a false-negative requires manual input.
6669

6770
- `preset-18`
68-
- `deprecated-react-type`
69-
- `deprecated-sfc-element`
70-
- `deprecated-sfc`
71-
- `deprecated-stateless-component`
72-
- `context-any`
73-
- `implicit-children`
74-
- `useCallback-implicit-any`
71+
- `deprecated-react-type`
72+
- `deprecated-sfc-element`
73+
- `deprecated-sfc`
74+
- `deprecated-stateless-component`
75+
- `context-any`
76+
- `implicit-children`
77+
- `useCallback-implicit-any`
7578
- `preset-19`
76-
- `deprecated-prop-types-types`
77-
- `deprecated-legacy-ref`
78-
- `deprecated-react-child`
79-
- `deprecated-react-text`
80-
- `deprecated-void-function-component`
81-
- `refobject-defaults`
82-
- `scoped-jsx`
83-
- `useRef-required-initial`
79+
- `deprecated-prop-types-types`
80+
- `deprecated-legacy-ref`
81+
- `deprecated-react-child`
82+
- `deprecated-react-text`
83+
- `deprecated-void-function-component`
84+
- `no-implicit-ref-callback-return` (off by default)
85+
- `react-element-default-any` (off by default)
86+
- `refobject-defaults`
87+
- `scoped-jsx`
88+
- `useRef-required-initial`
8489

8590
### `preset-18`
8691

@@ -90,7 +95,7 @@ By default, the codemods that are definitely required to upgrade to `@types/reac
9095
The other codemods may or may not be required.
9196
You should select all and audit the changed files regardless.
9297

93-
### `context-any`
98+
### `context-any` (React 18)
9499

95100
```diff
96101
class Component extends React.Component<Props> {
@@ -160,7 +165,7 @@ They simply rename identifiers with a specific name.
160165
If you have a type with the same name from a different package, then the rename results in a false positive.
161166
For example, `ink` also has a `StatelessComponent` but you don't need to rename that type since it's not deprecated.
162167

163-
### `implicit-children`
168+
### `implicit-children` (React 18)
164169

165170
```diff
166171
-React.FunctionComponent<Props>
@@ -187,7 +192,7 @@ Redundant `PropsWithChildren` are only problematic stylistically.
187192
In other words, the transform will not wrap `Props` in `React.PropsWithChildren`.
188193
The transform would need to implement scope tracking for this pattern to get fixed.
189194

190-
### `useCallback-implicit-any`
195+
### `useCallback-implicit-any` (React 18)
191196

192197
```diff
193198
-React.useCallback((event) => {})
@@ -216,7 +221,7 @@ By default, the codemods that are definitely required to upgrade to `@types/reac
216221
The other codemods may or may not be required.
217222
You should select all and audit the changed files regardless.
218223

219-
### `deprecated-prop-types-types`
224+
### `deprecated-prop-types-types` (React 19)
220225

221226
```diff
222227
+import * as PropTypes from "prop-types";
@@ -231,7 +236,7 @@ You should select all and audit the changed files regardless.
231236
+declare const requireable: PropTypes.WeakValidationMap<React.ReactNode>;
232237
```
233238

234-
### `deprecated-legacy-ref`
239+
### `deprecated-legacy-ref` (React 19)
235240

236241
```diff
237242
import * as React from "react";
@@ -253,7 +258,7 @@ interface Props {
253258
}
254259
```
255260

256-
### `deprecated-react-child`
261+
### `deprecated-react-child` (React 19)
257262

258263
```diff
259264
import * as React from "react";
@@ -275,7 +280,7 @@ interface Props {
275280
}
276281
```
277282

278-
### `deprecated-react-node-array`
283+
### `deprecated-react-node-array` (React 19)
279284

280285
```diff
281286
import * as React from "react";
@@ -297,7 +302,7 @@ interface Props {
297302
}
298303
```
299304

300-
### `deprecated-react-fragment`
305+
### `deprecated-react-fragment` (React 19)
301306

302307
```diff
303308
import * as React from "react";
@@ -319,7 +324,7 @@ interface Props {
319324
}
320325
```
321326

322-
### `deprecated-react-text`
327+
### `deprecated-react-text` (React 19)
323328

324329
```diff
325330
import * as React from "react";
@@ -341,7 +346,7 @@ interface Props {
341346
}
342347
```
343348

344-
### `deprecated-void-function-component`
349+
### `deprecated-void-function-component` (React 19)
345350

346351
WARNING: Only apply to codebases using `@types/react@^18.0.0`.
347352
In earlier versions of `@types/react` this codemod would change the typings.
@@ -354,7 +359,7 @@ In earlier versions of `@types/react` this codemod would change the typings.
354359
+const Component: React.FunctionComponent = () => {}
355360
```
356361

357-
### `no-implicit-ref-callback-return`
362+
### `no-implicit-ref-callback-return` (React 19)
358363

359364
Off by default in `preset-19`. Can be enabled when running `preset-19`.
360365

@@ -371,7 +376,7 @@ With ref cleanups, this is no longer the case and flagged in types to avoid mist
371376
This only works for the `ref` prop.
372377
The codemod will not apply to other props that take refs (e.g. `innerRef`).
373378

374-
### `react-element-default-any-props`
379+
### `react-element-default-any-props` (React 19)
375380

376381
> [!CAUTION]
377382
> This codemod is only meant as a migration helper for old code.
@@ -405,10 +410,7 @@ if (React.isValidElement(node)) {
405410

406411
The props would need to be cast to `any` (e.g. `(element.props as any).foo`) to preserve the old runtime behavior.
407412

408-
### `refobject-defaults`
409-
410-
WARNING: This is an experimental codemod to intended for codebases using unpublished types.
411-
Only use if you're using https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64896.
413+
### `refobject-defaults` (React 19)
412414

413415
`RefObject` no longer makes `current` nullable by default
414416

@@ -418,7 +420,7 @@ Only use if you're using https://github.com/DefinitelyTyped/DefinitelyTyped/pull
418420
+const myRef: React.RefObject<View | null>
419421
```
420422

421-
#### `experimental-refobject-defaults` false-negative pattern A
423+
#### `refobject-defaults` false-negative pattern A
422424

423425
Importing `RefObject` via aliased named import will result in the transform being skipped.
424426

@@ -429,7 +431,7 @@ import { RefObject as MyRefObject } from "react";
429431
const myRef: MyRefObject<View>;
430432
```
431433

432-
### `scoped-jsx`
434+
### `scoped-jsx` (React 19)
433435

434436
Ensures access to global JSX namespace is now scoped to React (see [DefinitelyTyped/DefinitelyTyped#64464](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/64464)).
435437
This codemod tries to match the existing import style but isn't perfect.
@@ -447,7 +449,7 @@ If the import style doesn't match your preferences, you should set up auto-fixab
447449
+const element: React.JSX.Element = <div />;
448450
```
449451

450-
### `useRef-required-initial`
452+
### `useRef-required-initial` (React 19)
451453

452454
`useRef` now always requires an initial value.
453455
Implicit `undefined` is forbidden.

0 commit comments

Comments
 (0)