該項目是一個簡單的GUI工具,用於從其他WebAssembly組件構建WebAssembly組件。
要構建此項目,必須在本地安裝以下工具:
要安裝項目的依賴項,請運行以下命令:
$ make setup這還將安裝cargo component命令行工具(如果尚未安裝)。
要在本地運行該應用程序,請運行以下命令:
$ make run默認情況下,該應用程序在端口3000上運行。打開Web瀏覽器並導航到http://localhost:3000以查看應用程序。
該應用程序是與包裹捆綁在一起的單頁反應應用程序。
它使用WebAssembly組件(在Rust中實現),該組件負責解析WebAssembly組件文件並維護組合圖狀態。
React應用程序維護用戶界面的狀態,並確保內部圖狀態與圖的可視化表示保持同步。
該應用程序的用戶界面是由不是設計師(甚至具有基本前端開發技能)的人開發的。它不是很漂亮,但是可以使用™。歡迎提高界面的拉動請求!
目前,構建單個WebAssembly組件的最簡單方法是使用Rust和Cargo Component。
將來,將支持更多的編程語言,並且由於WebAssembly組件本身就是語言 - 敏捷的語言,因此本應用程序將能夠使用它們。
最初,該應用程序將在組件庫中沒有WebAssembly組件。
單擊Add Component按鈕將新組件添加到庫中,然後選擇所需的WebAssembly組件( .wasm )文件。
另外,可以將WebAssembly組件文本代表文件( .wat )添加到庫中。
要查看有關組件的詳細信息,請單擊庫中的組件。
要實例化組件,請將組件從庫拖到設計表面。
這將創建一個可以連接到圖表中其他實例的組件實例。
組件的每個實例都有一組進口和導出。可以通過拖動代表它們的圓與正方形之間的連接來連接導出和進口。
一個示例實例:

在此示例中, middleware組件的實例導入了一個名為backend的實例,並導出五個類型和名為execute的函數。
右上角的圓I表示實例本身,可用於與另一個實例上的導入連接,該實例將匹配的實例導入。
最後,左上角的複選框可用於導出實例(見下文)。
要連接兩個實例,請將連接從一個實例上的導出圈拖到另一個實例上的匹配導入的平方。
名稱不需要匹配,但是項目的類型必須彼此兼容。
連接實例在兩個實例之間形成依賴關係:導出實例可以在導入實例之前實例化。
一個示例連接:

在此示例中, service組件的實例連接到middleware組件實例的backend導入。
當為該圖創建組件時,將在middleware實例之前實例化service實例,該實例將接收backend實例參數的service實例。
當前,圖中的一個實例可以指定為要導出的實例。
該指定實例上的所有導出將直接從結果組件中導出。
要指定一個實例導出,請單擊實例左上角的複選框。
如果未檢查實例,則結果組件將沒有任何導出。
要下載表示圖表當前狀態的組件,請單擊Download Component按鈕。
給組件一個名稱,然後單擊Download按鈕;新組件.wasm文件將由您的瀏覽器下載。
如果define component dependencies複選框仍在檢查中,則圖中引用的任何組件都將嵌入結果組件中;取消選中復選框以導入組件(注意:Wasmtime當前不支持導入組件)。
默認情況下,所得組件還將添加到應用程序的組件庫中,並且可以從庫中拖動到設計表面以創建新實例。