Телеграм канал «WebDev+ | Веб-разработка»

По мне, это самый удобный вариант монорепы без отдельного шага сборки: • pnpm workspaces и установка через workspace:* • внутренние пакеты, которые экспортируют *.ts файлы • опционально: pnpm publishConfig, чтобы при публикации подменять экспорты на *.js { "name": "@internal/foo", "version": "1.0.0", // Экспорт исходников TypeScript "main": "./src/index.ts", "types": "./src/index.ts", "exports": { ".": "./src/index.ts" }, // Экспорт собранного кода при публикации "publishConfig": { "access": "public", "main": "./dist/index.js", "types": "./dist/index.d.ts", "exports": { ".": "./dist/index.js" } }, "dependencies": { // Установка других внутренних пакетов из workspace "@internal/bar": "workspace:*" } } @WebDev_Plus

Нужны эффектные анимации для React Native? Есть открытая коллекция с сотней с лишним готовых анимаций, которые можно сразу втащить в проект. Чистые, современные, удобно разбирать и играться. Отлично подходит, если хочется прокачать анимацию в приложении, не собирая всё вручную. Исходники: github.com/enzomanuelmangano/demos @WebDev_Plus

У

вместе с формами есть простой способ сделать кнопку Cancel без единой строчки JS. Помимо POST и GET, формы внутри

могут использовать метод DIALOG. В этом режиме кнопка submit просто закрывает диалог, не отправляя данные на бэкенд. Удобный и чистый механизм, когда нужно отменить действие и закрыть окно без лишней логики. Когда форма внутри

отправляется методом dialog, само диалоговое окно закрывается, состояние контролов формы сохраняется, но ничего не уходит на сервер. При этом returnValue принимает значение той кнопки, по которой пользователь кликнул. Чистый и удобный способ обработать отмену или выбор без полноценного сабмита. Только не забудь добавить formnovalidate, чтобы кнопку Cancel всегда можно было нажать, даже если форма валится по валидации. Подробнее на MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog @WebDev_Plus

Изучаю SwiftUI после долгой работы с React. Первое, что реально бросается в глаза — .task. По сути, ты можешь привязать асинхронную функцию к любому куску UI, и она будет выполняться каждый раз при маунте этого UI. Удобно, например, чтобы поднять подписку через convex и сохранить данные в состоянии. Чисто и приятно 👍 Самое близкое сравнение — это useQuery, но тут не нужно городить подкомпоненты, чтобы ограничивать область ререндера. Ещё интересно, во что это может вылиться, если везде рендерить по принципу render-as-you-fetch. Похоже, на масштабе всё же придётся активно передавать данные через пропсы? @WebDev_Plus

Обеспечьте исчерпывающую проверку на этапе компиляции с помощью утилитарного типа Record в TypeScript @WebDev_Plus

Chainable async API Меня всегда интересовало, как DrizzleORM удаётся чейнить async-функции вроде await delete() и await delete().where(). Они реализовали свой кастомный Promise, от которого наследуются все операции с БД, например PgDelete для delete в Postgres. Чейнящиеся методы типа delete() и where() просто изменяют внутреннее состояние и всегда возвращают this (тот же самый инстанс промиса). Поэтому, когда ты делаешь await delete(), под капотом вызывается then() этого промиса, который запускает this.execute(). Реальный запрос к базе выполняется именно в методе execute, который переопределяется в каждом подклассе. Я считаю, что это очень крутой дизайн API, а сама идея имплементить Promise — просто отличная. Ссылка на QueryPromise Ссылка на PgDelete @WebDev_Plus

Просто небольшое напоминание: для описания ограниченного набора возможных состояний лучше использовать union type. А не жонглировать кучей boolean-полей и потенциально невалидными состояниями. @WebDev_Plus