Javascript in un componente del tema

Hubbe · 4 Maggio 2021, 8:19am

Sto cercando di costruire un componente del tema per l’anteprima di file STL. Esiste un’ottima libreria JavaScript per questo scopo, ma non sono sicuro di come farla funzionare all’interno di un componente del tema.

Si tratta di JavaScript standard, non ES6, il che significa che non posso semplicemente inserirlo nella directory “javascripts” e importarlo, giusto? Inoltre, sembra che la libreria dipenda dall’importazione tramite un tag script.

Quindi potrei creare un tag script e aggiungerlo all’intestazione del documento, ma come faccio a trovare il nome del file JS della libreria? Inoltre, la libreria è composta da diversi file JS e presuppone che tali file siano disponibili nella stessa directory. Procede poi a creare tag script aggiuntivi per caricare il resto della libreria.

Quindi, questi file dovrebbero andare nella directory “javascripts”? O dovrebbero essere trattati come asset? La cosa più simile che riesco a trovare per fare qualcosa di analogo è il plugin discourse-math, ma se possibile preferirei mantenere tutto come componente del tema.

Hubbe · 4 Maggio 2021, 11:14pm

Sembra che questo mostri come farlo per un plugin: How to ship javascript library with plugin?
Non ho ancora trovato nulla per un componente del tema.

pfaffman · 5 Maggio 2021, 2:25am

Non lo so, ma non hai risposte valide!

La prossima cosa da esaminare è la… cosa… relativa all’inclusione di altri file nel componente del tema.

Penso che alcuni dei principali componenti del tema siano il punto di partenza. Fondamentalmente, credo che la struttura dei file del componente del tema sia la stessa e che Ember carichi semplicemente quei file del tema allo stesso modo di un plugin.

Hubbe · 5 Maggio 2021, 2:29am

Non credo, ogni componente ha la propria directory virtuale, credo. Qualcosa come discourse/theme-10/… Quindi, per caricare contenuti da lì, devo almeno sapere in qualche modo qual è la directory.

Hubbe · 5 Maggio 2021, 2:52am

I nomi delle risorse sembrano essere accessibili solo come variabili, e i nomi reali sono lunghi numeri complicati, quindi nemmeno questo funzionerà.
Sembra quasi che al momento non ci sia un modo per farlo come componente, quindi per ora caricherò i file JS tramite nginx e vi accederò in questo modo. Probabilmente significa che, purtroppo, questo componente funzionerà solo per me.

Falco · 5 Maggio 2021, 3:49am

Puoi aggiungere il tag script normale al file header.html all’interno del componente del tuo tema.

Hubbe · 5 Maggio 2021, 3:53am

Il sideloading funziona!
Una volta sola.

Se navigo verso un altro argomento e poi torno a quello contenente l’STL, non funziona più. Non sono sicuro del motivo, poiché nella console di JavaScript non compare alcun errore. Ho visto da qualche parte in precedenza un thread che parlava di stranezze legate all’onload e, dato che questi script utilizzano onload, potrebbe essere correlato?

Hubbe · 5 Maggio 2021, 3:58am

Vero, ma il codice viewstl non è destinato a essere incorporato.
Con il sideloading ho inserito un tag script come questo in common/head_tag.html:

<script src="/xi/viewstl/stl_viewer.min.js"></script>

(/xi/ è servito da nginx)

Falco · 5 Maggio 2021, 3:59am

Discourse è una SPA. Non puoi semplicemente aggiungere uno script con onLoad, poiché non funzionerà. Dovrai collegarti ai nostri endpoint API. Consulta la Guida per gli sviluppatori sui temi di Discourse.

Hubbe · 5 Maggio 2021, 4:58am

Va bene allora, ci provo a sostituire il caricamento basato su script tag datato con qualcosa di diverso.

Hubbe · 6 Maggio 2021, 3:07am

Ho letto questa pagina diverse volte, ma non riesco ancora a farla funzionare.
Sto cercando di caricare three.js con le istruzioni import, ma sembra che, indipendentemente da ciò che faccio, lamenti di non riuscire a trovare l’import. La parte strana è che riesco a importare altri file senza problemi, e il messaggio di errore è completamente inutile.

Comunque, ecco cosa ottengo, forse qualcuno può aiutare:

Ecco l’import che non funziona:

github.com/profezzorn/discourse-stl-previews

javascripts/discourse/stlviewer/StlViewer.js

20239810b


      
          * portions of the Software.
          *
          * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
          * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
          * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
          * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
          * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
          * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
          */
          
          import * as THREE from '../three/build/three.module';
          import { STLLoader } from '../three/examples/jsm/loaders/STLLoader';
          import { OrbitControls } from '../three/examples/jsm/controls/OrbitControls';
          
          export default class StlViewer {
           constructor(stl, element) {
             this.camera = new THREE.PerspectiveCamera(70, element.clientWidth / element.clientHeight, 1, 1000);
          
             this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
             this.renderer.setSize(element.clientWidth, element.clientHeight);
             element.appendChild(this.renderer.domElement);

E questo è l’errore che ricevo:

_application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74333 Si è verificato un errore nel tema/componente "STL previews": Errore: Impossibile trovare il modulo `discourse/theme-17/three/build/three.module` importato da `discourse/theme-17/stlviewer/StlViewer`
    at h (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74612)
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74581
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74665
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74490
    at require (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74663)
    at h (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74616)
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74581
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74665
    at _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74490
    at require (_ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:74663)
(anonymous) @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74333
u @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74325
initialize @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:74304
i.initialize @ _application-547e0be66174ffd22a4d74fd8b568f6a3892a266cff18cb078c08d6357227acb.js:7723
(anonymous) @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:49335
e.each @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67724
e.walk @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67638
e.each @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67568
e.topsort @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67576
_runInitializer @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:49361
runInitializers @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:49333
_bootSync @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:47768
domReady @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:47668
n._run @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67275
n._join @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:67251
n.join @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:66968
f @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:53760
(anonymous) @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:53864
l @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3776
c @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3844
setTimeout (async)
(anonymous) @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3882
u @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3510
fireWith @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3640
fire @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3648
u @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3510
fireWith @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:3640
ready @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:4120
z @ _ember_jquery-36a23101c869ab0dc53fc908de69adb785731593573d32bdeef416acc1076ef4.js:4130

Il ‘.’ è un separatore di modulo magico o qualcosa del genere?

Hubbe · 6 Maggio 2021, 3:40am

Immagino che ‘.’ sia magico, perché quando rinomino three.module.js in three_module.js, ottengo un problema completamente diverso: non riesco più a caricare il tema. (Errore 500)

Hubbe · 6 Maggio 2021, 3:46am

Ho anche provato a importare three.js direttamente da un CDN con un URL completo, ma sembra che non funzioni nemmeno…

merefield · 6 Maggio 2021, 7:19am

Se hai solo bisogno del caricamento Just In Time di una risorsa JavaScript, come nel mio caso dove richiedo la libreria D3, puoi utilizzare questo pattern con Loadscript:

github.com/merefield/discourse-tc-tag-cloud

javascripts/discourse/components/tagcloudvis.js.es6

91943c7fd


      
          this.words.sort(compare);
          
          this.words.map((word) => {
            word.size = Math.log(word.count + 1.75) * 30;
            word.href = `/tag/${word.text}`;
            return word;
          });
          
          var _this = this;
          
          this.ensureD3().then(() => {
            var layout = d3.layout
              .cloud()
              .size([settings.tag_cloud_width, settings.tag_cloud_height])
              .words(_this.words)
              .padding(5)
              .rotate(function () {
                return 0;
              })
              .font("Impact")
              .fontSize(function (d) {

e poco sopra:

github.com/merefield/discourse-tc-tag-cloud

javascripts/discourse/components/tagcloudvis.js.es6

91943c7fd


      
          import loadScript from "discourse/lib/load-script";
          import DiscourseURL from "discourse/lib/url";
          
          export default Ember.Component.extend({
            classNames: "tag-cloud-vis",
            words: Ember.computed.alias("model.content"),
          
            ensureD3() {
              return loadScript(settings.theme_uploads.d3Lib).then(() => {
                return loadScript(settings.theme_uploads.d3Cloud);
              });
            },
          
            didInsertElement() {
              if (!this.site.mobileView) {
                this.setup();
              }
            },

Loadscript restituisce una Promise, quindi devi eseguire un .then sul risultato. (Non ne sono certo, ma suppongo che il risultato sia memorizzato nella cache in modo implicito, quindi verrà eseguito più velocemente la seconda volta, ecc.)

Come puoi vedere, puoi concatenarli per caricare più script uno dopo l’altro.

Nota che viene eseguito all’interno di un componente Ember e viene attivato dal hook didInsertElement. Per saperne di più sui componenti Ember, visita: Templates are HTML - Components - Ember Guides

Nota anche che gli script stessi sono ospitati nella directory javascripts/assets.

Ho basato questo sul codice di @j.jaffeux utilizzato da qualche parte per caricare uno script completamente diverso (grazie Joffrey! )

Ecco un esempio Discourse:

github.com/discourse/discourse-math

assets/javascripts/initializers/discourse-math-katex.js.es6

6801b3a48


      
          }
          
          function katex($elem) {
            if (!$elem || !$elem.find) {
              return;
            }
          
            const mathElems = $elem.find(".math");
          
            if (mathElems.length > 0) {
              ensureKaTeX().then(() => {
                mathElems.each((idx, elem) => decorate(elem));
              });
            }
          }
          
          function initializeMath(api) {
            api.decorateCooked(
              function (elem) {
                katex(elem);
              },

Consiglio: esplora sempre i TC Ufficiali e Pavilion e i plugin che fanno qualcosa di simile per vedere come realizzano le cose :).

Hubbe · 6 Maggio 2021, 4:55pm

Interessante, grazie per i suggerimenti.
Proverò a usare loadScript e vedrò se può risolvere il mio problema.

Hubbe · 7 Maggio 2021, 3:22am

Ho deciso di provare un approccio più semplice.
Ho creato un iframe che carica una pagina HTML in grado di eseguire tutte le operazioni di scripting più complesse per far funzionare l’anteprima. Al momento non è in un formato riutilizzabile, ma sarebbe relativamente semplice creare un plugin per essa.

Argomento		Risposte	Visualizzazioni
Issues on loading a js asset from a Theme Component Development	19	876	Settembre 28, 2023
Defer loading JavaScript in Themes and Components Development dev-news	4	1976	Aprile 7, 2022
Question about web app loading Support	2	90	Aprile 25, 2025
Need help with theme component Github Development	7	169	Settembre 17, 2024
When to switch themes/plugins to `.gjs`? Development	27	521	Gennaio 5, 2026

Javascript in un componente del tema

Argomenti correlati