Turbolog इंजन

Turbolog हर React कमिट को एक console.log कॉल में बदलता है, या कोई सेल न बदलने पर कोई कॉल नहीं करता।

#लक्ष्य

1. हर बदले हुए फ़्रेम पर एक कॉल।
2. आइडल होने पर शून्य कॉल। बिना बदलाव वाला फ़्रेम स्ट्रिंग बनाने से पहले ही लौट जाता है।
3. कम स्टाइल आर्ग्युमेंट। सघन 100×32 डैशबोर्ड के 3,200 सेल के लिए 149 %c span।

#पाइपलाइन

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 में मिल जाते हैं। span न्यूलाइन के पार भी जारी रहते हैं, और CSS स्ट्रिंग इंटर्न होती हैं।

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

#Chromium की जानकारी

• लिटरल % को %% के रूप में एस्केप किया जाता है।
• URL और path:line टेक्स्ट में word joiner जोड़ा जाता है ताकि DevTools उन्हें दोबारा स्टाइल न करे।
• span सिर्फ़ लॉन्गहैंड CSS इस्तेमाल करते हैं। DevTools हर एक्सपैंड की गई प्रॉपर्टी को हर लाइन पर कॉपी करता है।
• span इस तरह ट्यून किए जाते हैं कि बैकग्राउंड बिना खाली जगह छोड़े टाइल हों।

#Firefox और Safari

Chromium किसी %c span की हर लाइन का लेआउट इनलाइन ब्लॉक के रूप में बनाता है। Firefox और Safari span को इनलाइन रखते हैं, इसलिए वे वर्टिकल मार्जिन को अनदेखा करते हैं और लंबी पंक्तियों को रैप करते हैं। 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() चलाएं।