transformer.md

Transformer script

Convert all the functions expressions into arrow functions in your project

• Save this js file to ~/.scripts/transformer.js or somewhere you want

const transformer = (file, api) => {
  const j = api.jscodeshift;
  const root = j(file.source);

  root.find(j.FunctionDeclaration).replaceWith(path => {
    const { node } = path;

    if (node.generator || node.async) return node;

    return j.variableDeclaration('const', [
      j.variableDeclarator(
        j.identifier(node.id.name),
        j.arrowFunctionExpression(node.params, node.body, false)
      )
    ]);
  });

  root.find(j.FunctionExpression).replaceWith(path => {
    const { node } = path;

    if (node.generator || node.async) return node;

    return j.arrowFunctionExpression(node.params, node.body, false);
  });

  root.find(j.ArrowFunctionExpression).forEach(path => {
    const { node } = path;

    if (
      j.BlockStatement.check(node.body) &&
      node.body.body.length === 1 &&
      j.ReturnStatement.check(node.body.body[0]) &&
      node.body.body[0].argument
    ) {
      node.body = node.body.body[0].argument;
      node.expression = true;
    }
  });

  return root.toSource({
    quote: 'single',
    trailingComma: false
  });
};

export default transformer;

Instructions

1. cd into your project you want to transform functions syntax
2. in your project folder run this command npx jscodeshift -t ~/.scripts/transform.js --parser=tsx --extensions=ts,tsx src/
3. boom, all the function expressions inside your src folder converted to arrow functions, I use this to convert shadcn components to arrow functions after installing them via cli on new projects