@monteway/codeshift

@monteway/codeshift

Internal jscodeshift helpers used in @monteway/app for easier codemod implementation.

Install

npm i -D @monteway/codeshift

Usage

appendImports

Adds new import inside imports group. You can specify where the import should go, by selecting an existing import inside source file and set if the new one should go before of after it.

1. Let's have index.tsx file with following content:

   import ReactDOM from 'react-dom';
   
   // some more content that is irrelevant
   

2. Now write a codemod file codeshift.mjs that will be run using jscodeshift.
   In this example we want to add a React default import before react-dom import.

   import { appendImports } from '@monteway/codeshift';
   
   export default function codemod(file, api, options) {
     const jscodeshift = api.jscodeshift;
   
     let source = jscodeshift(file.source);
   
     source = appendImports(
       jscodeshift,
       source,
       'BEFORE_FIRST',
       /^react-dom$/,
       `import React from 'react';`,
     );
   
     return source.toSource();
   }
   

3. The output of running codeshift.mjs for index.tsx content would be:

   + import React from 'react';
   import ReactDOM from 'react-dom';
   
   // some more content that is irrelevant
   

wrapDefaultExport

Finds a default export and wraps it with a call experssion.

1. Let's have a index.tsx file with the following content:

   import React from 'react';
   
   function Component() {
     return <>Hello, world!</>;
   }
   
   export default Component;
   

2. Now write a codemod file codeshift.mjs that will be run using jscodeshift.
   In this example we want to wrap the Component with memo.

   import { wrapDefaultExport } from '@monteway/codeshift';
   
   export default function codemod(file, api, options) {
     const jscodeshift = api.jscodeshift;
   
     let source = jscodeshift(file.source);
   
     source = wrapDefaultExport(jscodeshift, source, 'memo');
   
     return source.toSource();
   }
   

3. The output of running codeshift.mjs for index.tsx content would be:

   import React from 'react';
   
   function Component() {
     return <>Hello, world!</>;
   }
   
   - export default Component;
   + export default memo(Component);
   

   Notice that for this code to run we would need to add import for memo. We could solve it by using React.memo instead of memo, since React is already imported, but right now, the wrapDefaultExport does not accept anything other than identifier node, so we could not use React.memo, since this a member experssion, not an identifier.