Come utilizzo le immagini dalle risorse (assets) nell'HTML di un componente tema basato su Glimmer?

Sviluppatore
1

Include assets (e.g. images, fonts) in themes and components sembra fare ancora riferimento al modo Handlebars di fare le cose, se ho capito bene. Il nuovo modo Glimmer è già disponibile per rendere utilizzabili le immagini dalla directory assets del componente tema in un HTML(-template) dello stesso componente tema?

Il mio caso d’uso è sostituire il componente tema legacy ora non funzionante descritto in Templating of my "component" broke. How do I fix it?.

Cosa ho provato

Ho generato un nuovo progetto di componente tema con discourse_theme new discourse-tc-geowebforum-sponsors e poi ho provato a replicare il plugin precedente senza la logica condizionale e con un template inline, ma ciò ha portato a

[THEME 6 'geowebforum-sponsors'] Error: [THEME 6 'geowebforum-sponsors'] Compile error: SyntaxError: /theme-6/discourse/api-initializers/geowebforum-sponsors.gjs: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-relative-url:

nella console del browser.

Ho anche provato varie combinazioni di:

  • estrarre il template in una costante
  • doppie parentesi graffe singole (invece di)
  • usare una chiamata di funzione (themeRelativeUrl("asseco_berit.jpg")) all’interno delle parentesi graffe
  • spostare il template in javascripts/discourse/components/geowebforum-sponsors.gjs (e importarlo dall’initializer)
  • spostare il template in javascripts/components/geowebforum-sponsors.gjs (e importarlo dall’initializer)
  • introdurre una class GEOWebforumSponsorsComponent extends Component {} in quel file e importarla nell’initializer (esportando contemporaneamente il template dallo stesso file come classe sotto il nome template, come un LLM mi aveva suggerito – sono ancora incerto se avrebbe avuto senso.)

Ho ottenuto o

  • lo stesso errore (sebbene da quell’altro file)
    o
  • klass is not an Ember component
    o
  • segnaposto di template letterali nel DOM risultante, che naturalmente portano a 404 per le sorgenti delle immagini
2 Mi Piace
Templating of my "component" broke. How do I fix it?
2

Hmm, hai visto questo passaggio?

1 Mi Piace
3

È un “upload” se li inserisco nella directory assets del progetto del codice sorgente del componente tema?

4

Sì. Puoi metterli direttamente nella directory assets/.

1 Mi Piace
5

Con gli spunti qui e un po’ di aiuto dal bot di ask.discourse.com sono riuscito a farlo funzionare:

  • Ecco il commit rilevante in aggiunta a ciò che è stato generato dalla CLI di discourse_theme.
  • Ecco la differenza al mio precedente tentativo fallito menzionato nel post iniziale.

Grazie, @NateDhaliwal!

Cose che mi hanno dato filo da torcere lungo il percorso:

  • Nei template, né le espressioni JavaScript arbitrarie (come le chiamate di funzione) né le espressioni filtro (del tipo some-transormation-function someVariableOrLiteral) funzionano nelle doppie parentesi graffe. Solo le singole variabili possono essere interpolate lì.
  • Per uno dei due asset, avevo dimenticato di includere il nome della directory assets/ nel corrispondente valore del percorso del file in about.json. Questo non ha dato errori, facendo sì che l’impostazione corrispondente fosse undefined, il che immagino abbia causato l’omissione silenziosa dell’intero template o qualcosa del genere.
  • A un certo punto durante lo sviluppo, il componente tema sincronizzato da discourse_theme watch ... non ha avuto alcun effetto, né in anteprima né se attivato esplicitamente. Far sì che discourse_theme watch ... creasse una nuova copia del componente sull’istanza (e cancellando la copia precedente) ha risolto il problema. Non sono sicuro di cosa sia successo esattamente in quel momento.
6

Hai controllato la console del browser? Gli errori nel tuo componente vengono segnalati lì e, in caso di errori, il tuo componente non verrà visualizzato (o verrà visualizzato in modo incompleto).