vitale

Кнопки / в строке состояния ячейки для приостановки и возобновления выполнения; или, если вы хотите отключить его глобально, вы можете снять флажок с параметра «Vitale: перезапускать ячейки при загрязнении».

Импорт модулей

Вы можете импортировать установленные модули как обычно, например

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

Импорт становится видимым в других ячейках после выполнения импортирующей ячейки.

Вы также можете импортировать файлы проекта, указав путь относительно файла записной книжки, например

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

и изменения в импортированном файле приведут к повторному выполнению зависимых ячеек, как указано выше.

Панели вывода

Вывод ячейки отображается под ячейкой. Вы можете открыть выходные данные на отдельной панели, нажав кнопку на панели инструментов ячейки. Вывод на отдельной панели обновляется при повторном выполнении ячейки или при изменении зависимостей.

Рендеринг различных типов MIME

vitale проверяет выходное значение и пытается выбрать подходящий тип MIME для его отображения. Для большинства объектов Javascript это application/json , который отображается VS Code с подсветкой синтаксиса. Для сложных объектов вы можете визуализировать расширяемое представление (с помощью реакции-json-view), возвращая MIME-тип application/x-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" } ) ;

но вы можете импортировать его явно, чтобы получить типы для автозаполнения.

Вы можете создавать значения HTMLElement и SVGElement используя jsdom или аналогичную библиотеку; например, чтобы визуализировать SVG из 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 ,
} ) ; 

Рендеринг компонентов React

Чтобы отобразить компонент React, запишите его как последнее выражение в ячейке, например

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

< Component / > ;

Вы также можете импортировать компонент из другой ячейки или из файла проекта, и редактирование импортированного компонента вызовет горячую перезагрузку визуализированного вывода. (При этом используется механизм горячей перезагрузки Vite, поэтому его нельзя приостановить, как при повторном выполнении на стороне сервера.)

Рендеринг на стороне клиента без React

Чтобы отобразить ячейку на стороне клиента, добавьте "use client" вверху ячейки. Переменная __vitale_cell_output_root_id__ определяется как идентификатор элемента DOM для вывода ячейки.

 "use client" ;

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

Таким способом должна быть возможность визуализировать фреймворки, отличные от React, но я этого не пробовал.

Ведение журнала

Стандартные потоки вывода и ошибок захватываются при запуске ячеек и отправляются в выходной канал для каждой ячейки. Нажмите кнопку на панели инструментов ячейки, чтобы просмотреть канал.

Переменные среды

vitale наследует настройку переменных среды от Vite, см. Переменные и режимы Env.

Поскольку код в ячейках преобразуется Vite, вам необходимо добавлять к переменным префикс VITE_ , чтобы они были видимы.

API VS-кода

Вы можете вызвать некоторые API VS Code из ячеек, используя функции в @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 > ; 

Разработка

Для разработки Vitale:

• git clone https://github.com/githubnext/vitale.git
• cd vitale; pnpm install
• откройте проект в VS Code, нажмите F5 для запуска

Сервер должен быть установлен в любом проекте, который вы тестируете. Вы можете установить опубликованный сервер, как указано выше, или создать ссылку на разрабатываемую версию:

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

Связанный сервер разработки автоматически перестраивается, но не перезагружается в горячем режиме; получить последние изменения можно, перезапустив сервер (запустите Vitale: Restart Kernel из палитры команд).