vitale

/ tombol di bilah status sel untuk menjeda dan memulai kembali eksekusi; atau jika ingin mematikannya secara global bisa hilangkan centang pada setting "Vitale: Rerun Cells When Dirty".

Mengimpor modul

Anda dapat mengimpor modul yang terinstal seperti biasa, misalnya

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

Impor terlihat di sel lain setelah sel pengimpor dijalankan.

Anda juga dapat mengimpor file proyek dengan jalur yang berhubungan dengan file notebook, misalnya

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

dan perubahan pada file yang diimpor akan menyebabkan sel dependen dijalankan kembali seperti di atas.

Panel keluaran

Output sel ditampilkan di bawah sel. Anda dapat membuka output di panel terpisah dengan mengklik tombol di toolbar sel. Output di panel terpisah diperbarui ketika sel dieksekusi ulang atau ketika dependensi berubah.

Merender tipe MIME yang berbeda

vitale memeriksa nilai keluaran dan mencoba memilih jenis MIME yang sesuai untuk merendernya. Untuk sebagian besar objek Javascript, ini adalah application/json , yang dirender oleh VS Code dengan penyorotan sintaksis. Untuk objek kompleks, Anda dapat merender tampilan yang dapat diperluas (menggunakan react-json-view) dengan mengembalikan tipe MIME application/x-json-view . Objek HTMLElement dan SVGElement masing-masing dirender sebagai text/html dan image/svg+xml (lihat contoh di bawah).

Untuk menyetel tipe MIME keluaran secara eksplisit, kembalikan objek bertipe { data: string, mime: string } (saat ini tidak ada cara untuk mengembalikan data biner). VS Code memiliki beberapa perender bawaan (lihat Output Kaya) dan Anda dapat menginstal perender lainnya sebagai ekstensi.

Ada fungsi pembantu di @githubnext/vitale untuk membuat keluaran yang diberi tag MIME ini:

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

Paket ini diimpor secara otomatis dengan nama Vitale di sel buku catatan, sehingga Anda dapat menulis misalnya

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

tetapi Anda mungkin ingin mengimpornya secara eksplisit untuk mendapatkan tipe pelengkapan otomatis.

Anda dapat membuat nilai HTMLElement dan SVGElement menggunakan jsdom atau perpustakaan serupa; misalnya, untuk merender SVG dari 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 ,
} ) ; 

Merender komponen React

Untuk merender komponen React, tuliskan sebagai ekspresi terakhir dalam sel, seperti

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

< Component / > ;

Anda juga dapat mengimpor komponen dari sel lain atau dari file proyek, dan mengedit komponen yang diimpor akan memicu hot reload dari output yang dirender. (Ini menggunakan mekanisme hot-reload Vite, sehingga tidak dapat dijeda seperti pada eksekusi ulang sisi server.)

Render sisi klien tanpa React

Untuk merender sel sisi klien, tambahkan "use client" di bagian atas sel. Variabel __vitale_cell_output_root_id__ didefinisikan sebagai ID elemen DOM untuk keluaran sel.

 "use client" ;

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

Seharusnya dimungkinkan untuk merender kerangka kerja non-React dengan cara ini tetapi saya belum mencobanya.

Pencatatan

Output standar dan aliran kesalahan ditangkap saat menjalankan sel dan dikirim ke saluran output per sel. Tekan tombol di toolbar sel untuk melihat saluran.

Variabel lingkungan

vitale mewarisi pengaturan variabel lingkungan dari Vite, lihat Variabel dan Mode Env.

Karena kode dalam sel diubah oleh Vite, Anda perlu mengawali variabel dengan VITE_ agar variabel tersebut terlihat.

VS Kode API

Anda dapat memanggil beberapa VS Code API dari sel menggunakan fungsi di @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 > ; 

Perkembangan

Untuk mengembangkan Vitale:

• git clone https://github.com/githubnext/vitale.git
• cd vitale; pnpm install
• buka proyek di VS Code, tekan F5 untuk menjalankan

Server perlu diinstal di proyek apa pun yang Anda uji. Anda dapat menginstal server yang diterbitkan seperti di atas, atau menautkan ke versi pengembangan:

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

Server pengembangan tertaut secara otomatis dibangun kembali tetapi tidak dimuat ulang secara panas; Anda bisa mendapatkan perubahan terbaru dengan me-restart server (jalankan Vitale: Restart Kernel dari palet perintah).