‏Playroom: زمین بازی کدمحور برای دیزاین سیستم

Playroom یه پروژهٔ اوپن‌سورس از SEEK هست و به گفتهٔ مستنداتش می‌خواد یه کار مشخص رو حل کنه: طراحی رو تو همون مدیوم نهایی، یعنی کد، انجام بدی. یه محیط بدون نصب می‌سازه که تو مرورگر باز می‌شه، کامپوننت‌های کتابخانهٔ خودت رو می‌شناسه، و کد JSXی که می‌نویسی رو همزمان روی چند تم و چند عرض صفحه رندر می‌کنه. خروجی نهایی یه باندل مستقله که می‌تونی کنار مستندات دیزاین سیستمت دیپلوی کنی.

راه‌اندازی‌ش کمه: پکیج رو به عنوان dev-dependency نصب می‌کنی، دو اسکریپت playroom start و playroom build به package.json اضافه می‌کنی، و یه فایل playroom.config.js تو ریشهٔ پروژه می‌سازی. تو همین فایل مسیر کامپوننت‌ها، مسیر تم‌ها، عرض‌های صفحه و جای ادیتور رو تعیین می‌کنی. پورت پیش‌فرض ۹۰۰۰ هست و مرورگر خودش باز می‌شه.

module.exports = {
  components: './src/components',
  outputPath: './dist/playroom',
  themes: './src/themes',
  widths: [320, 768, 1024],
};

چند قابلیت دیگه هم داره که مستقیم به کار تیم دیزاین سیستم می‌آد. با فایل snippets قطعه‌کدهای آماده تعریف می‌کنی و وقتی تو لیست بالا و پایین می‌ری، پیش‌نمایش زنده‌شون رو روی همهٔ فریم‌ها می‌بینی. frameComponent بهت اجازه می‌ده کامپوننت‌ها رو داخل providerهای خودت مثل ThemeProvider بپیچی، و scope متغیرهای اضافه رو به دسترس JSX می‌رسونه. frameSettings هم کلیدهای بولی برای هر فریم می‌سازه، مثل RTL Layout یا نشون‌دادن touch targetها.

اشتراک‌گذاری کارِ خودِ URLه: کل حالت ادیتور تو آدرس کد می‌شه، پس با کپی‌کردن لینک، کاری که کردی رو به بقیه نشون می‌دی. پیش‌فرض تو hash ذخیره می‌شه که با paramType: 'search' عوض می‌شه. اگه tsconfig.json داشته باشی، پراپ‌ها با react-docgen-typescript خونده می‌شن و ادیتور اتوکامپلیت بهتری می‌ده. یه نکته که خوبه بدونی: مقدار frameSettings فقط تو حافظه می‌مونه، نه تو لینک، پس با رفرش ریست می‌شه.

نکات کلیدی:

• نصب به عنوان dev-dependency، با دو دستور playroom start و playroom build.
• تنظیمات تو playroom.config.js؛ فرمت ESM با پسوندهای .js، .mjs و .cjs پشتیبانی می‌شه.
• پورت پیش‌فرض ۹۰۰۰ و openBrowser پیش‌فرض true.
• حالت ادیتور تو URL ذخیره می‌شه (پیش‌فرض hash، قابل تغییر به search).
• تایپ‌ها با react-docgen-typescript خونده می‌شن؛ با typeScriptFiles می‌تونی گلاب‌ها رو محدود کنی.
• iframeSandbox حداقل به allow-scripts نیاز داره؛ لایسنس MIT.