Компоненты тем Discourse теперь поддерживают Wasm 🎊

sam · 07.Апрель.2022 06:05:38

WebAssembly (Wasm) — это технология, встроенная во все современные браузеры, которая позволяет разработчикам распространять переносимые двоичные программы.

Это означает, что разработчики могут использовать практически любой язык программирования и ориентироваться на веб.

В контексте Discourse это открывает возможность распространения довольно широкого набора расширений, которые ранее были доступны только создателям плагинов.

Примеры могут включать:

Добавление водяных знаков к изображениям / изменение их размера / кадрирование
Генерацию графиков с помощью graphviz или svgbob
Песочницы для программирования (например, посты, встраивающие среду выполнения Ruby)
и многое другое

Ранее из-за политики безопасности контента (CSP) в Discourse доступ к Wasm был заблокирован, за исключением установок с локальными загрузками и без CDN.

В клиентскую часть были добавлены новые интерфейсы для поддержки распространения JavaScript-активов в теме, которые всегда доступны через локальный домен.

Это позволяет разработчикам тем аккуратно размещать Wasm; процесс выглядит следующим образом:

компонент → локальный веб-воркер → Wasm, размещённый на CDN

Discourse svgbob — это пример сквозной реализации новых паттернов. Два ключевых изменения:

Все .js-активы также доступны не только через CDN, но и на локальном сервере:

{
...
  "assets": {
    "worker": "assets/will-be-avilable-on-local.js"
  }
}

URL локального актива доступен через settings.theme_uploads_local

Таким образом, в приведённом выше примере:

settings.theme_uploads_local.worker; // локальный актив
settings.theme_uploads.worker; // актив с CDN

merefield · 16.Апрель.2022 11:16:14

Не совсем связано с wasm, но я обнаружил кое-что ещё интересное в этом коде: это новинка?

В вашем примере loadScript больше не требуется? (Полагаю, что импорт избыточен):

github.com/SamSaffron/discourse-svgbob

javascripts/discourse/api-initializers/discourse-svgbob.js

6d7818035


      
          import loadScript from "discourse/lib/load-script";
          import { apiInitializer } from "discourse/lib/api";
          import { later } from "@ember/runloop";
          import { Promise } from "rsvp";
          
          let wasm = undefined;
          
          const webWorkerUrl = settings.theme_uploads_local.worker;
          let webWorker;
          
          const wasmUrl = settings.theme_uploads.wasm;

Вместо этого скрипт воркера загружается JIT, когда обнаруживается, что воркер не существует?

github.com/SamSaffron/discourse-svgbob

javascripts/discourse/api-initializers/discourse-svgbob.js

6d7818035


      
            });
          }
          
          let messageSeq = 0;
          let resolvers = {};
          
          async function cookSvgBob(text) {
            let seq = messageSeq++;
          
            if (!webWorker) {
              webWorker = new Worker(webWorkerUrl);
              webWorker.postMessage(['wasmUrl', wasmUrl]);
              webWorker.onmessage = function(e) {
                let incomingSeq = e.data[0];
                let converted = e.data[1];
          
                resolvers[incomingSeq](converted);
                delete resolvers[incomingSeq];
              }
            }

используя URL, построенный из ссылки на актив.

Это отличный паттерн, очень полезный!

Однако у меня есть вопрос по поводу воркеров.

Если я использую сторонний скрипт воркера, который содержит инструкции importScripts() для включения дополнительных скриптов в глобальную область видимости воркера, как мне включить эти скрипты для импорта внутри компонента темы?

Возможно, я спрашиваю: как загрузить скрипт по URL внутри компонента темы Discourse?

Falco · 16.Апрель.2022 14:28:29

В данном сценарии я использовал postMessage из основного JS-скрипта для передачи URL-адресов, которые необходимо импортировать. Это сообщение обрабатывается в обработчике воркера, который может выполнить importScript для полученных URL-адресов.

merefield · 16.Апрель.2022 14:30:15

Спасибо, Рафаэль! У вас есть пример с открытым исходным кодом, на который можно сослаться?

Falco · 16.Апрель.2022 14:34:51

Я использовал этот же паттерн в ядре

github.com/discourse/discourse

app/assets/javascripts/discourse/app/services/media-optimization-worker.js

c81d4597a


      
            return this.install();
          }
          
          async install() {
            this.installPromise = new Promise((resolve, reject) => {
              this.afterInstalled = resolve;
              this.failedInstall = reject;
              this.logIfDebug("Installing worker.");
              this.startWorker();
              this.registerMessageHandler();
              this.worker.postMessage({
                type: "install",
                settings: {
                  mozjpeg_script: getURLWithCDN("/javascripts/squoosh/mozjpeg_enc.js"),
                  mozjpeg_wasm: getURLWithCDN("/javascripts/squoosh/mozjpeg_enc.wasm"),
                  resize_script: getURLWithCDN(
                    "/javascripts/squoosh/squoosh_resize.js"
                  ),
                  resize_wasm: getURLWithCDN(
                    "/javascripts/squoosh/squoosh_resize_bg.wasm"
                  ),

github.com/discourse/discourse

public/javascripts/media-optimization-worker.js

c81d4597a


      
                }
                break;
              default:
                logIfDebug(`Sorry, we are out of ${e}.`);
            }
          };
          
          async function loadLibs(settings) {
            if (self.codecs) return;
          
            importScripts(settings.mozjpeg_script);
            importScripts(settings.resize_script);
          
            let encoderModuleOverrides = {
              locateFile: function (path, prefix) {
                // if it's a mem init file, use a custom dir
                if (path.endsWith(".wasm")) return settings.mozjpeg_wasm;
                // otherwise, use the default, the prefix (JS file's dir) + the path
                return prefix + path;
              },
              onRuntimeInitialized: function () {

Heinenen · 20.Март.2024 17:28:10

Я использую конструктор тем для создания нового компонента темы, который должен использовать wasm. В качестве отправной точки я попытался загрузить svgbob в качестве компонента темы. Однако мне это не разрешено, так как он содержит файл wasm.

Является ли это преднамеренным ограничением конструктора тем? Или нельзя просто установить svgbob в таком виде?

sam · 20.Март.2024 21:50:50

Я подозреваю, что в конструкторе тем есть ограничение на типы файлов, которое нужно снять.

david · 20.Март.2024 21:59:02

Я сбросил Themecreator, чтобы он использовал настройки по умолчанию для «разрешённых расширений темы», куда входит WASM. Теперь всё должно работать, @Heinenen.

(Не уверен, почему стояло нестандартное значение… возможно, раньше отсутствовало одно из распространённых расширений )

Heinenen · 20.Март.2024 22:16:07

Да, очень круто, могу подтвердить, что теперь всё работает. Спасибо!

Heinenen · 20.Март.2024 22:24:58

Хорошо, похоже, мне придется немного отступить — пока что всё работает не идеально.
Я попробовал снова загрузить svgbob, и это сработало.

Теперь, когда я попытался загрузить свой собственный wasm-файл, взятый с MDN, возникла ошибка:
Произошла ошибка: вы передали некорректные параметры в запрос: строка содержит нулевой байт

В моём dev-контейнере это не является проблемой, и я могу загрузить тот же файл без каких-либо затруднений.

hellekin · 21.Март.2024 19:05:22

Разве запуск исполняемого файла с веб-сайта не представляет угрозу безопасности, к которой следует подходить с осторожностью? Возможно, именно поэтому это не было установлено по умолчанию. Что вы думаете, @Roman?

david · 21.Март.2024 19:09:25

По умолчанию это разрешено в темах. Просто настройка сайта на discourse.theme-creator.io была изменена. (Это обычный сайт Discourse с плагином, позволяющим любому пользователю загружать и публиковать темы).

WASM всё ещё работает в изолированной среде браузера, поэтому уровень риска для безопасности эквивалентен .js файлу.

Тема		Ответов	Просм.
Defer loading JavaScript in Themes and Components Development dev-news	4	1993	07.04.2022
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Development	3	1926	13.01.2022
Issues on loading a js asset from a Theme Component Development	19	914	28.09.2023
Javascript assets in a theme component Development	15	2219	07.05.2021
"theme-component" should be a subcategory instead of a tag Site feedback	16	1619	19.07.2022

Компоненты тем Discourse теперь поддерживают Wasm 🎊

Связанные темы