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