SUMMON_THE_CODER Telegram 48
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
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤‍🔥12👍932🔥1



tgoop.com/summon_the_coder/48
Create:
Last Update:

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

BY SUMMON_THE_CODER


Share with your friend now:
tgoop.com/summon_the_coder/48

View MORE
Open in Telegram


Telegram News

Date: |

Telegram offers a powerful toolset that allows businesses to create and manage channels, groups, and bots to broadcast messages, engage in conversations, and offer reliable customer support via bots. Private channels are only accessible to subscribers and don’t appear in public searches. To join a private channel, you need to receive a link from the owner (administrator). A private channel is an excellent solution for companies and teams. You can also use this type of channel to write down personal notes, reflections, etc. By the way, you can make your private channel public at any moment. Hui said the time period and nature of some offences “overlapped” and thus their prison terms could be served concurrently. The judge ordered Ng to be jailed for a total of six years and six months. Avoid compound hashtags that consist of several words. If you have a hashtag like #marketingnewsinusa, split it into smaller hashtags: “#marketing, #news, #usa. Commenting about the court's concerns about the spread of false information related to the elections, Minister Fachin noted Brazil is "facing circumstances that could put Brazil's democracy at risk." During the meeting, the information technology secretary at the TSE, Julio Valente, put forward a list of requests the court believes will disinformation.
from us


Telegram SUMMON_THE_CODER
FROM American