Los componentes de tema de Discourse ahora soportan Wasm 🎊

sam · 7 Abril, 2022 06:05

WebAssembly (Wasm) es una tecnología que se incluye en todos los navegadores modernos y que permite a los desarrolladores distribuir programas binarios portátiles.

Esto significa que los desarrolladores pueden usar casi cualquier lenguaje de programación y tener como objetivo la web.

En el contexto de Discourse, esto abre la puerta a la distribución de un conjunto bastante rico de extensiones que en el pasado solo estaban disponibles para los creadores de plugins.

Los ejemplos podrían ser:

Marca de agua / redimensionamiento / recorte de imágenes
Generación de gráficos usando graphviz o svgbob
Entornos de programación aislados (por ejemplo: publicaciones que incrustan un tiempo de ejecución de Ruby)
y mucho más

En el pasado, debido a la Política de Seguridad de Contenido de Discourse, el acceso a Wasm se cerró excepto para instalaciones con cargas locales y sin CDN.

Se agregaron nuevas interfaces al lado del cliente para admitir la distribución de activos de JavaScript en un tema que son incondicionalmente accesibles a través del dominio local.

Esto permite a los desarrolladores de temas alojar Wasm de manera limpia, el flujo es:

componente → trabajador web local → Wasm alojado en CDN

Discourse svgbob es un ejemplo de extremo a extremo de los nuevos patrones, los 2 cambios clave son:

Todos los activos .js también están disponibles fuera de la CDN en el servidor local:

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

La URL del activo local es accesible a través de settings.theme_uploads_local

Entonces, en el ejemplo anterior:

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

merefield · 16 Abril, 2022 11:16

No está relacionado específicamente con wasm, pero encontré algo más interesante sobre este código, ¿es nuevo?

En tu ejemplo, ¿loadScript ya no es necesario? (Creo que la importación es 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;

¿y en su lugar el script del trabajador se carga JIT cuando se descubre que el trabajador no 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 la URL construida a partir de la referencia del activo.

¡Ese es un patrón agradable y muy útil!

Sin embargo, tengo una pregunta sobre los trabajadores.

Si usara un script de trabajador de terceros, y este contuviera declaraciones [importScripts()](https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts) para incluir scripts adicionales en el ámbito global del trabajador, ¿cómo incluyo esos scripts para importarlos dentro del componente del tema?

Podría estar preguntando: ¿cómo requerimos un script desde una URL dentro de un componente de tema de Discourse?

Falco · 16 Abril, 2022 14:28

Lo que hice en este escenario es usar un postMessage desde el script principal de JS con las URL a importar. Esto se recibe en el manejador de mensajes del worker que puede importScript las URL recibidas.

merefield · 16 Abril, 2022 14:30

¡Gracias Rafael! ¿Tienes un ejemplo de código abierto para referenciar?

Falco · 16 Abril, 2022 14:34

Usé este mismo patrón en el núcleo

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 Marzo, 2024 17:28

Estoy usando el creador de temas para crear un nuevo componente de tema que se supone que usa wasm. Como punto de partida, intenté subir svgbob como un componente de tema. Sin embargo, no se me permite hacerlo, porque contiene un archivo wasm.

¿Es esa una limitación intencionada del creador de temas? ¿O no se puede simplemente instalar svgbob tal cual?

sam · 20 Marzo, 2024 21:50

Sospecho que solo tenemos una limitación en el tipo de archivo en el creador de temas que necesita ser levantada.

david · 20 Marzo, 2024 21:59

Restablecí themecreator para usar las ‘extensiones autorizadas de temas’ predeterminadas, que incluyen WASM. Así que debería funcionar ahora @Heinenen.

(no estoy seguro de por qué estaba en una configuración no predeterminada… tal vez en el pasado faltaba una de las extensiones comunes )

Heinenen · 20 Marzo, 2024 22:16

Sí, muy bien, puedo confirmar que ahora funciona. ¡Gracias!

Heinenen · 20 Marzo, 2024 22:24

De acuerdo, parece que tengo que retroceder un poco, no creo que funcione perfectamente todavía.
Volví a intentar subir svgbob y eso funcionó.

Después de intentar también subir mi propio wasm-file, tomado de MDN, obtengo el error:
Ocurrió un error: Se suministraron parámetros inválidos a la solicitud: la cadena contiene un byte nulo

En mi contenedor de desarrollo, esto no es un problema y puedo subir el mismo archivo sin ningún problema.

hellekin · 21 Marzo, 2024 19:05

¿No es ejecutar un binario desde el sitio web una exposición de seguridad que debe elegirse con cuidado? Esa puede ser la razón por la que no era el valor predeterminado. ¿Qué opinas @Roman?

david · 21 Marzo, 2024 19:09

Está permitido en los temas por defecto. Es solo la configuración del sitio en discourse.theme-creator.io la que se ha cambiado. (ese es un sitio de discourse normal, con un plugin que permite a cualquiera subir y compartir temas).

WASM todavía está aislado por el navegador, por lo que la exposición de seguridad es equivalente a un archivo .js.

Tema		Respuestas	Vistas
Defer loading JavaScript in Themes and Components Dev dev-news	4	1949	7 Abril 2022
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Dev	3	1889	13 Enero 2022
Issues on loading a js asset from a Theme Component Dev	19	841	28 Septiembre 2023
Javascript assets in a theme component Dev	15	2064	7 Mayo 2021
"theme-component" should be a subcategory instead of a tag Site feedback	16	1522	19 Julio 2022

Los componentes de tema de Discourse ahora soportan Wasm 🎊

Temas relacionados