‏ارتقا به Preact 11: چه چیزهایی عوض می‌شه

به گفتهٔ تیم Preact، نسخهٔ ۱۱ یه آپگرید با کمترین تغییر شکننده نسبت به 10.x هست. حداقل مرورگرهایی که بدون polyfill پشتیبانی می‌شن حالا Chrome 71، Safari 12.1، Firefox 69 و Edge 79 هستن و حداقل TypeScript هم 5.1 شده. دلیل این آخری بهبودهایی هست که تیم TS برای تایپ JSX داده و Preact باهاشون چند مشکل قدیمی تایپ رو حل کرده.

بزرگ‌ترین تغییر توزیع اینه که Preact 11 فقط ES module با پسوند .mjs منتشر می‌کنه و باندل‌های CommonJS، UMD و .module.js حذف شدن. روی runtimeهایی که require(esm) دارن، require('preact') هنوز کار می‌کنه. ولی اگه مستقیم preact/dist/preact.min.js رو برمی‌داشتی یا از UMD global استفاده می‌کردی، باید بری سراغ import معمولی ESM یا یه CDN مخصوص ESM.

Hydration 2.0 مهم‌ترین قابلیت جدیده. hydration یعنی وقتی Preact رویدادها رو روی HTMLی که سرور فرستاده سوار می‌کنه. توی Preact X هر مرز async، مثلاً یه کامپوننت lazy، باید دقیقاً یه DOM node برمی‌گردوند. حالا صفر یا چند node هم مجازه، مثلاً یه Fragment با دو تا پاراگراف. با SSR استریمی هم هماهنگه و با کامنت‌های نشانگر ثابت، hydration رو روی آخرین DOM استریم‌شده ادامه می‌ده، نه روی fallback قدیمی.

refها هم حالا به‌طور پیش‌فرض forward می‌شن و مثل یه prop عادی به کامپوننت می‌رسن، پس دیگه forwardRef از preact/compat لازم نیست:

function MyComponent({ ref }) {
  return <h1 ref={ref}>Hello, world!</h1>;
}

<MyComponent ref={myRef} />;
// Preact 10: myRef.current is an instance of MyComponent
// Preact 11: myRef.current is the <h1> DOM element

با preact/compat، ref به class componentها forward نمی‌شه چون React هم همین کارو می‌کنه، ولی توی Preact خالص به کلاس‌ها هم می‌رسه. اگه رفتار قبلی رو بخوای، راهنما یه snippet با options.vnode داده. hookها هم حالا مثل React با Object.is مقایسه می‌کنن، پس NaN به‌عنوان state دیگه رندر بی‌دلیل نمی‌سازه. preact/compat هم APIهای جدید React مثل use() و useEffectEvent() رو اضافه کرده.

چند تغییر API هم هست: createPortal حالا مستقیم از preact میاد. اضافه شدن خودکار px به عددهای style و پشتیبانی defaultProps به preact/compat رفتن، یعنی بدون compat عدد 500 برای height دیگه 500px نمی‌شه. پارامتر سوم render() یعنی replaceNode حذف شده و جاش پکیج preact-root-fragment هست. Component.base و SuspenseList هم حذف شدن. cleanup توی useEffect حالا بعد از paint اجرا می‌شه، پس تست‌هایی که بلافاصله بعد از unmount چیزی رو چک می‌کنن شاید لازم باشه اول effectها رو flush کنن.

نکات کلیدی:

• حداقل نسخه‌ها: Chrome 71، Safari 12.1، Firefox 69، Edge 79 و TypeScript 5.1.
• Preact 11 فقط ESM با پسوند .mjs منتشر می‌کنه و باندل‌های CommonJS و UMD حذف شدن.
• Hydration 2.0 اجازه می‌ده هر مرز async صفر یا چند DOM node برگردونه.
• ref به‌طور پیش‌فرض forward می‌شه و forwardRef لازم نیست.
• px خودکار و defaultProps به preact/compat رفتن و createPortal به core اومده.
• replaceNode، Component.base و SuspenseList حذف شدن و useRef توی تایپ‌ها مقدار اولیه می‌خواد.
• فضای نام JSX کوچیک شده و تایپ‌هایی مثل ButtonHTMLAttributes حالا مستقیم از preact میان.