该项目是一个简单的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当前不支持导入组件)。
默认情况下,所得组件还将添加到应用程序的组件库中,并且可以从库中拖动到设计表面以创建新实例。