‏Unlayer Elements: یه بار بنویس، همه‌جا رندر کن

تو این پروژه اومده که Unlayer Elements یه کتابخونهٔ کامپوننت ری‌اکت متن‌بازه که یه مشکل آشنا رو حل می‌کنه: معمولاً برای ایمیل، صفحهٔ وب و PDF مجبوری سه تا پیاده‌سازی جدا نگه داری. اینجا تو محتوا رو یه بار می‌نویسی و همون کامپوننت‌ها به هر سه شکل رندر می‌شن.

سه حالت خروجی داره: Email که HTML امن برای کلاینت‌هایی مثل Outlook و Gmail و Yahoo و Apple Mail می‌سازه، Web که صفحهٔ ریسپانسیو می‌ده، و Document که HTML آمادهٔ چاپ برای تولید PDF بیرون می‌ده. تیم سازنده می‌گه فرق اصلیش با ابزارایی مثل React Email یا MJML اینه که اونا فقط ایمیل رو پوشش می‌دن، ولی این هر سه رو با هم داره.

کار کردن باهاش هم همون روال آشنای ری‌اکته و با React و Next.js و Remix و Server Components کار می‌کنه؛ لازم نیست یه زبون قالب‌بندی جدید یاد بگیری، با همون JSX خودت کامپوننت‌ها رو می‌چینی و آخرش با یه تابع رندر می‌گیری:

import { Email, Row, Column, Button, renderToHtml } from '@unlayer/react-elements';

const html = renderToHtml(<WelcomeEmail />);

کامپوننت‌ها یه سلسله‌مراتب مشخص دارن: یه ریشه مثل یا یا حالت رندر رو تعیین می‌کنه، بعد با چیدمان ستون‌ها میاد و توش ها و کامپوننت‌های محتوایی مثل و و قرار می‌گیرن. برای چیدمان‌های مختلف هم ColumnLayouts آماده داره، از یک‌ستونه تا چهارستونه و نسبت‌های دلخواه.

طبق چیزی که تو مخزن گفته شده، خروجیش کاملاً تمیزه: renderToHtml() یه سند HTML کامل و آمادهٔ تولید می‌ده، بدون نشونه‌های hydration ری‌اکت و بدون جاوااسکریپت سمت کلاینت. اگه بخوای خودت سند رو بچینی، renderToHtmlParts() بخش‌های head و body رو جدا برمی‌گردونه، و renderToJson() هم خروجی سازگار با ادیتور بصری Unlayer می‌ده که می‌شه بین کد و ویرایشگر رفت‌وبرگشت کرد.

از نظر حجم هم سبکه: حدود ۱۲ کیلوبایت gzip شده، tree-shakeable، با TypeScript از پایه نوشته شده و برای محیط‌های SSR و اپ‌های حساس به کارایی طراحی شده. کاربردهای واقعیش هم چیزایی مثل ایمیل‌های تراکنشی، تولید فاکتور و قرارداد سمت سرور، و محتوای CMS محورن. مجوزش هم MITه.

نکات کلیدی:

• با یه درخت کامپوننت ری‌اکت، خروجی ایمیل و وب و PDF می‌گیری
• خروجی ایمیلش برای Outlook و Gmail و Apple Mail امنه
• با React و Next.js و Remix و Server Components کار می‌کنه
• حدود ۱۲ کیلوبایت gzip، tree-shakeable و بدون جاوااسکریپت سمت کلاینت
• با renderToJson() می‌شه با ادیتور بصری Unlayer رفت‌وبرگشت کرد؛ مجوز MIT