vitale

/ botões na barra de status da célula para pausar e reiniciar a execução; ou se quiser desligá-lo globalmente, você pode desmarcar a configuração "Vitale: Rerun Cells When Dirty".

Importando módulos

Você pode importar módulos instalados normalmente, por exemplo

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

As importações ficam visíveis em outras células assim que a célula de importação for executada.

Você também pode importar arquivos de projeto com um caminho relativo ao arquivo do notebook, por exemplo

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

e as alterações no arquivo importado farão com que as células dependentes sejam executadas novamente como acima.

Painéis de saída

A saída da célula é exibida abaixo da célula. Você pode abrir a saída em um painel separado clicando no botão na barra de ferramentas da célula. A saída em um painel separado é atualizada quando a célula é executada novamente ou quando as dependências mudam.

Renderizando diferentes tipos MIME

vitale inspeciona o valor de saída e tenta escolher um tipo MIME apropriado para renderizá-lo. Para a maioria dos objetos Javascript, é application/json , que é renderizado pelo VS Code com destaque de sintaxe. Para objetos complexos, você pode renderizar uma visualização expansível (usando react-json-view) retornando o tipo MIME application/x-json-view . Os objetos HTMLElement e SVGElement são renderizados como text/html e image/svg+xml respectivamente (veja um exemplo abaixo).

Para definir explicitamente o tipo MIME da saída, retorne um objeto do tipo { data: string, mime: string } (atualmente não há como retornar dados binários). O VS Code possui vários renderizadores integrados (consulte Rich Output) e você pode instalar outros como extensões.

Existem funções auxiliares em @githubnext/vitale para construir essas saídas marcadas com 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 pacote é importado automaticamente com o nome Vitale nas células do notebook, então você pode escrever, por exemplo

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

mas você pode querer importá-lo explicitamente para obter tipos para preenchimento automático.

Você pode construir valores HTMLElement e SVGElement usando jsdom ou uma biblioteca semelhante; por exemplo, para renderizar um SVG do 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 ,
} ) ; 

Renderizando componentes React

Para renderizar um componente React, escreva-o como a última expressão em uma célula, como

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

< Component / > ;

Você também pode importar um componente de outra célula ou de um arquivo de projeto, e a edição de um componente importado acionará um recarregamento a quente da saída renderizada. (Isso usa o mecanismo de recarga a quente do Vite, portanto, não pode ser pausado como acontece com a reexecução no lado do servidor.)

Renderização do lado do cliente sem React

Para renderizar uma célula do lado do cliente, adicione "use client" na parte superior da célula. Uma variável __vitale_cell_output_root_id__ é definida para ser o ID de um elemento DOM para a saída da célula.

 "use client" ;

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

Deveria ser possível renderizar estruturas não React dessa maneira, mas ainda não tentei.

Registro

A saída padrão e os fluxos de erro são capturados durante a execução de células e enviados para um canal de saída por célula. Pressione o botão na barra de ferramentas da célula para visualizar o canal.

Variáveis ​​de ambiente

vitale herda a configuração da variável de ambiente do Vite, consulte Variáveis ​​​​e modos de ambiente.

Como o código nas células é transformado pelo Vite, você precisa prefixar as variáveis ​​com VITE_ para que fiquem visíveis.

API de código VS

Você pode chamar algumas APIs do VS Code a partir de células usando funções em @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 > ; 

Desenvolvimento

Para desenvolver Vitale:

• git clone https://github.com/githubnext/vitale.git
• cd vitale; pnpm install
• abra o projeto no VS Code, pressione F5 para executar

O servidor precisa ser instalado em qualquer projeto que você esteja testando. Você pode instalar o servidor publicado conforme acima ou vincular à versão de desenvolvimento:

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

O servidor de desenvolvimento vinculado é reconstruído automaticamente, mas não recarregado a quente; você pode obter as alterações mais recentes reiniciando o servidor (execute Vitale: Restart Kernel na paleta de comandos).