TL;DR

  1. Установите ember-auto-import
  2. Импортируйте модули Wasm с import('path/to/wasm')
  3. Это все шаги. Готово!

Предыстория + жалоба

WebAssembly, вероятно, самая захватывающая и разочаровывающая технология, появившаяся за последнее время. Обещание WebAssembly потрясающее: по-настоящему пишите один раз, запускайте везде, технология, которая работает на виртуальной машине, которая уже есть у пользователей (браузере!). Но, как это часто бывает, на самом деле все не так радужно. Единственными официально поддерживаемыми типами являются числовые (например, вы не можете передать строку или получить ее обратно из модуля Wasm). Процесс загрузки модулей Wasm не так прост, как многие думают. И история отладки по-прежнему практически отсутствует.

Чтобы заполнить пробелы, существует несколько решений сообщества, которые упрощают работу. Проект Rust and WebAssembly направлен на облегчение высокоуровневого взаимодействия между модулями wasm и javascript (через пакет wasm-bindgen). Другими словами, он генерирует код оболочки, который позволяет вам передавать и получать нечисловые типы в ваши модули Wasm. Wasm-pack упрощает сборку и публикацию кода Rust в легко потребляемых пакетах NPM.

Webpack недавно добавил поддержку импорта модулей Wasm, подобных тем, которые были созданы с помощью wasm-pack. Поэтому вместо того, чтобы танцевать с WebAssembly.instantiateStreaming(fetch('foo'), { imports..., пользователи webpack могут просто вызвать import('foo') и работать с результатом, как и любой другой импортированный модуль (хотя и асинхронный).

Так при чем здесь Эмбер?

Эдвард Фолкнер незаметно работал над маленьким пакетом под названием ember-auto-import как решением для простого импорта узловых модулей в приложения Ember. Недавно он выпустил патч, который позволяет использовать динамические операторы import(...). Поскольку ember-auto-import использует Webpack под капотом, это делает использование модулей Wasm очень простым внутри приложения Ember!

Я сделал простое приложение Ember, чтобы продемонстрировать, насколько это просто. Вот соответствующий коммит, в который я импортирую модуль Wasm.

Единственное предостережение, которое я могу придумать, - это убедиться, что все сгенерированные ресурсы развернуты. Поскольку это не javascript, очевидно, что он не может быть добавлен в ваши application.js или vendor.js файлы. Обычные ember build команды генерируют все правильные файлы, просто дважды проверьте свои сценарии развертывания. 🐹