feat: add React 19 replace default props transform

[amirabbas-gh]

📚 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.

1. Added Codemod Utils Package

   • Added @codemod.com/codemod-utils package as a dependency to facilitate codemod development.

2. 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.

3. 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:

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

[alexbit-codemod]

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.

function Component({ options = {} }) {}

is not equivalent to

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

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

const defaultOptions = {}
function Component({ options = defaultOptions }) {}

[eps1lon]

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.

[mohebifar]

@amirabbas-gh Can we do something like this?

Before:

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

After:

const C = (props) => {
  const props_textWithDefault = typeof props.text === 'undefined' ? 'test' : props.text;
  const someValue = props_textWithDefault;
  const { text = props_textWithDefault  } = props;
  return <>{props_textWithDefault}</>;
};

[mohebifar]

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:

const C = (props) => {
  const key = cond ? "text" : "title";
  
  return <>
    {/* Codemod: Please make sure this is not affected by removal of defaultProps */}
    {props[key]}
  </>;
};

[amirabbas-gh]

@eps1lon
I have another proposal:

Suggested change

	const C = (props) => {
	return <>{props.text}</>;
	};
	const C = (props) => {
	props = {...props, text: typeof props.text === 'undefined' ? 'default' : props.text};
	return <>{props.text}</>;
	};

[eps1lon]

This seems fine.

[amirabbas-gh]

@eps1lon
I fixed this in:
this commit

[eps1lon]

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

[eps1lon]

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

[amirabbas-gh]

For the example you provided, it only considers href and produces the following output:

const Link = ({ href = "#", ...props }) => {
  return (
    <a href={href} {...props} />
  );
};

[amirabbas-gh]

@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:

const MyComp = ({foo, ...props}) {
  console.log(props.bar)
}

MyComp.defaultProps = {foo: "hello", bar: "bye"}

After:

const MyComp = ({foo = 'hello', ...props}) {
  props = {...props, bar: typeof props.bar === 'undefined' ? 'bye' : props.bar}
  console.log(props.bar)
}

[amirabbas-gh]

@eps1lon
I fix it in this commit:
13e3d842e861a8f68c99a07b034dbd83a40cc96c

[amirabbas-gh]

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.

function Component({ options = {} }) {}

is not equivalent to

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

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

const defaultOptions = {}
function Component({ 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]

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]

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.

$ yarn test default-props
● Validation Warning:

  Unknown option "extensionsToTreatAsEsm" with value [".ts", ".tsx", ".js", ".jsx"] was found.
  This is probably a typing mistake. Fixing it will remove this message.

  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

ts-jest[versions] (WARN) Version 4.8.4 of typescript installed has not been tested with ts-jest. If you'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) TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
 FAIL  transforms/__tests__/react-19-replace-default-props.codemod.test.ts
  ● Test suite failed to run

    Cannot find 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]

@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.