wasmbuilder.app
1.0.0
Этот проект является простым инструментом GUI для создания компонентов Webassembly из других компонентов Webassembly.
Чтобы создать этот проект, должны быть установлены следующие инструменты на локальном уровне:
Чтобы установить зависимости проекта, запустите следующую команду:
$ make setup Это также установит инструменты командной строки cargo component (если еще не установлено).
Чтобы запустить приложение локально, запустите следующую команду:
$ make run По умолчанию приложение запускается на порту 3000. Откройте веб -браузер и перейдите по адресу http://localhost:3000 чтобы просмотреть приложение.
Приложение представляет собой одностраничное приложение React, которое связано с посылкой.
Он использует компонент webassembly (реализован в Rust), который отвечает за анализ файлов компонентов Webassembly и поддержание состояния графа композиции.
Приложение React поддерживает состояние пользовательского интерфейса и гарантирует, что внутреннее состояние графа находится в синхронизации с визуальным представлением графика.
Пользовательский интерфейс приложения был разработан кем-то, кто не является дизайнером (или даже обладает рудиментарными навыками развития фронт-энда). Это не красиво, но это работает ™. Получить запросы на улучшение интерфейса наиболее приветствуются!
В настоящее время самым простым способом создания отдельных компонентов webassembly является использование ржавчины и грузовых компонентов.
В будущем будет поддержано многие другие языки программирования, и, поскольку компоненты Webassembly сами по себе являются языковыми, они могут использоваться в этом приложении.
Первоначально приложение не будет иметь компонентов веб -ассемблера в библиотеке компонентов.
Нажмите кнопку Add Component , чтобы добавить новый компонент в библиотеку, и выберите нужный файл Webassembly Component ( .wasm ).
В качестве альтернативы, в библиотеку можно добавить файл компонента веб-компонента текстового представления ( .wat ).
Чтобы просмотреть подробную информацию о компоненте, нажмите на компонент в библиотеке.
Чтобы создать создание компонента, перетащите компонент из библиотеки на поверхность конструкции.
Это создаст экземпляр компонента, который может быть подключен к другим экземплярам на графике.
Каждый экземпляр компонента имеет набор импорта и экспорта. Экспорт и импорт могут быть связаны, перетаскивая связь между кругами и квадратами, которые их представляют.
Пример экземпляра:
В этом примере экземпляр компонента middleware импортирует экземпляр с именем backend и экспортирует пять типов и функцию с именем execute .
Круг I в верхнем правом углу представляет сам экземпляр и может использоваться для подключения к импорту на другом экземпляре, который принимает подходящий экземпляр.
Наконец, флажок в верхнем левом углу может использоваться для экспорта экземпляра (см. Ниже).
Чтобы подключить два экземпляра, перетащите соединение из круга экспорта в одном экземпляре к квадрату подходящего импорта в другом экземпляре.
Имена не должны совпадать, но типы элементов должны быть совместимы друг с другом.
Соединение экземпляра формирует зависимость между двумя экземплярами: экспортный экземпляр гарантированно создан до экземпляра импорта.
Пример соединения:
В этом примере экземпляр service компонента подключен к импорту backend экземпляра компонента middleware .
Когда для этого графика создается компонент, экземпляр service будет создан экземпляр middleware , который получит экземпляр service для аргумента « backend .
В настоящее время один экземпляр на графике может быть обозначен в качестве экземпляра для экспорта.
Весь экспорт в этом обозначенном экземпляре будет непосредственно экспортирован из полученного компонента.
Чтобы обозначить экземпляр для экспорта, нажмите на флажок в верхнем левом углу экземпляра.
Если ни один экземпляр не проверяется, полученный компонент не будет иметь экспорта.
Чтобы загрузить компонент, который представляет текущее состояние графика, нажмите кнопку Download Component .
Дайте компоненту имя и нажмите кнопку Download ; Новый компонент .wasm File будет загружен вашим браузером.
Если флажок define component dependencies остается проверенным, любые компоненты, упомянутые на графике, будут встроены в полученный компонент; Снимите флажок для импорта компонентов (примечание: Wasmtime не поддерживает импорт компонентов в настоящее время).
По умолчанию полученный компонент также будет добавлен в библиотеку компонентов приложения и может быть перетаскирован из библиотеки на поверхность дизайна для создания нового экземпляра.
