VS Code

VS Code के लिए Text.js एक्सटेंशन आपके कोड के पास कंसोल फ़्रेम दिखाता है। यह text dev से चल रहे ऐप को मिरर करता है, या कुछ न चलने पर खुली फ़ाइल को ख़ुद रेंडर करता है। यह App Router स्कैफ़ोल्डिंग, स्निपेट और TX### एरर कोड के लिंक भी जोड़ता है।

#इंस्टॉलेशन

Visual Studio Marketplace से Text.js इंस्टॉल करें। VS Code में Extensions व्यू (⌘⇧X) खोलें और textjs.vscode-textjs खोजें, या यह कमांड चलाएं:

code --install-extension textjs.vscode-textjs

यह ऐसे किसी भी फ़ोल्डर में सक्रिय होता है जिसमें Text.js ऐप हो: text.config.ts फ़ाइल, या ऐसा पैकेज जो @textjs/app पर निर्भर हो और जिसमें app/ डायरेक्टरी हो। कई ऐप वाले मोनोरेपो भी काम करते हैं।

#लाइव प्रीव्यू

page.tsx, layout.tsx फ़ाइल या कंपोनेंट खोलें और Text.js: Open Preview (⌘K V) चलाएं, या एडिटर के टाइटल बार में प्रीव्यू बटन पर क्लिक करें। पैनल आपके ब्राउज़र कंसोल जैसे ही DevTools क्रोम और Menlo सेल में फ़्रेम बनाता है।

प्रीव्यू को अपने फ़्रेम दो में से किसी एक स्रोत से मिलते हैं। टूलबार का बैज दिखाता है कि कौन-सा स्रोत सक्रिय है:

auto (डिफ़ॉल्ट) उपलब्ध होने पर लाइव और अन्यथा हेडलेस का इस्तेमाल करता है। बैज से या textjs.preview.mode सेटिंग से किसी एक को पिन करें।

#कीबोर्ड

ऐप को की इनपुट भेजने के लिए कंसोल पर क्लिक करें: ऐरो की, Tab, शॉर्टकट, टाइपिंग और पेस्ट, सभी ब्राउज़र की तरह काम करते हैं। रोकने के लिए कंसोल के बाहर क्लिक करें। ⌘P और ⌘⇧P जैसे एडिटर शॉर्टकट अब भी VS Code को मिलते हैं। कंसोल पर स्क्रॉल करने से व्हील इवेंट भेजे जाते हैं।

किसी भी स्रोत में नेविगेट करने के लिए आप एड्रेस फ़ील्ड में /deployments/dpl_a1 जैसा रूट टाइप कर सकते हैं।

#लाइव मोड

प्रीव्यू खुला होने पर डेव सर्वर कनेक्ट किए गए टैब से उनके फ़्रेम स्ट्रीम करने को कहता है। टैब सिर्फ़ बदली हुई पंक्तियां भेजते हैं और प्रीव्यू बंद होने पर भेजना रोक देते हैं, इसलिए बिना खुले प्रीव्यू वाले ऐप पर कोई अतिरिक्त लागत नहीं आती। फ़ाइल सेव करने पर Fast Refresh चलता है और टैब के साथ प्रीव्यू भी अपडेट होता है।

ब्राउज़र टैब को उस page.tsx फ़ाइल के रूट पर ले जाने के लिए जिसे आप एडिट कर रहे हैं, Follow (textjs.preview.followEditor) चालू करें।

बैकग्राउंड टैब को ऐनिमेशन फ़्रेम नहीं मिलते, इसलिए वे आम तौर पर दोबारा दिखने तक अपने फ़्रेम रोके रखते हैं। जब प्रीव्यू देख रहा हो, तो बैकग्राउंड टैब इनपुट आते ही फ़्रेम बनाता है, इसलिए प्रीव्यू में टाइप करने पर भी अपडेट होता है। बैकग्राउंड टैब में ऐनिमेशन लगभग हर सेकंड एक बार अपडेट होते हैं। उन्हें सुचारु रखने के लिए ऐप को अलग विंडो में रखें।

#हेडलेस मोड

एक्सटेंशन आपके प्रोजेक्ट में एक छोटा रनर शुरू करता है। यह प्रोजेक्ट के अपने Vite और @textjs/app के ज़रिए रूट फ़ाइलें लोड करता है, इसलिए एलियस, TypeScript और JSX वैसे ही काम करते हैं जैसे text dev में करते हैं। यह इन-मेमोरी हिस्ट्री का इस्तेमाल करके खुली फ़ाइल के रूट पर, उसके लेआउट के साथ, App Router माउंट करता है:

समान ओरिजिन वाली fetch("/api/...") कॉल आपके route.ts हैंडलर उसी प्रोसेस में चलाती हैं, जैसे text run में होता है। ग्रिड पैनल के साइज़ के अनुसार बदलता है और ऐप की कोई भी फ़ाइल सेव करने पर वह दोबारा रेंडर होता है। एरर फ़्रेम के ऊपर दिखते हैं, उनके TX### पेज के लिंक के साथ।

#कमांड

स्कैफ़ोल्डिंग कमांड फ़ोल्डर के Explorer कॉन्टेक्स्ट मेन्यू में भी हैं। वे settings, blog/[slug], docs/[...path] और (marketing)/about जैसे App Router सेगमेंट स्वीकार करते हैं और एक ही सेगमेंट में page और route.ts रखने से मना करते हैं। JavaScript प्रोजेक्ट (जिनमें tsconfig.json नहीं है) को .jsx और .js फ़ाइलें मिलती हैं।

#स्निपेट

#एरर कोड

कहीं भी TX### कोड पर होवर करें: सोर्स, लॉग, Output पैनल या पेस्ट किए गए स्टैक ट्रेस में। होवर पर उसका शीर्षक, मैसेज और पैकेज दिखता है, साथ में textjs.org पर उसके पेज का लिंक भी। हर कोड एक लिंक भी है (⌘-क्लिक)।

#स्टेटस बार

▼ आइटम डेव सर्वर की स्टेट और कंसोल ग्रिड का साइज़ दिखाता है, उदाहरण के लिए ▼ :3000 120×36। टैब का साइज़ बदलने पर वे डेव सर्वर को इसकी जानकारी देते हैं, भले ही कोई प्रीव्यू खुला न हो। मुख्य कमांड के लिए आइटम पर क्लिक करें।

#सेटिंग

#वर्कस्पेस पर भरोसा

प्रीव्यू और डेव सर्वर आपके प्रोजेक्ट का कोड (उसका Vite कॉन्फ़िग, text.config.* और कंपोनेंट) चलाते हैं। Restricted Mode में एक्सटेंशन सिर्फ़ स्निपेट, स्कैफ़ोल्डिंग और एरर लिंक देता है, और वर्कस्पेस सेटिंग से textjs.preview.runtime, textjs.devServer.command और textjs.devServer.url को अनदेखा करता है। प्रीव्यू चालू करने के लिए वर्कस्पेस पर भरोसा करें। आपके वर्कस्पेस फ़ोल्डर से बाहर की फ़ाइलों का प्रीव्यू कभी नहीं दिखाया जाता।

#काम करने का तरीका

text dev एडिटर के लिए तीन एंडपॉइंट उपलब्ध कराता है। वे सिर्फ़ लूपबैक होस्ट (localhost, 127.0.0.1, [::1]) को संबोधित लूपबैक कनेक्शन का जवाब देते हैं, और सिर्फ़ उन रिक्वेस्ट का जिनमें Origin न हो या डेव सर्वर का अपना ओरिजिन हो। ब्राउज़र की क्रॉस-साइट और no-cors रिक्वेस्ट अस्वीकार होती हैं:

टैब Vite के HMR सॉकेट से डेव सर्वर को फ़्रेम भेजते हैं, जिसके लिए हर सर्वर का अलग टोकन ज़रूरी है। अगर आप अपना व्यूअर बनाना चाहते हैं, तो वायर फ़ॉर्मैट @textjs/app/frame-protocol (FrameEncoder, FrameDecoder, parseInputMessage) से एक्सपोर्ट होता है। इनमें से कुछ भी text build के आउटपुट में नहीं होता।