Pengantar

Apa itu Text.js, apa saja isinya, dan cara frame di-render.

Text.js adalah framework React untuk aplikasi yang di-render di konsol DevTools dengan console.log.

Langsung↑ ↓ count · r resettsx
preview://counter:1
import { useState } from "react";import { Box, Text, useInput } from "@textjs/app";export default function Page() {  const [count, setCount] = useState(0);  useInput((e) => {    if (e.key === "up") setCount((c) => c + 1);    if (e.key === "down") setCount((c) => c - 1);  });  return (    <Box className="flex-col p-1 border rounded">      <Text bold>count = {count}</Text>    </Box>  );}

Pratinjau ini berjalan langsung. Klik lalu tekan ↑.

Fitur yang disertakan

  • React 19: concurrent rendering, Suspense, dan batas galat.
  • App Router: layout, halaman, segmen dinamis, dan route handler.
  • Layout Yoga: flexbox dalam WebAssembly, diselaraskan ke sel bilangan bulat.
  • Turbolog: satu panggilan console.log per frame yang berubah.
  • UI konsol: halaman hanya memuat focus pad dan input tersembunyi.

Cara kerja

State mengalir ke bawah: React, lalu layout, lalu buffer sel, lalu konsol.

React 19 ▼ Yoga ▼ CellBuffer ▼ console.log(format, ...css)

Frame yang tidak berubah dilewati, sehingga aplikasi yang menganggur tidak mencatat log apa pun.

Langkah berikutnya

Edit halaman ini di GitHub