Discourse テーマコンポーネントがWasmに対応しました 🎊

sam · 2022 年 4 月 7 日午前 6:05

WebAssembly（Wasm）は、開発者がポータブルなバイナリプログラムを配布できる、すべてのモダンブラウザに搭載されているテクノロジーです。

これにより、開発者はほぼすべてのプログラミング言語を使用して、Web をターゲットにすることができます。

Discourse のコンテキストでは、これにより、これまでプラグイン作成者のみが利用可能だった、かなり豊富な拡張機能のセットを配布できるようになります。

例としては、次のものが挙げられます。

画像の透かし/リサイズ/クロップ
graphviz または svgbob を使用したグラフ生成
プログラミングサンドボックス（例：Ruby ランタイムを埋め込んだ投稿）
その他多数

以前は、Discourse の Content Security Policy により、ローカルアップロードがあり CDN がないインストールを除き、Wasm へのアクセスは無効になっていました。

ローカルドメインから無条件に到達可能なテーマ内の JavaScript アセットを配布するために、クライアントサイドに新しいインターフェイスが追加されました。

これにより、テーマ開発者は Wasm をきれいにホストできるようになります。フローは次のようになります。

コンポーネント → ローカル Web Worker → CDN でホストされている Wasm

Discourse svgbob は、新しいパターンのエンドツーエンドの例です。2 つの重要な変更点は次のとおりです。

すべての .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 · 2022 年 4 月 16 日午前 11:16

これは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() （importScripts() ステートメント）が含まれており、追加のスクリプトをワーカーのグローバルスコープに含める場合、それらのスクリプトをテーマコンポーネントにインポートするにはどうすればよいですか？

質問は、「Discourse テーマコンポーネント内で URL からスクリプトを要求するにはどうすればよいですか？」ということかもしれません。

Falco · 2022 年 4 月 16 日午後 2:28

このシナリオで行ったことは、メインのJSスクリプトからpostMessageを使用して、インポートするURLを渡すことです。これは、ワーカー側のメッセージハンドラーで受信され、受信したURLをimportScriptできます。

merefield · 2022 年 4 月 16 日午後 2:30

ラファエルさん、ありがとうございます！参照できるオープンソースの例はありますか？

Falco · 2022 年 4 月 16 日午後 2:34

コアでもこの同じパターンを使用しました

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 · 2024 年 3 月 20 日午後 5:28

テーマクリエイターを使用して、wasm を使用する新しいテーマコンポーネントを作成しようとしています。出発点として、svgbob をテーマコンポーネントとしてアップロードしようとしました。しかし、wasm ファイルが含まれているため、許可されていません。

これはテーマクリエイターの意図された制限ですか？それとも、svgbob をそのままインストールできないということですか？

sam · 2024 年 3 月 20 日午後 9:50

テーマ作成者のファイルタイプ制限を解除する必要があると思われます。

david · 2024 年 3 月 20 日午後 9:59

テーマクリエイターをデフォルトの「テーマ承認済み拡張機能」（WASM を含む）を使用するようにリセットしました。これで機能するはずです @Heinenen。

（なぜデフォルト以外の設定になっていたのかは不明です…過去に一般的な拡張機能のいずれかが欠けていたのかもしれません）

Heinenen · 2024 年 3 月 20 日午後 10:16

はい、とても素晴らしいです。今動作することを確認できました。ありがとうございます！

Heinenen · 2024 年 3 月 20 日午後 10:24

少し戻る必要があるようです。まだ完璧に機能していないと思います。
もう一度 svgbob をアップロードしたところ、うまくいきました。

MDN の wasm ファイルをアップロードしようとすると、次のエラーが発生します。
エラーが発生しました: リクエストに無効なパラメーターが指定されました: 文字列にヌルバイトが含まれています

開発コンテナでは問題なく、同じファイルを問題なくアップロードできます。

hellekin · 2024 年 3 月 21 日午後 7:05

ウェブサイトからバイナリを実行することは、慎重に選択すべきセキュリティ上のリスクではありませんか？それがデフォルトでなかった理由かもしれません。どう思いますか、@Roman？

david · 2024 年 3 月 21 日午後 7:09

テーマではデフォルトで許可されています。変更されたのは discourse.theme-creator.io のサイト設定だけです。（これは通常のディスコースサイトで、誰でもテーマをアップロードして共有できるプラグインが付いています）。

WASM はまだブラウザによってサンドボックス化されているため、セキュリティ上のリスクは .js ファイルと同等です。

トピック		返信	表示
Defer loading JavaScript in Themes and Components Dev dev-news	4	1949	2022 年 4 月 7 日
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Dev	3	1889	2022 年 1 月 13 日
Issues on loading a js asset from a Theme Component Dev	19	842	2023 年 9 月 28 日
Javascript assets in a theme component Dev	15	2075	2021 年 5 月 7 日
"theme-component" should be a subcategory instead of a tag Site feedback	16	1522	2022 年 7 月 19 日

Discourse テーマコンポーネントがWasmに対応しました 🎊

関連トピック