‏بازنگری TSRX: دوباره شبیه JSX شد

تو این پست اومده که TSRX از یه ایده‌ی پروژه‌ی Ripple دراومده: بذار تمپلیت‌های UI قدرت جاوااسکریپت رو نزدیک به مارک‌آپ نگه دارن. ولی همین‌طور که بزرگ‌تر شده، تیم فهمیده اون ایده کجاها به مرزهای روشن‌تری نیاز داره، مخصوصاً برای کدبیس‌هایی که باید بین تیم‌ها، ابزارها و توسعه‌ی کمک‌گرفته از هوش مصنوعی مقیاس بگیرن.

به گفته‌ی نویسنده بازخورد یکدست بود: آدم‌ها همیشه نمی‌تونستن فرق جاوااسکریپتی که به‌عنوان منطق معمولی کامپوننت اجرا می‌شه رو با نحوی که شکل جاوااسکریپت داشت ولی معنیش «این UI رو بساز» بود، تشخیص بدن. کنترل‌فلوی قبلی زیادی شبیه if و switch و for بومی بود؛ این کار باعث می‌شد هم اسکن کردن کد برای آدم سخت بشه و هم LLMها نتونن با اطمینان توضیحش بدن یا ویرایشش کنن، چون معناشناسی تمپلیت سفارشی خودش رو شبیه جاوااسکریپت واقعی جا می‌زد.

مهم‌ترین بخش این آپدیت هم عادی‌ترین بخششه: حالا اگه JSX بلد باشی، سطح تمپلیت باید آشنا به‌نظر برسه. متن ثابت همون متن JSX هست، مقدار پویا از آکولاد عبارت استفاده می‌کنه و چند فرزند تو یه المان یا fragment زندگی می‌کنن. قبلاً متن ثابت باید با کوتیشن از پارس شدن به‌عنوان دستور تمپلیت انصراف می‌داد، ولی حالا Hello there! دقیقاً همون معنی‌ای رو می‌ده که کاربر JSX انتظار داره. مهم‌ترین تغییر اینه که TSRX حالا مثل JSX عبارت‌محوره، نه دستوری مثل شروعش.

نویسنده توضیح می‌ده که TSRX کنار آکولاد عبارت {value} که JSX داره، نسخه‌ی دستوری @{...} رو هم اضافه کرده. این هنوز یه عبارته، پس هرجا JSX بتونه بیاد می‌تونه بیاد، ولی فرقش اینه که می‌تونه دستورهای جاوااسکریپت رو هم در بر بگیره و آخرش یه خروجی تمپلیت بده. یه ظرف دستوری دقیقاً با یک گره‌ی خروجی تموم می‌شه: یه المان، یه fragment، یا کنترل‌فلوی JSX؛ بعد از اون دیگه هیچ منطق جاوااسکریپتی نمی‌تونه بیاد.

همین شکل برای بدنه‌ی کامپوننت هم به‌کار می‌ره؛ وقتی بدنه قبل از رندر به یه setup محلی نیاز داره، به جای پیچیدنش تو یه fragment خالی، مستقیم یه ظرف دستوری برمی‌گردونی:

const ProductCard = ({ product }: ProductCardProps): JSX.Element => @{
  const price = formatCurrency(product.price);

  <article>
    <h2>{product.name}</h2>
    <p>{price}</p>
  </article>
};

کنترل‌فلو هم حالا نحو صریح JSX شده: @if، @for، @switch و @try وقتی به‌کار می‌رن که خود کنترل‌فلو باید خروجی تمپلیت تولید کنه. نویسنده می‌گه پیشوند @ کار واقعی می‌کنه؛ یه for لخت شبیه کنترل‌فلوی جاوااسکریپته و آدم‌ها و ایجنت‌های هوش مصنوعی به‌طور طبیعی سراغ قواعد جاوااسکریپت مثل break و continue می‌رن، در حالی که کنترل‌فلوی تمپلیت فرق داره و فقط انتخاب می‌کنه چی رندر بشه. اگه بعضی آیتم‌ها نباید رندر بشن، قبل از حلقه فیلترشون می‌کنی و برای لیست خالی هم از شاخه‌ی @empty استفاده می‌کنی. درباره‌ی هوک‌های React و Preact هم TSRX سعی نمی‌کنه هوک شرطی رو امن کنه و می‌گه شاخه‌ای که استیت هوک داره باید یه کامپوننت صریح با اسم باشه.

نکات کلیدی:

• TSRX بعد از بازخورد، از دستوری به عبارت‌محور تغییر کرد تا شبیه JSX بشه
• متن ثابت دیگه به کوتیشن نیاز نداره؛ متن همون معنی JSX رو می‌ده
• ظرف دستوری @{...} دستورهای جاوااسکریپت رو می‌گیره و آخرش یک خروجی تمپلیت می‌ده
• کنترل‌فلو با پیشوند @ مشخص می‌شه: @if، @for، @switch، @try
• هدف: روشن کردن مرز بین تمپلیت و جاوااسکریپت برای آدم‌ها و LLMها