🔙 Как это было (Тогда): Фронтендерам частенько приходится делать интерактивные штуки помимо обычных сайтов. На одном из прошлых проектов я пилил самописный блочный CMS-редактор. По функционалу ничего сверхъестественного: страница собирается из контент-секций типа Title, Text, Image, Gallery и так далее. На тот момент я писал на Vue 3, но еще без TypeScript. Когда нужно было добавить новый блок, я шел по цепочке: создавал Vue-компонент, писал под него мапперы для форматирования данных между бэком и фронтом, а все варианты свойств фиксировал в примере JSON. В функциях расставлял комментарии для неочевидных комбинаций.Тогда я писал основную логику один, проект делался как MVP в жестких таймлайнах, поэтому времени на поиск идеальных архитектурных решений не было. Новые блоки я добавлял по памяти, и особых проблем не испытывал.

🚀 Как это устроено (Сейчас): Прошло время. Мне прилетает похожая задача: снова кастомный блочный CMS-редактор. Но теперь у меня за плечами крепкий опыт и строгий TypeScript. И я сразу решил: теперь я сделаю лучше.

Первое, что я сделал — вынес все варианты контент-секций в единый реестр компонентов (Registry Pattern). Из этого главного реестра автоматически выводятся другие: для рендеринга интерфейса, форматирования данных под бэкенд и так далее.

Теперь архитектура стала прозрачной: при добавлении нового компонента первым делом вносится запись в реестр, и TypeScript тут же начинает подсвечивать все места в проекте, где не хватает нужного обработчика. Ориентироваться в коде стало в разы проще, и любой другой разработчик теперь может без проблем добавить новый блок, не ломая приложение.

Но осталось одно «но»... Даже с идеальной архитектурой добавление блока превратилось в рутинное рысканье по файлам: создай файл компонента, создай файл обработчика, добавь импорт туда, добавь сюда... Всё это получалось шаблонно, однотипно и съедало кучу времени.

Поискав решение этой проблемы, я наткнулся на отличный инструмент для генерации кода — Plop.js, и написал на нем интерактивную CLI-утилиту для команды.

Как это работает теперь: Я запускаю в терминале одну команду, ввожу название нового блока, а CLI-скрипт на основе заданных шаблонов (Handlebars) сам генерирует всю цепочку файлов с правильным неймингом, строгой типизацией и бесшовно инжектит нужные импорты прямо в файл реестра. Мне остается только дописать детали реализации.

Результат: Создание нового контент-блока теперь занимает 10 секунд вместо 15 минут ручного копипаста. Ошибки из-за невнимательности упали до нуля, а валидация полностью переехала на этап компиляции (typecheck). Я сфокусирован на фичах, а не на ручной сборке конфигов.

Решение полностью открытое, архитектуру и код шаблонов можно посмотреть в моем open-source репозитории. *Примечание: Сами компоненты намеренно оставлены в виде шаблонов без детальной верстки, чтобы сфокусировать внимание проверяющего на чистой инженерии, связях, архитектуре данных и инструментах автоматизации кодовой базы.*

👇 Ссылку на GitHub-проект оставил в первом комментарии. Расскажи, часто ли приходится автоматизировать собственную рутину?