vitale
0.0.19
Boutons / dans la barre d'état de la cellule pour suspendre et redémarrer l'exécution ; ou si vous souhaitez le désactiver globalement, vous pouvez décocher le paramètre "Vitale : réexécuter les cellules lorsqu'elles sont sales".
Vous pouvez importer les modules installés comme d'habitude, par exemple
import { Octokit } from "@octokit/core" ;Les importations sont visibles dans les autres cellules une fois la cellule d'importation exécutée.
Vous pouvez également importer des fichiers de projet avec un chemin relatif au fichier notebook, par exemple
import { foo } from "./bar.ts" ;et les modifications apportées au fichier importé entraîneront la réexécution des cellules dépendantes comme ci-dessus.
La sortie de la cellule est affichée sous la cellule. Vous pouvez ouvrir la sortie dans un volet séparé en cliquant sur le bouton dans la barre d'outils des cellules. La sortie dans un volet séparé est mise à jour lorsque la cellule est réexécutée ou lorsque les dépendances changent.
vitale inspecte la valeur de sortie et essaie de choisir un type MIME approprié pour la restituer. Pour la plupart des objets Javascript, il s'agit application/json , qui est rendu par VS Code avec coloration syntaxique. Pour les objets complexes, vous pouvez afficher une vue extensible (à l'aide de React-json-view) en renvoyant le type MIME application/x-json-view . Les objets HTMLElement et SVGElement sont rendus respectivement sous la forme text/html et image/svg+xml (voir ci-dessous pour un exemple).
Pour définir explicitement le type MIME de la sortie, renvoyez un objet de type { data: string, mime: string } (actuellement, il n'existe aucun moyen de renvoyer des données binaires). VS Code dispose de plusieurs moteurs de rendu intégrés (voir Rich Output) et vous pouvez en installer d'autres en tant qu'extensions.
Il existe des fonctions d'assistance dans @githubnext/vitale pour construire ces sorties marquées MIME :
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 ) ; Ce package est auto-importé sous le nom Vitale dans les cellules du notebook, vous pouvez donc écrire par exemple
Vitale . jsonView ( { foo : "bar" } ) ;mais vous souhaiterez peut-être l'importer explicitement pour obtenir des types à compléter automatiquement.
Vous pouvez construire des valeurs HTMLElement et SVGElement à l'aide jsdom ou d'une bibliothèque similaire ; par exemple, pour restituer un SVG à partir d'un tracé observable :
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 ,
} ) ; Pour afficher un composant React, écrivez-le comme dernière expression dans une cellule, comme
const Component = ( ) => < div > Hello, world! < / div > ;
< Component / > ;Vous pouvez également importer un composant depuis une autre cellule ou depuis un fichier de projet, et la modification d'un composant importé déclenchera un rechargement à chaud de la sortie rendue. (Cela utilise le mécanisme de rechargement à chaud de Vite, il ne peut donc pas être interrompu comme lors d'une réexécution côté serveur.)
Pour afficher une cellule côté client, ajoutez "use client" en haut de la cellule. Une variable __vitale_cell_output_root_id__ est définie comme étant l'ID d'un élément DOM pour la sortie de la cellule.
"use client" ;
document . getElementById ( __vitale_cell_output_root_id__ ) . innerText =
"Hello, world!" ;Il devrait être possible de restituer des frameworks non-React de cette façon mais je ne l'ai pas essayé.
Les flux de sortie et d'erreurs standard sont capturés lors de l'exécution des cellules et envoyés à un canal de sortie par cellule. Appuyez sur le bouton dans la barre d'outils des cellules pour afficher la chaîne.
vitale hérite de la configuration des variables d'environnement de Vite, voir Variables et modes d'environnement.
Puisque le code dans les cellules est transformé par Vite, vous devez préfixer les variables avec VITE_ pour qu'elles soient visibles.
Vous pouvez appeler une partie de l'API VS Code à partir de cellules à l'aide de fonctions dans @githubnext/vitale :
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 > ; Pour développer Vitale :
git clone https://github.com/githubnext/vitale.gitcd vitale; pnpm installF5 pour exécuterLe serveur doit être installé dans le projet avec lequel vous testez. Vous pouvez installer le serveur publié comme ci-dessus, ou créer un lien vers la version de développement :
cd packages/server; pnpm link --dir $YOURPROJECT Le serveur de développement lié est automatiquement reconstruit mais pas rechargé à chaud ; vous pouvez obtenir les dernières modifications en redémarrant le serveur (exécutez Vitale: Restart Kernel à partir de la palette de commandes).
