Componentes de tema do Discourse agora suportam Wasm 🎊

sam · Abril 7, 2022, 6:05am

WebAssembly (Wasm) é uma tecnologia que vem em todos os navegadores modernos e permite que os desenvolvedores enviem programas binários portáteis.

Isso significa que os desenvolvedores podem usar quase qualquer linguagem de programação e ter como alvo a web.

No contexto do Discourse, isso abre as portas para o envio de um conjunto bastante rico de extensões que antes estavam disponíveis apenas para criadores de plugins.

Exemplos podem ser:

Marca d’água / redimensionamento / corte de imagens
Geração de gráficos usando graphviz ou svgbob
Sandboxes de programação (por exemplo: posts que incorporam um runtime Ruby)
e muito mais

No passado, devido à Content Security Policy do Discourse, o acesso ao Wasm foi desativado, exceto para instalações com uploads locais e sem CDN.

Novas interfaces foram adicionadas ao lado do cliente para suportar o envio de ativos JavaScript em um tema que são incondicionalmente alcançáveis via domínio local.

Isso permite que os desenvolvedores de temas hospedem Wasm de forma limpa, o fluxo é:

componente → worker web local → Wasm hospedado em CDN

Discourse svgbob é um exemplo ponta a ponta dos novos padrões, as 2 principais mudanças são:

Todos os ativos .js também são disponibilizados fora da CDN no servidor local:

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

A URL para o ativo local é acessível via settings.theme_uploads_local

Portanto, no exemplo acima:

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

merefield · Abril 16, 2022, 11:16am

Não especificamente relacionado a wasm, mas encontrei outra coisa interessante sobre este código, é novo?

No seu exemplo, loadScript não é mais necessário? (Acredito que a importação seja redundante?):

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;

e em vez disso, o script do worker é carregado JIT quando se descobre que o worker não existe?

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

usando a URL construída a partir da referência do asset.

Esse é um padrão legal e muito útil!

No entanto, tenho uma pergunta sobre workers.

Se eu usasse um script de worker de terceiros, e ele contivesse instruções importScripts() para incluir scripts adicionais no escopo global do worker, como incluo esses scripts para importação dentro do componente de tema?

Talvez eu esteja perguntando: como exigimos um script de uma URL dentro de um Componente de Tema do Discourse?

Falco · Abril 16, 2022, 2:28pm

O que fiz neste cenário é usar um postMessage do script JS principal com os URLs a serem importados. Isso é recebido no manipulador de mensagens no worker que pode importScript os URLs recebidos.

merefield · Abril 16, 2022, 2:30pm

Obrigado, Rafael!. Você tem um exemplo de código aberto para referência?

Falco · Abril 16, 2022, 2:34pm

Eu usei este mesmo padrão no core

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 · Março 20, 2024, 5:28pm

Estou usando o theme creator para criar um novo componente de tema que deve usar wasm. Como ponto de partida, tentei fazer o upload do svgbob como um componente de tema. No entanto, não tenho permissão para fazer isso, pois ele contém um arquivo wasm.

Essa é uma limitação intencional do theme creator? Ou não se pode simplesmente instalar o svgbob como está?

sam · Março 20, 2024, 9:50pm

Suspeito que apenas tenhamos uma limitação no tipo de arquivo no criador de temas que precisa ser removida.

david · Março 20, 2024, 9:59pm

Eu redefini o themecreator para usar as ‘extensões autorizadas de tema’ padrão, que incluem WASM. Então deve funcionar agora @Heinenen.

(não tenho certeza por que estava em uma configuração não padrão… talvez no passado uma das extensões comuns estivesse faltando )

Heinenen · Março 20, 2024, 10:16pm

Sim, muito legal, posso confirmar que agora funciona. Obrigado!

Heinenen · Março 20, 2024, 10:24pm

Ok, parece que preciso voltar um pouco, não acho que esteja funcionando perfeitamente ainda.
Tentei fazer o upload do svgbob novamente e isso funcionou.

Depois de também tentar fazer o upload do meu próprio wasm-file, retirado do MDN, recebo o erro:
An error occurred: You supplied invalid parameters to the request: string contains null byte

No meu contêiner de desenvolvimento, isso não é um problema e posso fazer o upload do mesmo arquivo sem problemas.

hellekin · Março 21, 2024, 7:05pm

Não é a execução de um binário do site uma exposição de segurança que deve ser escolhida com cuidado? Esse pode ser um motivo pelo qual não era o padrão. O que você acha @Roman?

david · Março 21, 2024, 7:09pm

Ele é permitido em temas por padrão. Foi apenas a configuração do site em discourse.theme-creator.io que foi alterada. (esse é um site discourse comum, com um plugin que permite que qualquer pessoa carregue e compartilhe temas).

O WASM ainda é isolado pelo navegador, então a exposição de segurança é equivalente a um arquivo .js.

Tópico		Respostas	Visualizações
Defer loading JavaScript in Themes and Components Dev dev-news	4	1949	7 de Abril de 2022
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Dev	3	1889	13 de Janeiro de 2022
Issues on loading a js asset from a Theme Component Dev	19	841	28 de Setembro de 2023
Javascript assets in a theme component Dev	15	2064	7 de Maio de 2021
"theme-component" should be a subcategory instead of a tag Site feedback	16	1522	19 de Julho de 2022

Componentes de tema do Discourse agora suportam Wasm 🎊

Tópicos relacionados