My first codemod!

README.md

My first codemod!

This code is based on another codebase. I was just wanting to join the string template with the variable tip and I ended up finding it. Are almost the same, but it made me understand a lot about codemod.

content that helped me better understand about codemod

• Large Scale Refactoring with Codemods - London Node User Group - November 2018
• Ast Explorer
• jscodeshift Docs

source.ts

/**
 * Paste or drop some JavaScript here and explore
 * the syntax tree created by chosen parser.
 * You can use all the cool new features from ES6
 * and even more. Enjoy!
 */

const name = 1
const description = 'Yo ' + name + '! How are you doing?'  

let tips = [
  "Click on any AST node with a '+' to expand it",

  "Hovering over a node highlights the \
   corresponding location in the source code",

  "Shift click on an AST node to expand the whole subtree"
];

function printTips() {
  tips.forEach((tip, i) => console.log(`Tip ${i}:` + tip));
}

target.ts

/**
 * Paste or drop some JavaScript here and explore
 * the syntax tree created by chosen parser.
 * You can use all the cool new features from ES6
 * and even more. Enjoy!
 */

const name = 1
const description = `Yo ${name}! How are you doing?`  

let tips = [
  "Click on any AST node with a '+' to expand it",

  "Hovering over a node highlights the \
   corresponding location in the source code",

  "Shift click on an AST node to expand the whole subtree"
];

function printTips() {
  tips.forEach((tip, i) => console.log(`Tip ${i}:${tip}`));
}

transformer.ts

// jscodeshift can take a parser, like "babel", "babylon", "flow", "ts", or "tsx"
// Read more: https://github.com/facebook/jscodeshift#parser
export const parser = "tsx";

function flatten(node) {
  var isBE = node.type === "BinaryExpression";
  var isPLUS = node.operator === "+";
  return isBE && isPLUS
    ? [...flatten(node.left), ...flatten(node.right)]
    : [node];
}

// Press ctrl+space for code completion
export default function transformer(file, api) {
  const j = api.jscodeshift;

  return j(file.source)
    .find(j.BinaryExpression, { operator: "+" })
    .replaceWith((path) => {
      const nodes = flatten(path.node);
      const exps = [];
      const quasis = [];

      let lastStr = "";
      for (const i in nodes) {
        const node = nodes[i];

        switch (node.type) {
          case "TemplateLiteral": {
            quasis.push(...node.quasis);
            exps.push(...node.expressions);
            break;
          }
          case "StringLiteral": {
            lastStr += node.value;
            break;
          }
          case "Identifier": {
            const value = { cooked: lastStr, raw: lastStr };
            quasis.push(j.templateElement(value, false));
            exps.push(node);
            lastStr = "";
          }
        }
      }

      const value = { cooked: lastStr, raw: lastStr };
      quasis.push(j.templateElement(value, true));

      return j.templateLiteral(quasis, exps);
    })
    .toSource();
}