Add codemods: CommonJS -> ES2015 module

[jsnmoon]

Part of #11688.

This change adds executable codemod scripts to bin/ and bin/codemods. The intent is to have these executables be available for Calypso contributors who are working on migrating CJS modules to ES modules. Each script in bin/codemods/ are individually executable.

Todo:

• Await merge & publish of Transform called CommonJS imports 5to6/5to6-codemod#40 (1).
• Fork 5to6-codemod for internal use
• Add import hoisting script
• Fix errors for name export generation codemod
• Fix errors for import codemod
• Enable useTabs and arrayBracketSpacing Recast option flags
• Thoroughly test codemods on all *.js and *.jsx files in client/

Caveats:

• recast improperly handles tabs (recast #185 and #315)
• recast adds unnecessary newline between first and second import statements (recast #371)

[ehg]

We should pin these versions.

[jsnmoon]

Done!

[ehg]

Nice work. Pleased to see this coming together!

[ockham]

I've just ran bin/codemods/commonjs-imports on client/my-sites/pages/. It looks like the codemod doesn't respect the External / Internal dependencies comment blocks; all but one import end up above the corresponding comment block, and only the last one stays below.

Like so:

diff --git a/client/my-sites/pages/page-list.jsx b/client/my-sites/pages/page-list.jsx
index 81b1424..59ae927 100644
--- a/client/my-sites/pages/page-list.jsx
+++ b/client/my-sites/pages/page-list.jsx
@@ -1,22 +1,24 @@
+import React from 'react';
+import PureRenderMixin from 'react-pure-render/mixin';
+
 /**
  * External dependencies
  */
-var React = require( 'react' ),
-       PureRenderMixin = require( 'react-pure-render/mixin' ),
-       omit = require( 'lodash/omit' );
+import omit from 'lodash/omit';
+
+import PostListFetcher from 'components/post-list-fetcher';
+import Page from './page';
+import infiniteScroll from 'lib/mixins/infinite-scroll';
+import observe from 'lib/mixins/data-observe';
+import EmptyContent from 'components/empty-content';
+import NoResults from 'my-sites/no-results';
+import actions from 'lib/posts/actions';
+import Placeholder from './placeholder';
 
 /**
  * Internal dependencies
  */
-var PostListFetcher = require( 'components/post-list-fetcher' ),
-       Page = require( './page' ),
-       infiniteScroll = require( 'lib/mixins/infinite-scroll' ),
-       observe = require( 'lib/mixins/data-observe' ),
-       EmptyContent = require( 'components/empty-content' ),
-       NoResults = require( 'my-sites/no-results' ),
-       actions = require( 'lib/posts/actions' ),
-       Placeholder = require( './placeholder' ),
-       mapStatus = require( 'lib/route' ).mapPostStatus;
+import { mapPostStatus as mapStatus } from 'lib/route';

[jsnmoon]

@ockham Ah, I'll look into this.

Edit: I opened a PR that fixes this issue.

[jsnmoon]

Hi @ockham, I updated this branch to use my forked 5to6-codemods which includes the most up-to-date fixes for the import transformation. Let me know if the fixes are to your liking!

[ockham]

That's a lot better, they're below the corresponding comment block now. There's still a funny newline after the first import of each block (is that related to the insertAfter bug?)

diff --git a/client/my-sites/pages/page-list.jsx b/client/my-sites/pages/page-list.jsx
index 81b1424..93a46ac 100644
--- a/client/my-sites/pages/page-list.jsx
+++ b/client/my-sites/pages/page-list.jsx
@@ -1,22 +1,24 @@
 /**
  * External dependencies
  */
-var React = require( 'react' ),
-       PureRenderMixin = require( 'react-pure-render/mixin' ),
-       omit = require( 'lodash/omit' );
+import React from 'react';
+
+import PureRenderMixin from 'react-pure-render/mixin';
+import omit from 'lodash/omit';
 
 /**
  * Internal dependencies
  */
-var PostListFetcher = require( 'components/post-list-fetcher' ),
-       Page = require( './page' ),
-       infiniteScroll = require( 'lib/mixins/infinite-scroll' ),
-       observe = require( 'lib/mixins/data-observe' ),
-       EmptyContent = require( 'components/empty-content' ),
-       NoResults = require( 'my-sites/no-results' ),
-       actions = require( 'lib/posts/actions' ),
-       Placeholder = require( './placeholder' ),
-       mapStatus = require( 'lib/route' ).mapPostStatus;
+import PostListFetcher from 'components/post-list-fetcher';
+
+import Page from './page';
+import infiniteScroll from 'lib/mixins/infinite-scroll';
+import observe from 'lib/mixins/data-observe';
+import EmptyContent from 'components/empty-content';
+import NoResults from 'my-sites/no-results';
+import actions from 'lib/posts/actions';
+import Placeholder from './placeholder';
+import { mapPostStatus as mapStatus } from 'lib/route';
 
 import BlogPostsPage from './blog-posts-page';

[jsnmoon]

Yup, that's definitely the same bug :)

[ehg]

Added run-codemods!

Cool, could we split this up into a separate PR, and at least have the import and export mods available to use manually?

[jsnmoon]

@ehg: You got it! I'll split out run-codemods into a separate PR.

EDIT: #13163 has been opened for run-codemods script.

[ehg]

You got it! I'll split out run-codemods into a separate PR.

Great! Thanks. I'll merge this, and we'll test them out :)