Text.js
← Blog

Text.js 0.1

Text.js 0.1, DevTools konsolunda render edilen uygulamalara React 19 reconciler, Yoga layout ve dosya sistemi tabanlı App Router getirir.

Adam

Text.js 0.1 etiketlendi. Üç katmanın tamamını içeren ilk sürüm: @textjs/core konsola kareler çizer, @textjs/react React 19’u bu karelere render eder ve textjs bir App Router ve CLI ekler.

App Router

Rotalar, Next.js App Router kurallarına uygun olarak app/ dizinindeki klasörlerdir. Bu, create-text-app aracındaki dashboard şablonudur:

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

Bir layout, altındaki her sayfayı sarar ve gezinme sırasında durumunu korur. <Link> bir shortcut alır, böylece tek bir tuş bağlantıyı açar ve activeClassName geçerli rotanın bağlantısını biçimlendirir:

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

Dinamik segmentler Next.js’teki gibi çalışır. [id] bir parametreye dönüşür, [...slug] yolun geri kalanını yakalar ve [[...slug]] üst öğeyle de eşleşir. Statik segmentler dinamik olanlara göre önceliklidir ve (marketing) gibi rota grupları URL’ye ekleme yapmadan dosyaları düzenler.

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 ve error.tsx dosyaları bir segmenti bir Suspense sınırı ve bir hata sınırıyla sarar. Hata bileşeni hatayı ve bir reset fonksiyonunu alır:

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

Rota işleyicileri app/api dizininde bulunur ve standart bir Response döndürür:

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

Yönlendirici, history.pushState aracılığıyla window.location değerini eşzamanlı tutar; böylece Geri, İleri ve derin bağlantılar çalışır ve metadata.title değeri document.title değerine yazılır. Uygulama konsolda çizim yapar ve sayfa, girdiyi toplayan bir odak alanı barındırır.

CLI

  • text dev, Vite’ı React Fast Refresh ile başlatır. Bir dosyayı kaydetmek konsolu yerinde günceller.
  • text build, uygulamanın ve rota işleyicilerinin üretim derlemesini yazar.
  • text start, derlemeyi ve rota işleyicilerini sunar.

create-text-app, starter veya dashboard şablonundan bir proje iskeleti oluşturur.

İnceleyici

Konsol içindeki [▼] inceleyicisini açmak için çalışan bir uygulamada Ctrl+` veya F2 tuşuna basın. Eşleşen rotayı ve parametrelerini, karenin boyutunu, span sayısını ve aşama sürelerini, ayrıca değişiklik denetiminin atladığı kare sayısını gösterir. W, Yoga layout’unu tel kafes olarak çizer.

0.1’deki diğer yenilikler

@textjs/react, PascalCase bileşenler (Box, Text, ScrollBox, Input, Textarea, Select, Tabs, Code, Markdown, Diff, Modal, Spinner), hücrelerde çalışan Tailwind tarzı className yardımcıları ve temalarla gelir. Layout, WebAssembly içinde Yoga üzerinde çalışır.

Tam liste değişiklik günlüğünde yer alır.