Astro 5.7 | Astro

Astro 5.7 — корзина новинок: стабильные Sessions и SVG-компоненты, экспериментальный Fonts API.

🐣 Весна на северном полушарии, Astro 5.7 с подарками:

Экспериментальный Fonts API
Sessions API
SVG Components
Config Imports

Чтобы обновить существующий проект, используйте CLI @astrojs/upgrade. Или обновите вручную:

# Рекомендуется:
npx @astrojs/upgrade

# Вручную:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Experimental Fonts API

Почти каждый сайт использует кастомные шрифты. Но это сложнее, чем кажется: Flash of Unstyled Text, preload, preconnect, self-host vs провайдер?

Шрифты влияют на производительность и Core Web Vitals. Веб-API и open source (unifont, capsize) позволили начать работу над удобным способом использования шрифтов в Astro!

Экспериментальная функция: шрифты из файловой системы и встроенных провайдеров (Google, Fontsource, Bunny) через единый API. Sensible defaults и автоматические оптимизации, включая fallback fonts.

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
    experimental: {
        fonts: [{
            provider: fontProviders.google(),
            name: "Roboto",
            cssVariable: "--font-roboto"
        }]
    }
});

Добавьте <Font /> и стили в <head>:

---
import { Font } from 'astro:assets'
---

<Font cssVariable='--font-roboto' preload />
<style>
body {
    font-family: var(--font-roboto);
}
</style>

Больше в документации экспериментальных Fonts. Обратная связь — в Fonts RFC.

Sessions API

Sessions API стабилен и готов к production!

Сессии безопасно хранят данные пользователя при навигации. В отличие от cookies — на сервере: больше данных, без лимитов и проблем безопасности cookies. Корзины, данные пользователя, состояние форм — без клиентского JavaScript:

---
const cart = await Astro.session.get('cart');
export const prerender = false;
---

<a href="/checkout">🛒 {cart?.length ?? 0} items</a>

В компонентах, страницах, API, actions, middleware — один API:

import { defineAction } from "astro:actions";
import { z } from "astro:schema";

export const server = {
  addToCart: defineAction({
    input: z.object({
      product: z.string(),
    }),
    async handler({ product }, { session }) {
      const cart = await session.get('cart');
      session.set('cart', [...cart, product]);
    },
  }),
};

Type-safety

Типобезопасные сессии — определите интерфейс:

declare namespace App {
  interface SessionData {
    user: {
      id: string;
      name: string;
    };
    cart: string[];
  }
}

ID сессии в cookie, но session.load() — без cookies (API, кастомные заголовки):

export async function POST({ session, request }: APIContext) {
  const sessionId = request.headers.get('x-session-id');

  if (sessionId) {
    await session.load(sessionId);
  }

  const cart = await session.get('cart');
  const data = await request.json<{ item: string }>();

  if (!data?.item) {
    return new Response('Item is required', { status: 400 });
  }
  session.set('cart', [...cart, data.item]);
  return Response.json({ cart, sessionId: session.sessionId });
}

Storage drivers

Драйверы unstorage — zero-config или минимальная настройка для официальных адаптеров:

Node: filesystem
Netlify: Netlify Blobs
Cloudflare: Workers KV
Vercel: Redis/Upstash

import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify';

export default defineConfig({
  adapter: netlify(),
  session: {
    driver: 'redis',
    options: {
      url: process.env.REDIS_URL,
    },
  },
});

Upgrading from experimental sessions

Удалите экспериментальный флаг:

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    session: false,
  },
});

Подробнее — в руководстве по sessions.

SVG Components

Локальные SVG как компоненты! Раньше нужна конвертация или интеграция — теперь default import .svg как .astro компонент с inline <svg>.

Пропсы width, height, fill, stroke и атрибуты <svg>:

---
import Logo from './path/to/svg/file.svg';
---

<Logo width={64} height={64} fill="currentColor" />

Документация SVG components.

Спасибо Michael Stramel!

Upgrading from experimental SVG

Удалите экспериментальный флаг:

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    svg: true,
  },
});

Astro 5.6 внёс breaking changes в experimental SVG API.

Config Imports

Виртуальный модуль astro:config стабилен!

Типобезопасный доступ к подмножеству конфигурации:

astro:config/client: безопасно для клиента
astro:config/server: дополнительно пути файлов/директорий

export default defineConfig({
    base: "store/",
    trailingSlash: "always"
});

import { trailingSlash, base } from 'astro:config/client';

function addForwardSlashAndBase(path) {
    let finalPath;
    if (trailingSlash === 'always') {
      finalPath = path.endsWith('/') ? path : path + '/';
    } else {
      finalPath = path;
    }
    if (base !== "/") {
        return base + finalPath
    }
    return finalPath
}

---
import { addForwardSlashAndBase } from "@src/utils.js";

const cartUrl = addForwardSlashAndBase("cart"); // it will return "store/cart/"
---

<a href={cartUrl}>Cart</a>