Add codemods: React.js #13070

jsnmoon · 2017-04-12T23:01:29Z

Part of #11688.

This change adds codemods in bin/codemods for porting legacy React.js code.

react-create-class: Safely replaces React.createClass with React.Component or createReactClass from 'create-react-class'. (source)
react-prop-types: Replaces React.PropTypes with prop-types; applicable for React 15.5+ where React.PropTypes has been extracted to a separate package. (source)

Please note that this currently uses by personal fork with couple of bug fixes on top of react-codemod. The following PRs have been filed upstream:

Todo:

Fix class codemod bug erroring out on trailing comma (see this issue)
Thoroughly test class codemod on client/
Resolve issues with class codemod (Most pressing issue has been resolved
Thoroughly test prop-types codemod on client/

Issues:

react-create-class codemod
- Incorrect removes react import for JSX files when falling back to createClass import
  - ex. client/post-editor/media-modal/gallery/preview-shortcode.jsx (react import unnecessarily removed)
  - ex. client/post-editor/editor-ground-control/index.jsx (multiple imports are removed)
  - ex. client/my-sites/themes/thanks-modal.jsx (malformed import after transform)
- Does not assign a class name if React.createClass was directly exported
  - Noted - not significant enough to block merge
  - ex. client/post-editor/media-modal/gallery/remove-button.jsx
- Favors CommonJS import notation if the file contains any CommonJS imports
  - Noted - not significant enough to block merge
  - ex. client/post-editor/post-editor.jsx

ockham · 2017-04-27T16:42:13Z

react-create-class: Safely replaces React.createClass with React.Component or createReactClass from 'create-react-class'. (source)

How well does this work? Last time I tried it on the Calypso root dir I think it only changed some 4 components or so. (I'm speculating it might be due to our use of this.translate(), but I'm not sure.)

jsnmoon · 2017-05-10T04:09:41Z

@ockham: I was under the impression it worked pretty reliably from my initial testing. To verify, I ran the create-class codemod on client/ today and here are the results:

Successfully processed: 699 files
- Many cases of React.createClass were converted into classes extended from React.Component.
- Many cases of React.createClass were converted into createClass imported from createReactClass package. These usually occur due to use of mixins other than PureRenderMixin or use of deprecated React API calls like getDOMNode, isMounted, replaceProps, replaceState, or setProps.
Errored out: 39 files
- I'm individually investigating these errors, but it'll take me some time to figure out exactly why these are happening - will update in the future.

Here are some issues I discovered from the successfully processed files:

The codemod does not assign a class name if React.createClass was directly exported
- export default React.createClass( ... ) becomes export default class extends React.Component { ... }
The codemod seems to favor CommonJS import notation if the file contains any CommonJS imports.
If a react import is done with declarator siblings in CommonJS notation, the codemod sometimes erroneously removes the entire import declaration.
- My hunch is that the codemod doesn't properly handle CommonJS imports with sibling declarators. This issue can be skirted by converting these to ES module imports and then running the react-create-class codemod.

ockham · 2017-05-17T17:25:46Z

bin/codemods/react-prop-types

@@ -0,0 +1,41 @@
+#!/usr/bin/env node


This file seems to be missing the executable bit currently.

gwwar · 2017-05-20T00:06:28Z

package.json

@@ -184,6 +184,7 @@
    "nock": "8.0.0",
    "nodemon": "1.4.1",
    "react-addons-test-utils": "15.4.0",
+    "react-codemod": "github:reactjs/react-codemod#d6563d9",


Is there not a published version of this? Otherwise, github links can be shorter:
reactjs/react-codemod#d6563d9

https://docs.npmjs.com/files/package.json#github-urls

There doesn't seem to be an npm AFAICS. FWIW, I added the devDep without SHA stamp (thus tracking master) a while back.

@gwwar Unfortunately, react-codemod isn't published on npm nor are releases properly tagged on their git repo, so I'll go ahead and shorten this dependency to your suggestion!

jsnmoon · 2017-06-12T20:58:55Z

Rebased off of master and changed the react-codemod dependency to point at my personal fork containing bug fixes relevant to Calypso.

matticbot · 2017-06-14T19:59:36Z

@jsnmoon This PR needs a rebase

matticbot · 2017-06-27T07:50:07Z

@jsnmoon This PR needs a rebase

ockham · 2017-07-16T11:24:17Z

Rebased, and re-shrunk. This has been lingering for a while, so I think it'd be good to get it in soonish.

Rebased off of master and changed the react-codemod dependency to point at my personal fork containing bug fixes relevant to Calypso.

Is this stuff going to be/has been fixed upstream? If so, it'd be obviously nice to continue to use upstream. Anyway, it'd be cool if you could link to upstream PRs from here so we can keep track.

One more bit of feedback: Since this PR contains a codemod to use the new standalone prop-types npm, I think we should add it to package.json.

ockham · 2017-07-16T11:29:27Z

One more bit of feedback: Since this PR contains a codemod to use the new standalone prop-types npm, I think we should add it to package.json.

Oh, same for create-react-class.

jsnmoon · 2017-07-17T17:01:06Z

Is this stuff going to be/has been fixed upstream? If so, it'd be obviously nice to continue to use upstream. Anyway, it'd be cool if you could link to upstream PRs from here so we can keep track.

Good point! I have reactjs/react-codemod#122, reactjs/react-codemod#132, reactjs/react-codemod#156, and reactjs/react-codemod#157 open right now. Adding this to the original PR.

Unfortunately, I'm not sure if my PRs will ever land given that they've just been... sitting there in the repo.

jsnmoon · 2017-07-17T17:24:53Z

One more bit of feedback: Since this PR contains a codemod to use the new standalone prop-types npm, I think we should add it to package.json.

Oh, same for create-react-class.

Done! create-react-class already existed as a dependency, so I went ahead and updated it to the latest version for good measure.

Rebased and re-wrapped. I'll aim to land this sometime this/next week!

ockham · 2017-07-21T16:10:10Z

Re-based and re-shrunk one last time. As discussed with @jsnmoon in Slack, I'm going to merge this on his behalf!

jsnmoon · 2017-07-21T16:22:41Z

Thanks so much @ockham! :)

jsnmoon added Framework [Status] In Progress labels Apr 12, 2017

jsnmoon self-assigned this Apr 12, 2017

matticbot added OSS Citizen [Size] M Medium sized issue labels Apr 12, 2017

jsnmoon changed the title ~~Add codemods: React.js migration~~ Add codemods: React.js Apr 12, 2017

jsnmoon changed the base branch from master to add/cjs-to-es2015-modules-transform April 13, 2017 01:30

jsnmoon force-pushed the add/react-codemods branch from db01e2f to e2c6648 Compare April 13, 2017 01:30

matticbot added [Size] XL Probably needs to be broken down into multiple smaller issues and removed [Size] M Medium sized issue labels Apr 13, 2017

jsnmoon force-pushed the add/react-codemods branch from e2c6648 to e9f7b27 Compare April 13, 2017 01:33

matticbot added [Size] L Large sized issue and removed [Size] XL Probably needs to be broken down into multiple smaller issues labels Apr 13, 2017

jsnmoon force-pushed the add/cjs-to-es2015-modules-transform branch from 1137323 to 040d869 Compare April 17, 2017 23:46

jsnmoon mentioned this pull request Apr 18, 2017

Migrate CommonJS to ES2015 module notation (imports and exports) #11688

Closed

11 tasks

jsnmoon changed the base branch from add/cjs-to-es2015-modules-transform to master April 19, 2017 21:38

jsnmoon force-pushed the add/react-codemods branch from fa3640b to 7e7f003 Compare April 19, 2017 21:39

matticbot added [Size] XL Probably needs to be broken down into multiple smaller issues and removed [Size] L Large sized issue labels Apr 19, 2017

jsnmoon removed the [Size] XL Probably needs to be broken down into multiple smaller issues label Apr 19, 2017

jsnmoon mentioned this pull request Apr 22, 2017

React 15.6 migration #13321

Closed

jsnmoon force-pushed the add/react-codemods branch from 7e7f003 to 185d872 Compare May 10, 2017 04:27

matticbot added the [Size] XL Probably needs to be broken down into multiple smaller issues label May 10, 2017

ockham reviewed May 17, 2017

View reviewed changes

gwwar reviewed May 20, 2017

View reviewed changes

jsnmoon force-pushed the add/react-codemods branch from 89a0a74 to b2aab6e Compare May 24, 2017 19:05

jsnmoon force-pushed the add/react-codemods branch from b2aab6e to 8d0c017 Compare June 2, 2017 21:49

matticbot removed the [Size] XL Probably needs to be broken down into multiple smaller issues label Jun 2, 2017

matticbot added [Size] XL Probably needs to be broken down into multiple smaller issues and removed [Size] L Large sized issue labels Jun 12, 2017

matticbot added the [Status] Needs Rebase label Jun 14, 2017

jsnmoon force-pushed the add/react-codemods branch from 5555921 to 8cebbca Compare June 22, 2017 15:17

jsnmoon removed the [Status] Needs Rebase label Jun 22, 2017

matticbot added the [Status] Needs Rebase label Jun 27, 2017

ockham force-pushed the add/react-codemods branch from 8cebbca to 33c96eb Compare July 16, 2017 11:22

matticbot added [Size] L Large sized issue and removed [Size] XL Probably needs to be broken down into multiple smaller issues labels Jul 16, 2017

jsnmoon force-pushed the add/react-codemods branch from 33c96eb to 41b634f Compare July 17, 2017 17:24

jsnmoon added 5 commits July 21, 2017 18:04

Framework: Add react codemod dependencies

acb3086

Framework: Add react codemod configs

ed513c9

Framework: Add react-create-class codemod

83968b6

Framework: Add react-prop-types codemod

400fea8

Update shrinkwrap

8c187b4

ockham force-pushed the add/react-codemods branch from 41b634f to 8c187b4 Compare July 21, 2017 16:09

ockham merged commit 3adac11 into master Jul 21, 2017

ockham deleted the add/react-codemods branch July 21, 2017 16:23

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 21, 2017

ockham mentioned this pull request Aug 4, 2017

Framework: Use upstream react-codemod #16928

Merged

psealock mentioned this pull request Sep 6, 2017

Codemod client/blocks #17781

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add codemods: React.js #13070

Add codemods: React.js #13070

jsnmoon commented Apr 12, 2017 •

edited

Loading

ockham commented Apr 27, 2017

jsnmoon commented May 10, 2017 •

edited

Loading

ockham May 17, 2017

jsnmoon May 17, 2017

gwwar May 20, 2017

ockham May 23, 2017

jsnmoon May 24, 2017

jsnmoon commented Jun 12, 2017 •

edited

Loading

matticbot commented Jun 14, 2017

matticbot commented Jun 27, 2017

ockham commented Jul 16, 2017

ockham commented Jul 16, 2017

jsnmoon commented Jul 17, 2017 •

edited

Loading

jsnmoon commented Jul 17, 2017

ockham commented Jul 21, 2017

jsnmoon commented Jul 21, 2017

Add codemods: React.js #13070

Add codemods: React.js #13070

Conversation

jsnmoon commented Apr 12, 2017 • edited Loading

ockham commented Apr 27, 2017

jsnmoon commented May 10, 2017 • edited Loading

ockham May 17, 2017

Choose a reason for hiding this comment

jsnmoon May 17, 2017

Choose a reason for hiding this comment

gwwar May 20, 2017

Choose a reason for hiding this comment

ockham May 23, 2017

Choose a reason for hiding this comment

jsnmoon May 24, 2017

Choose a reason for hiding this comment

jsnmoon commented Jun 12, 2017 • edited Loading

matticbot commented Jun 14, 2017

matticbot commented Jun 27, 2017

ockham commented Jul 16, 2017

ockham commented Jul 16, 2017

jsnmoon commented Jul 17, 2017 • edited Loading

jsnmoon commented Jul 17, 2017

ockham commented Jul 21, 2017

jsnmoon commented Jul 21, 2017

jsnmoon commented Apr 12, 2017 •

edited

Loading

jsnmoon commented May 10, 2017 •

edited

Loading

jsnmoon commented Jun 12, 2017 •

edited

Loading

jsnmoon commented Jul 17, 2017 •

edited

Loading