vitale
0.0.19
/ الأزرار الموجودة في شريط حالة الخلية لإيقاف التنفيذ مؤقتًا وإعادة تشغيله؛ أو إذا كنت تريد إيقاف تشغيله عالميًا، فيمكنك إلغاء تحديد الإعداد "Vitale: Rerun Cells When Dirty".
يمكنك استيراد الوحدات المثبتة كالمعتاد، على سبيل المثال
import { Octokit } from "@octokit/core" ;تكون الواردات مرئية في الخلايا الأخرى بمجرد تنفيذ الخلية المستوردة.
يمكنك أيضًا استيراد ملفات المشروع بمسار متعلق بملف دفتر الملاحظات، على سبيل المثال
import { foo } from "./bar.ts" ;وستؤدي التغييرات التي يتم إجراؤها على الملف المستورد إلى إعادة تنفيذ الخلايا التابعة على النحو الوارد أعلاه.
يتم عرض إخراج الخلية أسفل الخلية. يمكنك فتح الإخراج في جزء منفصل عن طريق النقر فوق الزر الموجود في شريط أدوات الخلية. يتم تحديث الإخراج في جزء منفصل عند إعادة تنفيذ الخلية أو عند تغيير التبعيات.
vitale يفحص قيمة الإخراج ويحاول اختيار نوع MIME المناسب لعرضه. بالنسبة لمعظم كائنات Javascript، يكون هذا هو application/json ، والذي يتم تقديمه بواسطة VS Code مع تمييز بناء الجملة. بالنسبة للكائنات المعقدة، يمكنك تقديم عرض قابل للتوسيع (باستخدام عرض رد فعل json) عن طريق إرجاع نوع application/x-json-view MIME. يتم عرض كائنات 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، اكتبه كتعبير أخير في الخلية، مثل
const Component = ( ) => < div > Hello, world! < / div > ;
< Component / > ;يمكنك أيضًا استيراد مكون من خلية أخرى أو من ملف مشروع، وسيؤدي تحرير المكون المستورد إلى تشغيل عملية إعادة تحميل سريعة للمخرجات المقدمة. (يستخدم هذا آلية Vite لإعادة التحميل السريع، لذلك لا يمكن إيقافه مؤقتًا كما هو الحال مع إعادة التنفيذ من جانب الخادم.)
لعرض جانب العميل في الخلية، قم بإضافة "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_ حتى تكون مرئية.
يمكنك استدعاء بعض واجهة برمجة تطبيقات 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 > ; لتطوير فيتالي:
git clone https://github.com/githubnext/vitale.gitcd vitale; pnpm installF5 للتشغيليجب تثبيت الخادم في أي مشروع تختبره. يمكنك تثبيت الخادم المنشور كما هو مذكور أعلاه، أو الارتباط بالنسخة التطويرية:
cd packages/server; pnpm link --dir $YOURPROJECT تتم إعادة بناء خادم التطوير المرتبط تلقائيًا ولكن لا يتم إعادة تحميله بشكل سريع؛ يمكنك الحصول على أحدث التغييرات عن طريق إعادة تشغيل الخادم (قم بتشغيل Vitale: Restart Kernel من لوحة الأوامر).
