مكونات ثيم Discourse تدعم Wasm الآن

sam · 7 أبريل 2022، 6:05ص

WebAssembly (Wasm) هي تقنية يتم شحنها في جميع المتصفحات الحديثة والتي تتيح للمطورين شحن برامج ثنائية محمولة.

هذا يعني أنه يمكن للمطورين استخدام أي لغة برمجة تقريبًا واستهداف الويب.

في سياق Discourse، يفتح هذا الباب لشحن مجموعة غنية إلى حد ما من الملحقات التي كانت متاحة فقط لمنشئي الإضافات في الماضي.

يمكن أن تشمل الأمثلة:

وضع علامات مائية على الصور / تغيير حجمها / قصها
إنشاء الرسوم البيانية باستخدام graphviz أو svgbob
صناديق الرمل البرمجية (على سبيل المثال: مشاركات تتضمن وقت تشغيل Ruby)
وأكثر من ذلك بكثير

في الماضي، وبسبب سياسة أمان المحتوى في Discourse، تم إيقاف الوصول إلى Wasm باستثناء التثبيتات التي تحتوي على تحميلات محلية ولا تستخدم شبكة توصيل المحتوى (CDN).

تمت إضافة واجهات جديدة إلى جانب العميل لدعم شحن أصول JavaScript في سمة يمكن الوصول إليها بشكل غير مشروط عبر النطاق المحلي.

هذا يمكّن مطوري السمات من استضافة Wasm بشكل نظيف، والتدفق هو:

مكون → عامل ويب محلي → Wasm مستضاف على شبكة توصيل المحتوى (CDN)

https://meta.discourse.org/t/discourse-svgbob/223573 هو مثال شامل للأنماط الجديدة، والتغييران الرئيسيان هما:

جميع أصول .js متاحة أيضًا خارج شبكة توصيل المحتوى (CDN) على الخادم المحلي:

{
...
  "assets": {
    "worker": "assets/will-be-avilable-on-local.js"
  }
}

يمكن الوصول إلى عنوان URL للأصل المحلي عبر settings.theme_uploads_local

لذلك في المثال أعلاه:

settings.theme_uploads_local.worker; // الأصل المحلي
settings.theme_uploads.worker; // أصل شبكة توصيل المحتوى (CDN)

merefield · 16 أبريل 2022، 11:16ص

ليس متعلقًا بـ wasm على وجه التحديد، ولكني وجدت شيئًا آخر مثيرًا للاهتمام حول هذا الرمز، هل هو جديد؟

في مثالك، لم يعد loadScript مطلوبًا؟ (أعتقد أن الاستيراد زائد عن الحاجة؟):

github.com/SamSaffron/discourse-svgbob

javascripts/discourse/api-initializers/discourse-svgbob.js

6d7818035


      
          import loadScript from "discourse/lib/load-script";
          import { apiInitializer } from "discourse/lib/api";
          import { later } from "@ember/runloop";
          import { Promise } from "rsvp";
          
          let wasm = undefined;
          
          const webWorkerUrl = settings.theme_uploads_local.worker;
          let webWorker;
          
          const wasmUrl = settings.theme_uploads.wasm;

وبدلاً من ذلك، يتم تحميل البرنامج النصي للعامل JIT عندما يُكتشف أن العامل غير موجود؟

github.com/SamSaffron/discourse-svgbob

javascripts/discourse/api-initializers/discourse-svgbob.js

6d7818035


      
            });
          }
          
          let messageSeq = 0;
          let resolvers = {};
          
          async function cookSvgBob(text) {
            let seq = messageSeq++;
          
            if (!webWorker) {
              webWorker = new Worker(webWorkerUrl);
              webWorker.postMessage(['wasmUrl', wasmUrl]);
              webWorker.onmessage = function(e) {
                let incomingSeq = e.data[0];
                let converted = e.data[1];
          
                resolvers[incomingSeq](converted);
                delete resolvers[incomingSeq];
              }
            }

باستخدام عنوان URL المبني من مرجع الأصول.

هذا نمط جيد ومفيد للغاية!

ومع ذلك، لدي سؤال حول العمال.

إذا استخدمت برنامجًا نصيًا لعامل طرف ثالث، وكان يحتوي على عبارات importScripts() لتضمين برامج نصية إضافية في النطاق العام للعامل، فكيف أقوم بتضمين هذه البرامج النصية للاستيراد داخل مكون السمة؟

قد أكون أسأل: كيف نطلب برنامجًا نصيًا من عنوان URL داخل مكون سمة Discourse؟

Falco · 16 أبريل 2022، 2:28م

ما فعلته في هذا السيناريو هو استخدام postMessage من البرنامج النصي الرئيسي لـ JS مع عناوين URL المراد استيرادها. يتم استقبال هذا في معالج الرسائل في العامل الذي يمكنه importScript عناوين URL المستلمة.

merefield · 16 أبريل 2022، 2:30م

شكرا رافائيل!. هل لديك مثال مفتوح المصدر للإشارة إليه؟

Falco · 16 أبريل 2022، 2:34م

لقد استخدمت هذا النمط نفسه في النواة

github.com/discourse/discourse

app/assets/javascripts/discourse/app/services/media-optimization-worker.js

c81d4597a


      
            return this.install();
          }
          
          async install() {
            this.installPromise = new Promise((resolve, reject) => {
              this.afterInstalled = resolve;
              this.failedInstall = reject;
              this.logIfDebug("Installing worker.");
              this.startWorker();
              this.registerMessageHandler();
              this.worker.postMessage({
                type: "install",
                settings: {
                  mozjpeg_script: getURLWithCDN("/javascripts/squoosh/mozjpeg_enc.js"),
                  mozjpeg_wasm: getURLWithCDN("/javascripts/squoosh/mozjpeg_enc.wasm"),
                  resize_script: getURLWithCDN(
                    "/javascripts/squoosh/squoosh_resize.js"
                  ),
                  resize_wasm: getURLWithCDN(
                    "/javascripts/squoosh/squoosh_resize_bg.wasm"
                  ),

github.com/discourse/discourse

public/javascripts/media-optimization-worker.js

c81d4597a


      
                }
                break;
              default:
                logIfDebug(`Sorry, we are out of ${e}.`);
            }
          };
          
          async function loadLibs(settings) {
            if (self.codecs) return;
          
            importScripts(settings.mozjpeg_script);
            importScripts(settings.resize_script);
          
            let encoderModuleOverrides = {
              locateFile: function (path, prefix) {
                // if it's a mem init file, use a custom dir
                if (path.endsWith(".wasm")) return settings.mozjpeg_wasm;
                // otherwise, use the default, the prefix (JS file's dir) + the path
                return prefix + path;
              },
              onRuntimeInitialized: function () {

Heinenen · 20 مارس 2024، 5:28م

أنا أستخدم منشئ السمات لإنشاء مكون سمة جديد من المفترض أن يستخدم wasm. كنقطة انطلاق، حاولت تحميل svgbob كمكون سمة. ومع ذلك، لم يُسمح لي بذلك، لأنه يحتوي على ملف wasm.

هل هذا قيد مقصود لمنشئ السمات؟ أم لا يمكن للمرء تثبيت svgbob كما هو؟

sam · 20 مارس 2024، 9:50م

أعتقد أن لدينا فقط قيودًا على أنواع الملفات في منشئ السمات تحتاج إلى رفعها.

david · 20 مارس 2024، 9:59م

لقد أعدت تعيين themecreator لاستخدام “ملحقات السمات المصرح بها” الافتراضية، والتي تتضمن WASM. لذا يجب أن تعمل الآن يا @Heinenen.

(لست متأكدًا من سبب وجودها على إعداد غير افتراضي… ربما في الماضي كانت إحدى الملحقات الشائعة مفقودة )

Heinenen · 20 مارس 2024، 10:16م

نعم، رائع جدًا، يمكنني تأكيد أنه يعمل الآن. شكرًا لك!

Heinenen · 20 مارس 2024، 10:24م

حسنًا، يبدو أنني بحاجة إلى التراجع قليلاً، لا أعتقد أن الأمر يعمل بشكل مثالي حتى الآن.
حاولت تحميل svgbob مرة أخرى وقد نجح ذلك.

بعد محاولة تحميل ملف wasm الخاص بي، المأخوذ من MDN، أحصل على الخطأ:
حدث خطأ: لقد قدمت معلمات غير صالحة للطلب: السلسلة تحتوي على بايت فارغ

على حاوية التطوير الخاصة بي، هذه ليست مشكلة ويمكنني تحميل نفس الملف دون مشكلة.

hellekin · 21 مارس 2024، 7:05م

أليس تشغيل ملف ثنائي من موقع الويب يمثل تعرضًا أمنيًا يجب اختياره بعناية؟ قد يكون هذا سببًا لعدم كونه افتراضيًا. ماذا تعتقد يا @Roman؟

david · 21 مارس 2024، 7:09م

إنه مسموح به في السمات افتراضيًا. لقد تم تغيير إعداد الموقع فقط على discourse.theme-creator.io. (هذا موقع discourse عادي، مع إضافة تسمح لأي شخص بتحميل ومشاركة السمات).

لا يزال WASM محصورًا في المتصفح، لذا فإن التعرض الأمني يعادل ملف .js.

الموضوع		الردود	مرات العرض
Defer loading JavaScript in Themes and Components Dev dev-news	4	1949	7 أبريل 2022
Discourse-webpack: A boilerplate for developing JS-heavy Discourse components Dev	3	1889	13 يناير 2022
Issues on loading a js asset from a Theme Component Dev	19	842	28 سبتمبر 2023
Javascript assets in a theme component Dev	15	2075	7 مايو 2021
"theme-component" should be a subcategory instead of a tag Site feedback	16	1522	19 يوليو 2022

مكونات ثيم Discourse تدعم Wasm الآن

الموضوعات ذات الصلة