Astro 5.14 | Astro

🍂 Astro 5.14 با ابزارهای مسیریابی جدید، رندر ناهمزمان Svelte، پشتیبانی از اکشن‌های React 19 و بسیاری موارد دیگر، ویژگی‌ها و بهبودهای DX زیادی برای گرم کردن قلب شما دارد!

با یک نوشیدنی گرم و تند به عقب برگردید و از این مجموعه ویژگی ها لذت ببرید:

برای ارتقاء یک پروژه موجود، از خودکار استفاده کنید @astrojs/upgrade ابزار CLI. از طرف دیگر، می توانید با اجرای دستور ارتقاء برای مدیر بسته خود، به صورت دستی ارتقا دهید:

pnpm upgrade astro --latest
yarn upgrade astro --latest

هشدارهای برخورد مسیر از پیش ارائه شده

Astro 5.14 تشخیص و رفع خطاهای رایج مسیریابی پویا را قبل از ایجاد مشکل در تولید آسان می کند.

قبلاً زمانی که دو مسیر پویا مانند /blog/[slug] و /blog/[...all] سعی شد همان مسیر را از قبل رندر کند (مثلا /blog/post-1 ، Astro فقط بالاترین اولویت را برای مسیر متضاد ارائه می دهد، در حالی که مسیر دیگر در سکوت نادیده گرفته می شود. این به سایت شما اجازه داد تا با موفقیت ساخته شود، اگرچه ممکن است متوجه شده باشید که برخی از صفحات در مسیرهای غیرمنتظره ارائه شده اند.

اکنون، زمانی که این اتفاق می‌افتد، یک هشدار نمایش داده می‌شود که توضیح می‌دهد کدام مسیرها و در کدام مسیر با هم برخورد کرده‌اند.

همچنین، یک پرچم آزمایشی جدید failOnPrerenderConflict هنگامی که چنین برخوردی رخ می دهد می توان از آن برای شکست ساخت با یک خطای مفید استفاده کرد. پرچم زیر را در پیکربندی Astro خود برای “Houston’s helping hand” تنظیم کنید تا شما را مجبور کند به صراحت تمام درگیری های مسیریابی را برطرف کنید:

export default defineConfig({
    failOnPrerenderConflict: true,

در مستندات آزمایشی خطای تداخل پیش اجرا بیشتر را ببینید.

routePattern ج getStaticPaths

Astro 5.14 کار با مسیرهای پویا پیچیده را آسان می کند getStaticPaths().

جدید routePattern ملک در حال حاضر در دسترس است getStaticPaths زمینه این تعریف اصلی و پویا از یک بخش در مسیر یک فایل مسیریابی (مثلاً /[...locale]/[files]/[slug]) از زمینه رندر Astro که در غیر این صورت در محدوده موجود نبود getStaticPaths(). این می تواند برای محاسبه مفید باشد params و props برای هر مسیر در یک صفحه

برای مثال، اکنون می‌توانید بخش‌های مسیر خود را بومی‌سازی کنید و آرایه‌ای از مسیرهای ایستا را با ریخته‌گری برگردانید routePattern به سفارشی getLocalizedData() عملکرد کمکی را params شی با مقادیر صریح برای هر بخش از مسیر تنظیم می شود (مثلاً locale، files، و slug). سپس از این مقادیر برای تولید مسیرها استفاده می شود و می توان از طریق آن در قالب صفحه خود استفاده کرد Astro.params.

import { getLocalizedData } from "../../../utils/i18n";
export async function getStaticPaths({ routePattern }) {
  const response = await fetch('...');
  const data = await response.json();
  console.log(routePattern); // [...locale]/[files]/[slug]
  // Call your custom helper with `routePattern` to generate the static paths
  return data.flatMap((file) => getLocalizedData(file, routePattern));
const { locale, files, slug } = Astro.params;

برای اطلاعات بیشتر در مورد این مدل مسیریابی پیشرفته، به مرجع مسیریابی Astro مراجعه کنید.

با تشکر از Robin Bühler برای کمک به این ویژگی!

پشتیبانی از رندر ناهمزمان برای Svelte

این نسخه پشتیبانی از ویژگی رندر ناهمزمان Svelte را اضافه می کند.

Svelte 5.36 پشتیبانی آزمایشی را برای رندر ناهمزمان اضافه کرد و به شما امکان استفاده از آن را داد await در اجزای خود در چندین مکان جدید. این قبلاً با مؤلفه‌های رندر شده توسط سرویس گیرنده کاملاً کارساز بود، اما مؤلفه‌های ارائه‌شده توسط سرور به کمک بیشتری نیاز داشتند. این به روز رسانی پشتیبانی از رندر سرور ناهمزمان را در مؤلفه های Svelte مورد استفاده در Astro اضافه می کند.

برای استفاده از رندر ناهمزمان، باید آن را در پیکربندی Svelte خود فعال کنید:

سپس می توانید استفاده کنید await در اجزای Svelte شما:

  let data = await fetch('/api/data').then(res => res.json());

برای اطلاعات بیشتر در مورد استفاده، به اسناد Svelte مراجعه کنید await در اجزای Svelte از جمله داخل $derived بلوک ها و مستقیماً در نشانه گذاری.

ادغام React 19 Actions

React 19 معرفی شد useActionState()، قلابی که به شما امکان می دهد وضعیت را بر اساس نتیجه یک عمل فرم به روز کنید.

اصطبل جدید getActionState() و withState() ویژگی هایی که Astro Actions با آنها ادغام می شود useActionState()، که ساختن فرم های پیشرفته تر با React و Astro Actions را آسان می کند.

این مثال الف را می نامد like اقدامی که انجام می شود الف postId و تعداد لایک ها را برمی گرداند. این عمل را به withState() اطلاعات بهبود پیشرونده عملکرد برنامه و کاربرد به useActionState() برای پیگیری نتیجه:

import { actions } from 'astro:actions';
import { withState } from '@astrojs/react/actions';
import { useActionState } from 'react';
export function Like({ postId }: { postId: string }) {
  const [state, action, pending] = useActionState(
      input type="hidden" name="postId" value={postId} />
      button disabled={pending}>{state} ❤️button>

همچنین می توانید به وضعیت ذخیره شده توسط دسترسی داشته باشید useActionState() از کنترل کننده اقدام شما به من زنگ بزن getActionState() با زمینه API و به صورت اختیاری یک نوع را در نتیجه اعمال کنید:

import { defineAction } from 'astro:actions';
import { z } from 'astro/zod';
import { getActionState } from '@astrojs/react/actions';
    handler: async ({ postId }, ctx) => {
      const currentLikes = getActionStatenumber>(ctx);

اگر قبلاً از نسخه آزمایشی این ویژگی استفاده کرده‌اید، برای استفاده از صادرات پایدار جدید باید کد خود را به‌روزرسانی کنید:

import { experimental_getActionState, experimental_withState } from '@astrojs/react/actions';
import { getActionState, withState } from '@astrojs/react/actions';

برای اطلاعات بیشتر در مورد استفاده از React 19 با Astro Actions به راهنمای ادغام React مراجعه کنید.

SvgComponent را تایپ کنید

Astro اکنون داخلی صادر می کند SvgComponent نوع واردات SVG. هنگامی که یک فایل SVG را به یک جزء Astro وارد می کنید، به عنوان یک مؤلفه در نظر گرفته می شود که می توانید در نشانه گذاری خود از آن استفاده کنید. تا پیش از این، دریافت نوع کامپوننت SVG کمی ناخوشایند بود. اکنون می توانید مستقیماً وارد کنید SvgComponent از astro/types در عوض:

type SvgComponent = typeof import("*.svg")
import type { SvgComponent } from "astro/types"

برای اطلاعات بیشتر در مورد استفاده از SVG در Astro به اسناد SVG مراجعه کنید.

با تشکر از ADTC برای کمک به این بهبود!

پشتیبانی Non-Node.js libSQL برای Astro DB

Astro DB اکنون از libSQL هنگام استقرار در Cloudflare و سایر محیط‌های غیر Node.js پشتیبانی می‌کند.

این نسخه یک libSQL جدید اضافه می کند web درایوری که در زمان های اجرا مبتنی بر وب مانند Cloudflare worker و Deno کار می کند. جدید mode گزینه پیکربندی به شما امکان می دهد نوع اتصال مشتری خود را تنظیم کنید: node (پیش فرض) یا web.

به صورت پیش فرض db node حالت راننده دقیقاً مانند قبل عمل می کند، بنابراین سایت های موجود نیازی به به روز رسانی ندارند. با این حال، اگر قبلاً نمی توانستید از Astro DB استفاده کنید زیرا به یک کلاینت libSQL غیر از Node.js نیاز داشتید، اکنون می توانید با تنظیم درایور وب libSQL را نصب و پیکربندی کنید. mode: 'web' در مال شما db پیکربندی:

import db from '@astrojs/db';
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({
  integrations: [db({ mode: 'web' })],

برای اطلاعات بیشتر، نگاه کنید @astrojs/db مستندات

با تشکر از آدام متیسن که این ویژگی و موارد دیگر را در ادغام Astro DB کمک کرد!

پیکربندی فضاهای نام نقشه سایت

به طور پیش فرض، استاندارد نقشه سایت شامل چندین فضای نام XML است که ممکن است برای همه سایت ها ضروری نباشد. از Astro 5.14، اکنون می توانید پیکربندی کنید که چه فضاهای نامی را در نقشه سایت XML خود قرار دهید.
حذف فضاهای نام استفاده نشده می‌تواند به ایجاد نقشه‌های سایت تمیزتر و متمرکزتر کمک کند که برای موتورهای جستجو سریع‌تر تجزیه شده و از پهنای باند کمتری استفاده می‌کنند. اگر سایت شما محتوای خبری، ویدیو یا چندین زبان ندارد، می توانید این فضاهای نام را حذف کنید تا نفخ XML را کاهش دهید.

را namespaces گزینه به شما امکان می دهد پیکربندی کنید news، xhtml، image، و video فضاهای نام به طور مستقل همه فضاهای نام به طور پیش فرض برای سازگاری با عقب فعال هستند و هیچ تغییری در پروژه های موجود لازم نیست. اما اکنون می توانید XML خود را ساده کنید و از کدهای غیرضروری اجتناب کنید.

به عنوان مثال، برای حذف فضای نام ویدیو از نقشه سایت خود، تنظیم کنید video: false در پیکربندی شما:

import { sitemap } from '@astrojs/sitemap';
        // other namespaces remain enabled by default

XML تولید شده شامل نخواهد شد xmlns:video فضای نام

با تشکر از جولیان کلمبو برای کمک به این ویژگی!

getFontData برای دسترسی برنامه ای به فونت ها

API فونت آزمایشی اکنون راهی برای دسترسی برنامه‌نویسی به داده‌های فونت دارد. را getFontData() تابع سودمندی از astro:assets دسترسی به داده های خانواده فونت و URL فایل ها را برای دسترسی سطح پایین فراهم می کند.

import { getFontData } from 'astro:assets';
const data = getFontData('--font-roboto');

برای مثال، getFontData() هنگام استفاده از satori برای تولید تصاویر OpenGraph، می توانید بافر فونت را از URL دریافت کنید:

import type { APIRoute } from 'astro';
import { getFontData } from 'astro:assets';
import satori from 'satori';
export const GET: APIRoute = (context) => {
  const data = getFontData('--font-roboto');
  const svg = await satori(div style={{ color: 'black' }}>hello, worlddiv>, {
        data: await fetch(new URL(data[0].src[0].url, context.url.origin)).then(
          (res) => res.arrayBuffer(),

برای اطلاعات بیشتر به مستندات API Experimental Fonts مراجعه کنید.

رفع اشکال

مثل همیشه، ما سخت در حال کار برای رفع مشکلات بعد از نسخه 5.13 هستیم. برای جزئیات کامل تغییرات لاگ را ببینید.

تیم اصلی Astro عبارتند از:

الکساندر نیبور، بن هلمز، کالب جاسیک،
کریس سویتین بانک، امانوئل استوپا، اریکا،
فلوریان لوفور، فرد شات، فازی،
سلام، لویی فراز، مت کین،
متیو فیلیپس، روبن ردیف، سارا رینزبرگر،
و ایان توماس.

از همه مشارکت‌کنندگان دیگری که با افزودن‌ها و بهبودهای کد و اسناد کمک کردند تا Astro 5.14 ممکن شود، از جمله:

0xJoeDev، Adam Matthiesen، ADTC، Álvaro Mondéjar Rubio، Andrey، Ariel K، Armand Philippot، Bugo، Dave Kiss، Eyozy، Felix Schneider، Fred K. Schott، Gabriel Woitechen، Gourav Khunger، Guan BertobaloS، هاندی، Handi. 🦥، جک پلاتن، جک اسمیت، جو، جان داربی، جولسیونگبرگ، جولیان کلمبو، پارک جونسئونگ، جاستین هال، knj، لایت، لیرویفنگ، لوئیس اشر، مانوئل مایستر، مارتین تراپ، متیو کانتو، متیو جاستیس، مائوریسی آباد گوتیرز، مایکل هولاسروی، مکورو هوسروی اسپیر، پل والادارس، پلاتول، پراجوال، رابین بولر، رومن، سباستین بلتران، شرقو، استفانی لین، تانیشق مانوجا، تاریک، توماس بونت، اوگو، ویراب، WavyCat، Waxer59 و زبیر بن ضمیر