Преобразования AST с помощью babel
Я новичок в работе с babel и пытаюсь использовать шаблон посетителя для выполнения некоторого обхода и преобразований AST. Код JS, который я хочу преобразовать:
.data(данные).attr("высота", function (d) {
высота возврата - y(Number(d.Speed));
});
AST для этого кода выглядит так (JSON)
{
"type": "File",
"start": 0,
"end": 106,
"loc": {
"start": {
"line": 1,
"column": 0
},
"end": {
"line": 8,
"column": 0
}
},
"errors": [],
"program": {
"type": "Program",
"start": 0,
"end": 106,
"loc": {
"start": {
"line": 1,
"column": 0
},
"end": {
"line": 8,
"column": 0
}
},
"sourceType": "module",
"interpreter": null,
"body": [
{
"type": "ExpressionStatement",
"start": 2,
"end": 105,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 7,
"column": 3
}
},
"expression": {
"type": "CallExpression",
"start": 2,
"end": 104,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 7,
"column": 2
}
},
"callee": {
"type": "MemberExpression",
"start": 2,
"end": 40,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 5,
"column": 5
}
},
"object": {
"type": "CallExpression",
"start": 2,
"end": 34,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 4,
"column": 11
}
},
"callee": {
"type": "MemberExpression",
"start": 2,
"end": 28,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 4,
"column": 5
}
},
"object": {
"type": "CallExpression",
"start": 2,
"end": 22,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 3,
"column": 20
}
},
"callee": {
"type": "MemberExpression",
"start": 2,
"end": 15,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 3,
"column": 13
}
},
"object": {
"type": "Identifier",
"start": 2,
"end": 5,
"loc": {
"start": {
"line": 3,
"column": 0
},
"end": {
"line": 3,
"column": 3
},
"identifierName": "svg"
},
"name": "svg"
},
"property": {
"type": "Identifier",
"start": 6,
"end": 15,
"loc": {
"start": {
"line": 3,
"column": 4
},
"end": {
"line": 3,
"column": 13
},
"identifierName": "selectAll"
},
"name": "selectAll"
},
"computed": false
},
"arguments": [
{
"type": "StringLiteral",
"start": 16,
"end": 21,
"loc": {
"start": {
"line": 3,
"column": 14
},
"end": {
"line": 3,
"column": 19
}
},
"extra": {
"rawValue": "bar",
"raw": "\"bar\""
},
"value": "bar"
}
]
},
"property": {
"type": "Identifier",
"start": 24,
"end": 28,
"loc": {
"start": {
"line": 4,
"column": 1
},
"end": {
"line": 4,
"column": 5
},
"identifierName": "data"
},
"name": "data"
},
"computed": false
},
"arguments": [
{
"type": "Identifier",
"start": 29,
"end": 33,
"loc": {
"start": {
"line": 4,
"column": 6
},
"end": {
"line": 4,
"column": 10
},
"identifierName": "data"
},
"name": "data"
}
]
},
"property": {
"type": "Identifier",
"start": 36,
"end": 40,
"loc": {
"start": {
"line": 5,
"column": 1
},
"end": {
"line": 5,
"column": 5
},
"identifierName": "attr"
},
"name": "attr"
},
"computed": false
},
"arguments": [
{
"type": "StringLiteral",
"start": 41,
"end": 49,
"loc": {
"start": {
"line": 5,
"column": 6
},
"end": {
"line": 5,
"column": 14
}
},
"extra": {
"rawValue": "height",
"raw": "\"height\""
},
"value": "height"
},
{
"type": "FunctionExpression",
"start": 51,
"end": 103,
"loc": {
"start": {
"line": 5,
"column": 16
},
"end": {
"line": 7,
"column": 1
}
},
"id": null,
"generator": false,
"async": false,
"params": [
{
"type": "Identifier",
"start": 61,
"end": 62,
"loc": {
"start": {
"line": 5,
"column": 26
},
"end": {
"line": 5,
"column": 27
},
"identifierName": "d"
},
"name": "d"
}
],
"body": {
"type": "BlockStatement",
"start": 64,
"end": 103,
"loc": {
"start": {
"line": 5,
"column": 29
},
"end": {
"line": 7,
"column": 1
}
},
"body": [
{
"type": "ReturnStatement",
"start": 66,
"end": 101,
"loc": {
"start": {
"line": 6,
"column": 0
},
"end": {
"line": 6,
"column": 35
}
},
"argument": {
"type": "BinaryExpression",
"start": 73,
"end": 100,
"loc": {
"start": {
"line": 6,
"column": 7
},
"end": {
"line": 6,
"column": 34
}
},
"left": {
"type": "Identifier",
"start": 73,
"end": 79,
"loc": {
"start": {
"line": 6,
"column": 7
},
"end": {
"line": 6,
"column": 13
},
"identifierName": "height"
},
"name": "height"
},
"operator": "-",
"right": {
"type": "CallExpression",
"start": 82,
"end": 100,
"loc": {
"start": {
"line": 6,
"column": 16
},
"end": {
"line": 6,
"column": 34
}
},
"callee": {
"type": "Identifier",
"start": 82,
"end": 83,
"loc": {
"start": {
"line": 6,
"column": 16
},
"end": {
"line": 6,
"column": 17
},
"identifierName": "y"
},
"name": "y"
},
"arguments": [
{
"type": "CallExpression",
"start": 84,
"end": 99,
"loc": {
"start": {
"line": 6,
"column": 18
},
"end": {
"line": 6,
"column": 33
}
},
"callee": {
"type": "Identifier",
"start": 84,
"end": 90,
"loc": {
"start": {
"line": 6,
"column": 18
},
"end": {
"line": 6,
"column": 24
},
"identifierName": "Number"
},
"name": "Number"
},
"arguments": [
{
"type": "MemberExpression",
"start": 91,
"end": 98,
"loc": {
"start": {
"line": 6,
"column": 25
},
"end": {
"line": 6,
"column": 32
}
},
"object": {
"type": "Identifier",
"start": 91,
"end": 92,
"loc": {
"start": {
"line": 6,
"column": 25
},
"end": {
"line": 6,
"column": 26
},
"identifierName": "d"
},
"name": "d"
},
"property": {
"type": "Identifier",
"start": 93,
"end": 98,
"loc": {
"start": {
"line": 6,
"column": 27
},
"end": {
"line": 6,
"column": 32
},
"identifierName": "Speed"
},
"name": "Speed"
},
"computed": false
}
]
}
]
}
}
}
],
"directives": []
}
}
]
}
}
],
"directives": []
},
"comments": []
}
В настоящее время я просматриваю все выражения вызова, чтобы идентифицировать вызов.attr() с первым аргументом "высота", который я легко могу найти. Я пытаюсь вставить следующий код после выражения вызова, но перед знаком ";".on(‘mouseover’, tip.show) что я создаю так
export default function (babel) {
const { types: t } = babel;
return {
name: "ast-transform", // not required
visitor: {
CallExpression :{
enter(path){
if(path.node.callee.type ==="MemberExpression"){
if (path.node.callee.property.name == 'attr'){
if(path.node.arguments[0].value =='height'){
console.log(path.node.arguments[1].body)
path.insertAfter(t.callExpression(
t.memberExpression(t.identifier(''), t.identifier('on')),
[t.stringLiteral('mouseover'), t.memberExpression(t.identifier('tip'), t.identifier('show'))]));
}
}
//path.node.callee.property.name =path.node.callee.property.name.split('').reverse().join('');
}
},
}
}
};
}
В основном я хочу преобразовать код из
.data(данные).attr("высота", function (d) {
высота возврата - y(Number(d.Speed));
});
Чтобы
.data(данные).attr("высота", function (d) {
высота возврата - y(Number(d.Speed));
}).on('наведение курсора', tip.show);
Однако код добавляется после всего выражения, а это не то, что я хочу. Я не могу понять, что делаю неправильно, и мне нужна помощь и предложения, как с этим справиться. Я также был бы признателен, если бы кто-нибудь мог указать мне на действительно хороший учебник о том, как выполнять сложные преобразования кода JS с помощью Babel (я уже видел большинство примеров реверсивных идентификаторов)