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