‏Remix 3.2 منتشر شد: CSP با nonce و رفع کلی باگ

Remix نسخه‌ی 3.2.0 رو منتشر کرده و خبر اصلیش یه middleware تازه به اسم csp() تو remix/middleware/csp ـه. CSP یعنی Content Security Policy، همون هدری که به مرورگر می‌گه کدوم اسکریپت‌ها و استایل‌ها اجازه‌ی اجرا دارن. این middleware برای هر درخواست یه nonce (یعنی یه کد تصادفی یک‌بارمصرف) می‌سازه و policy مناسبش رو هم کنارش می‌فرسته. کافیه قبل از render() اضافه‌ش کنی:

let router = createRouter({
  middleware: [
    csp({
      policy: ({ nonce }) => ({
        scriptSrc: [`'nonce-${nonce}'`],
      }),
    }),
    render(),
  ],
})

import mapها، module preloadها و استایل‌هایی که با css() ساخته می‌شن خودکار nonce می‌گیرن و تگ‌هایی که خودت می‌نویسی هم می‌تونن با getCspNonce(context) بهش برسن. frameهایی که سمت سرور رندر می‌شن از nonce خود سند استفاده می‌کنن و موقع ناوبری سمت کلاینت هم حفظ می‌شه. HMR هم حتی با یه policy سخت‌گیر بدون 'unsafe-eval' کار می‌کنه. حالت report-only هم پشتیبانی می‌شه.

تو remix/test هم mockها حالا mockImplementation()، mockImplementationOnce()، resetCalls()، callCount() و restore() دارن. mockهایی که با t.mock ساخته می‌شن حتی اگه تست fail بشه هم به حالت اول برمی‌گردن.

یه بخش مهم دیگه hydration ـه (یعنی وقتی جاوااسکریپت کلاینت روی HTMLی که سرور فرستاده سوار می‌شه). propهای clientEntry حالا قابل‌اعتمادتر hydrate می‌شن. از این به بعد فقط المنت‌هایی که با JSX یا createElement() ساخته شدن رندر می‌شن و آبجکت‌هایی که فقط شبیه المنت هستن، مثلاً چیزی که از JSON اومده، خطای Invalid child node می‌دن. یعنی داده‌ای که از دیتابیس یا API میاد دیگه نمی‌تونه markup تزریق کنه.

خروجی css() و prop style هم عوض شده و ممکنه چیزی رو بشکنه. عددها برای propertyهایی که عدد خالی قبول می‌کنن بی‌واحد می‌مونن، مثلاً flex: 2 دیگه 2px نمی‌شه. custom propertyها حروف بزرگ و کوچیکشون رو نگه می‌دارن و اسم کلاس‌های rmxc-* هم تغییر کرده. پس اگه تو تست یا selectorها این اسم‌ها رو hard-code کردی باید آپدیتشون کنی. در عوض rerender با css() تقریباً نصف زمان قبل رو می‌گیره.

چند تا رفع باگ دیگه هم هست: ناوبری دیگه موقع اضافه یا حذف شدن لینک‌های صفحه رو بی‌استایل نشون نمی‌ده، Safari موقع back و forward اسکرول رو کامل برمی‌گردونه و runtime مرورگر حدود 10 درصد کوچیک‌تر شده. اپ‌هایی که از استفاده نمی‌کنن کلاً runtime مربوط بهش رو لود نمی‌کنن. remix/session-storage/fs و remix/file-storage/fs هم دیگه با درخواست‌های هم‌زمان یا آپلود ناقص فایل رو خراب نمی‌کنن.

نکات کلیدی:

• middleware جدید csp() برای هر درخواست nonce می‌سازه و پکیجش csp-middleware@1.0.0 ـه
• mockهای remix/test حالا mockImplementation()، resetCalls()، callCount() و restore() دارن
• آبجکت‌های شبیه المنت که با JSX ساخته نشدن خطای Invalid child node می‌دن
• تو css() عدد flex: 2 دیگه 2px نمی‌شه و اسم کلاس‌های rmxc-* عوض شده
• runtime مرورگر remix/component حدود 10 درصد کوچیک‌تر شده