Время от времени мне пишут с просьбой помочь в написании кода, который меняет код (далее кодмод, от слов код и модификация - изменение) и сегодня я расскажу об этом нехитром процессе в новом формате, вдохновлённом диалогами Платона, он будет содержать вопросы обратившегося ко мне человека по поводу линтера нового поколения, и мои развёрнутые ответы.
Забегая вперед скажу, что результатом общения стал loader ESTrace, который при запуске может показать что-то вроде:
Но об этом позже, а сейчас:
▍Следим за функциями
Узлы содержащие функции в Babel AST могут быть такими:
— FunctionDeclaration — объявление функции
function hello() {
return 'world';
}
— FunctionExpression — анонимная функция
hello(function(word) {
return `hello ${word}`;
});
— ArrowFunctionExpression - анонимная стрелочная функция
hello((word) => {
return `hello ${word}`;
});
— ClassMethod - метод класса
class Hello {
hello(word) {
return `hello ${word}`;
}
}
Для их поиска мы можем использовать Function, он объединяет в себе все перечисленные выше варианты.
Будем использовать Включитель и экспортировать функции:
- include, чтобы знать, что искать;
- fix, для изменения кода;
Таким образом, функция поиска:
module.exports.include = () => [
'Function',
];
Создавать узлы будем с помощью @babel/template, после чего добавим результат в начало функции:
const {template} = require('putout');
// самый простой способ создать узел
const buildLog = template(`console.log('NAME', arguments)`);
module.exports.fix = (path) => {
const {body} = path.node.body;
const NAME = path.node.id.name;
// добавляем в начало функции «console.log»
body.unshift(buildLog({
NAME,
}));
};
Соединив предыдущие две части, и улучшив разбор имени функции в соответствии с внутренней структурой, получим:
Такую реализацию
которая отрабатывает так (картинка кликабельная):
▍Вносим неразбериху улучшения
Для краткости и наглядности будем использовать бросающиеся в глаза сокращения:
const enterLog = buildLogEvent(name, '
'); // входconst exitLog = buildLogEvent(name, '
'); // выходconst errorLog = buildLogEvent(name, '
'); // ошибкаЕще нам нужно создать узел try-catch:
const buildTryCatch = template(`try {
BLOCK;
} catch(error) {
CATCH;
} finally {
FINALLY;
}
`);
// помещаем тело функции в try-catch
const bodyPath = path.get('body');
replaceWith(bodyPath, BlockStatement([buildTryCatch({
BLOCK: path.node.body.body,
CATCH: errorLog,
FINALLY: exitLog,
})]));
Строить лог будем таким образом, чтобы аргументы выводились как массив, а не объект:
const buildLog = template('console.log(`${«TYPE»} ${«NAME»}`, Array.from(arguments));');
Простейшее решение отслеживающее посещение функций
выглядит так (картинка кликабельная):
▍Catch должен выбрасывать исключения
Да это возможно, у каждого узла path есть node, а у него loc, в котором start. Из start достаем номер строки line:
function getName(path) {
const {line} = path.node.loc.start;
return `<anonymous:${line}>`;
}
А еще нам нужна функция, которая будет логировать + выбрасывать исключение:
const buildLogException = template('console.log(`${«TYPE»} ${«NAME»}: ${traceError.message}`); throw traceError');
function buildLogExceptionEvent(name) {
return buildLogException({
NAME: name,
TYPE: '',
});
}
Нет никакой необходимости выводить аргументы в каждом событии, поэтому делаем buildLog универсальным:
const buildLog = template('console.log(`${"TYPE"} ${"NAME"}`)');
Все вместе
выглядит так (картинка кликабельная):
▍Выдох
Пока я писал кодмоды и статью, у меня возникла идея вывести идею трейсера на более серьезный уровень: так появился проект ESTrace. Он отслеживает посещения функций, и при этом, в отличие от прекрасного инструмента похожей направленности njsTrace умеет работать с EcmaScript Модулями и на 100% покрыт тестами.
Установка стандартная:
npm i estrace
Важно понимать один момент: ESTrace построен вокруг хуков загрузки модулей, это технология экспериментальная и может изменится в будущем, я уже с ней работал когда реализовывал аналог mock-require только для импортов и все говорит о том, что скоро эта возможность стабилизируется, как это было с EcmaScript Модулями.
Принцип работы очень прост, есть несколько вариантов событий, в которые можно внедриться и повлиять на их работу, к примеру мне понадобился лоадер transformSource, который позволяет на лету менять прочитанный исходный код:
export async function transformSource(source, context) {
const {url} = context;
// добавляем события слежки в функции считанного кода
const code = await trace({
source: source.toString(),
url,
});
// возвращаем новый код
return {
source: code,
};
}
Конечно, ESTrace экспортирует плагин, который может быть передан в putout напрямую:
import putout from 'putout';
import estracePlugin from 'estrace/plugin';
const source = `
const fn = (a) => a;
`;
const {code} = putout(source, {
plugins: [
['estrace', estracePlugin],
],
});
console.log(code);
Проверим на конкретном примере, назовем файл lint.js:
const processFile = (a) => a;
process([]);
function process(runners) {
const files = getFiles(runners);
const linted = lintFiles(files);
return linted;
}
function getFiles(runners) {
const files = [];
for (const run of runners) {
files.push(...run());
}
return files;
}
function lintFiles(files) {
const linted = [];
for (const file of files) {
linted.push(processFile(file));
}
return linted;
}
После чего запустим в консоли:
❒ Источники:
Источник статьи: https://habr.com/ru/company/ruvds/blog/563568/