feat: add React 19 replace default props transform by amirabbas-gh · Pull Request #331 · reactjs/react-codemod

amirabbas-gh · 2025-01-31T20:18:29Z

📚 Description

This PR is created to update the react-codemod repository with the updates for the react/19/replace-default-props codemod and to align the open-source content of this codemod in react-codemod similar to the Codemod repository.

Added Codemod Utils Package
- Added @codemod.com/codemod-utils package as a dependency to facilitate codemod development.
Added Custom TypeScript Configuration for Codemods

"Introduced tsconfig.codemod.json to provide a dedicated TypeScript configuration for transforms from the Codemod repository.
A dedicated tsconfig.codemod.json has been added to support the new transform from the Codemod repository and ensure it has the required TypeScript configuration.

New Transform: React 19 Replace Default Props
- Added a new transform react-19-replace-default-props to handle default props migration for React 19.
- Comprehensive tests were included to ensure reliability and coverage.
- Available will using npx codemod react/19/replace-default-props

🧪 Test Plan

The following steps were taken to ensure the changes function as intended:

Ran the test suite to validate existing functionality and new transforms.
Verified type resolution and TypeScript transform compatibility.
To confirm accuracy, the react-19-replace-default-props transform was executed against test cases.

alexbit-codemod · 2025-01-31T20:43:14Z

thanks @amirabbas-gh (and @mohebifar)!

@rickhanlonii, this is the first of many PRs from Codemod. appreciate your review!
excited about taking this repo to a whole new level one PR at a time! :D

eps1lon

How does this handle more complex types like objects? One issue with migrating from .defaultProps to function default parameters is that creating an object in the default parameter would invalidate memoization too often.

E.g.

functionComponent({ options ={}}){}

is not equivalent to

functionComponent({ options }){}Component.defaultProps={options: {}}

you'd have to to hoist those values out e.g.

constdefaultOptions={}functionComponent({ options =defaultOptions}){}

eps1lon · 2025-02-07T17:42:58Z

+const C = (props) => {
+ return <>{props.text}</>;
+};


This no longer sets props.text by default. The codemod should opt out here with a message (or insert a comment) that it couldn't handle this case.

@amirabbas-gh Can we do something like this?
Before:
constC=(props)=>{constsomeValue=props.text;const{ text }=props;return<>{props.text}</>;};
After:
constC=(props)=>{constprops_textWithDefault=typeofprops.text==='undefined' ? 'test' : props.text;constsomeValue=props_textWithDefault;const{ text =props_textWithDefault}=props;return<>{props_textWithDefault}</>;};

It won't be able to handle the case of computed member expressions, which is ok, and perhaps we should just leave a note/comment for such cases:
constC=(props)=>{constkey=cond ? "text" : "title";return<>{/* Codemod: Please make sure this is not affected by removal of defaultProps */}{props[key]}</>;};

@eps1lon
I have another proposal:
Suggested change
constC=(props)=>{
return<>{props.text}</>;
};
constC=(props)=>{
props={...props,text: typeofprops.text==='undefined' ? 'default' : props.text};
return<>{props.text}</>;
};

This seems fine.

@eps1lon
I fixed this in:
this commit

TypeScript is probably going to be the biggest blocker here. But codemodding that perfectly seems like a pretty huge task.

eps1lon · 2025-02-07T17:44:49Z

@@ -0,0 +1,12 @@
+const Link = ({ href, children, ...props }) => {


What would happen if href or children are not named here e.g. { href, ...props} and <a href={href} {...props} />?

For the example you provided, it only considers href and produces the following output:
constLink=({ href ="#", ...props})=>{return(<ahref={href}{...props}/>);};

@eps1lon
We reviewed this case with @mohebifar 's help, and I understood your point. What do you think about doing something similar to the solution I suggested for the previous case?
Before:
constMyComp=({foo, ...props}){console.log(props.bar)}MyComp.defaultProps={foo: "hello",bar: "bye"}
After:
constMyComp=({foo ='hello', ...props}){ props ={...props,bar: typeofprops.bar==='undefined' ? 'bye' : props.bar}console.log(props.bar)}

@eps1lon
I fix it in this commit:
13e3d842e861a8f68c99a07b034dbd83a40cc96c

Hoisted default object values outside function parameters to avoid invalidating memoization when migrating from .defaultProps to function default parameters.

amirabbas-gh · 2025-02-15T17:12:09Z

How does this handle more complex types like objects? One issue with migrating from .defaultProps to function default parameters is that creating an object in the default parameter would invalidate memoization too often.
E.g.
functionComponent({ options ={}}){}
is not equivalent to
functionComponent({ options }){}Component.defaultProps={options: {}}
you'd have to to hoist those values out e.g.
constdefaultOptions={}functionComponent({ options =defaultOptions}){}

@eps1lon
I fixed the memory issue when using ObjectExpression, ArrayExpression, or ArrowFunctionExpression by creating separate variables for them per your suggestion.
In this commit

eps1lon

Looks good. I'd recommend running this on some actual codebases to verify. I don't think we have any more defaultProps but I can test it on our larger codebases internally as a sanity check. Can you ping me once npx codemod react/19/replace-default-props is available?

amirabbas-gh · 2025-02-19T21:55:42Z

Looks good. I'd recommend running this on some actual codebases to verify. I don't think we have any more defaultProps but I can test it on our larger codebases internally as a sanity check. Can you ping me once npx codemod react/19/replace-default-props is available?

Final version published on Codemod registry! 🚀

The final version has been published! All updates are now available on the Codemod registry.

You can now run:

npx codemod react/19/replace-default-props

to execute the codemod with the latest improvements.

@eps1lon Let me know if you need anything! 😊

alexbit-codemod · 2025-02-19T21:56:50Z

great job @amirabbas-gh and thank you @eps1lon for code review. i also tested the codemod and all lgtm.

this can be merged now... cc @rickhanlonii , @mohebifar

eps1lon

I can't run the tests locally.

$yarntestdefault-props●Validation Warning:
Unknownoption"extensionsToTreatAsEsm"withvalue[".ts",".tsx",".js",".jsx"]wasfound.Thisisprobablyatypingmistake.Fixingitwillremovethismessage.Configuration Documentation:
https://jestjs.io/docs/configuration.htmlts-jest[versions](WARN)Version4.8.4oftypescriptinstalledhasnotbeentestedwithts-jest.Ifyou're experiencing issues, consider using a supported version (>=2.7.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
ts-jest[config](WARN)TypeScriptdiagnostics(customizeusing`[jest-config].globals.ts-jest.diagnostics`option):
messageTS151001: Ifyouhaveissuesrelatedtoimports,youshouldconsidersetting`esModuleInterop`to`true`inyourTypeScriptconfigurationfile(usually`tsconfig.json`).Seehttps://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.FAILtransforms/__tests__/react-19-replace-default-props.codemod.test.ts●TestsuitefailedtorunCannotfind module '@codemod.com/codemod-utils'from'react-19-replace-default-props.codemod.ts'

The warnings also seem concerning. Especially related to ts-jest when we just added this dependency.

amirabbas-gh · 2025-04-01T18:49:24Z

@eps1lon There were some issues in the PR as well as in some of Codemod's packages, which I have fixed. Please pull changes, reinstall the packages, and make sure to run the tests again.

amirabbas-gh added 2 commits January 31, 2025 00:00

feat: add codemod tsconfig file
cd05eb8

feat: add codemod-utils and typescript jscodeshift package
82ad3a4

amirabbas-gh marked this pull request as draft February 4, 2025 19:08

amirabbas-gh force-pushed the replace-default-props-transform branch from 23b6272 to dc9175fCompare February 4, 2025 19:25

amirabbas-gh added 5 commits February 5, 2025 23:53

fix: fix new codemod tsconfig jest config
7b1901c

feat: add react-19-replace-default-props transform
1d8befd

fix: fix EOL at the end of button-jsx-example-input test fixture
0bcf600

fix: fix import
98ca275

fix: fix tsconfig.codemod config file format
0d7dc9f

amirabbas-gh force-pushed the replace-default-props-transform branch from dc9175f to 0d7dc9fCompare February 5, 2025 20:24

eps1lon reviewed Feb 7, 2025
View reviewed changes

fix: prevent unnecessary re-renders by hoisting default object values
eff3a37
Hoisted default object values outside function parameters to avoid invalidating memoization when migrating from .defaultProps to function default parameters.

amirabbas-gh marked this pull request as ready for review February 14, 2025 20:51

fix: fix formatting of react-19-replace-default-props transform
5dabf5b

amirabbas-gh added 2 commits February 16, 2025 18:56

fix: fix replace-default-props transform in not destructured cases
121afe2

fix: fix replace-default-props transform in rest element cases
13e3d84

amirabbas-gh requested a review from eps1lon February 16, 2025 16:25

eps1lon approved these changes Feb 17, 2025
View reviewed changes

amirabbas-gh mentioned this pull request Feb 19, 2025
chore(codemods/react/19/replace-default-props): sync React 19 replace-default-props improvements codemod/commons#62
Merged

eps1lon requested changes Apr 1, 2025
View reviewed changes

amirabbas-gh added 5 commits April 1, 2025 19:30

update lock files
1ff6996

feat: add node next into tsconfig
40d28ac

feat: add module name mapper for codemod utils package in jest config
58d7e23

fix: fix moduleResolution in tsconfig
88b5b16

update codemod-utils
611d84e

amirabbas-gh requested a review from eps1lon April 1, 2025 18:46

fix: fix lockfile
c752f35

alexbit-codemod mentioned this pull request May 3, 2025
fix: resolve TypeScript and Jest test issues in transform tests #333
Open

-constC=(props)=>{
-return<>{props.text}</>;
-};
+constC=(props)=>{
+props={...props,text: typeofprops.text==='undefined' ? 'default' : props.text};
+return<>{props.text}</>;
+};

		@@ -0,0 +1,12 @@
		const Link = ({ href, children, ...props }) => {

Uh oh!

Conversation

amirabbas-gh commented Jan 31, 2025

📚 Description

🧪 Test Plan

Uh oh!

alexbit-codemod commented Jan 31, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eps1lon left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Before:

After:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eps1lonFeb 7, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amirabbas-gh commented Feb 15, 2025

Uh oh!

eps1lon left a comment

Choose a reason for hiding this comment

Uh oh!

amirabbas-gh commented Feb 19, 2025

Final version published on Codemod registry! 🚀

Uh oh!

alexbit-codemod commented Feb 19, 2025

Uh oh!

eps1lon left a comment

Choose a reason for hiding this comment

Uh oh!

amirabbas-gh commented Apr 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

alexbit-codemod commented Jan 31, 2025•
edited
Loading

eps1lonFeb 7, 2025•
edited
Loading