Out of the box JSX/react support?

[dptoot]

Great utility. I am was able to generate a package and have some initial working codemods but as soon as there is a test file with a react element then there is an error thrown. Is there JSX support out of the box or do I need to do something to enable?

component,input.js

import React from 'react';
import { foo } from 'test-package';

export default function TestComponent() {
    return (
        <span>test</span>
    );
}

Error:

SyntaxError: Unterminated regular expression (6:20)

      at Object._raise (node_modules/@babel/parser/src/parser/error.js:60:45)
      at Object.raiseWithData (node_modules/@babel/parser/src/parser/error.js:55:17)
      at Object.raise (node_modules/@babel/parser/src/parser/error.js:39:17)
      at Object.readRegexp (node_modules/@babel/parser/src/tokenizer/index.js:932:20)
      at Object.readToken_slash (node_modules/@babel/parser/src/tokenizer/index.js:469:12)
      at Object.getTokenFromCode (node_modules/@babel/parser/src/tokenizer/index.js:854:14)
      at Object.getTokenFromCode (node_modules/@babel/parser/src/plugins/typescript/index.js:2700:22)
      at Object.nextToken (node_modules/@babel/parser/src/tokenizer/index.js:247:12)
      at Object.next (node_modules/@babel/parser/src/tokenizer/index.js:158:10)
      at Object.parseExprOp (node_modules/@babel/parser/src/parser/expression.js:406:14)

[dptoot]

Any advice on this? Sorry to bug but I would love to use this package but this issue is leaving me dead in the water.

[rwjblue]

@dptoot - Can you make a small demo repo that I could poke at?

I think in general, we need to update the parser to use your own .babelrc / babel.config.js files, at which point (I think) the files should be loadable without issue.

[dptoot]

Absolutely! let me get that to you.

[dptoot]

@rwjblue here is an example repo. I have 1 transform that should just change the import name

https://github.com/dptoot/codemod-cli-react-example

[dptoot]

@rwjblue Honestly... hacking at the source code I can get this to work by changing

https://github.com/rwjblue/codemod-cli/blob/master/src/transform-support.js#L15

// from 
let parser = require('recast/parsers/typescript');
// to
let parser = require('recast/parsers/babel');

I think there just needs to be a way to let the user specify which recast parser to use. I couldn't see anyway in the documentation and this line looks as though it defaults it to typescript.

[dptoot]

ok further update...

I can get JSX to parse by not using the parser update method used in the cli generated transform file .

// cli generated doesn't work with JSX
const j = getParser(api);

// works with JSX (as babel is default)
const j = api.jscodeshift;

should the getParser method accept a parser type? That would make sense to me to allow you to easily switch any of the recast parsers? Or maybe even a custom parser?

https://github.com/benjamn/recast/tree/master/parsers

[dptoot]

Something like

function getJSCodeshiftParser(api, parserType = 'typescript') {
  try {
    let parser = require(`recast/parsers/${parserType}`);

    return api.jscodeshift.withParser(parser);
  } catch (e) {
    // eslint-disable-next-line
    console.log(
      'could not load typescript aware parser, falling back to standard recast parser...'
    );

    return api.jscodeshift;
  }
}

[rwjblue]

Ya, I think we should make getParser a bit smarter. If the project has a babel config, we should use it to get the parser setup. I think this would make it nicely handle both the TypeScript and custom babel plugin configuration (e.g. JSX).

[dptoot]

that would be awesome. I would love to have the cli auto detect and save me from updating each generated file