# jscodeshift ## How to efficiently convert a codebase from one to another ? --- ## API 1 ```js
Delete
``` ## API 2 ```js
``` --- class: center, middle
--- ## [AST] : abstract syntax tree `
` ```yaml --- expression: type: JSXElement openingElement: attributes: - type: JSXAttribute value: type: Literal value: reset name: type: JSXIdentifier name: type selfClosing: false type: JSXOpeningElement name: type: JSXIdentifier name: Button closingElement: type: JSXClosingElement name: type: JSXIdentifier name: Button type: ExpressionStatement ``` --- ## [recast] recAST > to give (a metal object) a different form by melting it down and reshaping it. - 1. Parse - 2. Transform - 3. Print - Tries to preserve the style of original code as much as possible --- ```yaml --- type: ExpressionStatement expression: type: JSXElement openingElement: type: JSXOpeningElement name: type: JSXIdentifier name: Button range: - 1 - 7 loc: start: line: 1 column: 1 end: line: 1 column: 7 lines: length: 1 name: indent: 0 ``` --- ## [jscodeshift] - Wrapper on recast - Runner --- ### Finding elements ```jsx const buttons = root.find(j.JSXElement, { openingElement: { name: { name: "Button" } } })` ``` ### Creating new elements ```jsx new j.literal('Hello') // "Hello" new j.jsxAttribute( new j.jsxIdentifier('icon') new j.jsxExpressionContainer( new j.jsxIdentifier('myIcon') ) ) -> icon={myIcon} ... ``` ### Updating elements const update = path => { path.node.openingElement.name.name = "Button 2" } // find and update all merge calls const buttons = root.find(j.JSXElement, { openingElement: {name: {name: 'Button'}}}) buttons.forEach(update); --- ### [AST Explorer] --- ### CLI ```bash $ find . | grep '.jsx$' | xargs jscodeshift --parser babel -t ~/code/codeshifts/button-api.js Processing 52 files... Spawning 3 workers... Sending 18 files to free worker... Sending 18 files to free worker... Sending 16 files to free worker... Not a simple button, cannot automatically migrate
{t('Groups.save')} {saving &&
}
All done. Results: 0 errors 44 unmodified 0 skipped 8 ok Time elapsed: 1.864seconds ``` [jscodeshift]: https://github.com/facebook/jscodeshift [recast]: https://github.com/benjamn/recast [AST]: https://fr.wikipedia.org/wiki/Arbre_syntaxique_abstrait [AST Explorer]: http://astexplorer.net/#/hb6iLO9hTe