ساخت Issue Tracker با Solid 2.0 بتا
جاوااسکریپت
فرانتاندخلاصهٔ کاملتر
این مقاله یه آموزش عملیه که با ساختن یه اپ ردیابی ایشو (Issue Tracker)، مفاهیم تازهی Solid 2.0 رو نشون میده. اپ دو ستون داره: سمت چپ لیست ایشوها و سمت راست جزئیات ایشو انتخابشده. طراحی عمداً سادهست تا تمرکز روی نحوه کار کردن پریمیتیوهای جدید باشه، نه پیچیدگی UI.
پروژه با Vite اسکفولد شده و از solid-js@2.0.0-beta.14 و @solidjs/web@2.0.0-beta.14 استفاده میکنه. دادههای استاتیک از طریق یه فایل api.ts با تأخیرهای مصنوعی سرو میشن تا رفتار async شبیهسازی بشه.
ساختار اولیهی اپ سه فایل اصلی داره. App.tsx که لیست ایشوها رو به IssueColumn پاس میده و اولین ایشو رو بهعنوان پیشفرض به DetailPanel میفرسته. کامپوننت IssueColumn هیچ state ای نداره و فقط از کامپوننت For برای رندر کردن هر ایشو بهشکل یه IssueCard استفاده میکنه:
<For each={props.issues}>{issue => <IssueCard issue={issue} />}</For>کامپوننت DetailPanel هم به همین شکل سادهست: هدر، خلاصه، تایملاین کامنتها و یه فرم برای نوشتن کامنت جدید داره. در این مرحلهی ابتدایی هنوز state واقعی وجود نداره و همه چیز استاتیکه؛ مقاله قراره در ادامه نشون بده چطور با پریمیتیوهای Solid 2.0 این اپ رو به یه تجربهی تعاملی واقعی تبدیل کنیم.
نکات کلیدی:
- Solid 2.0 هنوز در مرحلهی بتاست (beta.14) و ممکنه برخی APIها تغییر کنن
- پروژه با Vite + TypeScript راهاندازی شده
- کامپوننت For برای لوپ کردن روی آرایهها استفاده میشه
- دادهها از طریق یه fake API با تأخیر async شبیهسازی میشن
- هدف اصلی مقاله نشون دادن نحوه ترکیب پریمیتیوهای جدید Solid 2.0 در یه اپ واقعیه
