Astro 2.1

Мы выпустили Astro 2.1:

• Built-in Image Support: (experimental) автоматическая оптимизация изображений в ядре Astro.
• Markdoc Integration: (experimental) новый формат контента от Stripe для крупных проектов.
• astro check --watch: type check .astro файлов во время разработки.
• Inferred types for dynamic routes: params и props без двойного определения типов.

Astro 2.1 доступен на npm. npm i astro@latest для обновления или npm create astro для нового проекта.

Built-in Image Support

Astro 2.1 добавляет экспериментальную встроенную оптимизацию изображений. Включите флагом --experimental-assets или experimental.assets в конфиге.

Если знакомы с @astrojs/image, новый <Image> будет знаком, но с улучшениями: width и height без изменения aspect ratio и новый проп quality.

---
import { Image } from "astro:assets"
import penguin from "~/assets/penguin.png"
---

<Image src={penguin} quality="high" alt="a high-quality penguin" />

Изображение автоматически оптимизируется в современном формате с минимальным Cumulative Layout Shift (CLS).

Встроенную поддержку можно заменить другим провайдером — Cloudinary или Vercel для production CDN.

Astro 2.1 отвечает на частый запрос после 2.0: изображения в content collections. Новый helper image() в Content Collections API для схемы frontmatter.

import { image, defineCollection, z } from "astro:content"

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    cover: image(),
  }),
})

export const collections = {
  blog: blogCollection,
}

Если изображение в frontmatter не существует, Astro сообщит. Можно уточнить схему — размеры, расширение:

cover: image().refine((img) => img.width === 800 && img.height === 600, {
  message: "Cover needs to be 800x600 pixels!",
})

Инструкции по миграции — в Assets Guide. Будем улучшать до стабильности. Обратная связь — в Image RFC.

Markdoc integration

Экспериментальная интеграция Markdoc опубликована вместе с Astro 2.1. Добавьте @astrojs/markdoc через npx astro add markdoc.

Markdoc — формат от Stripe для их масштаба. Мы любим MDX, но пользователи замечают замедление при большом числе MDX-файлов.

Мы сравнили Markdoc с Markdown и MDX — до 3x быстрее сборка над статическим контентом и islands.

После добавления @astrojs/markdoc Markdoc доступен в Content Collections с расширением .mdoc. Можно смешивать с Markdown и MDX для постепенной миграции.

MDX никуда не уходит. Экспериментируем с обоими форматами. Обратная связь — в Markdoc RFC.

astro check –watch

astro check — встроенная CLI-команда TypeScript type checking для .astro. Часто в CI перед merge или деплоем.

Пользователи хотели то же в dev, как tsc --watch. Ошибки в редакторе легко пропустить, и легко забыть astro check перед push.

В Astro 2.1 добавлен флаг --watch — долгоживущий процесс, слушающий изменения и перезапускающий диагностику. Параллельно с dev server через скрипт в package.json:

{
  "scripts": {
    "dev": "astro check --watch & astro dev"
  }
}

Inferred types for dynamic routes

getStaticPaths() в страницах Astro определяет, какие страницы строить для динамического маршрута в режиме SSG. Для каждой страницы возвращаются params и props.

В Astro 2.1 — два helper для вывода типов и проверки в шаблоне.

Пример getStaticPaths():

---
export async function getStaticPaths() {
  const posts = await getCollection("blog")
  return posts.map((post) => {
    return {
      params: { slug: post.slug },
      props: { draft: post.data.draft, title: post.data.title },
    }
  })
}
---

Теперь InferGetStaticParamsType и InferGetStaticPropsType для типов params и props без ручного определения:

import { InferGetStaticParamsType, InferGetStaticPropsType } from "astro"
export async function getStaticPaths() {
  /* ... */
}

type Params = InferGetStaticParamsType<typeof getStaticPaths>
type Props = InferGetStaticPropsType<typeof getStaticPaths>
const { slug } = Astro.params as Params
//                     ^? { slug: string; }
const { title } = Astro.props
//                      ^? { draft: boolean; title: string; }

Try Astro 2.1

Спасибо всем участникам релиза. Помимо новых функций — исправления в core и интеграциях. См. release notes.