Wie externe Bibliotheken in einer Komponentenhilfsdatei erforderlich sind

Entwickler
1

Ich schreibe eine Theme-Komponente und muss von einer Helper-Datei aus auf zwei externe Bibliotheken zugreifen. Mein aktueller Ansatz funktioniert, fühlt sich aber etwas umständlich an:

In meinem Initializer:

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

Dann in myHelper.js:

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

Ich habe versucht, die Bibliotheken direkt aus der Helper-Datei zu laden, aber das bedeutet, ich müsste ein Promise zurückgeben und dann im Initializer myHelper(whatever, d3, luxon).then(...) aufrufen, was ich aus anderen Gründen lieber vermeiden möchte.

Gibt es einen besseren Ansatz?

2

Du kannst den Ansatz verwenden, den ich unter GitHub - merefield/discourse-tc-tag-cloud: A Discourse Theme Component that displays a tag cloud above the tag lists on the tags page · GitHub verwende.

Beachte, dass die Assets hier registriert sind:

Und sie befinden sich im assets-Ordner.

4 „Gefällt mir“
3

Danke, Robert. Ich habe es versucht, aber es findet „theme_uploads

4

Nein, das solltest du nicht tun müssen.

Ich stelle fest, dass die Syntax weiterhin in der Spezifikation enthalten ist: discourse/spec/models/theme_spec.rb at c8f4f7c235ca38b39d4b66bf9e1305410e36815e · discourse/discourse · GitHub

1 „Gefällt mir“
5

Ah, mein Fehler. Ich hatte den falschen Dateinamen in den Assets. Ich habe es behoben, aber jetzt erhalte ich einen CSP-Fehler:

load-script.js:35 Das Laden des Skripts wurde verweigert 
'http://localhost:4200/uploads/default/original/1X/c4a31754250cf6a40f7cbed182cfe2456d9be9fe.js', da es gegen die folgende Content-Security-Policy-Richtlinie verstößt: 
"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". Beachten Sie, dass 'script-src-elem' nicht explizit festgelegt wurde, daher wird 'script-src' als Fallback verwendet.

Ich habe nicht gesehen, dass du extend_content_security_policy in settings.yml verwendest, daher weiß ich nicht, was mir fehlt.

1 „Gefällt mir“
6

Ich habe die URL des Upload-Verzeichnisses in jedem Fall zu meiner CSP-Quellen-Einstellung hinzugefügt. Aber ich könnte noch etwas hinzufügen, um es gezielter zu machen :+1:t2:

7

Ah, du meinst hier? Es funktioniert, wenn ich das tue:

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

Ich dachte, es gäbe eine Möglichkeit, dies in settings.yml zu tun, so:

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

(aber das scheint mit localhost nicht zu funktionieren).

1 „Gefällt mir“