Astro 5.6 | Astro

Astro 5.6 دارای درجه یک است astro:env و جلسه آزمایشی از Cloudflare پشتیبانی می کند و کنترل بیشتری بر واکشی اولیه می دهد.

☁️ با این ویژگی های جدید در Astro به ابرها بروید:

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

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

جهانی astro:env از Cloudflare

از Astro 5، می توانید با استفاده از متغیرهای محیط ایمن نوع دسترسی داشته باشید astro:env. با این حال، متغیرهای محیطی در Cloudflare فقط در یک درخواست در دسترس بودند – محدود کردن زمان و مکان استفاده از آنها. برای مثال، اگر می‌خواهید از یک نمونه سرویس گیرنده API مشترک استفاده کنید، اگر خارج از یک درخواست نمونه‌سازی می‌کنید، نمی‌توانید از متغیرهای محیطی استفاده کنید. این می تواند گیج کننده باشد و با دیگر آداپتورهای ما متفاوت بود.

Astro 5.6 این محدودیت را حذف می کند، به این معنی که اکنون می توانید به متغیرهای محیط خود در کد سرور خود به صورت سراسری دسترسی داشته باشید و آداپتور Cloudflare را با سایر آداپتورهای رسمی مطابقت می دهد. این به لطف پیشرفت‌هایی در Cloudflare Workers که قبلاً در Astro پیاده‌سازی شده‌اند امکان‌پذیر است.

import { defineMiddleware } from 'astro:middleware';
import { API_URL } from 'astro:env/server';
import { createClient } from './client.js';
const client = createClient(API_URL);
export const onRequest = defineMiddleware((ctx, next) => {
  ctx.locals.client = client;

این بهبود تجربه توسعه‌دهنده‌ای منسجم‌تر را در تمام محیط‌های سرور Astro ایجاد می‌کند و به این معنی است که لازم نیست در مورد اینکه چه چیزی به‌عنوان محدوده درخواست یا دامنه جهانی محسوب می‌شود، نگران باشید.

جلسات آزمایشی Cloudflare

Astro Sessions API یک ویژگی آزمایشی است که به شما امکان می دهد به راحتی داده های کاربر را بین درخواست ها ذخیره کنید. از یک ذخیره سازی قابل اتصال استفاده می کند که به طور خودکار هنگام استفاده از آداپتورهای Node یا Netlify پیکربندی می شود.

با Astro 5.6، ما این ادغام ساده را به Cloudflare نیز آورده ایم. Astro اکنون هنگام استفاده از جلسات با آداپتور Cloudflare، ذخیره سازی Cloudflare KV را به طور خودکار پیکربندی می کند. این بدان معناست که داده‌های جلسه شما را می‌توان به طور ایمن در شبکه جهانی Cloudflare با حداقل پیکربندی ذخیره کرد و به آنها دسترسی داشت.

مراحل اول سه مرحله است:

1. با استفاده از Wrangler CLI یک فضای نام KV ایجاد کنید:

   npx wrangler kv namespace create "SESSION"

2. فضای نام KV را در پیکربندی Wrangler خود اعلام کنید:

3. جلسات آزمایشی را در پیکربندی Astro خود فعال کنید:

   export default defineConfig({

سپس می توانید از جلسات در کد سرور خود استفاده کنید:

export const prerender = false;
const cart = await Astro.session.get('cart');
a href="/checkout">🛒 {cart?.length ?? 0} itemsa>

برای اطلاعات بیشتر، به مستندات جلسات آزمایشی مراجعه کنید.

گزینه جدید برای واکشی اولیه

با کنترل های پیش واکشی جدید Astro تعادل کاملی بین سرعت و استفاده از منابع پیدا کنید. با تجربی clientPrerender پرچم فعال است، می توانید استفاده کنید eagerness گزینه گنجانده شده است prefetch() به مرورگر نشان دهد که با چه اشتیاق باید اهداف پیوند را از قبل واکشی/پیش‌اجرا کند.

این گزینه جدید، که با API قوانین گمانه زنی مرورگر مطابقت دارد، به شما کنترل دقیقی را بر نحوه تهاجمی مرورگر می‌دهد که پیوندهای شما را از قبل واکشی یا از قبل اجرا کند:

// Control prefetching eagerness
import { prefetch } from 'astro:prefetch';
// Let's be strategic about this resource-intensive page
prefetch('/data-heavy-dashboard', { eagerness: 'conservative' });
// This page is critical to the user journey, load it ASAP!
prefetch('/product-details'); // defaults to `{ eagerness: 'immediate' }`
// For most pages, a balanced approach works best
prefetch('/about', { eagerness: 'moderate' });

شما می توانید از سه سطح تمایل انتخاب کنید:

• 'immediate': اگر محدودیت منابع اجازه می دهد، فوراً واکشی از قبل انجام دهید
• 'eager': احتمالاً اتصال لازم است، بنابراین در اسرع وقت دانلود کنید
• 'moderate': به مرورگر اجازه دهید تصمیم بگیرد که چه زمانی واکشی اولیه را انجام دهد
• 'conservative': فقط زمانی که به احتمال زیاد مورد نیاز است واکشی از قبل انجام دهید

این ویژگی به ویژه هنگام کار با تعداد زیادی اتصال ارزشمند است، در غیر این صورت ممکن است با محدودیت های مرورگر مواجه شوید تا از حدس و گمان بیش از حد جلوگیری کنید.

با تشکر از عضو انجمن Marocco2 برای مشارکت در این ویژگی!

گزینه واکشی سفارشی برای صفحات خطای از پیش رندر شده

هنگامی که یک صفحه درخواستی نیاز به نمایش خطا دارد، ممکن است آداپتور شما نیاز داشته باشد که یک صفحه خطای از پیش رندر شده را از جایی غیر از سرور شما بازیابی کند. این در حال حاضر از طریق یک پرس و جو پیش فرض انجام می شود fetch پیاده سازی که ممکن است برای همه موارد استفاده مناسب نباشد. به عنوان مثال، صفحه ممکن است از مکانی ارائه شود که نمی توان آن را به صورت بازگشتی فراخوانی کرد، یا ممکن است صفحه در جای دیگری ذخیره شود.

Astro 5.6 یک گزینه جدید اضافه می کند prerenderedErrorPageFetch گزینه ای در API آداپتور که به آداپتورها اجازه می دهد تا پیاده سازی های سفارشی را برای بازیابی صفحات خطای از پیش رندر شده ارائه دهند.

مثال زیر استخراج سفارشی برای 500.html و 404.html، خواندن آنها از دیسک به جای برقراری تماس HTTP:

return app.render(request, {
  prerenderedErrorPageFetch: async (url: string): PromiseResponse> => {
    if (url.includes("/500")) {
        const content = await fs.promises.readFile("500.html", "utf-8");
        return new Response(content, {
          headers: { "Content-Type": "text/html" },
    const content = await fs.promises.readFile("404.html", "utf-8");
      return new Response(content, {
        headers: { "Content-Type": "text/html" },

اگر مقداری ارائه نشود، Astro استفاده خواهد کرد fetchو درخواست بدهید /500 یا /404 بر حسب مورد. این همان رفتاری است که در نسخه های قبلی Astro وجود دارد.

اطلاعات بیشتر در مورد این ویژگی را در مرجع Adapter API بخوانید.

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

جدید load() روش برای جلسات آزمایشی

هنگام استفاده از Session API آزمایشی، معمولاً نیازی به نگرانی در مورد شناسه جلسه و مدیریت کوکی ندارید: Astro به طور خودکار کوکی های کاربر را می خواند و در صورت نیاز جلسه صحیح را بارگیری می کند. با این حال، گاهی اوقات شما نیاز به کنترل بیشتری بر روی جلسه بارگیری دارید.

جدید load() متد به شما اجازه می دهد تا به صورت دستی یک جلسه را با ID بارگیری کنید. اگر خودتان شناسه جلسه را مدیریت می کنید یا می خواهید یک جلسه را بدون استفاده از کوکی ها ردیابی کنید، مفید است. به عنوان مثال، ممکن است بخواهید یک جلسه را از یک کاربر وارد شده در دستگاه دیگری بازیابی کنید یا با یک نقطه پایانی API که از کوکی ها استفاده نمی کند کار کنید.

import type { APIRoute } from 'astro';
export const GET: APIRoute = async ({ session, request }) => {
  // Load the session from a header instead of cookies
  const sessionId = request.headers.get('x-session-id');
  await session.load(sessionId);
  const cart = await session.get('cart');
  return Response.json({ cart });

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

برای اطلاعات بیشتر، به مستندات جلسات آزمایشی مراجعه کنید.

اعتبار سنجی پیکربندی بهبود یافته

Astro اکنون پیکربندی شما را پس از هر بار اجرای ادغام بررسی می‌کند و تشخیص زودهنگام مشکلات و تعیین منبع مشکلات را آسان‌تر می‌کند. این به ویژه هنگام استفاده از ادغام های متعدد مفید است، زیرا به اطمینان از سازگاری همه آنها با یکدیگر و با پروژه Astro شما کمک می کند.

تغییرات مهم در API آزمایشی SVG

آزمایشی SVG RFC موضوع بحث های سنگینی بوده است، بنابراین از همه شما برای مشارکت متشکریم! در نتیجه بحث و گفتگو تصمیم گرفتیم موقت حذف برخی ویژگی ها گاهی اوقات با یک API آزمایشی اینطور می شود!

اما این بدان معنا نیست که آنها برای همیشه رفته اند! حذف آنها در این مرحله اولیه به ما زمان می‌دهد تا بحث‌های جداگانه داشته باشیم و ویژگی‌ها را بر اساس بازخورد شما ایجاد کنیم، تعادل مناسبی بین DX، بهترین شیوه‌های دسترسی و پیش‌فرض‌های معقول ایجاد کنیم.

این عناصر دیگر در دسترس نیستند و باید از کد شما حذف شوند:

• را title تا زمانی که بتوانیم تعادل مناسبی بین تجربه توسعه‌دهنده و قابلیت دسترسی برقرار کنیم، prop حذف شده است. لطفا همه را تعویض کنید title لوازم جانبی به اجزای خود را با aria-label:

  Logo title="My Company Logo" />
  Logo aria-label="My Company Logo" />

• حالت Sprite به طور موقت حذف شده است در حالی که ما یک پیاده سازی جدید را در نظر می گیریم که به نحوه استفاده از این ویژگی در عمل نگاه می کند. این بدان معنی است که دیگر مجموعه ای وجود ندارد mode گزینه ها و همه SVG ها تعبیه می شوند. تمام موارد از mode باید از پروژه شما حذف شود زیرا دیگر نمی توانید حالت را کنترل کنید:

  import { defineConfig } from 'astro'
  export default defineConfig({

• به طور پیش فرض role به دلیل بازخورد توسعه دهندگان دیگر اجرا نمی شود. لطفا مورد مناسب را اضافه کنید role هر جزء به طور جداگانه، در صورت لزوم:

  Logo role="img" /> // To keep the role that was previously applied by default

• را size پشتیبانی برای عملکرد بهتر در ترکیب با حذف شده است viewBox و سبک ها/ویژگی های اضافی. لطفا تغییر دهید size با اکسپرس width و height صفات:

  Logo width={64} height={64} />

رفع اشکال

مثل همیشه، ما سخت کار می کنیم تا مشکلات پس از انتشار 5.5 را برطرف کنیم. برای جزئیات کامل تغییرات لاگ را ببینید.

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

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

از همه مشارکت‌کنندگان دیگری که به امکان‌پذیر شدن Astro 5.6 کمک کردند، از جمله ادوارد برونتیر، مارتین تراپ، واردامان بانداری، مراکش2، یوری میچورین و مایکل استرامل، تشکر می‌کنیم.

ما مشتاقانه منتظریم ببینیم چه چیزی با Astro 5.6 ایجاد می کنید! اگر سوالی دارید، نظری دارید یا فقط می خواهید سلام کنید، از Astro Discord دیدن کنید.