VS Code

VS Code için Text.js eklentisi, konsol karenizi kodun yanında gösterir. text dev altında çalışan uygulamayı yansıtır veya hiçbir şey çalışmıyorsa açık dosyanın kendisini render eder. Ayrıca App Router için iskelet oluşturma, kod parçacıkları ve TX### hata kodlarına bağlantılar ekler.

#Kurulum

Visual Studio Marketplace’ten Text.js eklentisini yükleyin. VS Code’da Uzantılar görünümünü (⌘⇧X) açıp textjs.vscode-textjs arayın veya şu komutu çalıştırın:

code --install-extension textjs.vscode-textjs

Text.js uygulaması içeren her klasörde etkinleşir: bir text.config.ts dosyası veya @textjs/app bağımlılığı ve app/ dizini olan bir paket. Birden fazla uygulama içeren monorepo’lar da çalışır.

#Canlı önizleme

Bir page.tsx, layout.tsx dosyası veya bileşen açıp Text.js: Open Preview (⌘K V) komutunu çalıştırın ya da düzenleyicinin başlık çubuğundaki önizleme düğmesine tıklayın. Panel, kareyi tarayıcı konsolunuzla aynı DevTools arayüzünde ve Menlo hücreleriyle çizer.

Önizleme, karelerini iki kaynaktan birinden alır. Araç çubuğundaki rozet hangisinin etkin olduğunu gösterir:

auto (varsayılan), kullanılabildiğinde Canlı, aksi durumda Başsız kaynağını kullanır. Rozetten veya textjs.preview.mode ile bunlardan birini sabitleyin.

#Klavye

Tuşları uygulamaya göndermek için konsola tıklayın: ok tuşları, Tab, kısayollar, yazma ve yapıştırma tarayıcıdaki gibi çalışır. Durdurmak için konsolun dışına tıklayın. ⌘P ve ⌘⇧P gibi düzenleyici kısayolları yine VS Code’a gider. Konsol üzerinde kaydırma yapmak tekerlek olayları gönderir.

Her iki kaynakta da gezinmek için adres alanına /deployments/dpl_a1 gibi bir rota yazabilirsiniz.

#Canlı mod

Bir önizleme açıkken geliştirme sunucusu, bağlı sekmelerden karelerini akış olarak göndermelerini ister. Sekmeler yalnızca değişen satırları gönderir ve önizleme kapandığında göndermeyi durdurur; böylece açık önizlemesi olmayan bir uygulama ek maliyet taşımaz. Dosya kaydetme işlemi Fast Refresh üzerinden geçer ve önizleme sekmeyle birlikte güncellenir.

Tarayıcı sekmesini düzenlediğiniz page.tsx dosyasının rotasına taşımak için Takip et (textjs.preview.followEditor) seçeneğini açın.

Arka plandaki sekmeler animasyon karesi almaz, bu yüzden normalde yeniden görünür olana kadar karelerini korur. Bir önizleme izlerken arka plandaki sekme girdi gelir gelmez bir kare çizer, bu nedenle önizlemede yazmak güncelleme yapmaya devam eder. Arka plandaki bir sekmede animasyonlar yaklaşık saniyede bir kez güncellenir. Akıcı kalmaları için uygulamayı ayrı bir pencereye taşıyın.

#Başsız mod

Eklenti, projenizde küçük bir çalıştırıcı başlatır. Rota dosyalarını projenin kendi Vite ve @textjs/app kurulumları üzerinden yükler; böylece takma adlar, TypeScript ve JSX, text dev ile aynı şekilde davranır. Bellek içi geçmiş kullanarak App Router bileşenini, layout’larıyla birlikte açık dosyanın rotasına bağlar:

Aynı kaynaklı fetch("/api/...") çağrıları, text run komutundaki gibi route.ts işleyicilerinizi aynı süreçte çalıştırır. Izgara, panelin boyutunu izler ve uygulamadaki herhangi bir dosyayı kaydetmek yeniden render edilmesini sağlar. Hatalar, TX### sayfalarına bağlantılarla karenin üzerinde gösterilir.

#Komutlar

İskelet oluşturma komutları, Gezgin’deki klasör bağlam menüsünde de bulunur. settings, blog/[slug], docs/[...path] ve (marketing)/about gibi App Router segmentlerini kabul eder ve aynı segmente bir page ile bir route.ts yerleştirmeyi reddeder. JavaScript projelerinde (tsconfig.json yoksa) .jsx ve .js dosyaları oluşturulur.

#Kod parçacıkları

#Hata kodları

Kaynak kodda, günlüklerde, Çıktı panelinde veya yapıştırılmış bir yığın izinde herhangi bir TX### kodunun üzerine gelin. Açılan bilgi kutusu, başlığını, mesajını ve paketini textjs.org üzerindeki sayfasına bağlantıyla gösterir. Her kod aynı zamanda bir bağlantıdır (⌘-tıklama).

#Durum çubuğu

▼ öğesi, geliştirme sunucusunun durumunu ve konsol ızgarasının boyutunu gösterir; örneğin ▼ :3000 120×36. Sekmeler, önizleme açık olmasa bile boyutları her değiştiğinde geliştirme sunucusuna bildirir. Ana komutlar için öğeye tıklayın.

#Ayarlar

#Çalışma alanı güveni

Önizleme ve geliştirme sunucusu projenizin kodunu (Vite yapılandırması, text.config.* ve bileşenler) çalıştırır. Kısıtlı Mod’da eklenti yalnızca kod parçacıkları, iskelet oluşturma ve hata bağlantıları sunar; çalışma alanı ayarlarındaki textjs.preview.runtime, textjs.devServer.command ve textjs.devServer.url değerlerini yok sayar. Önizlemeyi açmak için çalışma alanına güvenin. Çalışma alanı klasörlerinizin dışındaki dosyalar hiçbir zaman önizlenmez.

#Çalışma şekli

text dev, düzenleyiciler için üç uç nokta sunar. Yalnızca bir geri döngü ana bilgisayarına (localhost, 127.0.0.1, [::1]) yöneltilmiş geri döngü bağlantılarına ve yalnızca Origin içermeyen veya geliştirme sunucusunun kendi kaynağını içeren isteklere yanıt verirler. Tarayıcıların siteler arası ve no-cors istekleri reddedilir:

Sekmeler, kareleri sunucuya özel bir belirteç gerektiren Vite HMR soketi üzerinden geliştirme sunucusuna gönderir. Kendi görüntüleyicinizi oluşturmak isterseniz aktarım biçimi @textjs/app/frame-protocol üzerinden dışa aktarılır (FrameEncoder, FrameDecoder, parseInputMessage). Bunların hiçbiri text build çıktısında bulunmaz.