Code Modificators

Code modificators are scripts that traverse javascript files and can modify it's contents programatically.

Babel Plugins

path.get('body')

t.cloneNode(path.node)

const ast = template('<Form/>', { plugins: ['jsx'] })()

• html to jsx which uses h2x jsx plugin
• svg to react

JSCodeshift

JSCodeShift is a code modificator tool that wraps Recast with a JQuery-like API.

It works by reading the javascript file text as input to turn it into AST (Abstract Syntax Trees)

An identifier to JSCodeShift is like a selector to CSS

Note: pascal case version of node type Identifier is used for checking the type of the node and camel case version of node type identifier is used to create a node of that type.

Reference

• app.jscodeshift API
• toSource options
• ast-types examples

To create an abstract tree run app.jscodeshift(file.source)

Tools

• ASTExplorer to explore the AST of any code snippet

tutorials

• How to write codemods