Como uso imagens de assets no HTML de um componente de tema baseado em Glimmer?

Dev
1

Include assets (e.g. images, fonts) in themes and components ainda parece se referir à maneira Handlebars de fazer as coisas, se estou entendendo corretamente. A nova maneira Glimmer já está disponível para tornar as imagens do diretório assets do componente de tema utilizáveis em um HTML(-template) do mesmo componente de tema?

Meu caso de uso é substituir o componente de tema legado agora quebrado descrito em Templating of my "component" broke. How do I fix it?.

O que eu tentei

Eu gerei um novo projeto de componente de tema com discourse_theme new discourse-tc-geowebforum-sponsors e então tentei replicar o plugin anterior sem a lógica condicional e com um template embutido, mas isso levou 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:

no console do navegador.

Eu também tentei várias combinações de:

  • retirar o template para uma constante
  • chaves curly simples (em vez de duplas)
  • usar uma chamada de função (themeRelativeUrl("asseco_berit.jpg")) dentro das chaves curly
  • mover o template para javascripts/discourse/components/geowebforum-sponsors.gjs (e importá-lo do inicializador)
  • mover o template para javascripts/components/geowebforum-sponsors.gjs (e importá-lo do inicializador)
  • introduzir uma class GEOWebforumSponsorsComponent extends Component {} nesse arquivo e importá-la no inicializador (enquanto exporta o template do mesmo arquivo como a classe sob o nome template, como um LLM havia me sugerido – ainda não tenho certeza se isso faria algum sentido.)

Eu obtive ou

  • o mesmo erro (embora daquele outro arquivo)
    ou
  • klass is not an Ember component
    ou
  • placeholders de template literais no DOM resultante, levando naturalmente a 404s nas fontes das imagens
2 curtidas
Templating of my "component" broke. How do I fix it?
2

Hmm, você viu esta parte?

1 curtida
3

Isso é um “upload” se eu os colocar no diretório assets do projeto do código-fonte do componente de tema?

4

Sim. Você pode colocá-los diretamente no diretório assets/.

1 curtida
5

Com as dicas aqui e alguma ajuda do bot do ask.discourse.com consegui fazer funcionar:

  • Aqui está o commit relevante sobre o que a CLI do discourse_theme gerou.
  • Aqui está a diferença da minha tentativa anterior sem sucesso mencionada na postagem superior.

Obrigado, @NateDhaliwal!

Coisas importantes com as quais lutei no caminho:

  • Nos templates, nem expressões JavaScript arbitrárias (como chamadas de função) nem expressões de filtro (do tipo alguma-funcao-de-transformacao algumaVariavelOuLiteral) funcionam nas chaves duplas. Apenas variáveis únicas podem ser interpoladas lá.
  • Para um dos dois assets, eu havia esquecido de incluir o nome do diretório assets/ no valor do caminho do arquivo correspondente em about.json. Isso falhou silenciosamente, resultando na configuração correspondente ser undefined, o que suponho que fez com que todo o template fosse omitido silenciosamente ou algo assim.
  • Em um momento durante o desenvolvimento, o componente de tema sincronizado por discourse_theme watch ... não teve efeito, seja na pré-visualização ou ativado explicitamente. Fazer o discourse_theme watch ... criar uma nova cópia do componente na instância (e excluir a cópia anterior) resolveu isso. Não tenho certeza exatamente o que aconteceu ali.
6

Você verificou o console do navegador? Erros no seu componente são reportados lá e, se houver erros, seu componente não aparecerá (ou aparecerá incompleto).