vitale

/-Schaltflächen in der Zellenstatusleiste, um die Ausführung anzuhalten und neu zu starten; Wenn Sie es global deaktivieren möchten, können Sie die Einstellung „Vitale: Zellen erneut ausführen, wenn sie verschmutzt sind“ deaktivieren.

Module importieren

Sie können installierte Module wie gewohnt importieren, z

 import { Octokit } from "@octokit/core" ;

Importe sind in anderen Zellen sichtbar, sobald die importierende Zelle ausgeführt wurde.

Sie können Projektdateien auch mit einem Pfad relativ zur Notebook-Datei importieren, z

 import { foo } from "./bar.ts" ;

und Änderungen an der importierten Datei führen dazu, dass abhängige Zellen wie oben beschrieben erneut ausgeführt werden.

Ausgabebereiche

Die Zellausgabe wird unterhalb der Zelle angezeigt. Sie können die Ausgabe in einem separaten Bereich öffnen, indem Sie auf die Schaltfläche in der Zellensymbolleiste klicken. Die Ausgabe in einem separaten Bereich wird aktualisiert, wenn die Zelle erneut ausgeführt wird oder wenn sich Abhängigkeiten ändern.

Rendern verschiedener MIME-Typen

vitale prüft den Ausgabewert und versucht, einen geeigneten MIME-Typ zum Rendern auszuwählen. Für die meisten Javascript-Objekte ist dies application/json , das von VS Code mit Syntaxhervorhebung gerendert wird. Für komplexe Objekte können Sie eine erweiterbare Ansicht rendern (mithilfe von „react-json-view“), indem Sie den MIME-Typ „ application/x-json-view zurückgeben. HTMLElement und SVGElement Objekte werden als text/html bzw. image/svg+xml gerendert (siehe unten für ein Beispiel).

Um den MIME-Typ der Ausgabe explizit festzulegen, geben Sie ein Objekt vom Typ { data: string, mime: string } zurück (derzeit gibt es keine Möglichkeit, Binärdaten zurückzugeben). VS Code verfügt über mehrere integrierte Renderer (siehe Rich Output) und Sie können andere als Erweiterungen installieren.

Es gibt Hilfsfunktionen in @githubnext/vitale um diese mit MIME-Tags versehenen Ausgaben zu erstellen:

 function text ( data : string ) ;
function stream ( data : string ) ; // application/x.notebook.stream
function textHtml ( data : string ) ; // text/x-html
function textJson ( data : string ) ; // text/x-json
function textMarkdown ( data : string ) ; // text/x-markdown
function markdown ( data : string ) ;
function html ( html : string | { outerHTML : string } ) ;
function svg ( html : string | { outerHTML : string } ) ;
function json ( obj : object ) ;
function jsonView ( obj : object ) ;

Dieses Paket wird automatisch unter dem Namen Vitale in Notebook-Zellen importiert, sodass Sie z. B. schreiben können

 Vitale . jsonView ( { foo : "bar" } ) ;

Möglicherweise möchten Sie es jedoch explizit importieren, um Typen für die automatische Vervollständigung abzurufen.

Sie können HTMLElement und SVGElement Werte mit jsdom oder einer ähnlichen Bibliothek erstellen; Um beispielsweise ein SVG aus Observable Plot zu rendern:

 import * as Plot from "@observablehq/plot" ;
import { JSDOM } from "jsdom" ;
const { document } = new JSDOM ( ) . window ;

const xs = Array . from ( { length : 20 } , ( _ , i ) => i ) ;
const xys = xs . map ( ( x ) => [ x , Math . sin ( x / Math . PI ) ] ) ;

Plot . plot ( {
  inset : 10 ,
  marks : [ Plot . line ( xys ) ] ,
  document ,
} ) ; 

Rendern von React-Komponenten

Um eine React-Komponente zu rendern, schreiben Sie sie als letzten Ausdruck in eine Zelle, z

 const Component = ( ) => < div > Hello, world! < / div > ;

< Component / > ;

Sie können eine Komponente auch aus einer anderen Zelle oder aus einer Projektdatei importieren. Wenn Sie eine importierte Komponente bearbeiten, wird ein Hot-Reload der gerenderten Ausgabe ausgelöst. (Hierbei wird der Hot-Reloading-Mechanismus von Vite verwendet und kann daher nicht wie bei der serverseitigen Neuausführung angehalten werden.)

Clientseitiges Rendern ohne React

Um eine Zelle clientseitig zu rendern, fügen Sie oben in der Zelle "use client" hinzu. Eine Variable __vitale_cell_output_root_id__ ist als ID eines DOM-Elements für die Ausgabe der Zelle definiert.

 "use client" ;

document . getElementById ( __vitale_cell_output_root_id__ ) . innerText =
  "Hello, world!" ;

Es sollte möglich sein, Nicht-React-Frameworks auf diese Weise zu rendern, aber ich habe es noch nicht ausprobiert.

Protokollierung

Standardausgabe- und Fehlerströme werden beim Ausführen von Zellen erfasst und an einen Ausgabekanal pro Zelle gesendet. Klicken Sie auf die Schaltfläche in der Zellensymbolleiste, um den Kanal anzuzeigen.

Umgebungsvariablen

vitale erbt das Umgebungsvariablen-Setup von Vite, siehe Env-Variablen und -Modi.

Da Code in Zellen von Vite transformiert wird, müssen Sie Variablen VITE_ voranstellen, damit sie sichtbar sind.

VS-Code-API

Sie können einige der VS-Code-API aus Zellen aufrufen, indem Sie Funktionen in @githubnext/vitale verwenden:

 getSession (
  providerId : string ,
  scopes : readonly string [ ] ,
  options : vscode . AuthenticationGetSessionOptions
) : Promise < vscode . AuthenticationSession > ;

showInformationMessage < string > (
  message : string ,
  options : vscode . MessageOptions ,
  ... items : string [ ]
) : Promise < string | undefined > ;
showWarningMessage < string > (
  message : string ,
  options : vscode . MessageOptions ,
  ... items : string [ ]
) : Promise < string | undefined > ;
showErrorMessage < string > (
  message : string ,
  options : vscode . MessageOptions ,
  ... items : string [ ]
) : Promise < string | undefined > ; 

Entwicklung

Um Vitale zu entwickeln:

• git clone https://github.com/githubnext/vitale.git
• cd vitale; pnpm install
• Öffnen Sie das Projekt in VS Code und drücken Sie F5 , um es auszuführen

Der Server muss in dem Projekt installiert sein, mit dem Sie testen. Sie können den veröffentlichten Server wie oben beschrieben installieren oder einen Link zur Entwicklungsversion erstellen:

• cd packages/server; pnpm link --dir $YOURPROJECT

Der verknüpfte Entwicklungsserver wird automatisch neu erstellt, aber nicht im laufenden Betrieb neu geladen. Sie können die neuesten Änderungen erhalten, indem Sie den Server neu starten (führen Sie Vitale: Restart Kernel aus der Befehlspalette aus).