Comment utiliser des images depuis assets dans le HTML d'un composant de thème basé sur Glimmer ?

Dev
1

Include assets (e.g. images, fonts) in themes and components semble toujours se référer à la manière Handlebars de procéder, si je comprends bien. La nouvelle méthode Glimmer est-elle déjà disponible pour rendre utilisables les images du répertoire assets du composant de thème dans un HTML(-template) du même composant de thème ?

Mon cas d’utilisation est de remplacer le composant de thème hérité maintenant cassé décrit dans Templating of my "component" broke. How do I fix it?.

Ce que j'ai essayé

J’ai généré un nouveau projet de composant de thème avec discourse_theme new discourse-tc-geowebforum-sponsors puis j’ai essayé de répliquer le plugin précédent sans la logique conditionnelle et avec un template en ligne, mais cela a conduit à

[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:

dans la console du navigateur.

J’ai également essayé diverses combinaisons de :

  • extraire le template dans une constante
  • accolades simples (au lieu de doubles)
  • utiliser un appel de fonction (themeRelativeUrl("asseco_berit.jpg")) entre les accolades
  • déplacer le template vers javascripts/discourse/components/geowebforum-sponsors.gjs (et l’importer depuis l’initialiseur)
  • déplacer le template vers javascripts/components/geowebforum-sponsors.gjs (et l’importer depuis l’initialiseur)
  • introduire une class GEOWebforumSponsorsComponent extends Component {} dans ce fichier et l’importer dans l’initialiseur (tout en exportant le template du même fichier que la classe sous le nom template, comme un LLM me l’avait suggéré – je ne sais toujours pas si cela aurait un sens.)

J’ai obtenu soit

  • la même erreur (bien que provenant de cet autre fichier)
    soit
  • klass is not an Ember component
    soit
  • des espaces réservés de template littéraux dans le DOM résultant, entraînant naturellement des 404 pour les sources d’images
2 « J'aime »
Templating of my "component" broke. How do I fix it?
2

Hmm, as-tu vu ce passage ?

1 « J'aime »
3

Est-ce un « téléversement » si je les place dans le répertoire assets du projet de code source du composant de thème ?

4

Oui. Vous pouvez les placer directement dans le répertoire assets/.

1 « J'aime »
5

Avec les indices ici et une aide du bot ask.discourse.com, j’ai réussi à le faire fonctionner :

  • Voici le commit pertinent en plus de ce que le CLI discourse_theme a généré.
  • Voici la différence avec ma tentative infructueuse précédente mentionnée dans le message du haut.

Merci, @NateDhaliwal !

Points clés qui m’ont posé problème en cours de route :

  • Dans les modèles, ni les expressions JavaScript arbitraires (telles que les appels de fonction) ni les expressions de filtre (de la forme some-transormation-function someVariableOrLiteral) ne fonctionnent entre doubles accolades. Seules les variables uniques peuvent y être interpolées.
  • Pour l’un des deux actifs, j’avais oublié d’inclure le nom du répertoire assets/ dans la valeur du chemin de fichier correspondante dans about.json. Cela échouait silencieusement, ce qui faisait que le paramètre correspondant était undefined, ce qui, je suppose, a provoqué l’omission silencieuse du modèle entier ou quelque chose du genre.
  • À un moment donné pendant le développement, le composant de thème synchronisé par discourse_theme watch ... n’avait aucun effet, que ce soit en aperçu ou explicitement activé. Laisser discourse_theme watch ... créer une nouvelle copie du composant sur l’instance (et supprimer la copie précédente) a corrigé cela. Je ne sais pas exactement ce qui s’est passé là-bas.
6

Avez-vous vérifié la console du navigateur ? Les erreurs dans votre composant y sont signalées, et s’il y a des erreurs, votre composant ne s’affichera pas (ou ne s’affichera pas complètement).