Astro 0.18

Автор
Matthew Phillips

Чуть больше месяца назад вышла первая публичная beta Astro. С тех пор — исправления и ваш feedback. Сегодня — самые запрашиваемые функции.

Представляем Astro v0.18:

Responsive partial hydration

Пример кода с новым client:media hydrator.

Адаптивные сайты часто загружают компоненты только на определённых размерах экрана — например, мобильное меню. Сложно (невозможно?) не загружать mobile-only код на десктопе. Лишний код, который пользователь не увидит.

Astro решает проблему лишнего JavaScript через partial hydration — гидратация только интерактивных компонентов, остальное — статический HTML. Astro v0.18 добавляет кастомизацию partial hydration через CSS media queries — без отправки кода устройствам, которым он не нужен.

Директива client:media — гидратация только при выполнении media condition. На телефоне — пропустить JS десктопного header. На десктопе — не загружать мобильное hamburger menu. Часть обязательства Astro минимизировать ненужный JavaScript.

Named slots in Astro components

Несколько слотов для head и body в Layout-компоненте.

Named slots — стандарт в browser APIs и Vue. В этом релизе Astro добавляет named slots в компоненты, страницы и layouts.

Особенно полезны для layouts: слоты для разных секций. Метаданные в слот «head», контент в «body» или «content». Layout полностью настраивается — сколько угодно слотов.

Solid support

Solid — JSX UI-фреймворк, современная реактивная альтернатива React. Мы рады Solid; с новым Solid renderer Solid — first-class фреймворк в проекте.

Solid (третий официально поддерживаемый JSX-фреймворк) потребовал крупного рефакторинга JSX в Astro. Результат стоил того: Astro лучше поддерживает разные типы JSX, включая React v17 JSX transform. Фундамент на будущее.

Релиз Solid v1.0 — showcase multi-framework promise Astro: первый Solid-компонент рядом с остальными. Другие инструменты заставляют выбрать один фреймворк — Astro упрощает multi-framework для миграций и долгосрочной архитектуры.

Lit SSR support

Server-side rendering для web components наконец здесь — Lit и новый Lit renderer для Astro.

Благодаря Declarative Shadow DOM — новая HTML-функция в Chrome — Lit выпустил экспериментальный SSR. Custom element в JavaScript — server render в Astro как React или Vue. В HTML — тег custom element.

Lit SSR renderer экспериментален; некоторые web components могут не работать. По мере adoption declarative shadow DOM и общих API рендеринга — поддержка других библиотек. Улучшения к Astro v1.0.

Community

Мы поражены любовью к Astro за короткое время:

Начать — Getting Started guide.