خطأ في استيراد مكون Plugin Modal - اتبعت الوثائق الرسمية ولكن ما زلت أحصل على أخطاء

[joo (slower)]

ملخص المشكلة

أقوم بتطوير إضافة لـ Discourse تضيف زر شريط أدوات لفتح نموذج نافذة منبثقة. لقد اتبعت وثائق واجهة برمجة تطبيقات DModal الرسمية خطوة بخطوة، لكنني ما زلت أواجه أخطاء في استيراد الوحدات وتحذير “تحتاج النافذة المنبثقة إلى تحديث”. أحتاج إلى توجيه حول ما أفتقده.

ملاحظة سريعة: لا أعرف البرمجة، تم إنشاء هذه الإضافة بالكامل بمساعدة الذكاء الاصطناعي.

الأخطاء الحالية

الخطأ 1 - استيراد الوحدة:

Uncaught (in promise) Error: Could not find module `discourse/components/modal/lottery-form-modal` imported from `discourse/plugins/discourse-lottery-v3/discourse/initializers/lottery-toolbar`

الخطأ 2 - تحذير النافذة المنبثقة القديمة:

Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.

الخطأ 3 - إشعار الإهمال:

Deprecation notice: Defining modals using a controller is no longer supported. Use the component-based API instead. (modal: lottery-form) [deprecated since Discourse 3.1] [removal in Discourse 3.2]

الوثائق الرسمية التي اتبعتها

لقد درست بعناية ونفذت بناءً على هذه الموارد الرسمية:

1. تحويل النوافذ المنبثقة من وحدات التحكم القديمة إلى واجهة برمجة تطبيقات مكونات DModal الجديدة

   • الرابط: https://meta.discourse.org/t/268057
   • تم اتباع جميع الخطوات الأربع: نقل الملفات إلى /components/modal/، وتحديث JavaScript لوراثة المكون، وتحديث القالب لاستخدام <DModal>، وتحديث استدعاءات العرض لاستخدام modal.show()

2. استخدام واجهة برمجة تطبيقات DModal لعرض نوافذ Modal

   • الرابط: https://meta.discourse.org/t/268304
   • تم تنفيذ DModal مع @closeModal و @title وكتل مسماة بشكل صحيح

3. واجهة برمجة تطبيقات مطوري Discourse

   • المصدر: https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs
   • تم استخدام api.onToolbarCreate() وحقن خدمة النافذة المنبثقة

4. وثائق مطوري Discourse - تحويل النوافذ المنبثقة

   • الرابط: https://github.com/discourse/discourse-developer-docs/blob/main/docs/03-code-internals/10-converting-modals.md
   • تمت مقارنة خطوات الترحيل

ما أحاول القيام به

• إضافة زر شريط أدوات في المنشئ
• النقر على الزر يفتح نموذج نافذة منبثقة
• يقوم المستخدم بملء النموذج والنقر على إرسال
• تغلق النافذة المنبثقة وتدرج المحتوى في المنشئ

ما جربته

النهج 1: الاستيراد الديناميكي + خدمة النافذة المنبثقة (الحالي)

• أواجه خطأ في استيراد الوحدة

النهج 2: showModal() مع وحدة التحكم

• أواجه تحذيرات إهمال بشأن وحدات التحكم القديمة

النهج 3: الاستيراد الثابت

• جربت أيضًا الاستيرادات الثابتة ولكن نفس مشاكل حل الوحدات

هيكل الملفات:

discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
    ├── initializers/
    │   └── lottery-toolbar.js
    └── components/modal/
        ├── lottery-form-modal.js
        └── lottery-form-modal.hbs

رمز زر شريط الأدوات:

// assets/javascripts/discourse/initializers/lottery-toolbar.js
import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "lottery-toolbar",
  initialize() {
    withPluginApi("1.0.0", (api) => {
      api.onToolbarCreate((toolbar) => {
        toolbar.addButton({
          id: "lottery-insert",
          group: "extras",
          icon: "dice",
          title: "Insert Lottery",
          perform: () => {
            const modal = api.container.lookup("service:modal");

            // This line causes the import error:
            import("discourse/components/modal/lottery-form-modal").then((module) => {
              const LotteryFormModal = module.default;
              modal.show(LotteryFormModal, { model: {} });
            });
          }
        });
      });
    });
  }
};

مكون النافذة المنبثقة:

// assets/javascripts/discourse/components/modal/lottery-form-modal.js
import Component from "@ember/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

export default class LotteryFormModal extends Component {
  @tracked inputValue = "";

  @action
  submit() {
    // Handle form submission
    this.args.closeModal();
  }
}

قالب النافذة المنبثقة:

{{! assets/javascripts/discourse/components/modal/lottery-form-modal.hbs }}

<DModal @title="My Modal" @closeModal={{this.args.closeModal}} class="my-modal">
  <:body>
    <input value={{this.inputValue}} />
  </:body>
  <:footer>
    <button {{on "click" this.submit}}>Submit</button>
  </:footer>
</DModal>

أسئلة

بناءً على جميع الأكواد والأخطاء والمعلومات الأساسية المقدمة أعلاه، كيف يجب أن أعدل الكود الخاص بي لتنفيذ الميزة الخاصة بي بشكل صحيح؟

سأكون ممتنًا جدًا لأي توجيه بشأن نهج التنفيذ الصحيح.

[NateDhaliwal]

جرب استيراده من ../components/modal/lottery-form-modal بدلاً من ذلك.

عندما تبدأ الاستيراد بـ discourse، سيبحث عن الملف والدليل في قاعدة كود Discourse، وليس في مشروعك الخاص.

على سبيل المثال، السطر الخاص بك:

@joo

import { withPluginApi } from "discourse/lib/plugin-api";

يستورد هذا من app/assets/javascripts/discourse/app/lib/plugin-api.gjs في قاعدة كود Discourse.

كمثال على كيفية القيام بذلك، انظر GitHub - Beholder-Vision/discourse-insert-model-3d: A Discourse theme component for adding 3D models to topics الخاص بـ @abroun_beholder.

[joo (slower)]

شكرا لك! كان هذا الشرح حول مسارات الاستيراد هو بالضبط ما أحتاجه. النافذة المنبثقة تعمل بشكل مثالي الآن. أقدر مساعدتك حقًا!

[NateDhaliwal]

لا مشكلة، يسعدني المساعدة!