Les composants de thème Discourse prennent désormais en charge Wasm 🎊

sam · Avril 7, 2022, 6:05

WebAssembly (Wasm) est une technologie livrée dans tous les navigateurs modernes qui permet aux développeurs de livrer des programmes binaires portables.

Cela signifie que les développeurs peuvent utiliser presque n’importe quel langage de programmation et cibler le web.

Dans le contexte de Discourse, cela ouvre la porte à la livraison d’un ensemble assez riche d’extensions qui n’étaient disponibles que pour les créateurs de plugins par le passé.

Les exemples pourraient être :

Filigrane / redimensionnement / recadrage d’images
Génération de graphiques à l’aide de graphviz ou svgbob
Bac à sable de programmation (par exemple : des publications qui intègrent un runtime Ruby)
et bien plus encore

Par le passé, en raison de la Politique de sécurité du contenu de Discourse, l’accès à Wasm était désactivé, sauf pour les installations avec des téléchargements locaux et sans CDN.

De nouvelles interfaces ont été ajoutées côté client pour prendre en charge la livraison d’actifs JavaScript dans un thème qui sont inconditionnellement accessibles via le domaine local.

Cela permet aux développeurs de thèmes d’héberger proprement Wasm, le flux est le suivant :

composant → worker web local → Wasm hébergé sur CDN

Discourse svgbob est un exemple de bout en bout des nouveaux modèles, les 2 changements clés sont :

Tous les actifs .js sont également rendus disponibles hors CDN sur le serveur local :

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

L’URL de l’actif local est accessible via settings.theme_uploads_local

Donc, dans l’exemple ci-dessus :

settings.theme_uploads_local.worker ; // actif local
settings.theme_uploads.worker ; // actif cdn

merefield · Avril 16, 2022, 11:16

Pas spécifiquement lié au wasm, mais j’ai trouvé autre chose d’intéressant dans ce code, est-ce nouveau ?

Dans votre exemple, loadScript n’est plus requis ? (Je pense que l’importation est redondante ?) :

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;

et au lieu de cela, le script worker est chargé JIT lorsque l’on constate que le worker n’existe pas ?

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];
              }
            }

en utilisant l’URL construite à partir de la référence de l’asset.

C’est un beau modèle et très utile !

Cependant, j’ai une question concernant les workers.

Si j’utilisais un script worker tiers, et que celui-ci contenait des instructions importScripts() pour inclure des scripts supplémentaires dans la portée globale du worker, comment inclure ces scripts pour les importer dans le composant de thème ?

Je demande peut-être : comment requérir un script depuis une URL dans un composant de thème Discourse ?

Falco · Avril 16, 2022, 2:28

Ce que j’ai fait dans ce scénario est d’utiliser un postMessage du script JS principal avec les URL à importer. Ceci est reçu par le gestionnaire de messages sur le worker qui peut importScript les URL reçues.

merefield · Avril 16, 2022, 2:30

Merci Rafael ! Avez-vous un exemple open source à titre de référence ?

Falco · Avril 16, 2022, 2:34

J’ai utilisé ce même modèle dans le noyau

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 · Mars 20, 2024, 5:28

J’utilise le theme creator pour créer un nouveau composant de thème qui est censé utiliser wasm. Comme point de départ, j’ai essayé de téléverser svgbob en tant que composant de thème. Cependant, je ne suis pas autorisé à le faire, car il contient un fichier wasm.

Est-ce une limitation intentionnelle du theme creator ? Ou ne peut-on pas simplement installer svgbob tel quel ?

sam · Mars 20, 2024, 9:50

Je soupçonne que nous avons juste une limitation du type de fichier sur le créateur de thème qui doit être levée.

david · Mars 20, 2024, 9:59

J’ai réinitialisé themecreator pour utiliser les « extensions autorisées du thème » par défaut, qui incluent WASM. Cela devrait donc fonctionner maintenant @Heinenen.

(Je ne suis pas sûr pourquoi il était sur un réglage non par défaut… peut-être qu’une des extensions courantes manquait par le passé )

Heinenen · Mars 20, 2024, 10:16

Oui, très cool, je peux confirmer que cela fonctionne maintenant. Merci !

Heinenen · Mars 20, 2024, 10:24

D’accord, il semble que je doive revenir un peu en arrière, je ne pense pas que cela fonctionne encore parfaitement.
J’ai essayé de téléverser à nouveau svgbob et cela a fonctionné.

Après avoir également essayé de téléverser mon propre fichier wasm, provenant de MDN, j’obtiens l’erreur :
Une erreur s'est produite : Vous avez fourni des paramètres invalides à la requête : la chaîne contient un octet nul

Sur mon conteneur de développement, ce n’est pas un problème et je peux téléverser le même fichier sans problème.

hellekin · Mars 21, 2024, 7:05

N’est-ce pas qu’exécuter un binaire depuis le site Web constitue une exposition à la sécurité qui devrait être choisie avec soin ? C’est peut-être la raison pour laquelle ce n’était pas le réglage par défaut. Qu’en pensez-vous @Roman ?

david · Mars 21, 2024, 7:09

C’est autorisé par défaut dans les thèmes. C’est juste le paramètre du site sur discourse.theme-creator.io qui a été modifié. (c’est un site discourse ordinaire, avec un plugin qui permet à quiconque de télécharger et de partager des thèmes).

WASM est toujours isolé par le navigateur, donc l’exposition à la sécurité est équivalente à un fichier .js.

Sujet		Réponses	Vues
Defer loading JavaScript in Themes and Components Dev dev-news	4	1949	Avril 7, 2022
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Dev	3	1889	Janvier 13, 2022
Issues on loading a js asset from a Theme Component Dev	19	840	Septembre 28, 2023
Javascript assets in a theme component Dev	15	2064	Mai 7, 2021
"theme-component" should be a subcategory instead of a tag Site feedback	16	1522	Juillet 19, 2022

Les composants de thème Discourse prennent désormais en charge Wasm 🎊

Sujets connexes