Come richiedere librerie esterne in un file helper di componenti?

Sviluppatore
1

Sto scrivendo un componente del tema e ho bisogno di accedere a due librerie esterne da un file helper. Il mio approccio attuale funziona, ma mi sembra un po’ macchinoso:

Nel mio inizializzatore:

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}
  )
});

Poi in myHelper.js:

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

Ho provato a richiedere le librerie direttamente dal file helper, ma questo significherebbe dover restituire una promise e poi fare myHelper(whatever, d3, luxon).then(...) nell’inizializzatore, cosa che preferirei evitare per altri motivi.

Esiste un approccio migliore?

2

Puoi utilizzare l’approccio che uso in GitHub - merefield/discourse-tc-tag-cloud: A Discourse Theme Component that displays a tag cloud above the tag lists on the tags page · GitHub

Nota che le risorse sono registrate qui:

E si trovano nella cartella assets.

3

Grazie, Robert. Ci ho provato, ma non trova “theme_uploads”. È qualcosa che dovrei configurare in settings.yml?

4

No, non dovresti aver bisogno di farlo.

Ho notato che la sintassi è ancora presente nella specifica: discourse/spec/models/theme_spec.rb at c8f4f7c235ca38b39d4b66bf9e1305410e36815e · discourse/discourse · GitHub

5

Ah, scusa. Avevo il nome del file sbagliato in assets. L’ho corretto, ma ora ricevo un errore CSP:

load-script.js:35 Rifiutato il caricamento dello script
'http://localhost:4200/uploads/default/original/1X/c4a31754250cf6a40f7cbed182cfe2456d9be9fe.js' perché viola la seguente direttiva Content Security Policy:
"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". Nota che 'script-src-elem' non è stato impostato esplicitamente, quindi viene utilizzato 'script-src' come fallback.

Non ho visto che tu utilizzassi extend_content_security_policy in settings.yml, quindi non so cosa mi stia sfuggendo.

6

In ogni caso, ho aggiunto l’URL della directory di upload all’impostazione src della mia CSP. Ma potrei aggiungere qualcosa che la renderebbe più mirata :+1:t2:

7

Oh, intendi qui? Funziona se faccio così:

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

Pensavo ci fosse un modo per farlo in settings.yml, così (ma sembra non funzionare con localhost):

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