New codemod to help migrating React components "defaultProps" usage #3681

CarlosCortizasCT · 2024-12-17T12:43:22Z

Summary

The way we are using React components defaultProps in our codebase is no longer supported in the new React 19 version (reference).

This is the main concept:

// BEFORE
type TMyComponentProps = {
  prop1: string;
  prop2: string;
  prop3: string;
};

function MyComponent(props: TMyComponentProps) {
  return (
    <ul>
    <li>Prop 1: {props.prop1}</li>
    <li>Prop 2: {props.prop2}</li>
    <li>Prop 3: {props.prop3}</li>
  </ul>
  );
}
MyComponent.defaultProps = {
  prop1: 'My default value',
};


// AFTER
type TMyComponentProps = {
  prop1?: string; // <--- Make sure this is marked as optional
  prop2: string;
  prop3: string;
};

function MyComponent({ prop1: 'My default value', ...props }: TMyComponentProps) {
  return (
    <ul>
    <li>Prop 1: {prop1}</li> {* <--- Direct access to destructured property *}
    <li>Prop 2: {props.prop2}</li>
    <li>Prop 3: {props.prop3}</li>
  </ul>
  );
}
// <--- No "defaultProps" component property

Description

There are multiple adjustments that are needed and this codemod does not address 100% of them but it helps with most of the common use cases. However, a double check review is recommended after running it; at least checking the Typescript types and building the codebase.

These are the main steps the codemod goes through:

Search for React components that have a defaultProps property

MyComponent.defaultProps = {
  prop1: 'My default value',
};

Extract the keys and values for the default props
Update the component function signature

// BEFORE
function MyComponent(props: TMyComponentProps) { ... }

// AFTER
function MyComponent({ prop1, ...props }: TMyComponentProps) { ... }

Refactor the usages of the default props in the body of the component

// BEFORE
function MyComponent(props: TMyComponentProps) {
  return (
    <ul>
      <li>Prop 1: {props.prop1}</li>
      <li>Prop 2: {props.prop2}</li>
      <li>Prop 3: {props.prop3}</li>
    </ul>
  );
}

// AFTER
// BEFORE
function MyComponent({ prop1, ...props }: TMyComponentProps) {
  return (
    <ul>
      <li>Prop 1: {prop1}</li>
      <li>Prop 2: {props.prop2}</li>
      <li>Prop 3: {props.prop3}</li>
    </ul>
  );
}

Update the component TS type definition so we make sure the default props are optional

// BEFORE 
type TMyComponentProps = {
  prop1: string;
  prop2: string;
  prop3: string;
};

// AFTER
type TMyComponentProps = {
  prop1?: string;
  prop2: string;
  prop3: string;
};

Remove the defaultProps assignment from the component

// Delete this code block
MyComponent.defaultProps = {
  prop1: 'My default value',
};

NOTE

I tried to be very verbose with the inline comments of the codemod explaining what every block is for.

…ion codemod

vercel · 2024-12-17T12:43:26Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mc-app-kit-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 19, 2024 3:52pm
merchant-center-application-kit-components-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 19, 2024 3:52pm

changeset-bot · 2024-12-17T12:43:27Z

🦋 Changeset detected

Latest commit: 4df345c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 36 packages

Name	Type
@commercetools-frontend/codemod	Minor
@commercetools-applications/merchant-center-template-starter-typescript	Minor
@commercetools-applications/merchant-center-template-starter	Minor
@commercetools-applications/merchant-center-custom-view-template-starter-typescript	Minor
@commercetools-applications/merchant-center-custom-view-template-starter	Minor
@commercetools-backend/eslint-config-node	Minor
@commercetools-backend/express	Minor
@commercetools-backend/loggers	Minor
@commercetools-frontend/actions-global	Minor
@commercetools-frontend/application-components	Minor
@commercetools-frontend/application-config	Minor
@commercetools-frontend/application-shell-connectors	Minor
@commercetools-frontend/application-shell	Minor
@commercetools-frontend/assets	Minor
@commercetools-frontend/babel-preset-mc-app	Minor
@commercetools-frontend/browser-history	Minor
@commercetools-frontend/constants	Minor
@commercetools-frontend/create-mc-app	Minor
@commercetools-frontend/cypress	Minor
@commercetools-frontend/eslint-config-mc-app	Minor
@commercetools-frontend/i18n	Minor
@commercetools-frontend/jest-preset-mc-app	Minor
@commercetools-frontend/jest-stylelint-runner	Minor
@commercetools-frontend/l10n	Minor
@commercetools-frontend/mc-dev-authentication	Minor
@commercetools-frontend/mc-html-template	Minor
@commercetools-frontend/mc-scripts	Minor
@commercetools-frontend/notifications	Minor
@commercetools-frontend/permissions	Minor
@commercetools-frontend/react-notifications	Minor
@commercetools-frontend/sdk	Minor
@commercetools-frontend/sentry	Minor
@commercetools-frontend/url-utils	Minor
@commercetools-local/playground	Minor
@commercetools-local/visual-testing-app	Minor
@commercetools-website/components-playground	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

tdeekens

I can follow along in a reasonable level of detail.

.changeset/purple-panthers-attack.md

packages/codemod/README.md

tdeekens · 2024-12-17T14:17:42Z

packages/codemod/src/transforms/react-default-props-migration.ts

+        return <div>{prop1}</div>;
+      }
+    ```
+  */


Thanks for the comments!

tdeekens · 2024-12-17T14:18:47Z

packages/codemod/src/transforms/react-default-props-migration.ts

+        ...defaultPropsKeys.map((key) => {
+          const id = j.identifier(key);
+          const newProp = j.property('init', id, id);
+          newProp.shorthand = true;


Wasn't aware of this.

tdeekens · 2024-12-17T14:26:02Z

packages/codemod/src/transforms/react-default-props-migration.ts

+        // Default props can be defined inline or as a reference to another object
+        //  INLINE -- MyComponent.defaultProps: { prop1: 'value1', prop2: 'value2' }
+        //  REFERENCE -- MyComponent.defaultProps: defaultProps
+        if (defaultPropsNode.type === 'Identifier') {


Good point. Didn't think of this use case.

tdeekens · 2024-12-17T14:28:34Z

packages/codemod/src/transforms/react-default-props-migration.ts

+              );
+            }
+          }
+        }


I can follow along. Took me a while to realize - thanks to the comments - that we need to handle different ways in which React.FCs can be written.

Co-authored-by: Tobias Deekens <[email protected]>

ddouglasz

Thank you, especially for the step by step comments 🙌🏽

ddouglasz · 2024-12-17T18:20:36Z

packages/codemod/src/transforms/react-default-props-migration.ts

+              member.key.type === 'Identifier' &&
+              destructuredKeys.includes(member.key.name)
+            ) {
+              member.optional = true;


This is where we make the type member of the prop optional when it is part of the prop right ?

Yes. I need to add another comment.

ddouglasz · 2024-12-17T18:31:59Z

packages/codemod/src/transforms/react-default-props-migration.ts

+        updateComponentTypes({
+          j,
+          root,
+          typeName: `${componentName}Props`,


This is also something I noticed, if we build the typeName from this, sometimes, there are cases where the typeName is inconsistent and we end up having files with typeNames as just ${componentName} without the Props suffix.
This also would have to be updated manually for cases like these.

Yes, this relies on us using a consistent naming.
I think I can improve it further as a follow-up.

We can remove the suffix Props from the existing name to make sure we can append it. If the component name doesn't end up with Props, the replace doesn't do anything and we can still append the suffix correctly.

Suggested change

typeName: `${componentName}Props`,

typeName: `${componentName.replace(/(Props)$/, '')}Props`,

To be honest, I run this codemod on the 100+ component in the ui-kit repository and didn't find this problem so I would prefer to actually have a use case for changing it.

I've just realized I was wrong. I had to adjust some things manually in ui-kit but didn't think it was because of this.
However, I would like to do it as a follow-up in order to not expand the scope of this PR.

I would like to do it as a follow-up in order to not expand the scope of this PR

Do you mean adding .replace(/(Props)$/, '')? Or are you referring to other things?

I had a more elaborated idea in mind but I already implemented while I was waiting for the review.

Please take a look at this commit: 9af02f7

ddouglasz · 2024-12-17T18:34:09Z

packages/codemod/src/transforms/react-default-props-migration.ts

+      refactoredParameter.typeAnnotation = functionPropsParam.typeAnnotation;
+      break;
+    default:
+      console.warn(


emmenko

Thanks @CarlosCortizasCT ! 🙌

Could you write some tests for this new codemod? See test folder.

CarlosCortizasCT · 2024-12-18T12:59:59Z

Thanks @CarlosCortizasCT ! 🙌

Could you write some tests for this new codemod? See test folder.

@emmenko that's a legit request but the problem is that jscodeshift test utils are synchronous and the new codemod is asynchronous so it does not work.
I could not find a simple way to overcome this challenge and I don't think it makes sense to spend time writing a different set of utilities.

If you have any suggestion on how to easily implement the tests, please let me know.

emmenko · 2024-12-18T15:41:30Z

Ah ok, sorry I didn't know that it's an issue in the test if we use async.

Then it's fine as long as you are confident that it works as expected 🤗

…com/commercetools/merchant-center-application-kit into fec-138-react-default-props-codemod

CarlosCortizasCT · 2024-12-18T16:34:03Z

Ah ok, sorry I didn't know that it's an issue in the test if we use async.

Then it's fine as long as you are confident that it works as expected 🤗

So far I'm doing manual testing to verify everything works as expected so I'm pretty confident.

…com/commercetools/merchant-center-application-kit into fec-138-react-default-props-codemod

emmenko

💯

…nsformation

…refactor

CarlosCortizasCT added 3 commits December 16, 2024 18:14

feat(codemod): add codemod for migrating react components default props

b0f117d

refactor(codemod): component props refactoring

b0de760

refactor(codemod): first finished version of the default props migrat…

65f5140

…ion codemod

CarlosCortizasCT self-assigned this Dec 17, 2024

CarlosCortizasCT added the fe-chapter-rotation Tasks coming from frontend chapter work label Dec 17, 2024

CarlosCortizasCT added 2 commits December 17, 2024 13:52

chore: add changeset

0aa2d52

docs(codemod): updated readme to include the new codemod

f175ab1

CarlosCortizasCT requested review from a team, ddouglasz and tdeekens December 17, 2024 12:54

vercel bot deployed to Preview – merchant-center-application-kit-components-playground December 17, 2024 12:54 View deployment

vercel bot deployed to Preview – mc-app-kit-playground December 17, 2024 12:55 View deployment

CarlosCortizasCT mentioned this pull request Dec 17, 2024

chore(uikit default props codemod): codemod to refactor default props in uikit as a preparation for react 18 migration. commercetools/ui-kit#3017

Closed

1 task

CarlosCortizasCT marked this pull request as ready for review December 17, 2024 12:57

CarlosCortizasCT requested a review from a team as a code owner December 17, 2024 12:57

tdeekens approved these changes Dec 17, 2024

View reviewed changes

CarlosCortizasCT and others added 2 commits December 17, 2024 15:37

chore: update changeset

f369650

Co-authored-by: Tobias Deekens <[email protected]>

chore: update changeset

7ea8b6e

Co-authored-by: Tobias Deekens <[email protected]>

vercel bot deployed to Preview – merchant-center-application-kit-components-playground December 17, 2024 14:40 View deployment

vercel bot deployed to Preview – mc-app-kit-playground December 17, 2024 14:41 View deployment

CarlosCortizasCT mentioned this pull request Dec 17, 2024

Migrate components default props usage commercetools/ui-kit#3027

Merged

ddouglasz approved these changes Dec 17, 2024

View reviewed changes

CarlosCortizasCT mentioned this pull request Dec 18, 2024

Refactor default props in preparations for react v8 migration commercetools/ui-kit#3016

Closed

emmenko reviewed Dec 18, 2024

View reviewed changes

CarlosCortizasCT added 2 commits December 18, 2024 17:31

refactor(codemod): add better component props ts type resolution

9af02f7

Merge branch 'fec-138-react-default-props-codemod' of https://github.…

fa1287d

…com/commercetools/merchant-center-application-kit into fec-138-react-default-props-codemod

vercel bot deployed to Preview – merchant-center-application-kit-components-playground December 18, 2024 16:34 View deployment

vercel bot deployed to Preview – mc-app-kit-playground December 18, 2024 16:34 View deployment

CarlosCortizasCT added 2 commits December 18, 2024 17:44

Merge branch 'fec-138-react-default-props-codemod' of https://github.…

db11065

…com/commercetools/merchant-center-application-kit into fec-138-react-default-props-codemod

Merge branch 'fec-138-react-default-props-codemod' of https://github.…

858670e

…com/commercetools/merchant-center-application-kit into fec-138-react-default-props-codemod

vercel bot deployed to Preview – merchant-center-application-kit-components-playground December 18, 2024 16:46 View deployment

vercel bot deployed to Preview – mc-app-kit-playground December 18, 2024 16:46 View deployment

emmenko approved these changes Dec 18, 2024

View reviewed changes

refactor(codemod): improve component default props extraction and tra…

6c9dd40

…nsformation

vercel bot deployed to Preview – merchant-center-application-kit-components-playground December 18, 2024 17:36 View deployment

vercel bot deployed to Preview – mc-app-kit-playground December 18, 2024 17:37 View deployment

refactor(codemod): improve default props transformation and substitution

b31912f

vercel bot deployed to Preview – merchant-center-application-kit-components-playground December 19, 2024 10:18 View deployment

vercel bot deployed to Preview – mc-app-kit-playground December 19, 2024 10:19 View deployment

CarlosCortizasCT added 2 commits December 19, 2024 16:24

refactor(codemod): improve components body adjustments and signature …

9fb1ef9

…refactor

fix(codemod): fix cli ignore patterns

4df345c

vercel bot deployed to Preview – merchant-center-application-kit-components-playground December 19, 2024 15:50 View deployment

vercel bot deployed to Preview – mc-app-kit-playground December 19, 2024 15:52 View deployment

CarlosCortizasCT merged commit 1e9e84a into main Dec 20, 2024
17 checks passed

CarlosCortizasCT deleted the fec-138-react-default-props-codemod branch December 20, 2024 10:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New codemod to help migrating React components "defaultProps" usage #3681

New codemod to help migrating React components "defaultProps" usage #3681

CarlosCortizasCT commented Dec 17, 2024 •

edited

Loading

vercel bot commented Dec 17, 2024 •

edited

Loading

changeset-bot bot commented Dec 17, 2024 •

edited

Loading

tdeekens left a comment

tdeekens Dec 17, 2024

tdeekens Dec 17, 2024

tdeekens Dec 17, 2024

tdeekens Dec 17, 2024

ddouglasz left a comment

ddouglasz Dec 17, 2024

CarlosCortizasCT Dec 18, 2024

ddouglasz Dec 17, 2024

CarlosCortizasCT Dec 18, 2024

emmenko Dec 18, 2024 •

edited

Loading

CarlosCortizasCT Dec 18, 2024

CarlosCortizasCT Dec 18, 2024

emmenko Dec 18, 2024

CarlosCortizasCT Dec 18, 2024

ddouglasz Dec 17, 2024

emmenko left a comment

CarlosCortizasCT commented Dec 18, 2024

emmenko commented Dec 18, 2024

CarlosCortizasCT commented Dec 18, 2024

emmenko left a comment

	typeName: `${componentName}Props`,
	typeName: `${componentName.replace(/(Props)$/, '')}Props`,

New codemod to help migrating React components "defaultProps" usage #3681

New codemod to help migrating React components "defaultProps" usage #3681

Conversation

CarlosCortizasCT commented Dec 17, 2024 • edited Loading

Summary

Description

NOTE

vercel bot commented Dec 17, 2024 • edited Loading

changeset-bot bot commented Dec 17, 2024 • edited Loading

🦋 Changeset detected

tdeekens left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ddouglasz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emmenko Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emmenko left a comment

Choose a reason for hiding this comment

CarlosCortizasCT commented Dec 18, 2024

emmenko commented Dec 18, 2024

CarlosCortizasCT commented Dec 18, 2024

emmenko left a comment

Choose a reason for hiding this comment

CarlosCortizasCT commented Dec 17, 2024 •

edited

Loading

vercel bot commented Dec 17, 2024 •

edited

Loading

changeset-bot bot commented Dec 17, 2024 •

edited

Loading

emmenko Dec 18, 2024 •

edited

Loading