wasmbuilder.app
1.0.0
Este proyecto es una herramienta GUI simple para crear componentes de WebAssembly a partir de otros componentes de WebAssembly.
Para construir este proyecto, las siguientes herramientas deben instalarse localmente:
Para instalar las dependencias del proyecto, ejecute el siguiente comando:
$ make setup Esto también instalará las herramientas de línea de comandos cargo component (si aún no está instalado).
Para ejecutar la aplicación localmente, ejecute el siguiente comando:
$ make run Por defecto, la aplicación se ejecuta en el puerto 3000. Abra un navegador web y navegue a http://localhost:3000 para ver la aplicación.
La aplicación es una aplicación React de una sola página que se incluye con la parcela.
Utiliza un componente WebAssembly (implementado en óxido), que es responsable de analizar archivos de componentes WebAssembly y mantener el estado del gráfico de composición.
La aplicación React mantiene el estado de la interfaz de usuario y garantiza que el estado del gráfico interno se mantenga sincronizado con la representación visual del gráfico.
La interfaz de usuario de la aplicación fue desarrollada por alguien que no es un diseñador (o incluso posee habilidades de desarrollo frontal rudimentarias). No es bonito, pero funciona ™. ¡Las solicitudes de extracción para mejorar la interfaz son bienvenidas!
Actualmente, la forma más fácil de construir componentes individuales de WebAsmbly es usar óxido y componente de carga.
En el futuro, se admitirán muchos más lenguajes de programación y, dado que los componentes de WebAssembly son en sí mismos agnósticos del lenguaje, esta aplicación podrán ser utilizadas por esta aplicación.
Inicialmente, la aplicación no tendrá componentes websembly en la biblioteca de componentes.
Haga clic en el botón Add Component para agregar un nuevo componente a la biblioteca y seleccione el archivo del componente websembly deseado ( .wasm ).
Alternativamente, se puede agregar un archivo de representación textual del componente websembly ( .wat ) a la biblioteca.
Para ver los detalles sobre un componente, haga clic en el componente de la biblioteca.
Para instanciar un componente, arrastre el componente desde la biblioteca a la superficie de diseño.
Esto creará una instancia del componente que se puede conectar a otras instancias en el gráfico.
Cada instancia de un componente tiene un conjunto de importaciones y exportaciones. Las exportaciones e importaciones se pueden conectar arrastrando una conexión entre los círculos y los cuadrados que los representan.
Una instancia de ejemplo:
En este ejemplo, la instancia del componente de middleware importa una instancia llamada backend y exporta cinco tipos y una función llamada execute .
El círculo I en la esquina superior derecha representa la instancia en sí y se puede usar para conectarse con una importación en otra instancia que requiere una importación de instancia coincidente.
Finalmente, la casilla de verificación en la esquina superior izquierda se puede usar para exportar la instancia (ver más abajo).
Para conectar dos instancias, arrastre una conexión desde el círculo de una exportación en una instancia al cuadrado de una importación coincidente en otra instancia.
Los nombres no necesitan coincidir, pero los tipos de elementos deben ser compatibles entre sí.
Conectar una instancia forma una relación de dependencia entre las dos instancias: se garantiza que la instancia de exportación se instancia antes de la instancia de importación.
Una conexión de ejemplo:
En este ejemplo, una instancia del componente service está conectada a la importación backend de una instancia del componente de middleware .
Cuando se crea un componente para este gráfico, la instancia service se instanciará antes de la instancia middleware , que recibirá la instancia service para el argumento de instanciación backend .
Actualmente, una sola instancia en el gráfico puede designarse como la instancia para exportar.
Todas las exportaciones en esa instancia designada se exportarán directamente desde el componente resultante.
Para designar una instancia para exportar, haga clic en la casilla de verificación en la esquina superior izquierda de la instancia.
Si no se verifica ninguna instancia, el componente resultante no tendrá ninguna exportación.
Para descargar el componente que representa el estado actual del gráfico, haga clic en el botón Download Component .
Dé un nombre al componente y haga clic en el botón Download ; El nuevo archivo de componente .wasm será descargado por su navegador.
Si la casilla de verificación define component dependencies permanece marcado, cualquier componente mencionado en el gráfico se incrustará en el componente resultante; Descarga la casilla de verificación para importar los componentes (nota: Wasmtime no admite la importación de componentes actualmente).
Por defecto, el componente resultante también se agregará a la biblioteca de componentes de la aplicación y se puede arrastrar desde la biblioteca a la superficie de diseño para crear una nueva instancia.
