vitale

Botones / en la barra de estado de la celda para pausar y reiniciar la ejecución; o si desea desactivarlo globalmente, puede desmarcar la configuración "Vitale: volver a ejecutar celdas cuando estén sucias".

Importando módulos

Puede importar módulos instalados como de costumbre, por ejemplo

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

Las importaciones son visibles en otras celdas una vez que se ha ejecutado la celda de importación.

También puede importar archivos de proyecto con una ruta relativa al archivo del cuaderno, por ejemplo

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

y los cambios en el archivo importado harán que las celdas dependientes se vuelvan a ejecutar como se indicó anteriormente.

Paneles de salida

La salida de la celda se muestra debajo de la celda. Puede abrir la salida en un panel separado haciendo clic en el botón en la barra de herramientas de la celda. La salida en un panel separado se actualiza cuando la celda se vuelve a ejecutar o cuando cambian las dependencias.

Representar diferentes tipos MIME

vitale inspecciona el valor de salida e intenta elegir un tipo MIME apropiado para representarlo. Para la mayoría de los objetos Javascript, esto es application/json , que VS Code representa con resaltado de sintaxis. Para objetos complejos, puede representar una vista expandible (usando react-json-view) devolviendo el tipo MIME application/x-json-view . Los objetos HTMLElement y SVGElement se representan como text/html e image/svg+xml respectivamente (consulte un ejemplo a continuación).

Para establecer explícitamente el tipo MIME de la salida, devuelva un objeto de tipo { data: string, mime: string } (actualmente no hay forma de devolver datos binarios). VS Code tiene varios renderizadores integrados (consulte Salida enriquecida) y puede instalar otros como extensiones.

Hay funciones auxiliares en @githubnext/vitale para construir estas salidas etiquetadas con 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 ) ;

Este paquete se importa automáticamente con el nombre Vitale en las celdas del cuaderno, por lo que puede escribir, por ejemplo

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

pero es posible que quieras importarlo explícitamente para obtener tipos para autocompletar.

Puede construir valores HTMLElement y SVGElement utilizando jsdom o una biblioteca similar; por ejemplo, para renderizar un SVG desde Observable Plot:

 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 ,
} ) ; 

Representación de componentes de React

Para representar un componente de React, escríbalo como la última expresión en una celda, como

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

< Component / > ;

También puede importar un componente desde otra celda o desde un archivo de proyecto, y editar un componente importado activará una recarga en caliente de la salida renderizada. (Esto utiliza el mecanismo de recarga en caliente de Vite, por lo que no se puede pausar como ocurre con la reejecución del lado del servidor).

Representación del lado del cliente sin React

Para representar una celda del lado del cliente, agregue "use client" en la parte superior de la celda. Una variable __vitale_cell_output_root_id__ se define como el ID de un elemento DOM para la salida de la celda.

 "use client" ;

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

Debería ser posible renderizar marcos que no sean React de esta manera, pero no lo he probado.

Explotación florestal

Los flujos de salida estándar y de error se capturan cuando se ejecutan celdas y se envían a un canal de salida por celda. Presione el botón en la barra de herramientas de la celda para ver el canal.

Variables ambientales

vitale hereda la configuración de variables de entorno de Vite, consulte Variables y modos de entorno.

Dado que Vite transforma el código de las celdas, es necesario anteponer las variables con VITE_ para que sean visibles.

API de código VS

Puede llamar a algunas de las API de VS Code desde celdas usando funciones en @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 > ; 

Desarrollo

Para desarrollar Vitale:

• git clone https://github.com/githubnext/vitale.git
• cd vitale; pnpm install
• abra el proyecto en VS Code, presione F5 para ejecutar

El servidor debe instalarse en cualquier proyecto que esté probando. Puede instalar el servidor publicado como se indica arriba o vincularlo a la versión de desarrollo:

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

El servidor de desarrollo vinculado se reconstruye automáticamente pero no se recarga en caliente; puede obtener los últimos cambios reiniciando el servidor (ejecute Vitale: Restart Kernel desde la paleta de comandos).