ptbrowne/jscodeshift.html

## jscodeshift.html
<!DOCTYPE html>
<html>
  <head>
    <title>JSCodeshift</title>
    <meta charset="utf-8">
    <style>
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">


# jscodeshift

## How to efficiently convert a codebase from one to another ?

---

## API 1

```js
<Button theme='danger'>
    <Icon icon='delete'/>
    Delete
</Button>
```

## API 2

```js
<Button icon='delete' label='Delete' theme='danger' />
```


---
class: center, middle


<img src='http://i.imgur.com/acEGnCV.gif' />


---

## [AST] : abstract syntax tree

`<Button type="reset" />`

```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 <Button className={styles['save-button']} disabled={saving} theme='regular' onClick={this.rename}>
  {t('Groups.save')} {saving && <Spinner />}
</Button>
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


</textarea>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>JSCodeshift</title>
	<meta charset="utf-8">
	<style>
	@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
	@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
	@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

	body { font-family: 'Droid Serif'; }
	h1, h2, h3 {
	font-family: 'Yanone Kaffeesatz';
	font-weight: normal;
	}
	.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
	</style>
	</head>
	<body>
	<textarea id="source">


	# jscodeshift

	## How to efficiently convert a codebase from one to another ?

	---

	## API 1

	```js
	<Button theme='danger'>
	<Icon icon='delete'/>
	Delete
	</Button>
	```

	## API 2

	```js
	<Button icon='delete' label='Delete' theme='danger' />
	```


	---
	class: center, middle



	<img src='http://i.imgur.com/acEGnCV.gif' />


	---

	## [AST] : abstract syntax tree

	`<Button type="reset" />`

	```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 <Button className={styles['save-button']} disabled={saving} theme='regular' onClick={this.rename}>
	{t('Groups.save')} {saving && <Spinner />}
	</Button>
	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


	</textarea>
	<script src="https://remarkjs.com/downloads/remark-latest.min.js">
	</script>
	<script>
	var slideshow = remark.create();
	</script>
	</body>
	</html>