Как подключить внешние библиотеки в файле компонента-хелпера?

Разработка
1

Я пишу компонент темы и мне нужно получить доступ к двум внешним библиотекам из вспомогательного файла. Мой текущий подход работает, но он кажется немного громоздким:

В моем инициализаторе:

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

А затем в myHelper.js:

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

Я пробовал подключать библиотеки напрямую из вспомогательного файла, но это означало бы, что мне пришлось бы возвращать промис и затем делать myHelper(whatever, d3, luxon).then(...) в инициализаторе, чего я бы предпочел не делать по другим причинам.

Есть ли более подходящий подход?

2

Вы можете использовать подход, который я применяю в GitHub - merefield/discourse-tc-tag-cloud: A Discourse Theme Component that displays a tag cloud above the tag lists on the tags page · GitHub

Обратите внимание, что активы зарегистрированы здесь:

И находятся в папке assets.

3

Спасибо, Роберт. Я попробовал, но «theme_uploads» не находится. Нужно ли мне настроить это в settings.yml?

4

Нет, вам не нужно этого делать.

Я заметил, что синтаксис всё ещё указан в спецификации: discourse/spec/models/theme_spec.rb at c8f4f7c235ca38b39d4b66bf9e1305410e36815e · discourse/discourse · GitHub

5

Ах, моя ошибка. У меня было неверное имя файла в assets. Я исправил это, но теперь получаю ошибку CSP:

load-script.js:35 Отказано в загрузке скрипта 
'http://localhost:4200/uploads/default/original/1X/c4a31754250cf6a40f7cbed182cfe2456d9be9fe.js', так как это нарушает следующую директиву 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". Обратите внимание, что 'script-src-elem' не был явно задан, поэтому в качестве запасного варианта используется 'script-src'.

Я не видел, чтобы вы использовали extend_content_security_policy в settings.yml, поэтому не знаю, чего мне не хватает.

6

В любом случае я добавил URL директории с загрузками в настройку src моего CSP. Но, возможно, стоит добавить что-то ещё, чтобы сделать это более точным :+1:t2:

7

О, вы имеете в виду здесь? Это работает, если я делаю так:

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

Я думал, что можно сделать это в settings.yml, вот так (но, похоже, это не работает с localhost):

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