wasmbuilder.app
1.0.0
Este projeto é uma ferramenta simples da GUI para criar componentes WebAssembly a partir de outros componentes da WebAssembly.
Para construir este projeto, as seguintes ferramentas devem ser instaladas localmente:
Para instalar as dependências do projeto, execute o seguinte comando:
$ make setup Isso também instalará as ferramentas de linha de componentes cargo component (se ainda não estiverem instaladas).
Para executar o aplicativo localmente, execute o seguinte comando:
$ make run Por padrão, o aplicativo é executado na porta 3000. Abra um navegador da web e navegue para http://localhost:3000 para visualizar o aplicativo.
O aplicativo é um aplicativo de reação de uma página de uma página que é incluída com o pacote.
Ele usa um componente WebAssembly (implementado no Rust), que é responsável por analisar arquivos de componentes WebAssembly e manter o estado do gráfico de composição.
O aplicativo REACT mantém o estado da interface do usuário e garante que o estado do gráfico interno seja mantido em sincronia com a representação visual do gráfico.
A interface do usuário do aplicativo foi desenvolvida por alguém que não é designer (ou mesmo possuindo habilidades de desenvolvimento rudimentar de front-end). Não é bonito, mas funciona ™. Pull Pedidos para melhorar a interface são bem -vindos!
Atualmente, a maneira mais fácil de construir componentes individuais da WebAssembly é usar ferrugem e componente de carga.
No futuro, muitas outras linguagens de programação serão suportadas e, como os componentes da WebAssembly são eles mesmos-idiomas, eles poderão ser usados por este aplicativo.
Inicialmente, o aplicativo não terá componentes WebAssembly na biblioteca de componentes.
Clique no botão Add Component para adicionar um novo componente à biblioteca e selecione o arquivo componente WebAssembly desejado ( .wasm ).
Como alternativa, um arquivo de representação textual ( .wat ) pode ser adicionado à biblioteca.
Para visualizar detalhes sobre um componente, clique no componente na biblioteca.
Para instanciar um componente, arraste o componente da biblioteca para a superfície do design.
Isso criará uma instância do componente que pode ser conectado a outras instâncias no gráfico.
Cada instância de um componente possui um conjunto de importações e exportações. As exportações e importações podem ser conectadas arrastando uma conexão entre os círculos e os quadrados que os representam.
Uma instância de exemplo:
Neste exemplo, a instância do componente middleware importa uma instância nomeada backend e exporta cinco tipos e uma função chamada execute .
O círculo I , no canto superior direito, representa a própria instância e pode ser usada para se conectar com uma importação em outra instância que leva uma importação de instância correspondente.
Finalmente, a caixa de seleção no canto superior esquerdo pode ser usada para exportar a instância (veja abaixo).
Para conectar duas instâncias, arraste uma conexão do círculo de uma exportação em uma instância para o quadrado de uma importação correspondente em outra instância.
Os nomes não precisam corresponder, mas os tipos de itens devem ser compatíveis entre si.
Conectar uma instância forma uma relação de dependência entre as duas instâncias: a instância de exportação é garantida para ser instanciada antes da instância de importação.
Um exemplo de conexão:
Neste exemplo, uma instância do componente service está conectada à importação backend de uma instância do componente do middleware .
Quando um componente é criado para este gráfico, a instância service será instanciada antes da instância middleware , que receberá a instância service para o argumento de instanciação backend .
Atualmente, uma única instância no gráfico pode ser designada como a instância para exportar.
Todas as exportações nessa instância designada serão exportadas diretamente do componente resultante.
Para designar uma instância para exportar, clique na caixa de seleção no canto superior esquerdo da instância.
Se nenhuma instância for verificada, o componente resultante não terá exportações.
Para baixar o componente que representa o estado atual do gráfico, clique no botão Download Component .
Dê um nome ao componente e clique no botão Download ; O novo arquivo .wasm será baixado pelo seu navegador.
Se a caixa de seleção define component dependencies permanecer verificada, qualquer componente referenciado no gráfico será incorporado no componente resultante; Desmarque a caixa de seleção para importar os componentes (Nota: o WASMTIME não suporta a importação de componentes atualmente).
Por padrão, o componente resultante também será adicionado à biblioteca de componentes do aplicativo e pode ser arrastado da biblioteca para a superfície de design para criar uma nova instância.
