Text.js
← Blog

Text.js 0.1

Text.js 0.1 menghadirkan reconciler React 19, layout Yoga, dan App Router berbasis sistem berkas untuk aplikasi yang di-render di konsol DevTools.

Adam

Text.js 0.1 telah diberi tag. Ini versi pertama dengan ketiga lapisan: @textjs/core menggambar frame ke konsol, @textjs/react me-render React 19 ke dalam frame tersebut, dan textjs menambahkan App Router serta CLI.

App Router

Route berupa folder di app/, mengikuti konvensi App Router Next.js. Berikut template dashboard dari create-text-app:

app/├── layout.tsx├── page.tsx├── not-found.tsx├── deployments/│   └── [id]/│       └── page.tsx└── api/    └── metrics/        └── route.ts

Layout membungkus setiap halaman di bawahnya dan mempertahankan state saat navigasi. <Link> menerima shortcut, sehingga satu tombol dapat membuka tautan tersebut, dan activeClassName mengatur gaya tautan ke route saat ini:

app/layout.tsxtsx
import type { ReactNode } from "react";import { Box, KeyHint, Text, useTheme, type Metadata } from "textjs";import Link from "textjs/link";export const metadata: Metadata = { title: { default: "Acme", template: "%s · Acme" } };export default function RootLayout({ children }: { children?: ReactNode }): ReactNode {  const theme = useTheme();  return (    <Box className="flex-col w-full h-full">      <Box className="flex-row h-1 px-1 gap-3 bg-surface shrink-0">        <Text bold color={theme.fg} wrap="nowrap">          ▼ Acme        </Text>        <Link href="/" shortcut="1" className="text-muted no-underline" activeClassName="text-fg bold">          1 Metrics        </Link>        <Link href="/deployments/dpl_a1" shortcut="2" className="text-muted no-underline" activeClassName="text-fg bold">          2 Latest deploy        </Link>      </Box>      <Box className="grow flex-col px-2 pt-1">{children}</Box>      <Box className="flex-row h-1 gap-2 pl-6 shrink-0 bg-surface">        <KeyHint keys="1-2" label="navigate" />        <KeyHint keys="tab" label="focus" />        <KeyHint keys="F2" label="devtools" />      </Box>    </Box>  );}

Segmen dinamis bekerja dengan cara yang sama seperti di Next.js. [id] menjadi parameter, [...slug] menangkap sisa path dan [[...slug]] juga cocok dengan induknya. Segmen statis lebih diprioritaskan daripada segmen dinamis, dan grup route seperti (marketing) mengatur file tanpa menambah URL.

app/deployments/[id]/page.tsxtsx
import { Box, Text, useInput } from "textjs";import { notFound, useParams, useRouter } from "textjs/navigation";import { DEPLOYMENTS } from "../../../lib/data";export default function DeploymentPage() {  const router = useRouter();  const { id } = useParams<{ id: string }>();  const deployment = DEPLOYMENTS.find((d) => d.id === id);  useInput((e) => {    if (e.key === "escape") router.back();  });  if (!deployment) notFound();  return (    <Box className="flex-col gap-1">      <Text bold>{deployment.id}</Text>      <Text>{deployment.branch}</Text>    </Box>  );}

loading.tsx dan error.tsx membungkus segmen dalam Suspense boundary dan error boundary. Komponen error menerima error dan fungsi reset:

app/deployments/error.tsxtsx
import { Box, Text, useInput, type ErrorComponentProps } from "textjs";export default function DeploymentsError({ error, reset }: ErrorComponentProps) {  useInput((e) => {    if (e.key === "r") reset();  });  return (    <Box className="flex-col grow items-center justify-center gap-1">      <Text bold>Something went wrong loading deployments.</Text>      <Text>{error.message}</Text>    </Box>  );}

Route handler berada di app/api dan mengembalikan Response standar:

app/api/metrics/route.tsts
export function GET(): Response {  return Response.json({ cpu: Math.random(), memory: Math.random(), at: new Date().toISOString() });}

Router menjaga sinkronisasi window.location melalui history.pushState, sehingga Kembali, Maju, dan deep link berfungsi, serta menulis metadata.title ke document.title. Aplikasi menggambar di konsol, dan halaman menampung focus pad yang mengumpulkan input.

CLI

  • text dev menjalankan Vite dengan React Fast Refresh. Menyimpan file memperbarui konsol di tempat.
  • text build menulis build produksi aplikasi beserta route handler-nya.
  • text start menyajikan build dan route handler.

create-text-app membuat kerangka proyek dari template starter atau dashboard.

Inspektur

Tekan Ctrl+` atau F2 pada aplikasi yang sedang berjalan untuk membuka inspektur [▼] di dalam konsol. Inspektur menampilkan route yang cocok beserta parameternya, ukuran frame, jumlah span dan durasi tiap fase, serta jumlah frame yang dilewati dirty gate. W menggambar layout Yoga sebagai wireframe.

Juga di 0.1

@textjs/react menyertakan komponen PascalCase (Box, Text, ScrollBox, Input, Textarea, Select, Tabs, Code, Markdown, Diff, Modal, Spinner), utilitas className bergaya Tailwind yang bekerja dalam sel, serta tema. Layout berjalan menggunakan Yoga di WebAssembly.

Daftar lengkapnya ada di catatan perubahan.