¿Cómo utilizo imágenes de assets en HTML de un componente de tema basado en Glimmer?

Desarrollador
1

Include assets (e.g. images, fonts) in themes and components parece seguir refiriéndose a la forma Handlebars de hacer las cosas, si lo estoy entendiendo correctamente. ¿Ya está disponible la nueva forma Glimmer para hacer que las imágenes del directorio assets del componente de tema sean utilizables en un HTML(-template) del mismo componente de tema?

Mi caso de uso es reemplazar el componente de tema heredado ahora roto descrito en Templating of my "component" broke. How do I fix it?.

Lo que he intentado

He generado un nuevo proyecto de componente de tema con discourse_theme new discourse-tc-geowebforum-sponsors y luego intenté replicar el complemento anterior sin la lógica condicional y con una plantilla en línea, pero eso llevó 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:

en la consola del navegador.

También he probado varias combinaciones de:

  • sacar la plantilla a una constante
  • llaves rizadas simples (en lugar de dobles)
  • usar una llamada a función (themeRelativeUrl("asseco_berit.jpg")) dentro de las llaves rizadas
  • mover la plantilla a javascripts/discourse/components/geowebforum-sponsors.gjs (e importarla desde el inicializador)
  • mover la plantilla a javascripts/components/geowebforum-sponsors.gjs (e importarla desde el inicializador)
  • introducir una class GEOWebforumSponsorsComponent extends Component {} en ese archivo e importarla en el inicializador (mientras se exporta la plantilla desde el mismo archivo como la clase bajo el nombre template, como me había sugerido un LLM, todavía no estoy seguro de si eso tendría algún sentido).

Obtuve:

  • el mismo error (aunque desde ese otro archivo)
    o
  • klass is not an Ember component
    o
  • marcadores de posición de plantilla literales en el DOM resultante, lo que naturalmente conducía a 404 para las fuentes de imagen
2 Me gusta
Templating of my "component" broke. How do I fix it?
2

Hmm, ¿viste esta parte?

1 me gusta
3

¿Se considera una “subida” (upload) si los coloco en el directorio assets del proyecto de código fuente del componente temático?

4

Sí. Puedes ponerlos directamente en el directorio assets/.

1 me gusta
5

Con las pistas aquí y algo de ayuda del bot de ask.discourse.com he conseguido que funcione:

  • Aquí está el commit relevante sobre lo que generó la CLI de discourse_theme.
  • Aquí está la diferencia con mi intento anterior fallido mencionado en la publicación superior.

¡Gracias, @NateDhaliwal!

Puntos clave con los que tuve problemas en el camino:

  • En las plantillas, ni las expresiones JavaScript arbitrarias (como llamadas a funciones) ni las expresiones de filtro (de la forma alguna-funcion-de-transformacion algunaVariableOValorLiteral) funcionan entre las dobles llaves. Solo se pueden interpolar variables individuales allí.
  • Para uno de los dos recursos, olvidé incluir el nombre del directorio assets/ en el valor de la ruta del archivo correspondiente en about.json. Esto falló silenciosamente, lo que resultó en que la configuración correspondiente fuera undefined, lo que supongo que provocó que toda la plantilla se omitiera silenciosamente o algo así.
  • En un momento durante el desarrollo, el componente de tema sincronizado por discourse_theme watch ... no tuvo efecto, ya sea en la vista previa o activado explícitamente. Hacer que discourse_theme watch ... creara una nueva copia del componente en la instancia (y eliminar la copia anterior) rectificó eso. No estoy seguro de qué sucedió exactamente allí.
6

¿Revisaste la consola del navegador? Los errores en tu componente se reportan allí, y si hay errores, tu componente no se mostrará (o no se mostrará por completo).