wasmbuilder.app
1.0.0
Dieses Projekt ist ein einfaches GUI -Tool zum Erstellen von WebAssembly -Komponenten aus anderen Webassembly -Komponenten.
Um dieses Projekt zu erstellen, müssen die folgenden Tools lokal installiert werden:
Führen Sie den folgenden Befehl aus, um die Abhängigkeiten des Projekts zu installieren:
$ make setup Dadurch werden auch die Befehlszeilen -Tools cargo component installiert (falls nicht bereits installiert).
Um die Anwendung lokal auszuführen, führen Sie den folgenden Befehl aus:
$ make run Standardmäßig wird die Anwendung auf Port 3000 ausgeführt. Öffnen Sie einen Webbrowser und navigieren Sie zu http://localhost:3000 um die Anwendung anzuzeigen.
Die Anwendung ist eine einseitige Reaktionsanwendung, die mit Paket gebündelt ist.
Es verwendet eine WebAssembly -Komponente (implementiert in Rust), die für die Parsen von WebAssembly -Komponentendateien und die Wartung des Kompositionsgrapszustands verantwortlich ist.
Die React -Anwendung behält den Status der Benutzeroberfläche bei und stellt sicher, dass der interne Graphenzustand mit der visuellen Darstellung des Diagramms synchronisiert wird.
Die Benutzeroberfläche der Anwendung wurde von jemandem entwickelt, der kein Designer ist (oder sogar rudimentäre Front-End-Entwicklungsfähigkeiten besitzt). Es ist nicht schön, aber es funktioniert ™. Anfragen zur Verbesserung der Benutzeroberfläche sind am meisten willkommen!
Derzeit ist der einfachste Weg, um einzelne Webassembly-Komponenten aufzubauen, die Verwendung von Rost und Frachtkomponenten.
In Zukunft werden viele weitere Programmiersprachen unterstützt, und da WebAssembly-Komponenten selbst Sprach-Agnostiker sind, können sie von dieser Anwendung verwendet werden.
Zunächst verfügt die Anwendung in der Komponentenbibliothek über keine WebAssembly -Komponenten.
Klicken Sie auf die Schaltfläche Add Component , um der Bibliothek eine neue Komponente hinzuzufügen, und wählen Sie die gewünschte WebAssembly -Komponenten -Datei ( .wasm ) aus.
Alternativ kann eine Text-Repräsentationsdatei ( .wat ) der WebAssembly-Komponente zur Bibliothek hinzugefügt werden.
Klicken Sie auf die Komponente in der Bibliothek, um Details zu einer Komponente anzuzeigen.
Um eine Komponente zu instanziieren, ziehen Sie die Komponente aus der Bibliothek auf die Designoberfläche.
Dadurch wird eine Instanz der Komponente erstellt, die mit anderen Instanzen im Diagramm verbunden werden kann.
Jede Instanz einer Komponente verfügt über eine Reihe von Importen und Exporten. Exporte und Importe können durch Ziehen einer Verbindung zwischen den Kreisen und den Quadraten verbunden werden, die sie darstellen.
Eine Beispielinstanz:
In diesem Beispiel importiert die Instanz der middleware -Komponente eine Instanz mit dem Namen backend und exportiert fünf Typen und eine Funktion namens execute .
Der Kreis I in der oberen rechten Ecke repräsentiert die Instanz selbst und kann verwendet werden, um mit einem Import in einer anderen Instanz verbunden zu werden, die einen passenden Instanzimport benötigt.
Schließlich kann das Kontrollkästchen in der oberen linken Ecke zum Exportieren der Instanz verwendet werden (siehe unten).
Um zwei Instanzen zu verbinden, ziehen Sie eine Verbindung aus dem Kreis eines Exports auf einer Instanz an das Quadrat eines passenden Imports auf einer anderen Instanz.
Die Namen müssen nicht übereinstimmen, aber die Arten der Elemente müssen miteinander kompatibel sein.
Das Verbinden einer Instanz bildet eine Abhängigkeitsbeziehung zwischen den beiden Instanzen: Die Exportinstanz wird garantiert vor der Importinstanz instanziiert.
Eine Beispielverbindung:
In diesem Beispiel wird eine Instanz der service mit dem backend -Import einer Instanz der middleware -Komponente verbunden.
Wenn eine Komponente für dieses Diagramm erstellt wird, wird die service vor der middleware -Instanz instanziiert, die die service für das Argument der backend -Instanziierung erhält.
Derzeit kann eine einzelne Instanz in der Grafik als Instanz zum Exportieren bezeichnet werden.
Alle Exporte dieser festgelegten Instanz werden direkt aus der resultierenden Komponente exportiert.
Um eine Instanz zum Exportieren zu bezeichnen, klicken Sie auf das Kontrollkästchen in der oberen linken Ecke der Instanz.
Wenn keine Instanz überprüft wird, hat die resultierende Komponente keine Exporte.
Um die Komponente herunterzuladen, die den aktuellen Status des Diagramms darstellt, klicken Sie auf die Schaltfläche Download Component .
Geben Sie der Komponente einen Namen und klicken Sie auf die Schaltfläche Download . Die neue Komponente .wasm -Datei wird von Ihrem Browser heruntergeladen.
Wenn das Kontrollkästchen define component dependencies überprüft bleibt, werden alle im Diagramm verwiesenen Komponenten in die resultierende Komponente eingebettet. Deaktivieren Sie das Kontrollkästchen, um die Komponenten stattdessen zu importieren (Hinweis: WASMTIME unterstützt derzeit keine Importkomponenten).
Standardmäßig wird die resultierende Komponente auch zur Komponentenbibliothek der Anwendung hinzugefügt und kann von der Bibliothek zur Designoberfläche gezogen werden, um eine neue Instanz zu erstellen.
