Fenom.js: шаблонизатор в стиле Fenom.php для JavaScript и Vite

Привет!

Это моя первая статья на modx.pro — и первый полноценный асинхронный шаблонизатор Fenom.js
Попытка перенести привычный синтаксис Fenom.php в мир JavaScript и современных сборщиков.

Почему это вообще понадобилось?
Работая над версткой и последующей интеграцией в MODX, меня всё чаще раздражала необходимость постоянно переключаться между разными синтаксисами: HTML, Twig (или Fenom), PUG, JSX…
Это не только замедляет процесс, но и создаёт проблемы в IDE: сниппеты наслаиваются, подсветка ломается, автодополнение путается.

К примеру, я очень люблю PUG — он лаконичен и удобен. Но при быстрых правках или живой разработке каждый раз компилировать шаблоны — утомительно. А хочется просто открыть файл, поменять пару строк и все…

Ещё одна боль — отставание верстки от продакшена. В долгосрочных проектах макеты живут своей жизнью, а финальная реализация часто отклоняется от изначального дизайна. Хотелось найти способ, чтобы dev- и prod-среды были максимально близки.

Мотивации было больше, чем просто «удобно писать»
Я перепробовал почти все доступные решения для шаблонизации: Handlebars, Nunjucks, PUG, EJS, TWIG и т.д.
Зачем? Всегда интересно пробовать что-то новое. Искать наиболее эффективные варианты решения рутинных задач.

И да — весь проект создавался с активной помощью GigaChat. Он отлично справлялся с рутиной.
Главное помнить: ИИ — это инструмент. Как только ты перестаёшь понимать, что происходит в коде — ты в тупике. Се ля ви

Fenom.js: сыроват, кривоват, но работает
👉 GitHub: fenom-js

Проект многократно переписывался и масштабировался по ходу дела. Сначала это была простая замена {}, потом добавились условия, циклы, include’ы… Сейчас Fenom.js поддерживает большую часть синтаксиса оригинального Fenom.php — включая фильтры, модификаторы.

Не обошлось без боли. Особенно с плагином для Vite — vite-plugin-fenom. Оказалось не так просто адаптировать все под статическую верстку, но теперь позволяет использовать Fenom-шаблоны прямо в режиме разработки с горячей перезагрузкой. Фактически, пришлось частично повторить работу vituum.

Для удобства я собрал стартовый шаблон:
👉 Vite + Fenom.js Starter Kit
— можно клонировать, ставить npm install и сразу верстать.

О грустном: мечта о двусторонней синхронизации
Моя конечная цель — полная синхронизация между dev и prod:
чтобы изменения с локальной машины можно было легко отправить на сервер, и наоборот — забрать актуальные сниппеты, чанки, данные — и работать с ними локально.

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

Использовать сниппеты для вывода JSON-структур.
Подключать эти данные локально — и верстать в точности как на проде.
Потом — минимальными правками вносить изменения обратно.
Такой workflow уже возможен частично. И если его развивать, можно приблизиться к бесшовной разработке — когда фронт и бэк «говорят на одном языке».

Вместо заключения
Fenom.js — это work in progress. Он сыроват, но работает.
Если вы верстаете под MODX и не хотите теряться между синтаксисами — возможно, вам понравится.

Буду рад любым ишью, фидбэку, предложениям.
Планирую добавить поддержку чтения настоящих MODX-чанков и сниппетов прямо из файловой системы — чтобы {'chunk' | snippet} просто работал.

Чем больше ништяков — тем лучше. Главное, чтобы было полезно.

Всем бобра!