---
title: JavaScript Codemods. Recursos y ejemplos
tags: javascript, codemods, ast
lang: es
---

# Codemods

- [jscodeshift](https://github.com/facebook/jscodeshift)
- [API](https://hackmd.io/@yQp_d2iwRF25H5YTCeWj0w/Hy8FL6IWZ?type=view#jscodeshift-In-Depth)
- [AST Explorer](http://astexplorer.net/)
- [React Codemods (ejemplos)](https://github.com/reactjs/react-codemod)
- [Tutorial](https://www.toptal.com/javascript/write-code-to-rewrite-your-code)
- [Slides charla MadridJS](https://speakerdeck.com/sanguino/fearless-refactors-con-ast)

## Uso

1. Instalar `jscodeshift` globalmente (`npm i -g jscodeshift`)
2. Ejecutar el codemod sobre el o los archivos que se quieren transformar. Podemos usar globs.

Ejemplo sobre un archivo:

    jscodeshift ./dist/assets/bundled.js -t my-codemod.js

Ejemplo sobre directorios:

    jscodeshift ./components/prefix-*/*.js -t my-codemod.js

## Ejemplos

Reemplaza todos los parámetros llamados `Element` por `PolymerElement`:

export default function(file, api) {
  const j = api.jscodeshift;

  return j(file.source)
    .find(j.VariableDeclarator, {
      id: {
        type: 'Identifier',
        name: 'Element',
      },
    })
    .replaceWith(nodePath => {
      const { node } = nodePath;
      node.id.name = 'PolymerElement';
      return node;
    })
    .toSource();
}

Reemplaza el primer bloque encontrado (`{// code}`) por una IIFE:

export default function(file, api) {
  const j = api.jscodeshift;

  return j(file.source)
    .find(j.BlockStatement)
    .at(0)
    .replaceWith(nodePath => {
      const nodeValue = nodePath.value;

      return j.expressionStatement(
        j.callExpression(
          j.functionExpression(null, [], j.blockStatement(nodeValue.body)),
          []
        )
      );
    })
    .toSource();
}