Arsitektur terbalik

Dalam framework DOM, komponen menjadi node DOM yang ditata dan digambar browser di halaman. Dalam Text.js, komponen menjadi sel, dan setiap frame sel yang berubah menjadi satu panggilan console.log di DevTools. Kami menyebutnya Arsitektur Terbalik.

#Pipeline

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

Setiap tahap ada karena konsol adalah tampilan yang tidak biasa. Konsol menggunakan monospace dan berorientasi baris, gayanya diatur dengan %c, dan DevTools menentukan kapan konsol digambar ulang.

#Reconciler

@textjs/react adalah reconciler React 19 ([email protected]) dengan dua elemen host, tx-box dan tx-text, serta instance teks untuk children berupa string. Semua yang Anda impor, dari <Box> hingga <Markdown>, dibangun di atasnya. Commit dijadwalkan pada requestAnimationFrame, dan penekanan tombol atau penempelan memicu rendering sinkron dalam task yang sama.

#Layout

Yoga, yang dikompilasi ke WebAssembly, menata tree dengan pointScaleFactor = 1, sehingga setiap kotak menempati sel utuh. Teks diukur dengan Intl.Segmenter dan tabel lebar karakter Asia Timur, sehingga 你好 memakai empat sel dan 🚀 memakai dua sel. Jika suatu edit tidak bisa mengubah ukuran node teks, Yoga tidak dipanggil lagi.

#CellBuffer

Frame berupa kisi typed array yang dialokasikan sekali: karakter dalam Uint32Array, warna depan dan latar belakang sebagai 0xRRGGBBAA yang dipadatkan, atribut sebagai bitmask Uint16Array. Proses penggambaran menulis ke array tersebut dan melacak baris yang disentuhnya.

#Gerbang

Setiap baris memiliki hash FNV-1a 32-bit yang disimpan dalam cache. Hanya baris yang ditulis sejak frame terakhir yang dihitung ulang hash-nya. Jika tidak ada baris yang berubah, driver kembali sebelum membangun string dan tidak memanggil konsol. Spinner pada tab tersembunyi tidak memakai sumber daya karena tidak berjalan.

#Run-length encoding

Baris yang berubah dipindai ulang menjadi rangkaian bergaya identik, dan setiap rangkaian menjadi satu span %c. Rangkaian berlanjut melewati pergantian baris. String CSS diinternalkan dengan ID gaya berupa bilangan bulat, sehingga jalur eksekusi utama tidak pernah membangun string yang sama dua kali. Dasbor 100×32 terdiri dari 3.200 sel dan 149 span.

String format juga melindungi dari dua perilaku DevTools. Karakter literal % ditulis sebagai %%. Word joiner ditempatkan setelah ://, di dalam www. dan dalam path:line, agar DevTools tidak mengubah teks Anda menjadi tautan dan menggambarnya ulang dengan warnanya sendiri.

#Satu panggilan

Setiap frame yang berubah menjadi satu panggilan:

console.log("%c\u200b%c\n%c▼ OpenCode Lite%c …", "margin-top:100vh;", "", "color:#fafafa;…", …);

Frame ditambahkan di akhir, mengikuti pembatas laju 50 ms DevTools dan diganti dalam satu proses penggambaran. Turbolog: menghilangkan kilatan membahas bagian tersebut.

#Input

Konsol tidak bisa menerima penekanan tombol, jadi halaman yang menerimanya. <textarea> tersembunyi mengumpulkan input tombol, tempelan, dan komposisi IME, sementara event wheel menggulir ScrollBox. Di textjs.org, halaman Playground dan OpenCode merupakan satu focus pad besar. Buka konsol, lalu klik halaman untuk mengetik.

#Yang dilihat halaman

Halaman tidak bisa membaca ukuran konsol, hanya ukuran jendelanya sendiri, jadi Text.js memperkirakannya: panel yang ditambatkan mengecilkan innerWidth atau innerHeight sementara outer* tetap, dan setiap hipotesis posisi tambatan dihitung untuk tingkat zoom Chrome. Kecocokan terbaik yang dipilih. Konstanta (padding horizontal 56 px, bingkai antarmuka konsol 104 px, jarak antarbaris 14 px) diukur pada frontend DevTools yang sebenarnya.