編集

Astro 5.7 リリース

#Astro

Astro 5.7 がリリースされた。Sessions API が安定化され、SVG Components、Experimental Fonts API、Config Imports などの新機能が追加された。

#Sessions API

Sessions API が安定化され、本番環境での使用が可能になった。サーバーサイドでユーザー固有のデータを安全に保存可能。クライアントサイドの JavaScript なしで動作する。

typescript
// src/components/CartButton.astro
const cart = await Astro.session.get("cart");
export const prerender = false;

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

TypeScript の型安全性もサポート。

typescript
// src/env.d.ts
declare namespace App {
  interface SessionData {
    user: {
      id: string;
      name: string;
    };
    cart: string[];
  }
}

#SVG Components

ローカルの SVG ファイルをコンポーネントとして使用可能になった。SVG コンポーネントは自動的に HTML に<svg>タグとしてインライン化される。

astro
// src/components/MyAstroComponent.astro
import Logo from './path/to/svg/file.svg';

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

#Experimental Fonts API

Experimental Fonts API が追加された。ファイルシステムや Google、Fontsource、Bunny などのプロバイダーからフォントを統一的に使用可能。パフォーマンス最適化とフォールバックフォントの自動生成を含む。

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

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

#Config Imports

astro:config仮想モジュールが安定化された。Astro の設定を型安全にインポート可能。

javascript
// src/utils.js
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;
}

#参考文献

編集