Comment exiger des bibliothèques externes dans un fichier d'aide de composant ?

Dev
1

Je suis en train d’écrire un composant de thème et j’ai besoin d’accéder à deux bibliothèques externes depuis un fichier d’aideur. Mon approche actuelle fonctionne, mais elle me semble un peu lourde :

Dans mon initialiseur :

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

Ensuite dans myHelper.js :

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

J’ai essayé d’importer les bibliothèques directement depuis le fichier d’aideur, mais cela signifierait que je devrais retourner une promesse et ensuite faire myHelper(whatever, d3, luxon).then(...) dans l’initialiseur, ce que je préférerais éviter pour d’autres raisons.

Y a-t-il une meilleure approche ?

2

Vous pouvez utiliser l’approche que j’utilise dans GitHub - merefield/discourse-tc-tag-cloud: A Discourse Theme Component that displays a tag cloud above the tag lists on the tags page · GitHub

Notez que les assets sont enregistrés ici :

Et se trouvent dans le dossier assets.

4 « J'aime »
3

Merci, Robert. J’ai essayé, mais il ne trouve pas « theme_uploads ». Est-ce quelque chose que je dois configurer dans settings.yml ?

4

Non, vous ne devriez pas avoir à faire cela.

Je constate que la syntaxe figure toujours dans la spécification : discourse/spec/models/theme_spec.rb at c8f4f7c235ca38b39d4b66bf9e1305410e36815e · discourse/discourse · GitHub

1 « J'aime »
5

Ah, désolé. J’avais le mauvais nom de fichier dans assets. Je l’ai corrigé, mais maintenant je rencontre une erreur CSP :

load-script.js:35 Refus de charger le script 
'http://localhost:4200/uploads/default/original/1X/c4a31754250cf6a40f7cbed182cfe2456d9be9fe.js' car cela viole la directive de politique de sécurité du contenu suivante : 
"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". Notez que 'script-src-elem' n'a pas été défini explicitement, donc 'script-src' est utilisé comme solution de repli.

Je n’ai pas vu que vous utilisiez extend_content_security_policy dans settings.yml, donc je ne sais pas ce qui me manque.

1 « J'aime »
6

J’ai ajouté l’URL du répertoire d’uploads à mon paramètre src de la CSP de toute façon. Mais je pourrais ajouter quelque chose qui rendrait cela plus ciblé :+1:t2:

7

Ah, vous voulez dire ici ? Cela fonctionne si je fais ceci :

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

Je pensais qu’il y avait un moyen de le faire dans settings.yml, comme ceci (mais cela ne semble pas fonctionner avec localhost) :

extend_content_security_policy:
  type: list
  default: "script_src: http://localhost:4200/"
1 « J'aime »