vitale 다운로드 - vitale 소스코드 다운로드

vitale

기타 소스코드

0.0.19

다운로드

실행을 일시 중지하고 다시 시작하려면 셀 상태 표시줄의 / 버튼을 사용하세요. 또는 전체적으로 끄려면 "Vitale: Rerun Cells When Dirty" 설정을 선택 취소하면 됩니다.

모듈 가져오기

평소대로 설치된 모듈을 가져올 수 있습니다. 예:

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

가져오기 셀이 실행되면 가져오기가 다른 셀에 표시됩니다.

노트북 파일과 관련된 경로를 사용하여 프로젝트 파일을 가져올 수도 있습니다.

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

가져온 파일을 변경하면 종속 셀이 위와 같이 다시 실행됩니다.

출력 창

셀 출력은 셀 아래에 표시됩니다. 셀 도구 모음의 버튼을 클릭하면 별도의 창에서 출력을 열 수 있습니다. 셀이 다시 실행되거나 종속성이 변경되면 별도 창의 출력이 업데이트됩니다.

다양한 MIME 유형 렌더링

vitale 출력 값을 검사하고 렌더링할 적절한 MIME 유형을 선택하려고 시도합니다. 대부분의 Javascript 객체의 경우 이는 구문 강조 기능을 사용하여 VS Code로 렌더링되는 application/json 입니다. 복잡한 객체의 경우 application/x-json-view MIME 유형을 반환하여 확장 가능한 보기(react-json-view 사용)를 렌더링할 수 있습니다. HTMLElement 및 SVGElement 객체는 각각 text/html 및 image/svg+xml 로 렌더링됩니다(예는 아래 참조).

출력의 MIME 유형을 명시적으로 설정하려면 { data: string, mime: string } 유형의 객체를 반환합니다(현재는 이진 데이터를 반환할 수 있는 방법이 없습니다). VS Code에는 여러 가지 기본 제공 렌더러(Rich Output 참조)가 있으며 다른 렌더러도 확장으로 설치할 수 있습니다.

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