‏تن‌استک دو کتابخونهٔ کوچیک برای محتوا منتشر کرد

تنر لینزلی تو این پست می‌گه اوایل امسال یه صفحهٔ مستندات tanstack.com حدود ۱.۱ مگابایت اسکریپت منتقل می‌کرد که نزدیک ۳۵۸ کیلوبایتش فقط به هایلایت سینتکس مربوط بود. به گفتهٔ نویسنده، RSC اون بار رو روی سرور نگه می‌داشت و جواب هم می‌داد، ولی خودِ هزینه سر جاش بود؛ برای همین به‌جای اینکه معماری سایت رو دور یه مشکل وابستگی بچینن، رفتن سراغ کوچیک‌کردن همون بخش گرون.

منطق جداسازی ساده‌ست: TanStack Markdown محتوا رو به یه درخت سند عمومی و قابل‌سریال‌سازی پارس می‌کنه و TanStack Highlight زبون‌های شناخته‌شده رو به HTML امن و معنایی تبدیل می‌کنه. هیچ‌کدوم اون یکی رو import نمی‌کنن و مرزشون فقط یه کال‌بک معمولیه که کد، زبون و متادیتای فنس رو جابه‌جا می‌کنه. یعنی یه سند مارک‌داون رو می‌شه بدون لودکردن هایلایتر پارس، کش یا ایندکس کرد. نویسنده می‌گه برخلاف بیشتر APIهای مارک‌داون، اینجا خودِ درخت پارس‌شده قسمت ماندگاره، نه خروجی رندرشده:

import { parseMarkdown } from '@tanstack/markdown/parser'
import { renderHtml } from '@tanstack/markdown/html'

const document = parseMarkdown(source)
const cached = JSON.stringify(document)
const html = renderHtml(document)

درخت فقط آبجکت و آرایهٔ ساده‌ست، پس می‌تونه از مرز سرور رد بشه، تو کش بشینه یا به ایندکس جست‌وجو داده بشه. پارسر الان ۴.۹ کیلوبایت گزیپ‌شده‌ست، رندرر HTML و آداپترهای فریم‌ورک حدود ۶.۷ کیلوبایت، و پکیج هیچ وابستگی رانتایمی نداره. یه اکستنشن اختیاری هم برای خروجی استریمی هوش مصنوعی هست که به‌جای نگه‌داشتن state پارسر، کل متن جمع‌شده رو تو هر آپدیت UI دوباره پارس می‌کنه و فقط حدود ۰.۲ کیلوبایت به مسیر ری‌اکت اضافه می‌کنه.

سمت هایلایت، نویسنده می‌گه رنگی‌کردن کد برای یه صفحهٔ وب کار خیلی کوچیک‌تری از رنگی‌کردن کد تو ادیتوره: صفحهٔ مستندات معمولاً از قبل زبون رو می‌دونه و فقط HTML فشرده و قطعی می‌خواد، پس خبری از پارس تدریجی و سازگاری TextMate نیست. هستهٔ خالیش ۱.۷ کیلوبایت، هسته به‌علاوهٔ TSX ۳.۹، ست نه‌زبانهٔ مستندات ۵.۸ و بیلد کامل ۲۵ زبان حدود ۸ کیلوبایته. زبون ناشناخته هم به‌جای حدس‌زدن، به متن escape‌شده برمی‌گرده:

import { createHighlighter } from '@tanstack/highlight/core'
import { ts } from '@tanstack/highlight/languages/ts'
import { tsx } from '@tanstack/highlight/languages/tsx'

export const highlighter = createHighlighter({
  languages: [ts, tsx],
})

خروجی یه درخت واحد با کلاس‌های معنایی th-* و بدون رنگ inline ــه، پس عوض‌کردن تم لایت و دارک یه کار CSS ــه و لازم نیست کد دوباره هایلایت بشه. کورپوس تست هایلایت الان ۳۳۳ فیکسچر از ۲۹۴۰ فایل مستندات تن‌استک رو نمونه می‌گیره؛ نویسنده معتقده وقتی کتابخونه کوچیکه، تست‌ها و بودجهٔ سایز خودشون بخشی از محصول می‌شن.

هر دو پکیج الان مستندات و بلاگ tanstack.com رو می‌چرخونن و چون رندرر جدید روی مسیرهای پروداکشن حدود ۲۷ کیلوبایت منتقل می‌کرد، تیم مسیر RSC مخصوص محتوا رو حذف کرد و SSR معمولی رو نگه داشت. هر دو هنوز آلفان و به گفتهٔ نویسنده اگه به همهٔ حالت‌های CommonMark، صدها زبون یا MDX نیاز داری، اینا جایگزین ابزار فعلیت نیستن.

نکات کلیدی:

• صفحهٔ مستندات از ~۱.۱ مگابایت اسکریپت به ~۲۷ کیلوبایت روی مسیرهای پروداکشن رسید
• پارسر مارک‌داون ۴.۹ کیلوبایت گزیپ‌شده و بدون وابستگی رانتایمیه
• درخت پارس‌شده دادهٔ ساده‌ست: قابل کش، ایندکس و عبور از مرز سرور
• هستهٔ هایلایت ۱.۷ کیلوبایت؛ بیلد کامل ۲۵ زبان حدود ۸ کیلوبایت
• تم‌ها با متغیر CSS کار می‌کنن، پس دارک‌مود درخت دوم نمی‌سازه
• هر دو کتابخونه آلفان و قرارداد APIشون هنوز می‌تونه عوض بشه