wasmbuilder.app
1.0.0
Ce projet est un simple outil d'interface graphique pour créer des composants WebAssembly à partir d'autres composants WebAssembly.
Pour construire ce projet, les outils suivants doivent être installés localement:
Pour installer les dépendances du projet, exécutez la commande suivante:
$ make setup Cela installera également les outils de ligne de commande cargo component (s'il n'est pas déjà installé).
Pour exécuter l'application localement, exécutez la commande suivante:
$ make run Par défaut, l'application s'exécute sur le port 3000. Ouvrez un navigateur Web et accédez à http://localhost:3000 pour afficher l'application.
L'application est une application de réact à une page qui est emballée avec colis.
Il utilise un composant WebAssembly (implémenté dans Rust), qui est responsable de l'analyse des fichiers de composants WebAssembly et de la gestion de l'état du graphique de composition.
L'application React maintient l'état de l'interface utilisateur et garantit que l'état du graphique interne est maintenu en synchronisation avec la représentation visuelle du graphique.
L'interface utilisateur de l'application a été développée par quelqu'un qui n'est pas concepteur (ou même possédant des compétences de développement frontal rudimentaire). Ce n'est pas joli, mais cela fonctionne ™. Les demandes de traction pour améliorer l'interface sont les bienvenues!
Actuellement, le moyen le plus simple de construire des composants WebAssembly individuels consiste à utiliser la rouille et le composant de fret.
À l'avenir, de nombreux autres langages de programmation seront pris en charge et comme les composants WebAssembly sont eux-mêmes agnostiques, ils pourront être utilisés par cette application.
Initialement, l'application n'aura pas de composants WebAssembly dans la bibliothèque de composants.
Cliquez sur le bouton Add Component pour ajouter un nouveau composant à la bibliothèque et sélectionnez le fichier de composant WebAssembly ( .wasm ) souhaité.
Alternativement, un fichier de représentation textuel de composant WebAssembly ( .wat ) peut être ajouté à la bibliothèque.
Pour afficher les détails d'un composant, cliquez sur le composant de la bibliothèque.
Pour instancier un composant, faites glisser le composant de la bibliothèque vers la surface de conception.
Cela créera une instance du composant qui peut être connecté à d'autres instances du graphique.
Chaque instance d'un composant a un ensemble d'importations et d'exportations. Les exportations et les importations peuvent être connectées en faisant glisser une connexion entre les cercles et les carrés qui les représentent.
Un exemple d'instance:
Dans cet exemple, l'instance du composant middleware importe une instance nommée backend et exporte cinq types et une fonction nommée execute .
Le cercle I dans le coin supérieur droit représente l'instance elle-même et peut être utilisée pour se connecter avec une importation sur une autre instance qui prend une importance correspondante.
Enfin, la case à cocher dans le coin supérieur gauche peut être utilisée pour exporter l'instance (voir ci-dessous).
Pour connecter deux instances, faites glisser une connexion à partir du cercle d'une exportation sur une instance vers le carré d'une importation correspondante sur une autre instance.
Les noms n'ont pas besoin de correspondre, mais les types d'éléments doivent être compatibles entre eux.
La connexion d'une instance forme une relation de dépendance entre les deux instances: l'instance d'exportation est garantie d'être instanciée avant l'instance d'importation.
Un exemple de connexion:
Dans cet exemple, une instance du composant service est connectée à l'importation backend d'une instance du composant middleware .
Lorsqu'un composant est créé pour ce graphique, l'instance service sera instanciée avant l'instance middleware , qui recevra l'instance service pour l'argument d'instanciation backend .
Actuellement, une seule instance dans le graphique peut être désignée comme l'instance à l'exportation.
Toutes les exportations de cette instance désignée seront directement exportées à partir du composant résultant.
Pour désigner une instance à exporter, cliquez sur la case à cocher dans le coin supérieur gauche de l'instance.
Si aucune instance n'est vérifiée, le composant résultant n'aura aucune exportation.
Pour télécharger le composant qui représente l'état actuel du graphique, cliquez sur le bouton Download Component .
Donnez un nom au composant et cliquez sur le bouton Download ; Le nouveau composant .wasm Fichier sera téléchargé par votre navigateur.
Si la case à cocher define component dependencies reste coché, tous les composants référencés dans le graphique seront intégrés dans le composant résultant; Décochez la case à cocher pour importer les composants à la place (Remarque: WasMtime ne prend pas en charge les composants d'importation actuellement).
Par défaut, le composant résultant sera également ajouté à la bibliothèque de composants de l'application et peut être traîné de la bibliothèque à la surface de conception pour créer une nouvelle instance.
