This document discusses using JavaScript to modify JavaScript code. It introduces AST (Abstract Syntax Tree) and how it can be used to parse, find, replace and print code. It provides examples of using tools like jscodeshift and recast to make transformations like converting React classes or formatting code. Key challenges discussed are parsing code, finding and replacing nodes in the AST, and printing modified code back out.

1. Меняем JavaScript
с помощью JavaScript
Павел Волокитин

2. const React = require('react');
import React from 'react';

3. const React = require('react');
import React from 'react';
/const (w+) = require('([^']+'));/
→ import $1 from '$2';

4. forEach(arr, function(item) {
console.log(item);
});
for (const item of arr) {
console.log(item);
}

5. define(['react'], function(React) {
return {...};
});
const React = require('react');
module.exports = {...};
AMD
CommonJS

6. Abstract Syntax Tree

7. 1 + 2 + 3
Abstract Syntax Tree

8. 1 + 2 + 3
BinaryExpr +
BinaryExpr +
1 2
3
Abstract Syntax Tree

9. 1 + 2 + 3
BinaryExpr +
BinaryExpr +
1 2
3
console.log(123)
Abstract Syntax Tree

10. 1 + 2 + 3
BinaryExpr +
BinaryExpr +
1 2
3
console.log(123)
CallExpr
MemberExpr
Identifier
"console"
Identifier
"log"
123
Abstract Syntax Tree

11. jscodeshift
astexplorer.net

12. Demo: astexplorer

13. –Parse
–Find
–Replace
–Print

14. react-codemod

15. const Comp = React.createClass({
getDefaultProps() {
return {size: 10};
},
getInitialState() {
return {focused: false};
},
render() {...},
});

16. class Comp extends React.Component {
static defaultProps = {size: 10};
state = {focused: false};
render() {...}
}

17. Demo: React class

18. –Parse
–Find
–Replace
–Print

19. Demo: nuclide outline
Demo: react-docgen
Demo: modules

20. Трудности

21. –Parse
–Find
–Replace
–Print

22. –Parse
–Find
–Replace
–Print
recast

23. function f(a, b) {
...
}
function fn(
argumentOne,
argumentTwo,
) {
...
}

24. obj = {
one: 1,
two: 2,
};
obj = {
func() {},
value: null,
};

26. – recast/lib/printer.js

27. const React = require('react');
obj = {
one: 1,
two: 2,
};
– recast/lib/printer.js
– Временные ноды
$$newline;
$$newline,
$$newline,

28. const React = require('react');
obj = {
one: 1,
two: 2,
};
– recast/lib/printer.js
– Временные ноды

29. Спасибо