⁦Turbolog⁩ انجن

⁦Turbolog⁩ ہر React کمٹ کو ایک console.log کال میں بدلتا ہے، یا اگر کوئی سیل نہ بدلا ہو تو کوئی کال نہیں کرتا۔

#اہداف

1. ہر بدلے ہوئے فریم پر ایک کال۔
2. غیرفعال حالت میں صفر کالز۔ کوئی تبدیلی نہ ہونے پر فریم اسٹرنگ بنانے سے پہلے ہی واپس آ جاتا ہے۔
3. اسٹائل آرگومنٹس کی کم تعداد۔ ایک بھرے ہوئے 100×32 ڈیش بورڈ کے 3,200 سیلز کے لیے 149 %c spans۔

#پائپ لائن

React ─▶ Yoga ─▶ CellBuffer ─▶ row-hash gate ─▶ RLE ─▶ console.log

#CellBuffer

فریم حروف، رنگوں اور ایٹریبیوٹس کی فلیٹ ٹائپڈ اریز میں رہتا ہے، جن کے لیے میموری ایک بار مختص ہوتی ہے۔

#تبدیلی کا گیٹ

ہر قطار کا ہیش بنتا ہے۔ اگر کچھ نہ بدلا ہو تو ڈرائیور پہلے ہی واپس آ جاتا ہے:

if (frame === null) return SKIPPED; // 0 console callsconsole.log(frame.format, ...frame.args);

#فریم کی تبدیلی

⁦Turbolog⁩ فریمز آخر میں جوڑتا ہے اور کونسول صرف پہلے فریم پر، invalidate() کے بعد، غیرفعال حالت میں 100 فریم جمع ہونے پر، اور 300 پر صاف کرتا ہے۔ DevTools صاف کیے گئے پیغامات فوراً ہٹا دیتا ہے مگر نئے پیغامات 50 ms کی تھروٹلنگ کے ساتھ پینٹ کرتا ہے، اس لیے ہر فریم پر صفائی سے خالی کونسول جھلکتا ہے۔ آخر میں جوڑے گئے فریمز ایک ہی پینٹ میں بدلتے ہیں، اور صفر چوڑائی والا پردے کا span پچھلے فریم کو نظروں سے اوجھل رکھتا ہے۔ پہلے کے فریمز دیکھنے کے لیے اوپر اسکرول کریں۔

فریمز کی رفتار تقریباً 15 fps رکھی جاتی ہے۔ اس سے تیز فریمز DevTools کی تھروٹلنگ ری سیٹ کرتے ہیں اور خارج ہو جاتے ہیں۔

#رن لینتھ انکوڈنگ

ایک جیسے سیلز ایک %c span میں ضم ہو جاتے ہیں۔ spans نئی سطروں کے پار جاری رہتے ہیں، اور CSS اسٹرنگز انٹرن ہوتی ہیں۔

console.log("%c▼ Text.js%c ready", "color:#ededed;font-weight:700", "color:#45a557");

#⁦Chromium⁩ کی تفصیلات

• لفظی % کو %% کی صورت میں ایسکیپ کیا جاتا ہے۔
• URLs اور path:line متن میں ⁦word joiner⁩ شامل ہوتا ہے تاکہ DevTools ان کا اسٹائل دوبارہ نہ بدلے۔
• spans صرف لانگ ہینڈ CSS استعمال کرتے ہیں۔ DevTools ہر توسیع شدہ پراپرٹی ہر سطر پر کاپی کرتا ہے۔
• spans کی ترتیب ایسی ہے کہ پس منظر بغیر خلا کے ساتھ ساتھ بچھتے ہیں۔

#⁦Firefox⁩ اور Safari

⁦Chromium⁩ کسی %c span کی ہر سطر کو اِن لائن بلاک کے طور پر ترتیب دیتا ہے۔ Firefox اور ⁦Safari spans⁩ کو اِن لائن رکھتے ہیں، اس لیے وہ عمودی مارجنز نظرانداز کرتے ہیں اور لمبی قطاروں کو لپیٹتے ہیں۔ CssConsoleDriver، CSS فیچرز کی جانچ سے براؤزر پہچانتا ہے اور ان دونوں کونسولز کے لیے بغیر مارجن کے 14 px سطر کی اونچائی مقرر کرتا ہے، text-wrap-mode: nowrap سے ریپنگ بند کرتا ہے اور line-height: 100vh کے پردے سے پہلے کے فریمز نظروں سے اوجھل کرتا ہے۔ کونسول کے مطابق سائز رکھنے سے Firefox کے سورس لنک کالم کے لیے جگہ بچتی ہے۔ Safari فونٹ اسٹیک میں Menlo کو پہلے رکھتا ہے، کیونکہ اس کے صفحات صارف کا انسٹال کردہ ⁦SF Mono⁩ استعمال نہیں کر سکتے جس سے ⁦Web Inspector⁩ متن بنا سکتا ہے۔ خود کونسول منتخب کرنے کے لیے createConsoleRoot کو browser دیں۔

#بینچ مارکس

ایک بھرے ہوئے 100×32 ڈیش بورڈ پر packages/core/test/perf.test.ts، 1,000 فریمز کی اوسط (⁦Apple M5 Pro⁩، ⁦Bun 1.4.4⁩):

اسٹیٹس صفحہ آپ کے براؤزر میں یہی پائپ لائن چلاتا ہے۔ جب Playground کا کوئی ڈیمو چل رہا ہو تو DevTools میں text.stats() چلائیں۔