Text.js
← Blog

Text.js 0.1

Text.js 0.1 wprowadza reconciler React 19, layout Yoga i App Router oparty na systemie plików do aplikacji renderowanych w konsoli DevTools.

Adam

Wersja Text.js 0.1 ma już tag. To pierwsza wersja ze wszystkimi trzema warstwami: @textjs/core rysuje klatki w konsoli, @textjs/react renderuje React 19 w tych klatkach, a textjs dodaje App Router i CLI.

App Router

Trasy to foldery w app/, zgodnie z konwencjami App Router we frameworku Next.js. Oto szablon dashboard z create-text-app:

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

Layout otacza każdą stronę poniżej niego i zachowuje swój stan podczas nawigacji. <Link> przyjmuje shortcut, więc pojedynczy klawisz otwiera link, a activeClassName nadaje styl linkowi do bieżącej trasy:

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

Segmenty dynamiczne działają tak samo jak we frameworku Next.js. [id] staje się parametrem, [...slug] przechwytuje resztę ścieżki, a [[...slug]] pasuje również do rodzica. Segmenty statyczne mają pierwszeństwo przed dynamicznymi, a grupy tras takie jak (marketing) porządkują pliki bez dodawania czegokolwiek do adresu 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 i error.tsx otaczają segment granicą Suspense i granicą błędów. Komponent błędu otrzymuje błąd i funkcję 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>  );}

Handlery tras znajdują się w app/api i zwracają standardowy obiekt Response:

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

Router synchronizuje window.location przez history.pushState, więc działają przyciski „Wstecz”, „Dalej” i linki do konkretnych tras, a metadata.title jest zapisywane do document.title. Aplikacja rysuje w konsoli, a strona zawiera panel fokusu, który zbiera dane wejściowe.

CLI

  • text dev uruchamia Vite z React Fast Refresh. Zapisanie pliku aktualizuje konsolę w miejscu.
  • text build zapisuje produkcyjny build aplikacji i jej handlerów tras.
  • text start serwuje build i handlery tras.

create-text-app tworzy szkielet projektu na podstawie szablonu starter lub dashboard.

Inspektor

Naciśnij Ctrl+` lub F2 w działającej aplikacji, aby otworzyć inspektor [▼] w konsoli. Pokazuje on dopasowaną trasę i jej parametry, rozmiar klatki, liczbę spanów i czasy faz oraz liczbę klatek pominiętych przez mechanizm dirty gate. W rysuje layout Yoga jako model szkieletowy.

Pozostałe nowości w 0.1

@textjs/react zawiera komponenty z nazwami w PascalCase (Box, Text, ScrollBox, Input, Textarea, Select, Tabs, Code, Markdown, Diff, Modal, Spinner), klasy narzędziowe className w stylu Tailwind, które działają na komórkach, oraz motywy. Layout oblicza silnik Yoga w WebAssembly.

Pełna lista znajduje się w historii zmian.