Astro v0.21.0 будет нашим крупнейшим релизом. На высоком уровне:
- A new build engine, powered by Vite
- A new WASM compiler, written in Go
- Brand new features, like Components-in-Markdown
- A new system for HTML live-updating via HMR
Попробуйте в браузере или npm install astro@next--compiler в новом проекте.
Astro быстро становится production-ready фреймворком для быстрых контентных сайтов. К milestone — highlights Astro v0.21.0 и дальше.
Hello, Vite!
Astro 0.21 получает внутреннее обновление движка сборки: Snowpack заменяется на Vite.
Ранние эксперименты с Vite впечатлили. Vite поддерживается, документирован, быстрее, с отличными ошибками и community buy-in. SSR иногда нестабилен — команда Vite в курсе и работает над этим.
Когда Evan You твитит об оптимизации Vite — та же скорость придёт в Astro.
И наоборот: фиксы Astro для SSR (например, ESM-only npm packages) помогают всем пользователям Vite, включая SvelteKit.
Ещё одно преимущество Vite: Rollup plugins. С v0.21.0 — вся экосистема Rollup plugins в Astro. Оптимизация изображений, загрузка иконок — несколько плагинов. Магия!
Переход Snowpack → Vite может удивить: Drew и я — maintainers обоих. Сложное решение. После работы с обоими уверен: Vite — отличный выбор для Astro.
Hello, WASM!
Astro 0.21 — ещё одно низкоуровневое улучшение: новый @astrojs/compiler. Компилятор на Go, распространяется как WASM. В браузере, Node.js, Deno.
@astrojs/compiler открывает:
- Flexibility: компилятор везде с WASM.
- Speed: быстрее сборка благодаря Go.
- Stability: свой компилятор — исправление давних багов.
Поиграйте с компилятором на https://astro.build/play. REPL — пример возможностей быстрого компилятора.
Спасибо Nate Moore за невероятную работу над проектом.
Components in Markdown
Самая запрашиваемая функция — компоненты прямо в Markdown. После месяцев работы — в Astro.
С v0.21.0 импорт компонентов в frontmatter Markdown через опциональный скрипт setup. После импорта — использование на странице:
---title: "Astro 0.21 Early Preview"setup: | import Logo from '../components/Logo.astro'; import ReactCounter from '../components/Counter.jsx';---
# Astro now supports components in Markdown!
<Logo />
- Back to markdown here.- Supports static Astro components.- Supports dynamic React/Vue/Svelte components!
<ReactCounter start={0} client:load />Скрипт setup для максимальной гибкости. Планируем default components, layouts, markdown overrides.
HMR, meet HTML
С v0.21.0 — полный HMR для Astro-компонентов и страниц. Измените .astro — dev server обновит страницу без полного refresh и без потери client state.
Astro всегда поддерживал HMR для React, Preact, Svelte, Vue, Solid.js. Для Astro было сложнее — компоненты это статический HTML. «Zero JavaScript» — нет «Astro runtime» для обновлений. Пришлось импровизировать.
Dev server отправляет HTML-обновления в браузер и запускает небольшой скрипт diff с текущей страницей. Более гранулярный component-level HMR без влияния на остальную страницу.
Try it today
Помогите протестировать релиз до launch. В браузере или npm install astro@next--compiler. Прогресс и feedback — PR next на GitHub: https://github.com/withastro/astro/pull/1406