كيفية طلب مكتبات خارجية في ملف مساعد للمكون؟

مطور
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();
  ...
}

لقد حاولت استدعاء المكتبات مباشرة من ملف المساعد، لكن هذا يعني أنني سأضطر إلى إرجاع وعد (promise) ثم القيام بـ 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

لاحظ أن الأصول مسجّلة هنا:

وتوجد في مجلد الأصول.

4 إعجابات
3

شكرًا لك، روبرت. جربت الأمر لكنه لا يجد “theme_uploads”. هل هذا شيء يجب أن أقوم بإعداده في settings.yml؟

4

لا، لا يجب أن تحتاج إلى القيام بذلك.

ألاحظ أن بناء الجملة لا يزال موجودًا في المواصفات: discourse/spec/models/theme_spec.rb at c8f4f7c235ca38b39d4b66bf9e1305410e36815e · discourse/discourse · GitHub

إعجاب واحد (1)
5

آه، خطأ مني. كان اسم الملف خاطئًا في مجلد الأصول. لقد أصلحت المشكلة، لكنني الآن أحصل على خطأ CSP:

load-script.js:35 تم رفض تحميل السكربت 
'http://localhost:4200/uploads/default/original/1X/c4a31754250cf6a40f7cbed182cfe2456d9be9fe.js' لأنه ينتهك توجيه سياسة الأمان للمحتوى التالي: 
"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، لذا لا أعرف ما الذي ينقصني.

إعجاب واحد (1)
6

لقد أضفت عنوان URL لمجلد التحميلات إلى إعداد مصدر 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/"
إعجاب واحد (1)