‏TermDOM؛ ساخت رابط ترمینالی با HTML و CSS

TermDOM یه کتابخونه جاوااسکریپتیه که HTML و CSS رو توی ترمینال رندر می‌کنه. تو معرفی پروژه اومده که این‌جا خبری از شبیه‌سازی نیست: یه DOM واقعی، یه کسکید واقعی و یه موتور لی‌اوت واقعی داری که خروجیش به‌جای صفحه مرورگر روی ترمینال کشیده می‌شه. با npm install @b9g/termdom نصب می‌شه و واحد اندازه‌گیریش سلول ترمیناله: هر سلول 1ch عرض و 1px ارتفاع داره و هر باکس روی سلول‌های کامل می‌شینه.

نکته‌ای که پروژه بیشتر روش تأکید می‌کنه، نبودِ حلقهٔ رندر دستیه. کافیه المنت رو عوض کنی؛ TermDOM تغییرات DOM رو رصد می‌کنه و خودش دوباره نقاشی می‌کنه، دقیقاً مثل مرورگر:

const spinner = document.createElement("span");
spinner.className = "spin";           // .spin { color: green }
section.appendChild(spinner);
setInterval(() => {
  spinner.textContent = frames[n++ % frames.length];
}, 30);                               // no render call -- mutations paint

تعامل هم فقط ایونت‌های معمولی DOM‌ـه. به گفتهٔ سازنده، یه فایل‌براوزر شبیه NERDTree با حدود ۲۰۰ خط وانیلا DOM نوشته شده: querySelectorAll برای ردیف‌ها، classList برای انتخاب، keydown برای کلیدها و scrollIntoView() برای جابه‌جا کردن دوربین. المنت‌های هم واقعی‌ان و کرسر همون کرسر واقعی ترمیناله، برای همین متدهای ورودی زبان‌های CJK درست داخل فیلد ترکیب می‌شن.

از سمت قابلیت‌ها، استایل‌ها از و اتریبیوت style می‌آن و به ANSI escape برای رنگ و تزئین متن ترجمه می‌شن. باکس‌مدل، فلکس‌باکس و لی‌اوت جدولی پشتیبانی می‌شه، ایموجی و کاراکترهای ترکیبی عرض درست‌شون رو می‌گیرن و عبری و عربی با شکل‌دهی متنی رندر می‌شن. MutationObserver، ResizeObserver، فرم‌ها و وب‌کامپوننت‌ها هم وصلن. جدول سازگاری هم دستی نوشته نشده و یه مجموعه probe هر API رو روی یه سند واقعی رندر می‌کنه.

نکات کلیدی:

• نمایش HTML و CSS واقعی توی ترمینال، با نصب npm install @b9g/termdom
• رندر خودکار با رصد تغییرات DOM، بدون فراخوانی دستی رندر
• کسکید CSS، باکس‌مدل، فلکس‌باکس و لی‌اوت جدولی روی سلول‌های کامل
• ایونت‌های کیبورد، ماوس، فوکوس و پیست از STDIN روی المنت‌ها و ورودی واقعی با کرسر ترمینال
• فرم‌ها، وب‌کامپوننت‌ها، اسکرول و فول‌اسکرین با رفتار استاندارد مرورگر