Turbolog motoru

Turbolog her React commit’ini bir console.log çağrısına dönüştürür; hiçbir hücre değişmediyse çağrı yapmaz.

#Hedefler

1. Değişen her kare için bir çağrı.
2. Boştayken sıfır çağrı. Değişmeyen bir kare, dize oluşturmadan döner.
3. Az sayıda stil argümanı. Yoğun bir 100×32 panonun 3.200 hücresi için 149 %c span.

#İşlem hattı

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

#CellBuffer

Kare, karakterler, renkler ve öznitelikler için bir kez ayrılan düz tipli dizilerde tutulur.

#Değişiklik denetimi

Her satırın özeti hesaplanır. Hiçbir şey değişmediyse sürücü erken döner:

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

#Kare değişimi

Turbolog kareleri sona ekler ve konsolu yalnızca ilk karede, invalidate() çağrısından sonra, 100 kare biriktiğinde boştayken ve 300 karede temizler. DevTools temizlenen mesajları hemen kaldırır ancak yenilerini 50 ms aralıklarla çizer; bu yüzden her karede temizlik yapmak boş bir konsolun yanıp sönmesine neden olur. Sona eklenen kareler tek bir çizim içinde yer değiştirir ve sıfır genişlikli bir perde span önceki kareyi görüş alanının dışında tutar. Önceki kareleri görmek için yukarı kaydırın.

Karelerin hızı yaklaşık 15 fps olarak ayarlanır. Daha hızlı kareler DevTools’un bekleme süresini sıfırlar ve atılır.

#Koşu uzunluğu kodlaması

Eşleşen hücreler tek bir %c span içinde birleşir. Span’ler satır sonlarını aşarak devam eder ve CSS dizeleri ortak bir havuzda tutulur.

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

#Chromium ayrıntıları

• Gerçek % karakteri %% olarak kaçırılır.
• DevTools’un stillerini değiştirmemesi için URL’lere ve path:line metnine bir word joiner eklenir.
• Span’ler yalnızca uzun biçimli CSS özelliklerini kullanır. DevTools açımlanmış her özelliği her satıra kopyalar.
• Span’ler, arka planlar boşluksuz döşenecek şekilde ayarlanır.

#Firefox ve Safari

Chromium, bir %c span içindeki her satırı satır içi blok olarak yerleştirir. Firefox ve Safari span’leri satır içinde tutar; bu yüzden dikey kenar boşluklarını yok sayar ve uzun satırları kaydırır. CssConsoleDriver, CSS özellik denetimleriyle tarayıcıyı algılar ve bu iki konsol için kenar boşluksuz 14 px satır yüksekliği ayarlar, text-wrap-mode: nowrap ile satır kaydırmayı kapatır ve line-height: 100vh perdesiyle önceki kareleri görüş alanının dışına iter. Konsola sığdırma işlemi, Firefox’un kaynak bağlantısı sütunu için yer bırakır. Safari, font yığınında Menlo’yu ilk sıraya koyar; çünkü sayfaları, Web Inspector’ın çizim için kullanabildiği, kullanıcının yüklediği SF Mono’yu kullanamaz. Konsolu kendiniz seçmek için createConsoleRoot işlevine browser argümanını geçirin.

#Performans ölçümleri

Yoğun bir 100×32 panoda packages/core/test/perf.test.ts, 1.000 karenin ortalaması (Apple M5 Pro, Bun 1.4.4):

Durum sayfası aynı işlem hattını tarayıcınızda çalıştırır. Playground üzerinden bir demo çalışırken DevTools’ta text.stats() komutunu çalıştırın.