vitale下載 - vitale原始碼下載

vitale

其他源碼

0.0.19

下載

/ 單元格狀態列中的按鈕用於暫停和重新啟動執行；或者，如果您想全域關閉它，您可以取消選取「Vitale：髒時重新執行儲存格」設定。

導入模組

您可以照常匯入已安裝的模組，例如

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

執行導入單元後，導入在其他單元中可見。

您也可以使用相對於筆記本文件的路徑匯入專案文件，例如

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

匯入檔案的變更將導致相關單元重新執行，如上所述。

輸出窗格

單元格輸出顯示在儲存格下方。您可以透過點擊儲存格工具列中的按鈕在單獨的窗格中開啟輸出。當重新執行單元或相依性發生變更時，單獨窗格中的輸出會更新。

呈現不同的 MIME 類型

vitale會檢查輸出值並嘗試選擇合適的 MIME 類型來呈現它。對於大多數 Javascript 對象，這是application/json ，它由 VS Code 渲染並帶有語法突出顯示。對於複雜對象，您可以透過返回application/x-json-view MIME 類型來渲染可擴展視圖（使用react-json-view）。 HTMLElement和SVGElement物件分別呈現為text/html和image/svg+xml （請參閱下面的範例）。

若要明確設定輸出的 MIME 類型，請傳回{ data: string, mime: string }類型的物件（目前無法傳回二進位資料）。 VS Code 有幾個內建渲染器（請參閱豐富的輸出），您可以安裝其他渲染器作為擴充功能。

@githubnext/vitale中有輔助函數來建構這些 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 ) ;

該套件會在筆記本單元中以Vitale名稱自動匯入，因此您可以編寫例如

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

但您可能希望明確導入它以獲取自動完成的類型。

您可以使用jsdom或類似的函式庫建構HTMLElement和SVGElement值；例如，要從 Observable Plot 渲染 SVG：

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

渲染 React 元件

若要渲染 React 元件，請將其寫入單元格中的最後一個表達式，例如

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

< Component / > ;

您也可以從另一個儲存格或專案檔案匯入元件，編輯匯入的元件將觸發渲染輸出的熱重新載入。（這裡使用了Vite的熱重載機制，所以不能像服務端重新執行那樣暫停。）

不使用 React 的客戶端渲染

若要在客戶端呈現儲存格，請在儲存格頂部新增"use client" 。變數__vitale_cell_output_root_id__被定義為單元輸出的 DOM 元素的 ID。

 "use client" ;

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

應該可以透過這種方式渲染非 React 框架，但我還沒有嘗試過。

記錄

運行單元時捕獲標準輸出和錯誤流並將其發送到每個單元的輸出通道。按下儲存格工具列中的按鈕可查看頻道。

環境變數

vitale繼承了 Vite 的環境變數設置，請參閱環境變數和模式。

由於儲存格中的程式碼是由 Vite 轉換的，因此您需要在變數前面加上VITE_前綴才能使它們可見。

VS程式碼API

您可以使用@githubnext/vitale中的函數從單元格呼叫一些 VS Code API：

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