I componenti del tema di Discourse ora supportano Wasm 🎊

WebAssembly (Wasm) è una tecnologia che viene distribuita in tutti i browser moderni e consente agli sviluppatori di distribuire programmi binari portatili.

Ciò significa che gli sviluppatori possono utilizzare quasi tutti i linguaggi di programmazione e avere come target il web.

Nel contesto di Discourse, ciò apre le porte alla distribuzione di un set piuttosto ricco di estensioni che in passato erano disponibili solo per i creatori di plugin.

Esempi potrebbero essere:

• Filigranatura / ridimensionamento / ritaglio di immagini
• Generazione di grafici utilizzando graphviz o svgbob
• Sandbox di programmazione (ad esempio: post che incorporano un runtime Ruby)
• e molto altro

In passato, a causa della Content Security Policy di Discourse, l’accesso a Wasm era bloccato, ad eccezione delle installazioni con caricamenti locali e senza CDN.

Sono state aggiunte nuove interfacce al lato client per supportare la distribuzione di asset JavaScript in un tema che sono raggiungibili incondizionatamente tramite dominio locale.

Ciò consente agli sviluppatori di temi di ospitare Wasm in modo pulito, il flusso è:

componente → worker web locale → Wasm ospitato su CDN

Discourse svgbob è un esempio end-to-end dei nuovi pattern, le 2 modifiche chiave sono:

1. Tutti gli asset .js sono resi disponibili anche fuori CDN sul server locale:

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

2. L’URL per l’asset locale è accessibile tramite settings.theme_uploads_local

Quindi nell’esempio sopra:

settings.theme_uploads_local.worker; // asset locale
settings.theme_uploads.worker; // asset cdn

Non è specificamente correlato a wasm, ma ho trovato qualcos’altro di interessante in questo codice, è nuovo?

Nel tuo esempio, loadScript non è più necessario? (Credo che l’importazione sia ridondante?):

e invece lo script worker viene caricato JIT quando si scopre che il worker non esiste?

utilizzando l’URL costruito dal riferimento all’asset.

Questo è un bel pattern e molto utile!

Tuttavia, ho una domanda sui worker.

Se utilizzassi uno script worker di terze parti, e questo contenesse istruzioni importScripts() per includere script aggiuntivi nell’ambito globale del worker, come includo questi script per importarli all’interno del componente del tema?

Potrei chiedere: come si richiede uno script da un URL all’interno di un componente del tema di Discourse?

In questo scenario, ho utilizzato un postMessage dallo script JS principale con gli URL da importare. Questo viene ricevuto nel gestore dei messaggi sul worker che può importScript gli URL ricevuti.

Grazie Rafael! Hai un esempio open source a cui fare riferimento?

Ho usato questo stesso pattern nel core

Sto usando il theme creator per creare un nuovo componente tema che dovrebbe usare wasm. Come punto di partenza, ho provato a caricare svgbob come componente tema. Tuttavia, non mi è permesso farlo, perché contiene un file wasm.

È una limitazione intenzionale del theme creator? O non si può semplicemente installare svgbob così com’è?

Sospetto che abbiamo solo una limitazione del tipo di file nel tema creator che deve essere rimossa.

Ho reimpostato themecreator per utilizzare le ‘estensioni autorizzate del tema’ predefinite, che includono WASM. Quindi dovrebbe funzionare ora @Heinenen.

(non sono sicuro del perché fosse su un’impostazione non predefinita… forse in passato mancava una delle estensioni comuni )

Sì, molto bello, posso confermare che ora funziona. Grazie!

Ok, sembra che debba fare un passo indietro, non credo che funzioni ancora perfettamente.
Ho provato di nuovo a caricare svgbob e ha funzionato.

Dopo aver provato anche a caricare il mio wasm-file, preso da MDN, ottengo l’errore:
Si è verificato un errore: Sono stati forniti parametri non validi alla richiesta: la stringa contiene un byte nullo

Sul mio dev container, questo non è un problema e posso caricare lo stesso file senza problemi.

Non è l’esecuzione di un binario dal sito web un’esposizione alla sicurezza che dovrebbe essere scelta con cura? Questo potrebbe essere il motivo per cui non era l’impostazione predefinita. Cosa ne pensi @Roman?

È consentito nei temi per impostazione predefinita. È solo l’impostazione del sito su discourse.theme-creator.io che è stata modificata. (quello è un normale sito discourse, con un plugin che consente a chiunque di caricare e condividere temi).

WASM è ancora isolato dal browser, quindi l’esposizione alla sicurezza è equivalente a un file .js.