Text.js
← Blog

Text.js 0.1

Text.js 0.1 mang đến bộ reconciler React 19, layout Yoga và App Router dựa trên hệ thống tệp cho ứng dụng render trong console DevTools.

Adam

Text.js 0.1 đã có tag. Đây là phiên bản đầu tiên có đủ ba lớp: @textjs/core vẽ frame vào console, @textjs/react render React 19 vào các frame đó, và textjs bổ sung App Router cùng CLI.

App Router

Route là các thư mục trong app/, theo quy ước App Router của Next.js. Đây là mẫu dashboard từ create-text-app:

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

Layout bọc mọi trang bên dưới và giữ trạng thái khi điều hướng. <Link> nhận một shortcut, nên có thể nhấn một phím để đi theo liên kết, và activeClassName định kiểu cho liên kết tới route hiện tại:

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>  );}

Phân đoạn động hoạt động giống như trong Next.js. [id] trở thành tham số, [...slug] bắt phần còn lại của đường dẫn và [[...slug]] còn khớp cả phần cha. Phân đoạn tĩnh được ưu tiên hơn phân đoạn động, và nhóm route như (marketing) tổ chức tệp mà không thêm vào 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 và error.tsx bọc một phân đoạn trong Suspense boundary và error boundary. Component lỗi nhận lỗi và hàm 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 nằm trong app/api và trả về Response tiêu chuẩn:

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

Router giữ window.location đồng bộ qua history.pushState, nên các thao tác Quay lại, Tiến và liên kết sâu đều hoạt động, đồng thời ghi metadata.title vào document.title. Ứng dụng vẽ trong console, còn trang chứa một vùng focus để thu thập dữ liệu nhập.

CLI

  • text dev khởi động Vite với React Fast Refresh. Lưu tệp sẽ cập nhật console tại chỗ.
  • text build ghi bản dựng production của ứng dụng và các route handler.
  • text start phục vụ bản dựng và các route handler.

create-text-app tạo bộ khung dự án từ mẫu starter hoặc dashboard.

Trình kiểm tra

Nhấn Ctrl+` hoặc F2 trong ứng dụng đang chạy để mở trình kiểm tra [▼] bên trong console. Trình kiểm tra hiển thị route đã khớp cùng các tham số, kích thước frame, số span và thời gian từng giai đoạn, cùng số frame mà dirty gate đã bỏ qua. W vẽ layout Yoga dưới dạng khung dây.

Các bổ sung khác trong 0.1

@textjs/react cung cấp các component PascalCase (Box, Text, ScrollBox, Input, Textarea, Select, Tabs, Code, Markdown, Diff, Modal, Spinner), các tiện ích className kiểu Tailwind hoạt động theo ô, cùng các theme. Layout chạy trên Yoga trong WebAssembly.

Danh sách đầy đủ nằm trong nhật ký thay đổi.