कंसोल फ़्रेमवर्क
ऐसे फ़ुल-स्टैक React ऐप्स बनाएं जो console.log के अंदर रेंडर होते हैं।
यह पेज आपके कंसोल में चल रहा है। इसे ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C से खोलें (पहले डेवलपर फ़ीचर चालू करें), नीचे प्रीव्यू पर क्लिक करें और ↑ ↓ दबाएं।
1import { useState } from "react";2import { AsciiFont, Box, Text, useInput } from "@textjs/app";34export default function Page() {5 const [count, setCount] = useState(0);6 useInput((e) => {7 if (e.key === "up") setCount((c) => c + 1);8 if (e.key === "down") setCount((c) => c - 1);9 });1011 return (12 <Box className="flex-col gap-1 p-2">13 <AsciiFont text="▼ TEXT.JS" />14 <Text color="muted">React 19 in console.log</Text>15 <Text bold color="accent">count = {count}</Text>16 </Box>17 );18}React 19
Text.js कंकरेंट रेंडरिंग, Suspense और एरर बाउंड्री सपोर्ट करता है।
App Router
app/ डायरेक्टरी के फ़ोल्डर रूट और लेआउट बनते हैं, और वापस, आगे और डीप लिंक काम करते हैं।
रिस्पॉन्सिव ग्रिड
ग्रिड किसी भी पेज ज़ूम पर डॉक किए गए DevTools पैनल में फ़िट होता है।
कीबोर्ड इनपुट
कुंजियां, पेस्ट और IME कंपोज़िशन एक छिपे हुए <textarea> से ऐप तक पहुंचते हैं।
टेबल, चार्ट, फ़ॉर्म और शॉर्टकट
हर बदला हुआ फ़्रेम एक console.log कॉल है
जिस कमिट से कोई सेल नहीं बदलता, वह कंसोल तक नहीं पहुंचता।
- React 19
01कमिट
React कस्टम रिकंसाइलर से कमिट करता है।
- Yoga
02लेआउट
Yoga पूरे सेल पर बॉक्स का लेआउट बनाता है।
- CellBuffer
03पेंट
सिर्फ़ बदली हुई पंक्तियां दोबारा पेंट होती हैं।
- पंक्ति हैश
04डर्टी गेट
बिना बदलाव वाले फ़्रेम यहां रुकते हैं।
- RLE
05एनकोड
3,200 सेल से 149
%cspan बनते हैं। - console.log
06एमिट
फ़्रेम कम से कम 66 ms के अंतर से जोड़े जाते हैं।
जोड़े गए फ़्रेम
हर फ़्रेम से पहले कंसोल साफ़ करने पर, DevTools के अगला फ़्रेम पेंट करने तक वह खाली रहता है। Turbolog इसके बजाय हर फ़्रेम जोड़ता है।
पोस्ट पढ़ेंclear() + log()70.6% खालीlog(), appended1.0% खाली%c आर्ग्युमेंटसर्वर पर रूट रेंडर करें
रूट और उसके एसिंक कंपोनेंट को सर्वर पर रेंडर करने के लिए runtime = "server" एक्सपोर्ट करें। ब्राउज़र आपके ऐप की जगह 21 kB (gzip) का फ़्रेम प्लेयर लोड करता है।
1import { Suspense } from "react";2import { Box, Text } from "@textjs/app";3import { db } from "@/lib/db";45export const runtime = "server";67async function Deploys() {8 const rows = await db.deploys.latest(5);9 return rows.map((d) => (10 <Text key={d.id}>{`${d.state} ${d.branch}`}</Text>11 ));12}1314export default function Page() {15 return (16 <Box className="flex-col p-1">17 <Text bold>Deployments</Text>18 <Suspense fallback={<Text color="muted">Loading…</Text>}>19 <Deploys />20 </Suspense>21 </Box>22 );23}- आंशिक प्रीरेंडरिंगहर स्टैटिक रूट का पहला फ़्रेम उसके HTML में आता है। JavaScript लोड होने से पहले कंसोल पेंट करता है।
- मिडलवेयर
middleware.tsफ़ाइल मैच होने वाली रिक्वेस्ट से पहलेNextRequest,NextResponseऔरconfig.matcherके साथ चलती है। - कैशिंग
revalidate,unstable_cacheऔरrevalidateTagstale-while-revalidate के साथ रूट हैंडलर और डेटा कैश करते हैं। - डिप्लॉय अडैप्टर
text build --adapterकमांडstatic,bun,vercelयाcloudflareको टारगेट करती है। सर्वर पर रेंडर किए गए रूट के लिएbunयाtext startज़रूरी है।
टर्मिनल और एजेंट में भी चलता है
DevToolstext dev
Turbolog हर फ़्रेम को एक console.log में %c span के रूप में लिखता है।
टर्मिनलtext run
text run उसी App Router ऐप को ट्रूकलर ANSI में रेंडर करता है और रूट हैंडलर उसी प्रोसेस में चलाता है।
कोडिंग एजेंटtext mcp
MCP से एजेंट रूट पर नेविगेट करते हैं, कुंजियां दबाते हैं और हर फ़्रेम को प्लेन टेक्स्ट में पढ़ते हैं।
DevTools में OpenCode के साथ कोड करें
OpenCode Lite, OpenCode TUI का Text.js से दोबारा बनाया गया रूप है, जो आपके ब्राउज़र कंसोल में चलता है।
सैंडबॉक्स
स्क्रिप्टेड एजेंट हर प्रॉम्प्ट का जवाब देता है, कुछ इंस्टॉल नहीं करना पड़ता।
एक कमांड
bunx @textjs/opencode@latest proxy कमांड चलाएं और उसका प्रिंट किया कोड दर्ज करें। पेज आपकी मशीन पर OpenCode से कनेक्ट होता है।
आपके मॉडल और सेशन
/models कमांड से आपके सर्वर पर कॉन्फ़िगर किया कोई भी मॉडल चुनें। सेशन, एजेंट और मॉडल आपके OpenCode सर्वर से आते हैं।
एडिटर, लिंट और टेस्ट टूल
DevTools एक्सटेंशन
कंपोनेंट ट्री, फ़्रेम इंस्पेक्टर और हर फ़्रेम की टाइमलाइन वाला पैनल जोड़ता है।
Text.js पैनलVS Code
आपके कोड के बगल में फ़्रेम का प्रीव्यू दिखाता है और App Router फ़ाइलों का ढांचा बनाता है।
⌘K VESLint
कंसोल कंपोनेंट में DOM टैग, टेक्स्ट के अंदर बॉक्स और Menlo में मौजूद न होने वाले ग्लिफ़ पकड़ता है।
eslint-plugin-textjsटेस्टिंग
किसी भी टेस्ट रनर में ऑफ़स्क्रीन रेंडर करें, कुंजियां दबाएं और lastFrame() पर असर्शन चलाएं।
एरर कोड
TX कोड वाले एरर और चेतावनियां ऐसे पेज से लिंक होते हैं जो समाधान बताता है।
कंसोल REPL
कंसोल प्रॉम्प्ट से चलते ऐप को रोकें, उसका साइज़ बदलें, वायरफ़्रेम बनाएं और कॉपी करें।
window.textदाएं से बाएं
Unicode बाइडायरेक्शनल एल्गोरिदम लागू करता है और BidiTest.txt के सभी 7,70,241 केस पास करता है।
FIGlet फ़ॉन्ट
.flf फ़ाइलें पार्स करता है और figlet बाइनरी से रिकॉर्ड किए गए 273 आउटपुट से मेल खाता है।
अपने कंसोल में डिप्लॉय डैशबोर्ड बनाएं
मुफ़्त कोर्स में 10 अध्याय हैं और इसे पूरा करने में करीब 65 मिनट लगते हैं।