letify - звучит как заклинание, работает как по волшебству ✨

Обновлял зависимости одного из проектов и заметил, что библиотека для интернационализации @ngneat/transloco переехала в новый скоуп @jsverse/transloco. После успешного обновления решил заглянуть на GitHub @jsverse и поискать, что еще у них есть интересного. Так я и наткнулся на героя этого поста — @letify.

Letify CLI помогает оптимизировать шаблоны в Angular приложениях, сканируя файлы и обнаруживая несколько асинхронных подписок на один и тот же поток.

Пример:

<div>{{ observable$ | async }}</div>
<div>{{ observable$ | async }}</div>

observable$ = this.appService.makeSomeAction()
.pipe(
  tap(() => console.log('Side effect logic'))
);

В этом сниппете на поток observable$ создаются две подписки, и побочные эффекты (tap) выполняются дважды. Это может привести к багам и некорректной работе приложения.

🧐 Что делать в таких случаях?

*️⃣использовать директиву *ngIf или control flow синтаксис @if, чтобы подписка происходила один раз;

@if (observable$ | async) {
  ...
}
// или
<ng-container *ngIf="observable$ | async">...</ng-container>

*️⃣ использовать новый синтаксис объявления переменных в шаблоне @let (v18.1 - dev preview, v19 - stable);
*️⃣ если данные используются в разных частях шаблона и их нельзя объединить в одном блоке, поможет оператор shareReplay, который «разделит» поток между всеми подписчиками и вся логика будет выполнена один раз.

observable$ = this.appService.makeSomeAction()
.pipe(
  tap(() => console.log('Side effect logic')),
  shareReplay({ bufferSize: 1, refCount: true })
);

Но чем больше приложение и сложнее шаблоны, тем труднее вручную искать такие случаи. И вот здесь приходит на помощь @letify.

▶️ У инструмента два режима работы:
*️⃣analyze — показывает потенциальные проблемы в шаблонах;
*️⃣fix — автоматически добавляет @let и убирает лишние подписки. По завершении выводится сообщение с напоминанием вручную проверить внесенные изменения.

▶️ Форматы отчетов:
*️⃣html — подробный отчет с UI, переключателями и разбивкой по файлам;
*️⃣json — пригоден для интеграций;
*️⃣list — простой список для отображения в терминале.

Какие сценарии использования я вижу, если используем локально для lint-staged, то самый быстрый вариант это вывести list-отчет. Если же встраиваем в CI/CD, то генерируем html и прикладываем его к артефактам пайплайна.

✖️ Минусы:
*️⃣fix-режим работает только с Angular 18+;
*️⃣шаблон должен быть в отдельном файле (запускал для inline шаблонов, ошибок не нашел);
*️⃣закомментированный код пропускается при проверке;
*️⃣конструкции вида data[prop] | async и myMethod(value, ...) | async пока не поддерживаются.

В новых приложениях чаще используют сигналы и там подобных проблем уже нет. Но остается огромное количество проектов на RxJS, где этот инструмент может помочь.

P.S. Собрал простую демку для теста - stackblitz

@summon_the_coder

#angular #library