컴포넌트 헬퍼 파일에서 외부 라이브러리를 어떻게 요구하나요?

개발
1

테마 컴포넌트를 작성 중인데, 헬퍼 파일에서 외부 라이브러리 두 개에 접근해야 합니다. 현재 방식은 동작하지만, 약간 어색하게 느껴집니다:

초기화 파일(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}
  )
});

그리고 myHelper.js에서:

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

헬퍼 파일에서 라이브러리를 직접 require해 보았지만, 그러면 프로미스를 반환하고 초기화 파일에서 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 에서 제가 사용하는 방식을 참고하실 수 있습니다.

에셋은 아래에서 등록됩니다:

그리고 에셋 폴더에 위치합니다.

3

로버트님, 감사합니다. 시도해 보았지만 "theme_uploads"를 찾지 못합니다. 이 부분은 settings.yml에서 설정해야 하나요?

4

아니요, 그렇게 할 필요는 없습니다.

문법(구문)이 여전히 스펙에 포함되어 있음을 확인했습니다: discourse/spec/models/theme_spec.rb at c8f4f7c235ca38b39d4b66bf9e1305410e36815e · discourse/discourse · GitHub

5

아, 제 실수였습니다. assets에 파일명이 잘못 들어가 있었습니다. 수정은 했는데, 이제 CSP 오류가 발생하고 있습니다:

load-script.js:35 Refused to load the script 
'http://localhost:4200/uploads/default/original/1X/c4a31754250cf6a40f7cbed182cfe2456d9be9fe.js' because it violates the following Content Security Policy directive: 
"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 that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

settings.yml에서 extend_content_security_policy를 사용하시는 것을 보지 못해서, 제가 무엇을 놓치고 있는지 모르겠습니다.

6

어쨌든 업로드 디렉터리 URL을 CSP src 설정에 추가해 두었습니다. 하지만 더 정밀하게 적용할 수 있도록 이 방법을 추가할 수도 있습니다 :+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/"