✨ Анимации в React без библиотеки анимаций

В React 19.3 стал стабильным компонент <ViewTransition>. Он отдаёт анимацию переходов между состояниями интерфейса браузерному View Transition API.

Автор статьи в блоге LogRocket собрал одно приложение дважды: на библиотеке анимаций Motion и на <ViewTransition> с CSS. Модалка в нативной версии:

function openModal() {
  startTransition(() => setIsOpen(true));
}

{isOpen && (
  <ViewTransition enter="modal-enter" exit="modal-exit">
    <div className="modal-overlay" onClick={closeModal}>
      <ModalContent onClose={closeModal} />
    </div>
  </ViewTransition>
)}

Сами движения описываются в CSS. JS в этой сборке похудел на 39 005 байт (gzip), зато кода анимаций вышло 253 строки против 75 у Motion.

Для жестов, пружин и эффектов по скроллу автор скорее оставил бы библиотеку. А в статье ещё сортировка 250 карточек, навигация и перелёт картинки, плюс грабли, на которые он наступил.

👍 - если было полезно

👉 @sWebDev

⚡ Angular 22.2: данные маршрута грузятся параллельно

Резолверы в Angular Router загружают данные до открытия страницы. Но вдоль иерархии маршрутов они идут по очереди: родитель грузится 2 секунды, дочерний маршрут 3, и пользователь ждёт 5.

В Angular 22.2 появилась альтернатива: Router Resources. В маршруте пишут свойство resources с обычными resource, а роутер запускает их все сразу. В том же примере ждать придётся 3 секунды.

{
  path: 'passenger-edit/:id',
  component: PassengerEdit,
  resources: (ctx) => ({
    passenger: createSimplePassengerResource(ctx.params),
  }),
},

Компонент получает готовое значение как input, так же как от резолвера. А если обернуть ресурс в nonBlocking, страница откроется сразу, и загрузку покажет сам компонент.

Пока это Developer Preview: до стабилизации API может поменяться в деталях.

В статье ещё перезагрузка данных без новой навигации и редирект, когда их нет.

👍 - если было полезно

👉 @sWebDev

⚡ React Compiler в Vite теперь работает на Rust

React Compiler оптимизирует React-компоненты прямо во время сборки. Раньше в Vite его подключали через Babel. В @vitejs/plugin-react v6.1.0 появилась экспериментальная нативная версия от команды oxc, которая делает JS-инструменты на Rust.

Автор перевёл на неё конструктор сайтов из 1036 файлов. Сама компиляция ускорилась с 14,3 до 0,81 секунды. Сборка целиком ускорилась скромнее: с 22,1 до 9,3 секунды.

На Vite 8+ переход сводится к упрощению конфига. Babel-плагин больше не нужен:

npm install -D oxc-transform-react

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react({ compiler: true })],
});

Учтите, что поддержка пока помечена как экспериментальная.

В статье есть рецепт и для React Router в framework mode, где плагин Vite React не используется.

👍 - если было полезно

👉 @sWebDev

🛡️ Как не дать чужому пакету украсть ваши секреты через pnpm install

Атаки на npm-пакеты обычно идут по одной схеме. Пакет взламывают, его postinstall-скрипт запускается у вас на машине и уносит данные. В менеджере пакетов pnpm v10 есть настройки, которые сильно усложняют такой сценарий.

Скрипты установки там выключены по умолчанию. А minimumReleaseAge откладывает установку только что опубликованных версий: большинство взломанных пакетов обнаруживают и снимают за считанные часы.

Мягкий вариант конфига из статьи:

# pnpm-workspace.yaml

blockExoticSubdeps: true
trustPolicy: no-downgrade

minimumReleaseAge: 1440 # 1 day

allowBuilds:
  esbuild: true
  fsevents: true

Подвох в том, что пакеты, которым скрипты нужны по делу (нативные аддоны, esbuild), придётся явно разрешить через allowBuilds.

В статье есть и строгий конфиг: неделя ожидания новых версий и падение CI на всём подозрительном.

👍 - если было полезно

👉 @sWebDev