このプロジェクトは、他のWebAssemblyコンポーネントからWebAssemblyコンポーネントを構築するためのシンプルなGUIツールです。
このプロジェクトを構築するには、次のツールをローカルにインストールする必要があります。
プロジェクトの依存関係をインストールするには、次のコマンドを実行します。
$ make setupこれによりcargo componentコマンドラインツール(まだインストールされていない場合)もインストールされます。
アプリケーションをローカルに実行するには、次のコマンドを実行します。
$ make runデフォルトでは、アプリケーションはポート3000で実行されます。Webブラウザーを開き、 http://localhost:3000に移動してアプリケーションを表示します。
アプリケーションは、小包にバンドルされた単一ページのReactアプリケーションです。
WebAssemblyコンポーネントコンポーネントのコンポーネント(Rustで実装)を使用します。これは、WebAssemblyコンポーネントファイルの解析と構成グラフ状態の維持を担当します。
Reactアプリケーションは、ユーザーインターフェイスの状態を維持し、内部グラフ状態がグラフの視覚的表現と同期していることを保証します。
アプリケーションのユーザーインターフェイスは、デザイナーではない(または初歩的なフロントエンド開発スキルを持っている)人によって開発されました。きれいではありませんが、Works™です。インターフェイスを改善するためのリクエストをプルすることは大歓迎です!
現在、個々のWebAssemblyコンポーネントを構築する最も簡単な方法は、錆と貨物のコンポーネントを使用することです。
将来的には、より多くのプログラミング言語がサポートされ、WebAssemblyコンポーネントはそれ自体が言語に依存しないため、このアプリケーションで使用できます。
当初、アプリケーションにはコンポーネントライブラリにWebSassemblyコンポーネントがありません。
Add Componentボタンをクリックして、ライブラリに新しいコンポーネントを追加し、目的のWebAssemblyコンポーネント( .wasm )ファイルを選択します。
あるいは、WebSaseEmblyコンポーネントのテキスト表現ファイル( .wat )をライブラリに追加できます。
コンポーネントの詳細を表示するには、ライブラリのコンポーネントをクリックします。
コンポーネントをインスタンス化するには、コンポーネントをライブラリから設計面にドラッグします。
これにより、グラフ内の他のインスタンスに接続できるコンポーネントのインスタンスが作成されます。
コンポーネントの各インスタンスには、一連のインポートとエクスポートがあります。エクスポートと輸入は、それらを表す円と正方形の間の接続をドラッグすることで接続できます。
例の例:

この例では、 middlewareコンポーネントのインスタンスは、 backendという名前のインスタンスをインポートし、5種類とexecuteという名前の関数をエクスポートします。
右上隅の円Iはインスタンス自体を表し、一致するインスタンスのインポートを取得する別のインスタンスでインポートに接続するために使用できます。
最後に、左上隅のチェックボックスを使用してインスタンスをエクスポートできます(以下を参照)。
2つのインスタンスを接続するには、あるインスタンスのエクスポートの円から別のインスタンスの一致するインポートの正方形に接続をドラッグします。
名前は一致する必要はありませんが、アイテムのタイプは互いに互換性がある必要があります。
インスタンスを接続すると、2つのインスタンス間の依存関係が形成されます。エクスポートインスタンスは、インポートインスタンスの前にインスタンス化されることが保証されています。
接続の例:

この例では、 serviceコンポーネントのインスタンスがmiddlewareコンポーネントのインスタンスのbackendインポートに接続されています。
このグラフ用にコンポーネントが作成されると、 serviceインスタンスがmiddlewareインスタンスの前にインスタンスがインスタンスされ、 backendインスタンス化引数のserviceインスタンスが受信されます。
現在、グラフの単一のインスタンスは、エクスポートのインスタンスとして指定される場合があります。
指定されたインスタンスのすべてのエクスポートは、結果のコンポーネントから直接エクスポートされます。
エクスポートするインスタンスを指定するには、インスタンスの左上隅にあるチェックボックスをクリックします。
インスタンスがチェックされない場合、結果のコンポーネントにはエクスポートがありません。
グラフの現在の状態を表すコンポーネントをダウンロードするには、 Download Componentボタンをクリックします。
コンポーネントに名前を付け、 Downloadボタンをクリックします。新しいコンポーネント.wasmファイルは、ブラウザによってダウンロードされます。
define component dependenciesチェックボックスがチェックされたままになった場合、グラフで参照されているコンポーネントは、結果のコンポーネントに埋め込まれます。チェックボックスを外して代わりにコンポーネントをインポートします(注:WASMTIMEは現在コンポーネントのインポートをサポートしていません)。
デフォルトでは、結果のコンポーネントをアプリケーションのコンポーネントライブラリに追加し、ライブラリから設計面にドラッグして新しいインスタンスを作成できます。