‏solid-yield: کامپوننت‌های Solid 2 که تایپ‌شون همه‌چی رو لو می‌ده

solid-yield یه کتابخونه برای نوشتن کامپوننت‌های Solid 2 به شکل yield component هست، یعنی تابع‌های generator که هر خوندن داده توشون با yield* انجام می‌شه. هدفش اینه که از تایپ کامپوننت معلوم باشه ممکنه pending بشه (منتظر داده بمونه)، با چه خطاهایی شکست بخوره و چه contextهایی لازم داره.

مشکلی که README مطرح می‌کنه اینه: تو Solid 2 یه کامپوننت TodoList معمولی تایپی مثل (props: { listId: string }) => JSX.Element داره. ولی todos() تا وقتی fetch تموم نشه suspend می‌شه، پس باید یه بالاش باشه؛ اگه fetch شکست بخوره خطا پرت می‌کنه، پس هم لازمه؛ ThemeCtx هم باید provide شده باشه. تایپ هیچ‌کدوم از اینا رو نشون نمی‌ده.

همون کامپوننت تو solid-yield اینجوری نوشته می‌شه:

const theme = yield* ThemeCtx;
const todos = yield* $memo(function* () {
  const id = yield* props.listId;
  return yield* attempt(
    () => fetchTodos(id),
    cause => new FetchError(String(cause))
  );
});

حالا تایپ خروجی ComponentView هست. سازنده‌ها به این چهار پارامتر می‌گن «رنگ»: pending (از خوندن یه $memo async میاد و Loading برش می‌داره)، fails (از attempt یا raise میاد و Errored با catch: [FetchError] برش می‌داره)، may-wait (وقتی یه $event که منبع pending می‌خونه به یه رویداد وصل بشه؛ چیزی برش نمی‌داره و lint هشدار no-unshown-wait می‌ده) و requires (خوندن contextی که default نداره و Ctx.provide برش می‌داره).

نتیجه‌ش اینه که boundaryها موقع کامپایل چک می‌شن. اگه Loading یا provider جا بیفته، render تو ریشه قبولش نمی‌کنه و خطای تایپ [PENDING_ROOT] یا [NO_PROVIDER] می‌گیری. خطایی که هیچ Erroredی نگرفته تو تایپ ریشه می‌مونه و وقتی پیش بیاد دوباره پرت می‌شه. یه lint هم کنارش هست برای چیزهایی که TypeScript نمی‌بینه و خیلی از قانون‌هاش autofix دارن.

مدل کار اینجوریه: هر کامپوننت یه setup داره که فقط یه بار اجرا می‌شه و state رو با $signal، $memo، $event و $effect می‌سازه، و یه view برمی‌گردونه که هر yield* داخل JSXش یه محاسبهٔ جداست. کامپوننت‌ها رو باید صدا بزنی (yield* Card({ todo })) نه اینکه به شکل تگ بنویسی، چون تگ این رنگ‌ها رو گم می‌کنه. معادل Solid 2 هم مشخصه: $optimisticStore همون createOptimisticStoreه و $event یه action.

فعلاً نسخهٔ npm نداره و برای بیلد از سورس Node 24 و pnpm 11 لازمه؛ با solid-js نسخهٔ 2.0.0-rc.13 تست شده. یه «Sugar mode» هم روی برنچ جدا در حال ساخته که قراره با یه پلاگین، Solid معمولی رو بدون نوشتن generator به همین تایپ‌های خطا برسونه.

نکات کلیدی:

• هر خوندن تو کامپوننت با yield* انجام می‌شه تا pending، خطا و context تو تایپ بیاد.
• تایپ view به شکل ComponentView با چهار «رنگ» pending، fails، may-wait و requires هست.
• جا انداختن Loading یا provider تو render خطای [PENDING_ROOT] یا [NO_PROVIDER] می‌ده.
• کامپوننت‌ها صدا زده می‌شن، نه به شکل تگ JSX نوشته بشن.
• هنوز روی npm نیست؛ بیلد از سورس با Node 24 و pnpm 11 و solid-js نسخهٔ 2.0.0-rc.13.