# مشاكل في تحميل ملف JS من مكون سمة
**URL:** https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792
**Category:** Development
**Created:** [22 سبتمبر 2023، 1:39م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792 "2023-09-22T13:39:14Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [22 سبتمبر 2023، 1:39م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/1 "2023-09-22T13:39:14Z")
مرحباً، هذه أول مرة أقوم فيها بالتطوير على Discourse، لذا أعتذر عن الأسئلة الساذجة.
أقوم ببناء مكون سمة لعرض PGNs (لوحة الشطرنج والمباريات).
المكون ليس صعبًا من الناحية النظرية، هناك مكون جافاسكريبت لهذا (PGNViewer.js) وتمكنت من ترجمة علامات `[wrap]` إلى `\u003cscript\u003evar x='pgn here'; ...\u003c/script\u003e` و `\u003cdiv class='pgn-blahblah'\u003e\u003c/div\u003e` المناسبة.
حتى الآن كل شيء جيد، ولكن الآن أحتاج إلى تحميل جافاسكريبت.
وجدت أنه يمكنني استخدام `import loadScript from \"discourse/lib/load-script\";` و `await loadScript(settings.theme_uploads_local.pgnviewer_js);` لتحميله في وقت التهيئة من دليل `/assets/`.
ولكن لدي بعض المشاكل هنا.
على الرغم من أنني تمكنت من تحميل المكون على التثبيت التجريبي، إلا أنني لا أستطيع على خادمي الإنتاجي، لأنه يقول إن الأصل كبير جدًا. هل هناك طريقة لإصلاح هذا؟
ثانيًا، في التثبيت التجريبي، أرى تحذيرًا يفيد بأنه لم يتمكن من تحميل `/theme-javascripts/dist.js.map`. ليس لدي أي فكرة من أين يأتي. هل هناك شيء يجب أن أقدمه؟
بشكل عام، هل هذا النهج صحيح، أم سيكون من الأفضل تنفيذ إضافة بدلاً من ذلك؟
شكرًا
مع خالص التقدير
FF
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [22 سبتمبر 2023، 1:53م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/2 "2023-09-22T13:53:19Z")
مرحبًا بك في Meta، @happycactus 👋
> [@happycactus](#):
>
> بشكل عام، هل هذا النهج صحيح، أم سيكون من الأفضل تنفيذ إضافة بدلاً من ذلك؟
نعم، ربما. السبب الوحيد الذي قد تحتاج فيه إلى إضافة هو إذا كنت تحاول تغيير واجهة برمجة التطبيقات (أي الواجهة الخلفية).
> [@happycactus](#):
>
> لا يمكنني فعل ذلك على خادم الإنتاج الخاص بي، لأنه يقول إن الأصل كبير جدًا. هل هناك طريقة لإصلاح هذا؟
لقد واجهت مشكلة مماثلة في الماضي.
نعم، تحتاج إلى تغيير `app.yml` للسماح بمرور الملفات الكبيرة عبر الوكيل العكسي (nginx).
لحسن الحظ، هذا إعداد بسيط، `upload_size:`، هنا في السياق:
```plaintext
params:
## ما هو إصدار Git الذي يجب أن تستخدمه هذه الحاوية؟ (الافتراضي: tests-passed)
version: tests-passed
## الحد الأقصى لحجم التحميل (الافتراضي: 10m)
upload_size: 20m
```
بمجرد تغيير هذا، ستحتاج إلى إعادة البناء ليصبح ساري المفعول:
`./launcher rebuild app`
بالطبع، هذا يفترض أن لديك وصولاً مناسبًا إلى الخادم …
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [22 سبتمبر 2023، 3:35م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/3 "2023-09-22T15:35:15Z")
شكرا لك يا روبرت!
أنا في حيرة، ربما بسبب افتقاري للخبرة في مثل هذه المنصات.
حيرتي هي:
نهجي هو “تضمين” مقتطف صغير من جافاسكريبت اللازم لملء كتلة div بالمحتوى، ولكني أرى أنه ربما يمكنني تنفيذه من دالة “cookPgn”، كما هو الحال في [مكون marmaid](https://github.com/discourse/discourse-mermaid-theme-component/blob/main/javascripts/discourse/api-initializers/discourse-mermaid-theme-component.js):
```js
async function applyMermaid(element, key = "composer") {
const mermaids = element.querySelectorAll("pre[data-code-wrap=mermaid]");
...
await loadScript(settings.theme_uploads_local.mermaid_js);
...
mermaids.forEach((mermaid) => {
if (mermaid.dataset.processed) {
return;
}
const spinner = document.createElement("div");
spinner.classList.add("spinner");
...
mermaid.append(spinner);
});
```
بهذه الطريقة، إذا فهمت بشكل صحيح، لا أحتاج إلى تحميل البرنامج النصي من الصفحة (باستخدام loadScript ربما؟!) ولكني أستطيع استيراده ببساطة في سمة js؟ أو من المحتمل أن أكون مضللاً تمامًا!
أعني، ما الفرق بين loadScript والاستيراد البسيط؟
هل يمكنك توجيهي إلى بعض المصادر على الويب حيث يمكنني فهم هذا بشكل أفضل؟
أعتذر مرة أخرى إذا كانت الأسئلة تافهة أو غبية!
شيء آخر، الحد الافتراضي هو 10 ميجابايت، ولكن أصلي حوالي 300 كيلوبايت، والمجلد المضغوط بأكمله هو 337 كيلوبايت، ومع ذلك أثناء التحميل يقول إنه أكبر من 512 كيلوبايت.
شكرا،
FF
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [22 سبتمبر 2023، 3:47م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/4 "2023-09-22T15:47:02Z")
> [@happycactus](#):
>
> ما هو الفرق بين loadScript و import بسيط؟
هل جربت استيراد؟ لا أعتقد أنه يمكنك استيراد نص خارجي.
Loadscript هو النهج الصحيح ويضمن تحميل النص بالكامل قبل أن يستمر الكود الخاص بك ويستخدمه (هذا هو السبب في أنه يُرجع وعدًا).
> [@happycactus](#):
>
> شيء آخر، الحد الافتراضي هو 10 ميجابايت، ولكن أصلي حوالي 300 كيلوبايت، والملف المضغوط بالكامل هو 337 كيلوبايت، ومع ذلك أثناء التحميل يقول إنه أكثر من 512 كيلوبايت.
هل يمكنك مشاركة الخطأ بالضبط - هل هذا في وحدة تحكم المتصفح؟
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [22 سبتمبر 2023، 4:10م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/5 "2023-09-22T16:10:07Z")
مش
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [22 سبتمبر 2023، 4:59م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/6 "2023-09-22T16:59:55Z")
ألقِ نظرة على [مكون Discourse Mermaid](https://meta.discourse.org/t/discourse-mermaid/218242)، الذي يقوم بتحميل مكتبة ويحدث أشياء للمنشورات.
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [23 سبتمبر 2023، 9:15ص UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/7 "2023-09-23T09:15:23Z")
> [@Falco](#):
>
> مشكلتك الفعلية هي محاولة استخدام JS المضمن، وهو محظور بواسطة CSP.
شكرًا لك، @Falco، كان هذا أحد شكوكي.
> [@Falco](#):
>
> قم بتحميل السمة الحالية الخاصة بك إلى GitHub ويمكننا إلقاء نظرة أيضًا.
بالتأكيد، ها هي: [GitHub - studiofuga/discourse-pgn-component: A theme component for Discourse to display PGN blocks](https://github.com/studiofuga/discourse-pgn-component)
يوجد أيضًا إصدار مكون إضافي، لكنني أعتقد أنني لن أتبع هذا النهج وسأبقى مع مكون السمة.
> [@pfaffman](#):
>
> ألقِ نظرة على مكون [Discourse Mermaid](https://meta.discourse.org/t/discourse-mermaid/218242)
شكرًا @pfaffman، في الواقع استلهمت منه، ولاحظت أنه يفعل بالضبط ما أحتاجه وبالطريقة الصحيحة، دون حقن الكود كما هو مقترح أعلاه.
شكرًا للجميع، سأجرب اقتراحاتكم وسأعود بالنتائج. بالطبع، الكود الخاص بي مفتوح المصدر، لذا فإن أي مساهمة أو نقد مرحب به للغاية.
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [23 سبتمبر 2023، 9:35ص UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/8 "2023-09-23T09:35:15Z")
> [@merefield](#):
>
> > [@happy cactus](#):
> >
> > لا يمكنني فعل ذلك على خادم الإنتاج الخاص بي، لأنه يقول إن الأصل كبير جدًا. هل هناك طريقة لإصلاح ذلك؟
>
> لقد واجهت مشكلة مماثلة في الماضي.
خطأي، لقد نسيت أنني قمت بتحديد حجم المرفق إلى 512 كيلوبايت، ورفعته إلى الإعداد الافتراضي (4096) وعمل بشكل جيد. شكرًا لك، وأعتذر عن سؤالي الغبي.
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [23 سبتمبر 2023، 2:47م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/9 "2023-09-23T14:47:05Z")
حسناً، لقد قمت بإصلاح كل شيء ويعمل المكون! لكن لدينا مشكلة، وهي “تقييم غير آمن” في المكتبة التي أستخدمها. أعتقد أنه يجب علي إصلاح المكتبة الأصلية، ليس لدي أي فكرة عن كيفية حزمها.
لمن يهتم، لقد دفعت كل تغييراتي في المستودع الخاص بي أعلاه، وهذه هي تفاصيل الخطأ.
والسطر هو هذا (في الوحدة النمطية الأصلية لجافاسكريبت)
```js
let isBrowser=new Function("try {return this===window;}catch(e){ return false;}")
```
[هنا](https://github.com/mliebelt/PgnViewerJS/blob/main/modules/pgn-reader/src/pgn.ts#L14C33-L14C33).
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [23 سبتمبر 2023، 4:01م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/10 "2023-09-23T16:01:43Z")
يواجه البرنامج النصي الخاص بك مشكلة مع سياسة أمان المحتوى في بيئة الإنتاج.
تحتاج إلى إضافة `'unsafe-eval'` كبند في إعداد الموقع: `content security policy script src`
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [23 سبتمبر 2023، 4:06م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/11 "2023-09-23T16:06:46Z")
شكراً لك، أنا أتصفح الوثائق لمعرفة كيفية القيام بذلك. 🙂 أنا أتعلم الكثير، شكراً لك
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [23 سبتمبر 2023، 4:30م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/12 "2023-09-23T16:30:56Z")
> [@merefield](#):
>
> unsafe-eval
حسنًا، لقد فعلت ذلك، فقط احتجت إلى استخدام ’ … هههه … على أي حال، لقد نجح برنامجي النصي تقريبًا، لقد دفعت كل شيء إلى الواجهة الرئيسية ونجح الأمر بطريقة ما، يبدو أن لدي مشكلة في التصيير ولكن على الأقل تم استدعاء المكون الرئيسي (أشك في أن المشكلة تكمن هناك).
شكرًا للجميع… سأعود قريبًا بمزيد من الأسئلة هههه. شكرًا!
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [23 سبتمبر 2023، 6:27م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/13 "2023-09-23T18:27:59Z")
مع الأخذ في الاعتبار أن إضافة `unsafe-eval` إلى سياسة أمان المحتوى (CSP) الخاصة بك تزيل بشكل أساسي الغرض الكامل من CSP وتجعل موقعك أقل أمانًا نتيجة لذلك.
يعد استخدام eval رائحة كود، ويجب إصلاحه في المنبع كما أشرت أعلاه.
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [23 سبتمبر 2023، 7:42م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/14 "2023-09-23T19:42:14Z")
نعم، بالتأكيد. أنا غير قادر على إصلاحه في الوقت الحالي، لكن خطتي هي إصلاح المكون الخاص بي أولاً، ثم إصلاح المكتبة الأصلية وإزالة تجاوز CSP.\nشكراً على النصيحة!
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [25 سبتمبر 2023، 1:41م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/15 "2023-09-25T13:41:43Z")
أنا على وشك الانتهاء. تمكنت من عرض “شيء ما” ولكنه يعمل بشكل عشوائي.
تعمل مكتبة جافا سكريبت التي أستخدمها بهذه الطريقة:
أولاً، نحتاج إلى تعريف كتلة `` بمعرف فريد. ثم نحتاج إلى تشغيل دالة لملء div، شيء مثل هذا. `PGNV.pgnBoard('board', {});`. يتطلب البرنامج النصي نفس المعرف لملئه.
إذا فهمت بشكل صحيح، لا يمكنني القيام بذلك أثناء تزيين الكتلة المطبوخة، لأن المستند لم يتم ملؤه بعد ويكون كائن PGNV غير قادر على العثور على الكتلة. لذلك استخدمت أولاً أداة (لا تعمل، لأن دالة HTML يجب أن تُرجع الكتلة، وليس لديّ)، ثم تحولت إلى دالة مُخفّضة: `debounceFunction(this, renderPgn, attrs, 200);`.
لكنه يعمل “أحيانًا”.
ما الذي أفوت؟
شكرا
---
### Author:  [@hawm](https://meta.discourse.org/u/hawm)
#### Post date: [26 سبتمبر 2023، 12:22م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/16 "2023-09-26T12:22:31Z")
`debounceFunction` يؤخر استدعاء الطريقة المستهدفة حتى تنتهي فترة إلغاء الازدواجية دون أي استدعاءات إضافية لإلغاء الازدواجية، قد لا تعمل أحيانًا وقد لا تزال بسبب
> [@happycactus](#):
>
> المستند لم يتم ملؤه بعد والكائن PGNV غير قادر على العثور على الكتلة
قد لا يكون `debounce` هو الحل في حالة الاستخدام الخاصة بك
> [@happycactus](#):
>
> لا يمكنني فعل ذلك أثناء تزيين الكتلة المطبوخة، لأن المستند لم يتم ملؤه بعد والكائن PGNV غير قادر على العثور على الكتلة
جرب استخدام خيارات `afterAdopt`
>
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [27 سبتمبر 2023، 9:43ص UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/17 "2023-09-27T09:43:15Z")
مرحباً هاون، شكراً لك على تلميحك!
يبدو أنه بالضبط ما كنت أبحث عنه. لقد جربت نهجين مختلفين:
- أولاً، استخدم “decorateCooked” العادي لتحليل وإرفاق كتلة div ثم استخدم afterAdopt للعرض عن طريق استدعاء `PGNV.pgnviewer()` أو
- استخدم خيار afterAdopt فقط لإرفاق وعرض كليهما
لم ينجح أي منهما بعد، بسبب مشكلة أخرى لم أتمكن من فهمها بالكامل، يبدو أن المكتبة الداخلية تتعطل بخطأ، وغير قادرة على العثور على السمة `className` على ما يبدو في عنصر DOM. أنا ضائع قليلاً 🙂 . لقد رأيت أن شخصًا ما استخدم loadScript، لكنني قمت فقط باستيراد المكتبة واستخدام وظيفة debounce نجحت. ما الفرق بين الطريقتين؟
شكراً!
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [28 سبتمبر 2023، 8:39م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/18 "2023-09-28T20:39:58Z")
مرحباً @hawm، لقد وجدت سبب عدم عمله وأنا عالق.
بالطبع أنا جديد تمامًا في Ember وفي JavaScript الحديث بشكل عام. لذلك درست قليلاً واكتشفت السبب.
يتوقع PgnViewerJs العمل على DOM الحقيقي، وليس على DOM الافتراضي. لذلك حتى بعد اعتماد العنصر المطبوخ، فإنه غير موجود في DOM الحقيقي، ويبحث PGNV عن المعرفات باستخدام document.getElementById.
لقد درست كل ما استطعت العثور عليه: تبدو مكونات Ember مناسبة لاحتياجاتي، لكنني لست متأكدًا من كيفية التعامل معها.
أو ربما `API.onAppEvent`؟
شكراً.
---
### Author:  [@happycactus](https://meta.discourse.org/u/happycactus)
#### Post date: [28 سبتمبر 2023، 9:36م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/19 "2023-09-28T21:36:28Z")
لقد استخدمت `later()` من Ember وعلى الرغم من أنه حل غير أنيق، إلا أنه يعمل.
هل هناك حل أفضل؟
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [28 أكتوبر 2023، 9:37م UTC](https://meta.discourse.org/t/issues-on-loading-a-js-asset-from-a-theme-component/279792/20 "2023-10-28T21:37:18Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.