🔥

Тред (RReverser)


Пока продолжу занудствовать насчет парсинга. Со вчерашней диаграмки, надеюсь, видно что использовать структуры из спеки довольно сложно.

Поэтому браузеры внутри используют собственные структуры для отображения синтаксическа, с которыми им удобно работать.

V8 например сохраняет внутри этого дерева не только синтаксис, а и различную рантайм-информацию - в частности типы данных, определенные JIT.

Но делиться не спешат, так как заявили что им удобнее держать все внутри и рефакторить в любой момент, поэтому - никаких апишек :(

С другой стороны, Дэйв Герман из Мозиллы наоборот, несколько лет назад открыл API для расширений ФФ и подробно описал структуры данных.

Так и появился SpiderMonkey Parser API - developer.mozilla.org/en-US/docs/Moz… - де-факто стандарт AST (синт. дерева) для 90% девтулзов, работающих с JS.

Понятно, что туда же попали структуры, специфические для Фаерфокса тех времен - типа старого формата let-переменных или E4X (XML in JS).

Но вот сами структуры были очень даже хороши, поэтому их взяли за основу в парсер JS в JS - Esprima. esprima.org

И пошло-поехало. Еще один чувак решил "посоревноваться" и сделал свой совместимый парсер, но в 2 раза быстрее. marijnhaverbeke.nl/blog/acorn.html

(Поправка - в момент написания статьи он еще был в 5 раз быстрее)

А когда уже есть парсеры и документация, тулзы могут расти как грибы после дождя, что собственно и произошло.

Появились либы для обхода AST github.com/estools/estrav…, генерации кода github.com/estools/escode…, проверки скоупов github.com/estools/escope.

А имея тулзы, покрывающие весь цикл - парсинг-изменение-генерация JS, уже несложно создавать и полезные вещи для конечного пользователя.

Например, всеми вами любимый и используемый (ведь всеми? :) ) ESLint появился как раз на их основе.

Или же чудесный рефакторинг из коммандной строки с учетом синтаксиса - больше никаких регулярок! graspjs.com

Или же просто красивые визуализации выполнения кода и event loop - latentflip.com/loupe/.

Даже "новый" компилятор CoffeeScript - CoffeeScriptRedux - тоже решил использовать такой формат и тулзы вместо наколенных решений.

Так инженер из Мозилла, просто создав вики-страничку с доками для расширений, сам того не подозревая, создал де-факто стандарт для AST.

В общем, жыли эти тулзы себе, создавались и развивались, но тут им случился ES6... // продолжение следует :)

В общем с ES6 была только одна простая, но существенная проблема: его никто всерьез не ожидал, особенно после фэйлов ES4.

Однако стандарт все же начал приобретать очертания. В это же время паралельно фейсбук начал пилить свой до сих пор спорный JSX.

Для этого они форкнули упомянутую выше Esprima в свой Esprima-FB, и реализовав JSX, решили далеко не ходить и заодно добавить немного ES6.

Так и получилось, что они первыми добавили новые типы нод для ES6, которых не было в стандарте версии Mozilla. Однако поддержка была слабой.

В это время я увлекся парсерами для собственных нужд - в основном парсинг бинарных данных в JS - можно смотреть github.com/jDataView/jBin…

А парсинг кода показался темой похожей, но в то же время мало тронутой, так как новый стандарт уже на пороге, а поддержки ES6 нету.

Захотелось помочь, попробовал поконтрибьютить в Esprima. Не получилось - мейнтейнеры были заняты другим и противились любым изменениям :(

Это сейчас Esprima лежит под крылом jQuery на Github, а еще меньше года назад они хостились на Google Code и issues лежали по пару лет.

В общем, так я и узнал про Acorn - шуструю, упрощенную альтернативу. Вот что из этого получилось: github.com/marijnh/acorn/…

Ноды, которые можно было, для совместимости взял из Esprima-FB, для других всё же пришлось придумывать новые типы и аттрибуты.

Теперь, когда уже у нас был ES6 парсер, опять-таки - ситуация для других тулзов упростилась. Так и появился 6to5 (или же Бабель) :)

Если что - можно меня остановить, я и правда сильно втянулся в формат "лишь бы писать".

Пока пойду спать, и оставлю опросник - тут был предложен формат "туториал в твиттере" (можем завтра запилить свой сахар в JS). Что скажете?