os gui
v0.7.3 Taskbarless Minimization
オペレーティングシステムを模倣するためのライブラリグラフィカルユーザーインターフェイス上のユーザーインターフェイス
具体的には、Windows 98 - 少なくとも今のところ。将来拡大することができます。
このライブラリは、ペイント、メモ帳、サウンドレコーダーなど、Windows 98のWebベースのバージョンである98.js.orgを搭載しています。
詳細については、ホームページをご覧ください。
チェックボックスとラジオアイテム、障害のある状態、サブメナス、キーボードショートカットなどをサポートするメニューバー
ドラッグ、最大化、最小化、閉じ、サイズを変更できるアプリウィンドウ
ダイアログとツールウィンドウのバリエーション
最大化/最小化/復元中に目を導くタイトルバーのアニメーション
フォーカスの封じ込め：ウィンドウ内でタブまたはシフト+タブをシフトすると、最初の/最後のコントロールに包まれます。
軽量ボタン、無効ボタン、デフォルトのアクションボタンを含むボタンスタイル
Scrollbar Styles、WebKit固有のスタイル（将来的には、侵入していないスクロールバーライブラリに基づいたカスタムスクロールバー、またはライブラリをサポートするスタイルがあり、ライブラリを直接使用する予定です）
実行時にWindows .theme ＆ .themepackファイルをテーマにしてください！
ここでデモのオンラインを参照してください
このライブラリは現在、ウィンドウの実装にjQueryを必要としています。メニューバーにはjQueryが必要ありません。
（最終的には依存関係を持ちたくありません。これまでのところ、メニューコードからjqueryを削除しました...）
ライブラリは、単一の便利なファイルとして（まだ）提供されていません。
1。リポジトリをzipファイルとしてダウンロードするか、2。リポジトリをクローンするか、3。ライブラリをNPMパッケージとしてインストールできます。
使用するコンポーネント（ MenuBar.jsまたは$Window.js ）のスクリプト、レイアウト、テーマ、配色のスタイルシートを含める必要があります。
ソースファイルではなく、コンパイルされたCSSファイルを必ず使用してください。
in <head> ：
< link href =" os-gui/layout.css " rel =" stylesheet " type =" text/css " >
< link href =" os-gui/windows-98.css " rel =" stylesheet " type =" text/css " >
< link href =" os-gui/windows-default.css " rel =" stylesheet " type =" text/css " > <head>または<body> ：
< script src =" os-gui/MenuBar.js " > </ script >
< script src =" lib/jquery.js " > </ script > <!-- required by $Window.js -->
< script src =" os-gui/$Window.js " > </ script > 注：APIはおそらく大きく変わる可能性がありますが、Changelogを維持しています。
.inset-deep creates a 2px inset border.outset-deep.inset-shallow 1pxの挿入図の境界線を作成します.outset-shallow 1pxの最初のボーダーを作成しますボタンスタイルは、グローバルにbutton要素に適用されます。 （そして、リセットしたい場合は、擬似要素を::after必要があることに注意してください。
[トグル]ボタンを作成するには、 .toggleクラス]をボタンに追加します。 .selectedクラスで押されたように表示します。 （@todo：これを変更してください.pressed ）
必要に応じて、セマンティックaria-pressed 、 aria-haspopup 、および/またはaria-expanded属性と一緒にスタイルを使用する必要があります。
[ボタンをデフォルトのアクションに表示することもできます。ボタンに.defaultを追加します。 Windows 98では、このスタイルはフォーカスに応じてボタンからボタンに移動することに注意してください。経験則は、Enterでトリガーされるボタン上にある必要があるということです。
ボタンに.lightweightを追加することで、軽量ボタンを作成できます。軽量ボタンは微妙で、ホバリングまで境界線がありません。
ボタンに標準のdisabled属性を追加することで、ボタンを無効にできます。
ボタンに.pressingクラスを追加することで、ボタンを押していると表示できます。
これは、キーストロークによってトリガーされるボタンに役立ちます。
スクロールバースタイルはグローバルに適用されますが、 -webkit- freixがあるため、一般的にはChrome、Safari、Operaなど、「WebKitベースの」ブラウザでのみ機能します。
（ ::-webkit-scrollbarおよび関連するセレクターでオーバーライドすることができます（ただし、 -webkit-appearance: scrollbar works ... @todo：scope cssを使用しない限り、ブラウザのデフォルトに簡単にリセットできません）
選択スタイルはグローバルに適用されます。
（ ::selectionでオーバーライドできます（ただし、ブラウザに簡単にリセットすることはできません... unset ？@todo：scope cssを使用しない限り）
MenuBar(menus)メニューバーコンポーネントを作成します。
menus 、メニューボタン名でキーにされたメニュー項目の仕様の配列を保持するオブジェクトである必要があります。
プロパティelementを持つオブジェクトを返します。これは、必要な場所でDOMに追加する必要があります。
デモコードの例を参照してください。
elementメニューバーを表すDOM要素。
closeMenus()開いているメニューを閉じます。
setKeyboardScope(...eventTargets)ALTのようなホットキーは、指定された要素またはイベントターゲットのレベルで処理されます。
デフォルトでは、メニューバーが上部にある単一ページのアプリケーションの場合、スコープはwindow （グローバル）です。メニューバーをウィンドウに入れている場合は、ウィンドウの要素でこれを呼び出す必要があります。
menu_bar . setKeyboardScope ( $window . element ) ;またはさらに良いことに、
$window . setMenuBar ( menu_bar ) ;メニューバーをウィンドウに取り付けながら、キーボードの範囲を処理します。
メニューバーにフォーカスがある場合、キーボードの動作は常に処理されることに注意してください。
また、IFRAMEの場合、これは現在$window[0], iframe.contentWindowで呼び出す必要があるかもしれませんが、これは将来変更する必要があります（キーボードイベントはプロキシが必要です）。
infoステータスバーの実装に使用できます。 descriptionを指定するメニュー項目をロールオーバーするときに、説明がevent.detail.descriptionとして提供されます。例えば：
menubar . element . addEventListener ( "info" , ( event ) => {
statusBar . textContent = event . detail ?. description || "" ;
} ) ; default-infoステータスバーを空白またはデフォルトのメッセージにリセットする必要があることを示します。
menubar . element . addEventListener ( "default-info" , ( event ) => {
statusBar . textContent = "" ;
// or:
statusBar . textContent = "For Help, click Help Topics on the Help Menu." ;
// like in MS Paint (and JS Paint)
// or:
statusBar . textContent = "For Help, press F1." ;
// like WordPad
// or perhaps even:
statusBar . innerHTML = "For Help, <a href='docs'>click here</a>" ;
// Note that a link is not a common pattern, and it could only work for the default text;
// for menu item descriptions the message in the status bar is transient, so
// you wouldn't be able to reach it to click on it.
} ) ;メニュー項目の仕様は、 MENU_DIVIDER （水平ルールを示す定数）、ラジオグループの仕様、または次のプロパティを持つオブジェクトのいずれかです。
label ：アイテムのラベル。 Ampersandsはアクセスキーを定義します（文字通りのアンパサンドを使用するには、使用&&使用してください）shortcutLabel （オプション）：「ctrl+a」のようなアイテムに表示するキーボードショートカット（注：アクセスキーとは異なり、自分でショートカットを聞く必要があります）ariaKeyShortcuts （オプション）：スクリーンリーダー向けの「コントロール+Aメタ+A」などのアイテムのaria-keyshortcuts 。 「Ctrl」は有効ではなく（スペルアウトする必要があります）、「メタ」（およびevent.metaKey ）を使用して、通常は同等のコマンドキーを使用してMacOSに代替品を提供することが最善です。action （オプション）：アイテムがクリックされたときに実行する関数（ actionまたはcheckboxいずれかを指定できます）checkbox （オプション）：このアイテムがチェックボックスとして動作することを指定するオブジェクト。check trueアイテムをチェックするかどうかfalseチェックする関数である必要があります。なんてかわいい名前。toggle 、オプションの状態を切り替える関数である必要がありますが、保存しています。クリックしたときに呼び出されます。enabled （オプション）：アイテムを無条件に無効にすること、またはアイテムを有効にする必要があるかどうかを決定する関数false false true可能性があります。submenu （オプション）：サブメニューを作成するためのメニュー項目仕様の配列description （オプション）：ステータスバーを実装するため。この説明でアイテムの上を転がるときにinfoイベントが放出されますvalue （オプション）：ラジオアイテムの場合、アイテムの値。任意のタイプにすることもできますが、 ===アイテムがチェックされているかどうかを判断するために使用されます。ラジオグループの仕様は、次のプロパティを持つオブジェクトです。
radioItems ：ラジオボタングループを作成するためのメニュー項目の仕様の配列。 submenuとは異なり、アイテムはこのメニューに直接含まれています。ラジオグループを他のメニュー項目からMENU_DIVIDERで分離することをお勧めします。getValue ：選択した無線アイテムの値を返す機能。setValue ：アプリケーション固有の方法で、状態を指定された値に変更する必要がある関数。ariaLabel （オプション）：ラジオグループのaria-labelとして使用する文字列（スクリーンリーダーのアクセシビリティ用）メニューは、アクセスキーと呼ばれるコンテキストホットキーでナビゲートできます。
メニューボタンまたはメニュー項目のラベルに文字の前にアンパサンドを配置して、アクセスキーにします。 Microsoftには、アクセスキーを選択するためのガイドラインなど、アクセスキーに関するドキュメントがあります。一般的に、最初の手紙は良い選択です。
メニュー項目がアクセスキーを定義していない場合、ラベルの最初の文字を使用してアクセスできます。
メニューボタンの場合、ボタンのアクセスキーを押すときにALTを保持する必要がありますが、メニューポップアップのメニュー項目の場合、ALTがメニューを閉じるため、キーを直接押す必要があります。
同じアクセスキーを持つ複数のメニュー項目がある場合、それらをアクティブにせずにサイクリングします。定義されたアクセスキーと、定義されたアクセスキーのないメニュー項目の最初の文字を含む、アクセスキーをユニークにするようにしてください。 （この動作は、Explorerのお気に入りのメニューでWindows 98で観察されます。ここでは、最初の文字が他のメニュー項目のアクセスキーに一致するブックマークを作成できます。）
AccessKeysオブジェクトがMenuBar.jsによってエクスポートされ、アクセスキーを扱うための機能があります。
AccessKeys.escape(label)指定されたラベルのアンパサンドを逃れ、アクセスキーとして解釈されないようにします。
これは、ページタイトルをラベルとして使用する履歴メニューなど、動的メニューに役立ちます。アンパサンドがアクセスキー、または二重アンパサンドが単一のアンパサンドとして解釈されるものとして微妙に解釈されることを望んでいません。
AccessKeys.unescape(label)ラベル内のすべてのダブルアンパサンドを除く。
レンダリングには、代わりにtoHTMLまたはtoFragmentを使用してください。
AccessKeys.has(label)ラベルにアクセスキーがある場合、trueを返します。
AccessKeys.get(label)与えられたラベルのアクセスキーを返します。
MenuBarアクセスキーを自動的に処理しますが、他のUI要素のアクセスキーを含めている場合は、自分で処理する必要があります。アクセスキーをハードコーディングするのではなく、2つの場所で変更する必要はありません。
AccessKeys.remove(label)ラベルからアクセスキーインジケータ（ & ）を削除し、二重アンパンサンドを除外します。また、特別なケースとして、「（＆n）」などの括弧付きアクセスキーインジケーターを削除します。
AccessKeys.toText(label)ラベルからアクセスキーインジケータ（ & ）を削除し、二重アンパンサンドを除外します。これはtoHTMLのようなものですが、単純なテキスト用です。
注：多くの場合、アクセスキーは「＆new」のような単語の一部ですが、翻訳では、「새로만들기（＆n）」のように個別に示されることがよくあります。アクセスキーは同じままですが、文字はもはや単語（またはアルファベット）の一部ではありません。この関数は「（＆n）」のような文字列を削除しません。「＆」のみを削除し、「새로（n）」を残します。その動作が必要な場合は、 AccessKeys.remove(label)を使用してください。
AccessKeys.toHTML(label) Accessキーを<span class='menu-hotkey'>要素として、HTML（適切な脱出で）を返します。
セキュリティノート：この関数の結果をHTML要素コンテンツで使用しても、ラベルから逃れるため、安全です。属性値で使用することは安全ではありませんが、これは意図した使用法ではありません。
レイアウトノート： <span style="white-space: pre">で結果を囲むことをお勧めします。
AccessKeys.toFragment(label)アクセスキーを使用してDocumentFragment <span class='menu-hotkey'>要素として返します。
レイアウトノート： <span style="white-space: pre">で結果を囲むことをお勧めします。
$Window(options)ドラッグできるウィンドウコンポーネントを作成し、クリックすると正面に持ち込まれ、閉じます。さまざまな種類のウィンドウを作成することができます。フォーカスはウィンドウのコンテンツ内でラップすることに注意してください。
追加のメソッドとプロパティを備えたjQueryオブジェクトを返します（オプションの後、以下を参照）。
domノードは$window.elementでアクセスでき、 $Windowオブジェクトはelement.$windowを備えたDOMノードからアクセスできます。
|
追加のメソッドとプロパティを備えたjQueryオブジェクトを返します。
title(text)タイトルを設定するか、 textが渡されない場合、ウィンドウの現在のタイトルを返します。
close(force=false)ウィンドウを閉じます。
forceがtrueの場合、「閉じる」イベントは放出されず、窓はすぐに閉じられます。
focus()この優先順位の順に、窓の中に何かを集中しようとします。
class="default"のコントロール$window.$content ） blur()ウィンドウからフォーカスを削除します。フォーカスが窓の外にある場合、それは変更されていません。
minimize()ウィンドウを最小化します。 $window.task.$taskが定義されている場合、それを最小化するためのターゲットとして使用します。そうしないと、ウィンドウは画面の下部に最小化されます。
現在の動作は、最小化を切り替えることです。これは将来変化する可能性があります。
maximize()ウィンドウを最大化します。最大化されている間、ウィンドウはposition: fixedため、ページでスクロールしません。
現在の動作は、最大化を切り替えることです。これは将来変化する可能性があります。また、最小化された場合、最大化する代わりに復元されます。基本的に、メソッド名が示唆するものではなく、最大化ボタンが行うことを行います。
unminimize()プライベート：これを使用しないでください。代わりにrestore()を使用します。
最小化状態からウィンドウを復元します。
restore()最小化または最大化された状態からウィンドウを復元します。ウィンドウが最小化または最大化されていない場合、この方法は何もしません。
center()ページのウィンドウを中心にします。ウィンドウの内容が完全にレンダリングされた後、またはウィンドウの固定サイズを設定した後、これを呼び出す必要があります。
ウィンドウに画像がある場合は、窓を表示してセンタリングする前にロードするか、画像の固定サイズを定義してください。
applyBounds()部分的にオフスクリーンの場合、ページ内のウィンドウに収まります。 （窓が大きすぎる場合は、窓をサイズ変更しません。画面の右と下部から外れます。）
bringTitleBarInBounds()タイトルバーがページの境界内にあるようにウィンドウを再配置して、ドラッグすることができます。
bringToFront()ウィンドウシステムで使用されているz-index z-indexよりも大きく設定することにより、ウィンドウを前面にもたらします。
setDimensions({ innerWidth, innerHeight, outerWidth, outerHeight })ウィンドウのサイズを設定します。 { innerWidth, innerHeight }を渡して、ウィンドウコンテンツの観点からサイズを指定し、 { outerWidth, outerHeight }を指定して、ウィンドウフレームを含むサイズを指定します。
（これは将来的に拡張される可能性があり、位置を設定することもできます...）
setIcons(icons)ウィンドウのアイコンを変更します。 icons 、 options.iconsと同じ形式です。
setTitlebarIconSize(size)ウィンドウのタイトルバーアイコンのサイズを設定し、利用可能な最も近いサイズを選択します。
getTitlebarIconSize()ウィンドウのタイトルバーアイコンのサイズを返します。
getIconAtSize(size)使用可能な最も近いアイコンサイズを選択し、一意のDOMノード（つまりクローン化）を返し、アイコンが定義されていない場合はnull返します。
これは、タスクバー内のウィンドウを表すために使用できます。
setMenuBar(menuBar)メニューバーをウィンドウに追加し、メニューバーのホットキーのキーボードスコープをウィンドウに設定します。
メニューバーを削除するためにnullで呼び出すことができます。
setMinimizeTarget(minimizeTargetElement)最小化ターゲット（タスクバーボタン）は、最小化されたときのウィンドウを表し、最小化と復元をアニメーション化するために使用されます。 minimizeTargetElementがnullの場合、ウィンドウは画面の下部に最小化されます（デフォルト）。
$Button(text, action)ウィンドウのコンテンツ領域にボタンを作成します。クリックすると、ウィンドウが自動的に閉じられます。ダイアログのみを目的としているため、これを防ぐための（良い）方法はありません。
他の動作が必要な場合は、 <button>を作成し、ウィンドウのコンテンツ領域に追加してください。
jQueryオブジェクトを返します。
addChildWindow($window)プライベート：これを使用しないでください。
窓を子供として定義します。ツールウィンドウの場合、フォーカス状態は親ウィンドウと共有されます。
これは、 options.parentWindowを設定するときに内部で使用されます。
onFocus(listener)ウィンドウが（視覚的に？）焦点を合わせたときにリスナーを呼び出します。
関数を返してリスナーを削除します。
onBlur(listener)ウィンドウ（視覚的に？）がフォーカスを失ったときにリスナーを呼び出します。
関数を返してリスナーを削除します。
onClosed(listener)ウィンドウが閉じられたときにリスナーに電話をかけます（閉じるイベントが放出された後、そしてそれが防止されなかった場合）。
関数を返してリスナーを削除します。
onBeforeClose(listener)ウィンドウが閉じる前にリスナーに電話をかけます。リスナーがevent.preventDefault()を呼び出す場合、ウィンドウは閉じられません。
関数を返してリスナーを削除します。
このイベントは、たとえばウィンドウを閉じる前にユーザーを確認するのに役立ちます。
$window.close(true)使用して、ウィンドウを実際に閉じたときにこのイベント（および確認）をバイパスできます。
ウィンドウの閉鎖を防ぐことができない場合は、おそらく別のリスナーがリスナーの後に閉鎖を防ぎ、早すぎるクリーンアップにつながる可能性があるため、おそらくclosedイベントを使用する必要があります。
onBeforeDrag(listener)ウィンドウがタイトルバーによってドラッグされる前にリスナーを呼び出します。リスナーがevent.preventDefault()を呼び出すと、ドラッグが防止されます。
関数を返してリスナーを削除します。
このイベントにより、JSペイントの色とツールウィンドウのドラッグ動作をオーバーライドできます。
onTitleChange(listener)ウィンドウのタイトルが変更されたときにリスナーに電話します。
関数を返してリスナーを削除します。
このイベントは、タスクバーボタンのラベルを更新するために使用できます。
onIconChange(listener)ウィンドウのアイコンが変更されたときにリスナーに呼び出します。
関数を返してリスナーを削除します。
このイベントは、タスクバーボタンのアイコンを更新するために使用できます。 $window.getIconAtSize(size)を使用して、適切なアイコンを取得します。
closed窓が閉じられているかどうか。
icons options.iconsまたはsetIcons()で設定されたさまざまなサイズのウィンドウのアイコン。
elementsウィンドウの要素への参照を含むオブジェクト。
content （htmlelement）ウィンドウのコンテンツ領域。
titlebar （htmlelement）タイトル、ウィンドウボタン、場合によってはアイコンを含むウィンドウのタイトルバー。
_title_area （htmlelement）タイトルの周りのラッパー要素。
プライベート：これを使用しないでください。可能であれば、 elements.titlebarまたはelements.titleを使用してください。
title （htmlelement）ウィンドウのタイトル。
closeButton （htmlbuttonelement）ウィンドウの閉じるボタン。
minimizeButtonウィンドウの最小化ボタン。
maximizeButton （htmlbuttonelement）ウィンドウの最大化ボタン。
$content jQueryオブジェクト。
コンテンツをウィンドウに追加できる場所。
$titlebar jQueryオブジェクト。
タイトル、ウィンドウボタン、場合によってはアイコンを含む、ウィンドウのタイトルバー。
$title_areaプライベート：これを使用しないでください。可能であれば、代わりに$titleまたは$titlebarを使用してください。
jQueryオブジェクト。
タイトルの周りのラッパー。
$title jQueryオブジェクト。
タイトルバーのタイトル部分。
$x jQueryオブジェクト。
クローズボタン。
$minimize jQueryオブジェクト。
最小化ボタン。
$maximize jQueryオブジェクト。
最大化ボタン。
$iconプライベート：これを使用しないでください。
jQueryオブジェクト。
タイトルバーアイコン。
elementウィンドウを表すDOM要素。
close非推奨：代わりにonBeforeCloseメソッドを使用します。
event.preventDefault()を使用して、ウィンドウを閉じるのを防ぐために使用できます。複数のリスナーがいる可能性があり、別のリスナーが閉鎖を防ぐことができるため、ウィンドウが実際に閉じられているときに検出したい場合は、 closedイベントを使用してください。
closed非推奨：代わりにonClosedメソッドを使用します。
このイベントは、窓が閉じたときに放出されます。防ぐことはできません。
window-drag-start非推奨：代わりにonBeforeDragメソッドを使用します。
event.preventDefault()を使用して、ウィンドウのドラッグを防ぐために使用できます。
title-change非推奨：代わりにonTitleChangeメソッドを使用します。
タスクバーボタンのラベルを更新するために使用できます。
icon-change非推奨：代わりにonIconChangeメソッドを使用します。
タスクバーボタンのアイコンを更新するために使用できます。 $window.getIconAtSize(size)を使用して、適切なアイコンを取得します。
center()以外に、Windowsの配置に特にAPIはありません。
$($window.element).css({ top: "500px", left: "500px" })使用して、jqueryのcss()メソッドでウィンドウの位置を設定できます。
$window . element . style . top = "500px" ;
$window . element . style . left = "500px" ;それぞれのpositionをfixedまたはabsolute設定して、それぞれビューポートまたは最も近い位置にある祖先に対してウィンドウを配置することもできます。
別のウィンドウに対するウィンドウを配置する場合は、 $otherWindow.element.getBoundingClientRect()を使用して、他のウィンドウの境界長方形を取得し、それを使用してウィンドウを配置できます。これは組み込みのDOM APIです。例えば：
const otherRect = $otherWindow . element . getBoundingClientRect ( ) ;
$window . element . top = ` ${ otherRect . top } px` ;
$window . element . left = ` ${ otherRect . right + 10 } px` ; !importantするために使用できません。setDimensions()を拡張して、サイジングに加えてウィンドウの配置を許可するか、 setPosition()メソッドを追加することができます。options.constrainRectを渡すことができます。ドラッグとサイズの際に、ウィンドウの位置とサイズを動的に制約します。parse-theme.jsには、テーマを解析および適用するための関数が含まれています。
parseThemeFileString(themeString)INIファイル文字列をCSSプロパティに解析します。
動的テーマグラフィックスを自動的にレンダリングし、CSSプロパティに含めます。
applyCSSProperties(cssProperties, {element=document.documentElement, recurseIntoIframes=false}) cssProperties 、CSSプロパティと値を持つオブジェクトです。また、 CSSStyleDeclarationオブジェクトにすることもできます。
elementプロパティを適用する要素です。
recurseIntoIframesが真である場合、プロパティは要素内のすべての<iframe>要素にも適用されます。これは、同種のiframesでのみ動作します。
renderThemeGraphics(cssProperties)ページの特定のセクションのテーマグラフィック（スクロールバーアイコンなど）を更新するために使用できます。デモでバリエーションを表示するために使用されます。
レンダリングされたテーマグラフィックスを表すCSSプロパティを返します。
element . style . setProperty ( '--scrollbar-size' , '30px' ) ;
applyCSSProperties ( renderThemeGraphics ( getComputedStyle ( element ) ) , { element } ) ; makeThemeCSSFile(cssProperties)テーマのCSSファイルをエクスポートします。テーマグラフィックがすでにレンダリングされていると仮定します。 「生成されたファイル」コメントが含まれています。
makeBlackToInsetFilter()アイコンを無効にするようにするために使用できるSVGフィルターを初期化します。画像の黒い部分を使用して形状を形成するため、すべてのアイコンで動作しない場合があります。
CSSからの使用：
button : disabled . icon {
filter : saturate ( 0 % ) opacity ( 50 % ); /* fallback until SVG filter is initialized */
filter : url ( "#os-gui-black-to-inset-filter" );
}MITライセンスに基づいてライセンスを取得してください。詳細については、ライセンスを参照してください。
Node.jsがまだ持っていない場合はインストールしてください。
リポジトリをクローンし、プロジェクトディレクトリでnpm iを実行して依存関係をインストールします。また、依存関係に変更がある場合に備えて、リポジトリから変更を引き込むときにnpm iを実行します。
npm startを開始します。デフォルトのブラウザでデモページを開きます。ライブラリの変更は自動的に再コンパイルされ、ページは自動的にリロードされます。
npm run lintを実行して、タイプチェックとスペルチェック（およびその他の糸くずのタスク）を実行します。
npm testを実行してテストを実行します。これにより、カバレッジレポートはcoverageディレクトリに保存されますが、単体テストでカバーされているコードのみ、つまりテストに直接インポートされたコードのみを記録することに注意してください。
依存関係を更新またはインストールするときにサーバーを閉じることをお勧めします。それ以外の場合は、EPERMの問題に遭遇する可能性があります。
スタイルは、ミキシンやその他の変換のために、PostCSSで書かれています。
推奨：PostCSS言語サポートとVSコードのように、編集者用のPostCSS言語プラグインをインストールします。
現在、ブラウザ内で手動で再生し、テーマ固有のCSSファイルにコピーする必要があるCSSがいくつかあります。
将来、これは、.theme/.themepackファイルのカスタムPostcss構文パーサーで行うことができますnode-canvas必要性を避けるために、ラスターグラフィックスの代わりにSVG（ネイティブ依存関係は痛みです）。または、upng.jsとプレーンピクセル操作。
