VS Code

Rozszerzenie Text.js do VS Code pokazuje klatkę konsoli obok kodu. Odwzorowuje aplikację działającą pod text dev lub samodzielnie renderuje otwarty plik, gdy nic nie działa. Dodaje też generowanie szkieletów App Router, snippety i linki do kodów błędów TX###.

#Instalacja

Zainstaluj Text.js z Visual Studio Marketplace. W VS Code otwórz widok „Rozszerzenia” (⌘⇧X) i wyszukaj textjs.vscode-textjs lub uruchom:

code --install-extension textjs.vscode-textjs

Rozszerzenie aktywuje się w każdym folderze zawierającym aplikację Text.js: plik text.config.ts lub pakiet zależny od @textjs/app z katalogiem app/. Działają też monorepo z kilkoma aplikacjami.

#Podgląd na żywo

Otwórz plik page.tsx, layout.tsx lub komponent i uruchom Text.js: Open Preview (⌘K V) albo kliknij przycisk podglądu na pasku tytułu edytora. Panel rysuje klatkę z takim samym obramowaniem DevTools i komórkami z czcionką Menlo jak konsola przeglądarki.

Podgląd pobiera klatki z jednego z dwóch źródeł. Etykieta na pasku narzędzi pokazuje, które jest aktywne:

auto (ustawienie domyślne) używa Live, gdy to możliwe, a w pozostałych przypadkach Headless. Wybierz na stałe jedno ze źródeł za pomocą etykiety lub textjs.preview.mode.

#Klawiatura

Kliknij konsolę, aby wysyłać klawisze do aplikacji: strzałki, Tab, skróty klawiszowe, pisanie i wklejanie działają tak jak w przeglądarce. Kliknij poza konsolą, aby przestać. Skróty edytora, takie jak ⌘P i ⌘⇧P, nadal trafiają do VS Code. Przewijanie nad konsolą wysyła zdarzenia kółka myszy.

W polu adresu możesz wpisać trasę, taką jak /deployments/dpl_a1, aby nawigować w dowolnym ze źródeł.

#Tryb Live

Gdy podgląd jest otwarty, serwer deweloperski prosi połączone karty o strumieniowanie klatek. Karty wysyłają tylko zmienione wiersze i przestają je wysyłać po zamknięciu podglądu, więc aplikacja bez otwartego podglądu nie ponosi żadnych kosztów. Zapis pliku przechodzi przez Fast Refresh, a podgląd aktualizuje się wraz z kartą.

Włącz Follow (textjs.preview.followEditor), aby przełączać kartę przeglądarki na trasę edytowanego pliku page.tsx.

Karty w tle nie otrzymują klatek animacji, więc zwykle zachowują swoje klatki, dopóki znów nie staną się widoczne. Gdy podgląd obserwuje kartę w tle, rysuje ona klatkę zaraz po otrzymaniu danych wejściowych, więc pisanie w podglądzie nadal go aktualizuje. Animacje w karcie w tle aktualizują się mniej więcej raz na sekundę. Umieść aplikację w osobnym oknie, aby zachować ich płynność.

#Tryb Headless

Rozszerzenie uruchamia w projekcie niewielki program wykonawczy. Ładuje on pliki tras przez Vite i @textjs/app z projektu, więc aliasy, TypeScript i JSX działają tak samo jak w text dev. Montuje App Router na trasie otwartego pliku wraz z jej layoutami, używając historii w pamięci:

Wywołania fetch("/api/...") do tego samego źródła uruchamiają handlery route.ts w tym samym procesie, tak jak text run. Siatka dopasowuje się do rozmiaru panelu, a zapis dowolnego pliku w aplikacji renderuje ją ponownie. Błędy pojawiają się nad klatką wraz z linkami do ich stron TX###.

#Polecenia

Polecenia generowania szkieletów są też dostępne w menu kontekstowym folderów w Eksploratorze. Przyjmują segmenty App Router, takie jak settings, blog/[slug], docs/[...path] i (marketing)/about, i odmawiają umieszczenia page oraz route.ts w tym samym segmencie. Projekty JavaScript (bez tsconfig.json) otrzymują pliki .jsx i .js.

#Snippety

#Kody błędów

Najedź na kod TX### w dowolnym miejscu: w kodzie źródłowym, logach, panelu „Dane wyjściowe” lub wklejonym śladzie stosu. Dymek pokazuje jego tytuł, komunikat i pakiet wraz z linkiem do jego strony w textjs.org. Każdy kod jest też linkiem (kliknięcie z ⌘).

#Pasek stanu

Element ▼ pokazuje stan serwera deweloperskiego i rozmiar siatki konsoli, na przykład ▼ :3000 120×36. Karty zgłaszają swój rozmiar serwerowi deweloperskiemu przy każdej zmianie, nawet bez otwartego podglądu. Kliknij ten element, aby wyświetlić główne polecenia.

#Ustawienia

#Zaufanie do obszaru roboczego

Podgląd i serwer deweloperski uruchamiają kod projektu (jego konfigurację Vite, text.config.* i komponenty). W trybie ograniczonym rozszerzenie oferuje tylko snippety, generowanie szkieletów i linki do błędów oraz ignoruje textjs.preview.runtime, textjs.devServer.command i textjs.devServer.url z ustawień obszaru roboczego. Oznacz obszar roboczy jako zaufany, aby włączyć podgląd. Pliki spoza folderów obszaru roboczego nigdy nie są wyświetlane w podglądzie.

#Zasada działania

text dev udostępnia trzy endpointy dla edytorów. Odpowiadają tylko na połączenia pętli zwrotnej skierowane do hosta pętli zwrotnej (localhost, 127.0.0.1, [::1]) i tylko na żądania bez Origin lub ze źródłem serwera deweloperskiego. Żądania przeglądarek między witrynami i no-cors są odrzucane:

Karty wysyłają klatki do serwera deweloperskiego przez gniazdo HMR środowiska Vite, które wymaga tokenu przypisanego do serwera. Format transmisji jest eksportowany z @textjs/app/frame-protocol (FrameEncoder, FrameDecoder, parseInputMessage), jeśli chcesz zbudować własną przeglądarkę klatek. Żaden z tych elementów nie występuje w wyniku text build.