‏Tamagui 3: رانتایم نیتیو با C++، پراپ‌های تخت و حالت Tailwind

Tamagui 3 منتشر شده و هدف اصلیش، به گفته‌ی تیم، اینه که بخش بیشتری از استایل‌دهی رو از مسیر رندر React بیرون بکشه، ولی همچنان یه کد UI واحد برای React Native و وب داشته باشی. مهم‌ترین تغییر یه رانتایم نیتیو جدیده: پکیج @tamagui/native-registry آپدیت‌های تم رو می‌بره توی یه رجیستری کوچیک C++ و از طریق Fabric (یعنی لایه‌ی رندر معماری جدید React Native) مستقیم روی ویوهای نیتیو اعمال می‌کنه. یعنی وقتی تم عوض می‌شه، کامپوننت‌هایی که ازش استفاده می‌کنن دوباره رندر نمی‌شن.

این رانتایم فعلاً اختیاری و بتاست. React Native 0.82 یا بالاتر با New Architecture لازم داره، باید Nitro Modules رو نصب کنی، گزینه‌ی experimental.nativeFastPath رو توی کامپایلر روشن کنی، موتور رو ثبت کنی و اپ رو دوباره build کنی. کامپایلر هم قوی‌تر شده: روی نیتیو حالا شرط‌های منطقی، ternaryهای تودرتو، spreadهایی که موقع build معلومن و styled.dynamic() رو هم حل می‌کنه. یه مقدار متغیر مثل opacity دیگه کل کامپوننت رو مجبور نمی‌کنه بره سراغ رانتایم کامل؛ بقیه‌ی استایل‌های ثابتش از قبل حل می‌شن.

پراپ‌های تخت (flat style props) سینتکس رو خیلی شبیه Tailwind کردن. مقدار پایه و همه‌ی شرط‌های یه پراپ کنار هم می‌شینن و می‌شه شرط‌ها رو مثل dark:sm:hover: زنجیر کرد. دو شکل رشته‌ای و آبجکتی هست که هر دو به یه CSS کامپایل می‌شن:

// before
<View bg="$background" hoverStyle={{ bg: '$backgroundHover' }} $sm={{ p: '$6' }} p="$4" />

// after, string form
<View bg="background hover:background-hover" p="4 sm:6" />

با settings.styleValueSyntax می‌شه فقط یکی از این دو شکل رو مجاز کرد. Config v6 هم اسم کلیدهای چندکلمه‌ای تم رو kebab-case کرده، مثل background-hover، و یه codemod برای تبدیل کد قدیمی هست. React Strict DOM هم اضافه شده، یعنی المان‌های معنایی HTML می‌نویسی و روی وب DOM و روی موبایل معادل React Native‌شون رندر می‌شن. نسخه‌ی Tailwind (@tamagui/tailwind) هم کلاس‌های utility رو توی className قبول می‌کنه؛ این کلاس‌ها روی وب به CSS اتمی و روی iOS و Android به استایل React Native تبدیل می‌شن.

هر کامپوننت حالا دو نیمه داره: پکیج tamagui نسخه‌ی استایل‌دار مثل Button و Dialog رو می‌ده و پکیج‌های جدا یا @tamagui/ui فقط رفتار و قطعه‌ها رو بدون استایل می‌دن. روی وب هم یه حالت zero-runtime آزمایشی هست که کامپوننت‌های مناسب رو بدون رانتایم Tamagui به المان و CSS تبدیل می‌کنه. نسخه‌ی 3 همچنین aliasهای قدیمی رو حذف کرده و اسم پراپ‌ها رو استاندارد وب کرده.

چون شرط‌ها حالا داخل خود مقدار رشته‌ای هستن، TypeScript نمی‌تونه کل گرامر رو توصیف کنه؛ به گفته‌ی تیم، ترکیب‌ها به بیش از یه میلیون عضو union می‌رسه و TypeScript اصلاً هیچ پیشنهادی نمی‌ده. برای همین یه language server با Rust ساختن (@tamagui/lsp) که تکمیل خودکار، خطای «منظورت این بود؟»، نمایش مقدار token برای هر تم و نمونه‌ی رنگ رو می‌ده و توی Neovim، Zed، JetBrains و بقیه کار می‌کنه. ترتیب اولویت استایل‌ها هم حالا لایه‌های مشخصی داره: styled()، variantها، resolverها، پراپ‌های محل استفاده و در آخر style که از همه قوی‌تره.

نکات کلیدی:

• رانتایم نیتیو C++ (@tamagui/native-registry) تم رو بدون رندر دوباره اعمال می‌کنه، ولی بتاست و React Native 0.82+ با New Architecture می‌خواد.
• پراپ‌های تخت شرط‌ها رو مثل Tailwind توی یه مقدار می‌نویسن، مثلاً p="4 sm:6".
• @tamagui/tailwind کلاس‌های utility رو هم برای وب و هم برای موبایل کامپایل می‌کنه.
• language server جدید با Rust نوشته شده چون TypeScript نمی‌تونه بیش از یه میلیون ترکیب رو پوشش بده.
• Config v6 کلیدهای تم رو kebab-case کرده و برای مهاجرت codemod و راهنمای ارتقا هست.