Como exigir bibliotecas externas em um arquivo de helper de componente?

Dev
1

Estou escrevendo um componente de tema e preciso acessar duas bibliotecas externas a partir de um arquivo de helper. Minha abordagem atual funciona, mas parece um pouco desajeitada:

No meu inicializador:

import { apiInitializer } from 'discourse/lib/api';
import loadScript from 'discourse/lib/load-script';
import myHelper from '../lib/helper';

export default apiInitializer('0.11.1', (api) => {
  api.decorateCookedElement(
    (elem) => {
      loadScript(D3_URL).then(() => {
        loadScript(LUXON_URL).then(() => {
          ...
          myHelper(whatever, d3, luxon)
          ...
        })
      })
    },
    {id: 'discourse-xyz', onlyStream: true}
  )
});

E no myHelper.js:

export default function myHelper(whatever, d3, luxon) {
  d3();
  luxon();
  ...
}

Tentei importar as bibliotecas diretamente do arquivo do helper, mas isso significaria que eu teria que retornar uma promessa e depois fazer myHelper(whatever, d3, luxon).then(...) no inicializador, o que eu preferiria não fazer por outros motivos.

Existe uma abordagem melhor?

2

Você pode usar a abordagem que utilizo em GitHub - merefield/discourse-tc-tag-cloud: A Discourse Theme Component that displays a tag cloud above the tag lists on the tags page · GitHub

Observe que os ativos são registrados aqui:

E ficam na pasta de ativos.

4 curtidas
3

Obrigado, Robert. Tentei, mas não está encontrando “theme_uploads”. Isso é algo que devo configurar no settings.yml?

4

Não, você não deveria precisar fazer isso.

Notei que a sintaxe ainda está na especificação: discourse/spec/models/theme_spec.rb at c8f4f7c235ca38b39d4b66bf9e1305410e36815e · discourse/discourse · GitHub

1 curtida
5

Ah, meu erro. Eu tinha o nome de arquivo errado em assets. Já corrigi, mas agora estou recebendo um erro de CSP:

load-script.js:35 Recusa em carregar o script 
'http://localhost:4200/uploads/default/original/1X/c4a31754250cf6a40f7cbed182cfe2456d9be9fe.js' porque viola a seguinte diretiva de Política de Segurança de Conteúdo: 
"script-src http://localhost:4200/logs/ http://localhost:4200/sidekiq/ http://localhost:4200/mini-profiler-resources/ http://localhost:4200/assets/ http://localhost:4200/brotli_asset/ http://localhost:4200/extra-locales/ http://localhost:4200/highlight-js/ http://localhost:4200/javascripts/ http://localhost:4200/plugins/ http://localhost:4200/theme-javascripts/ http://localhost:4200/svg-sprite/ 
'unsafe-eval' http://localhost:4200/ember-cli-live-reload.js http://localhost:4200/_lr/ /uploads". Note que 'script-src-elem' não foi definido explicitamente, então 'script-src' é usado como fallback.

Não vi você usar um extend_content_security_policy em settings.yml, então não sei o que estou perdendo.

1 curtida
6

De qualquer forma, já adicionei a URL do diretório de uploads à minha configuração de src do CSP. Mas talvez eu possa adicionar algo que torne isso mais específico :+1:t2:

7

Ah, você quer dizer aqui? Funciona se eu fizer assim:

CleanShot 2021-07-03 at 12.17.17@2x
CleanShot 2021-07-03 at 12.17.17@2x2706×460 62.7 KB

Pensei que houvesse uma maneira de fazer isso no settings.yml, assim (mas parece que não funciona com localhost):

extend_content_security_policy:
  type: list
  default: "script_src: http://localhost:4200/"
1 curtida