‏view-transitions-mock: ترنزیشن‌های مرورگر بدون دردسر

اگه تا حالا با View Transitions API کار کرده باشی، احتمالاً می‌دونی که پشتیبانی مرورگرها هنوز یکدست نیست. برخی مرورگرها کامل پشتیبانی می‌کنن، بعضی‌ها نصفه‌نیمه، و بعضی‌ها اصلاً. نتیجه‌اش می‌شه کدی پر از شرط‌های if که قبل از هر ترنزیشن باید چک کنی آیا مرورگر این قابلیت رو داره یا نه.

view-transitions-mock اومده این مشکل رو حل کنه. این کتابخونه یه پیاده‌سازی جاوااسکریپتیه که تمام APIی مربوط به Same-Document View Transitions رو شبیه‌سازی می‌کنه — البته بدون اینکه انیمیشن بصری نشون بده. به همین خاطر اسمش «mock» (شبیه‌ساز) هست نه polyfill کامل.

چیزایی که شبیه‌سازی می‌شن شامل document.startViewTransition()، کلاس ViewTransition با تمام پرامیس‌هاش (updateCallbackDone، ready و finished)، و همچنین View Transition Types می‌شه. در عوض، pseudo-tree، پراپرتی‌ها و سلکتورهای CSS، و خود انیمیشن‌ها شبیه‌سازی نمی‌شن.

استفاده ازش خیلی سادست. بعد از نصب از طریق npm، کافیه import { register } from "view-transitions-mock" بنویسی و قبل از اولین فراخوانی ترنزیشن، register() صدا بزنی. از اون لحظه به بعد، کدت روی همه مرورگرها بدون هیچ گاردی اجرا می‌شه.

رجیستر کردن این کتابخونه هم باهوشانه طراحی شده. به طور پیش‌فرض اول چک می‌کنه که آیا مرورگر به صورت native هم View Transitions و هم View Transition Types رو پشتیبانی می‌کنه یا نه. اگه هر دو وجود داشت، mock رجیستر نمی‌شه و مرورگر از قابلیت اصلی خودش استفاده می‌کنه.

دو تا گزینه پیکربندی هم داری: با requireTypes: false می‌تونی بگی که نیازی به پشتیبانی از View Transition Types نیست — مثلاً برای Firefox نسخه‌های ۱۴۴ تا ۱۴۶ که این قابلیت رو نداره. با forced: true هم می‌تونی mock رو حتی روی مرورگرهای با پشتیبانی کامل فعال کنی، که برای تست اینکه سایتت بدون ترنزیشن چطور به نظر می‌رسه خیلی کاربردیه.

تست‌های این پروژه با Playwright نوشته شده و روی طیف گسترده‌ای از مرورگرها اجرا می‌شه: از Chromium 110 که اصلاً View Transitions نداره، تا Firefox 146 که پشتیبانی جزئی داره، تا WebKit 26 که پشتیبانی کامل داره. این پوشش تستی خوب نشون می‌ده که می‌شه بهش اعتماد کرد.

این ابزار رو تیم Chrome Dev ساخته ولی یه پروژه رسمی گوگل به حساب نمیاد و تحت لایسنس Apache 2.0 منتشر شده.

نکات کلیدی:

• شبیه‌ساز جاوااسکریپتی View Transitions API برای مرورگرهای بدون پشتیبانی
• دیگه نیازی به if نیست
• انیمیشن بصری شبیه‌سازی نمی‌شه، فقط API جاوااسکریپت
• گزینه forced: true برای تست سایت بدون ترنزیشن
• گزینه requireTypes: false برای سازگاری با Firefox نسخه‌های قدیمی‌تر
• تست‌شده با Playwright روی ۵ مرورگر مختلف
• لایسنس Apache 2.0، ساخته تیم Chrome Dev