⁦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 فائل کے روٹ پر لے جانے کے لیے فالو (textjs.preview.followEditor) آن کریں۔

بیک گراؤنڈ ٹیبز کو اینیمیشن فریم نہیں ملتے، اس لیے وہ عموماً دوبارہ نظر آنے تک اپنے فریم روکے رکھتے ہیں۔ جب پری ویو دیکھ رہا ہو تو بیک گراؤنڈ ٹیب ان پٹ آتے ہی فریم بناتا ہے، اس لیے پری ویو میں ٹائپ کرنے سے اب بھی اپ ڈیٹ ہوتا ہے۔ بیک گراؤنڈ ٹیب میں اینیمیشنز تقریباً ہر سیکنڈ میں ایک بار اپ ڈیٹ ہوتی ہیں۔ انہیں رواں رکھنے کے لیے ایپ کو الگ ونڈو میں رکھیں۔

#ہیڈلیس موڈ

ایکسٹینشن آپ کے پروجیکٹ میں ایک چھوٹا رنر شروع کرتی ہے۔ یہ پروجیکٹ کے اپنے Vite اور @textjs/app سے روٹ فائلیں لوڈ کرتا ہے، اس لیے عرفی نام، TypeScript اور JSX ویسے ہی کام کرتے ہیں جیسے text dev میں۔ یہ میموری میں موجود ہسٹری استعمال کرکے کھلی فائل کے روٹ پر ⁦App Router⁩ کو اس کے لے آؤٹس سمیت ماؤنٹ کرتا ہے:

ایک ہی اوریجن کی fetch("/api/...") کالز آپ کے route.ts ہینڈلرز کو اسی پروسیس میں چلاتی ہیں، جیسے text run میں۔ گرڈ پینل کے سائز کے مطابق رہتا ہے، اور ایپ میں کسی بھی فائل کو محفوظ کرنے سے وہ دوبارہ رینڈر ہوتی ہے۔ ایررز فریم کے اوپر اپنے TX### صفحات کے لنکس کے ساتھ دکھتے ہیں۔

#کمانڈز

اسکیفولڈنگ کمانڈز فولڈرز کے لیے Explorer کے کانٹیکسٹ مینو میں بھی موجود ہیں۔ یہ ⁦App Router⁩ کے سیگمنٹس جیسے settings، blog/[slug]، docs/[...path] اور (marketing)/about قبول کرتی ہیں، اور ایک ہی سیگمنٹ میں 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 کے آؤٹ پٹ میں موجود نہیں ہوتا۔