چیزهای جدید در Svelte 4: افزایش عملکرد و توسعه کارآمد

در 22 ژوئن، Svelte نسخه اصلی جدید خود را اعلام کرد.

حتی اگر به عنوان “عمدتاً در مورد ایجاد زمینه برای این پیشرفت های آینده” ارائه شود، همچنین سهم خود را از بهبودها همراه با بازسازی برخی از وب سایت های ویترین آنها به ارمغان می آورد.

اگر بیشتر شنونده هستید تا خواننده، این نسخه در Svelte Radio Live نیز ضبط شده است

جدول محتویات

بهبود عملکرد

📉 کاهش شدید پکیج Svelte

برای این نسخه، Svelte مطمئناً مقداری وزن کم کرده است!

اندازه کلی Svelte کاهش یافت از 10.6 مگابایت تا 2.8 مگابایت، تقریباً 75٪ کاهش اندازه دارد.

همانطور که وابستگی های آن کاهش یافت از 61 تا 16، بسته های اضافی مورد نیاز برای اجرای Svelte نیز کاهش یافته است و همچنین تعداد وابستگی های SvelteKit را کاهش می دهد.

این کاهش عوارض جانبی خوبی را به همراه دارد، مانند تجربه REPL سریعتر، تجربه سریعتر در وب سایت تعاملی و اجرای بسیار سریعتر npm install (از هر بسته مدیری که ممکن است استفاده کنید).

همانطور که از این انتشار، Svelte مطمئنا در حال حاضر!

🚿 آبرسانی بهتر

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

به عنوان مثال، کد تولید شده برای وب سایت SvelteKit از 126.3 کیلوبایت به 110.2 کیلوبایت، تقریبا 13 درصد کاهش یافته است.

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

🎭 محدوده انتقال

اکنون انتقال ها به طور پیش فرض محلی هستند.

این امر از جهانی بودن آنها به طور پیش‌فرض جلوگیری می‌کند و در نتیجه خطر تداخل با دیگران را به همراه خواهد داشت که منجر به برخورد انتقال‌های شما در حین بارگذاری صفحه می‌شود.

🧱 تالیف اجزای وب

ایجاد یک کامپوننت وب در Svelte بسیار آسان است:

<svelte:options tag="my-component" />

با این حال، برای موارد پیشرفته تر مانند کنترل بازتاب یا عدم انعکاس مقادیر به روز شده prop به DOM، غیرفعال کردن DOM سایه و غیره نیز محدود بوده است.

Svelte 4 با تغییر پیکربندی آن به یک بخش اختصاصی، تجربه نوشتن Web Component را روان‌تر می‌کند. customElement ویژگی از svelte:options.

این ویژگی تعدادی گزینه دارد که به شما کمک می کند تا کامپوننت وب خود را پیکربندی کنید:

<svelte:options
  customElement={{
    tag: 'custom-element',
    shadow: 'none',
    props: {
      name: {
        <!-- 👇 Reflects the updated value back to the DOM -->
        reflect: true,
        <!-- 👇 Reflects the value as a number -->
        type: 'Number',
        <!-- 👇 Name of the attribute -->
        attribute: 'element-index'
      }
    }
  }}
/>

<script>
  export let elementIndex;
</script>

...

🛡️ انواع سختگیرانه تر

انواع سخت‌گیرانه‌تر اکنون برای آنها اعمال می‌شود createEventDispatcher، Action، ActionReturn و onMount:

• createEventDispatcher اکنون به دنبال صحت پارامترهای ارائه شده با توجه به نوع و تعداد آنها می گردد و خطاهای مربوطه را پرتاب می کند:

import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher<{
  optional: number | null;
  required: string;
  noArgument: never;
}>();

// Svelte version 3:
dispatch('optional');
dispatch('required'); // Detail argument still omitted
dispatch('noArgument', 'surprise'); // Detail argument still provided

// Svelte version 4 using TypeScript strict mode:
dispatch('optional');
dispatch('required'); // Error, missing argument
dispatch('noArgument', 'surprise'); // Error, cannot pass an argument

• Action و ActionReturn اکنون یک نوع پارامتر پیش فرض داشته باشید never اگر Action هیچ نوع عمومی ارائه نشده است:

const untyped: Action = (node, params) => {
  // Now an error as `params` is expected not to exist
}

const typed: Action<HTMLElement, string> = (node, params) => {
  // `params` is of type string
}

• onMount اکنون نیاز به بازگشت یک تابع همزمان دارد، زیرا اگر انتظار می‌رود که فراخوانی برای نابودی فراخوانی شود، یک تابع ناهمزمان ممکن است منجر به باگ شود، زیرا این مورد فقط برای توابع همزمان است:

// ❌ `cleanup()` is not called due to the function being async
onMount(async () => {
  const bar = await foo();
  return cleanup();
});

// ✅ `cleanup()` will be called
onMount(() => {
  foo().then(bar => /* ... */ );
  return cleanup();
});

وب سایت های به روز شده

📝 وب سایت آموزش

این آموزش برای تجربه کاربری بهتر دوباره کار شده است:

سابق	جدیدتر

طراحی همچنان یکسان است: یک پانل کناری با متن و دستورالعمل با یک ویرایشگر کد در سمت راست برای انجام تمرین.

با این حال، برخی از موارد منظم مانند دیدن ساختار فایل در کنار، کاهش تعداد عناصر در نوار ناوبری و ناوبری بهتر بین بخش‌ها، بهبود یافتند. همچنین دارای حالت تاریک است!

این آموزش اکنون در https://learn.svelte.dev اجرا می شود در حالی که آموزش قبلی در https://svelte.dev/tutorial/basics قابل دسترسی است.

📚 وب سایت Svelte

وب سایت Svelte همچنین یک کار مجدد داشت:

سابق	جدیدتر

صفحات تقسیم شده اند، ناوبری موبایل بهبود یافته است، اسناد TypeScript بهبود یافته و حالت تاریک نیز منتشر شده است.

در حال حاضر، وب‌سایت SvelteKit هنوز به‌روزرسانی نشده است، اما یک کار مجدد برای ارائه یک تجربه مشابه در حال حاضر ادامه دارد.

راهنمای مهاجرت

این نسخه به عنوان گامی به سوی Svelte 5 و نه چندان تاثیرگذار نشان داده شده است.

برای ارتقا از Svelte 3 به Svelte 4، تیم ابزار مهاجرت خود را به روز کرده است و نباید بیشتر از اجرای دستور زیر طول بکشد:

npx svelte-migrate@latest svelte-4

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

• NodeJS 16 یا بالاتر
• SvelteKit 1.20.4 یا بالاتر
• TypeScript 5 یا بالاتر

جزئیات بیشتر در مورد الزامات در راهنمای مهاجرت ذکر شده است

از Svelte 5 چه انتظاری باید داشت

تقریباً هیچ اطلاعاتی در مورد آنچه در Svelte 5 قرار است به اشتراک گذاشته نشده است.

با این حال، همانطور که Svelte به شدت به ESLint گره خورده است، اندازه بسته آن نیز بسیار زیاد است. با بازنویسی فعلی ESLint، تا زمانی که Svelte 5 منتشر شود، اندازه آن ممکن است بیش از 50٪ دیگر کاهش یابد.

از آنجایی که Svelte بر روی تجربه و کارایی توسعه‌دهندگان تمرکز دارد، تغییراتی که احتمالاً شاهد تعدادی بهبود در آن زمینه‌ها خواهیم بود، همانطور که در پست وبلاگ آنها بیان شد:

Svelte 5 ویژگی های جدید و بهبود عملکرد را برای Svelte به ارمغان می آورد

امیدوارم در آنجا چیز مفیدی یاد بگیرید!