لا يمكن تجميع js في المكون الخاص بي SyntaxError: يجب استخدام حقل خاص في فئة محيطة

[SupportGeek (Coby David Adams Jr.)]

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

لقد قمت بتشغيل هذا عبر Llama 3.1 405B وكذلك GPT-4 عبر ask.discourse.com ولكن لم أتمكن من الحصول على إصدار من JavaScript يمكن تجميعه. أحصل باستمرار على خطأ في التجميع: SyntaxError: Private field must be used in an enclosing class

أحصل أيضًا على خطأ في سجل الأدوات (widget registry error) ولكن ذلك لأن الأداة المخصصة (custom widget) لا يتم إنشاؤها أبدًا بسبب خطأ تجميع JavaScript.

أنا أستخدم سمة Discourse Central.

بالنظر إلى قسم الرأس هذا:
"<script type=\"text/discourse-plugin\" version=\"0.8.18\">
  api.createWidget('custom-new-topic-button', {
    tagName: 'div.custom-new-topic-button',

    buildKey: () => `custom-new-topic-button`,

    html() {
      return [
        this.attach('button', {
          className: 'btn btn-primary',
          action: 'createNewTopic',
          contents: 'New Topic'
        })
      ];
    },

    click() {
      const composerController = this.container.lookup("controller:composer");
      const currentCategory = this.container.lookup("controller:navigation/category").get("model.id");

      composerController.open({
        action: require("discourse/models/composer").default.CREATE_TOPIC,
        draftKey: require("discourse/models/composer").default.DRAFT,
        categoryId: currentCategory,
      });

      return false;
    },
  });

  api.decorateWidget('topic-list:before', (helper) => {
    if (api.getCurrentUser()) {
      helper.appendChild(helper.createWidget('custom-new-topic-button'));
    }
  });

</script>"

مع قسم الرأس هذا:

"<script>
    {{#if currentUser}}
     <div>
      {{custom-new-topic-button}}
     </div>
   {{/if}}
</script>"

وهذا CSS:

".topic-list-body::before {
    content: "";
    display: block;
    position: relative; /* Important to allow absolute positioning within */
  }
  
  .topic-list-body-new-topic {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    background: #f2f3f5;
    border-bottom: 1px solid #ccc;
  }
  .custom-new-topic-button .btn.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
  }"

كان هذا هو الكود الأصلي الخاص بي، التوصية الأخيرة هي:

<script type="text/discourse-plugin" version="0.8.18">
  api.createWidget('custom-new-topic-button', {
    tagName: 'div.custom-new-topic-button',

    buildKey() {
      return 'custom-new-topic-button';
    },

    defaultState() {
      return {};
    },

    html() {
      return [
        this.attach('button', {
          className: 'btn btn-primary',
          action: 'createNewTopic',
          contents: 'New Topic'
        })
      ];
    },

    createNewTopic() {
      const composerController = this.container.lookup("controller:composer");
      const currentCategory = this.container.lookup("controller:navigation/category").get("model.id");
      const Composer = require("discourse/models/composer").default;

      composerController.open({
        action: Composer.CREATE_TOPIC,
        draftKey: Composer.DRAFT,
        categoryId: currentCategory,
      });

      return false;
    },
  });

  api.decorateWidget('topic-list:before', (helper) => {
    if (api.getCurrentUser()) {
      helper.appendChild(helper.createWidget('custom-new-topic-button'));
    }
  });
</script>

[SupportGeek (Coby David Adams Jr.)]

@steven.webster @vasanth.mohan

[SupportGeek (Coby David Adams Jr.)]

تمكنت من تشغيله. يا سام، لقد استنفدت مكالماتي اليومية للسؤال… أنا آسف لذلك. ثم ركضت إلى LLAMA 405 B الخاص بنا وبعد الكثير من الأخذ والرد حصلت على كود يعمل. لا أستطيع أن أتخيل كم كلفني هذا. قد أسمع من أشخاص آخرين في المنتدى، “يا أحمق، كان هناك إعداد للقيام بذلك في هذا الموقع”. لكن هذه كانت تمرينًا ممتعًا لمراجعة المطالبات المستمرة للحصول على كود يعمل.

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

هذا منتدى تستضيفه discourse وليس لدي وصول إلى نظام التشغيل
هذه إضافة، لذا لا يمكنك الإشارة إلى Discourse. مباشرة.
لا يمكنك الإشارة إلى Ember مباشرة
إذا كنت ستستخدم هذا، فيرجى التأكد من ربطه بـ self

ثم انتقل إلى السمات الوظيفية التي تريدها.

<script type="text/discourse-plugin" version="1.24.0">
  api.modifyClass('component:topic-list', {
    pluginId: 'your-plugin-id',

    didRender: function() {
      const category = this.get('category');
      if (!category) {
        console.error('Category not found');
        return;
      }

      const currentUser = this.currentUser;
      if (!currentUser) {
        console.error('Current user not found');
        return;
      }

      const canCreateTopic = currentUser.can_create_topic;
      if (canCreateTopic === undefined) {
        console.error('Can create topic not defined');
        return;
      }

      console.log('category:', category);
      console.log('canCreateTopic:', canCreateTopic);

      if (category && canCreateTopic) {
        const topicListBody = document.querySelector('.topic-list-body');
        const listContainer = document.querySelector('.list-container');
        const topicList = document.querySelector('.topic-list');

        let container = topicListBody || listContainer || topicList;

        if (!container) {
          container = this.element; // Use the component's element as the container
        }

        console.log('container:', container);

        const existingButton = container.querySelector('.new-topic-button');
        if (!existingButton) {
          const newTopicButton = document.createElement('a');
          newTopicButton.href = '#';
          newTopicButton.className = 'new-topic-button';
          newTopicButton.setAttribute('data-category-id', category.id);
          newTopicButton.textContent = 'New Topic';

          const self = this; // Store the component's context
          newTopicButton.onclick = (e) => {
            e.preventDefault();
            const router = api.container.lookup('router:main');
            const url = router.generate('new-topic', { queryParams: { category: category.slug } });
            router.transitionTo(url);
          };


          container.prepend(newTopicButton);
          console.log('button added');
        }
      }
    }
  });
</script>

[SupportGeek (Coby David Adams Jr.)]

تحدثت مبكرًا جدًا، فقد كان لتلك النسخة مشكلة صغيرة في didRender حيث لم تكن ترغب في النشر في أي فئات أخرى غير الأولى. قام Llama بإصلاح ذلك.

<script type="text/discourse-plugin" version="1.24.0">
  api.modifyClass('component:topic-list', {
    pluginId: 'your-plugin-id',

    didRender: function() {
      const category = this.get('category');
      if (!category) {
        console.error('Category not found');
        return;
      }

      const currentUser = this.currentUser;
      if (!currentUser) {
        console.error('Current user not found');
        return;
      }

      const canCreateTopic = currentUser.can_create_topic;
      if (canCreateTopic === undefined) {
        console.error('Can create topic not defined');
        return;
      }

      console.log('category:', category);
      console.log('canCreateTopic:', canCreateTopic);

      if (category && canCreateTopic) {
        const topicListBody = document.querySelector('.topic-list-body');
        const listContainer = document.querySelector('.list-container');
        const topicList = document.querySelector('.topic-list');

        let container = topicListBody || listContainer || topicList;

        if (!container) {
          container = this.element; // Use the component's element as the container
        }

        console.log('container:', container);

        let newTopicButton = container.querySelector('.new-topic-button');
        if (!newTopicButton) {
          newTopicButton = document.createElement('a');
          newTopicButton.href = '#';
          newTopicButton.className = 'new-topic-button';
          container.prepend(newTopicButton);
          console.log('button added');
        }

        newTopicButton.setAttribute('data-category-id', category.id);
        newTopicButton.textContent = 'New Topic';

        const self = this; // Store the component's context
        newTopicButton.onclick = (e) => {
          e.preventDefault();
          const router = api.container.lookup('router:main');
          const url = router.generate('new-topic', { queryParams: { category: category.slug } });
          router.transitionTo(url);
        };
      }
    }
  });
</script>

[pfaffman (Jay Pfaffman)]

يبدو أنك قمت بحل مشكلتك، كما أفعل غالبًا عند صياغة طلبات المساعدة.

New Topic Header Button - #67 by patrickemin سيقدم مثالًا وقد يكون بالضبط ما تبحث عنه.

أيضًا، أخبر مهندسيك أنه يمكنهم الضغط على مفتاح c لكتابة رسالة.

[SupportGeek (Coby David Adams Jr.)]

في سنترال، يوجد زر بدء محادثة جديدة في أسفل قائمة المواضيع. أراد الجميع زرًا في الأعلى. قد أغيره إلى علامة زائد صغيرة ولكن هاتين لقطتي الشاشة توضحان ذلك.

[SupportGeek (Coby David Adams Jr.)]

@pfaffman جربت زر رأس الموضوع الجديد كمحاولة أولى. ومع ذلك، هذا لا يتوافق جيدًا مع سمة Discourse Central الجديدة.

[merefield (Robert)]

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

استخدم مكونات Glimmer.

[SupportGeek (Coby David Adams Jr.)]

سنحتاج إلى إزالة مجموعة من المحتوى القديم من AI rags وكذلك انتظار ضبط نماذج أدوات الواجهة (widgets) بدقة. حتى ask.discourse.com اتجه نحو مسار أدوات الواجهة. ما الذي سيحل محل أدوات الواجهة؟ سأرى ما إذا كان بإمكاني جعل نموذج يخرج رمزًا يأخذ ذلك في الاعتبار. بالمناسبة، الجزء الأكبر من تماريني هو معرفة ما إذا كان بإمكاني جعل نموذج يقوم بهذا العمل نظرًا لأنني لا أعرف شيئًا تقريبًا عن js

[pfaffman (Jay Pfaffman)]

@SupportGeek

بالمناسبة، فإن معظم تماريني هي لمعرفة ما إذا كان بإمكاني جعل نموذج يقوم بهذا العمل بما أنني لا أعرف شيئًا تقريبًا عن js

أنا أفهم هذا الشعور.

@SupportGeek

ما الذي سيحل محل الـ widgets؟

مكونات Glimmer. يوجد في مكان ما موضوع جيد يصفها.

ولكن إليك مثال لإنشاء المكون:

javascripts/discourse/components/custom-header-topic-button.gjs

وهنا طريقة جافاسكريبت لإدراجه:

javascripts/discourse/initializers/initialize-header-new-topic-button.gjs

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

أعتقد أنك تريد العثور على مثال لشيء يستدعي shouldDisplay (أو شيء من هذا القبيل) إذا كنت تريد عرضه في بعض الأحيان فقط (مثل إذا كانوا مسجلين الدخول).

[SupportGeek (Coby David Adams Jr.)]

OH, آخر كود حصلت عليه من llama الليلة الماضية لم يستخدم عناصر واجهة المستخدم ولكنه لم يستخدم glimmer أيضًا. سأتعامل مع glimmer لاحقًا اليوم

<script type="text/discourse-plugin" version="1.24.0">
  api.modifyClass('component:topic-list', {
    pluginId: 'your-plugin-id',

    didRender: function() {
      const category = this.get('category');
      if (!category) {
        console.error('Category not found');
        return;
      }

      const currentUser = this.currentUser;
      if (!currentUser) {
        console.error('Current user not found');
        return;
      }

      const canCreateTopic = currentUser.can_create_topic;
      if (canCreateTopic === undefined) {
        console.error('Can create topic not defined');
        return;
      }

      console.log('category:', category);
      console.log('canCreateTopic:', canCreateTopic);

      if (category && canCreateTopic) {
        const topicListBody = document.querySelector('.topic-list-body');
        const listContainer = document.querySelector('.list-container');
        const topicList = document.querySelector('.topic-list');

        let container = topicListBody || listContainer || topicList;

        if (!container) {
          container = this.element; // Use the component's element as the container
        }

        console.log('container:', container);

        let newTopicButton = container.querySelector('.new-topic-button');
        if (!newTopicButton) {
          newTopicButton = document.createElement('a');
          newTopicButton.href = '#';
          newTopicButton.className = 'new-topic-button';
          container.prepend(newTopicButton);
          console.log('button added');
        }

        newTopicButton.setAttribute('data-category-id', category.id);
        newTopicButton.textContent = 'New Topic';

        const self = this; // Store the component's context
        newTopicButton.onclick = (e) => {
          e.preventDefault();
          const router = api.container.lookup('router:main');
          const url = router.generate('new-topic', { queryParams: { category: category.slug } });
          router.transitionTo(url);
        };
      }
    }
  });
</script>

[merefield (Robert)]

تنبيه: قائمة الموضوعات غير محولة حاليًا إلى Glimmer.

ومع ذلك، إذا كنت تقوم بإرفاق المكونات بمنافذ الإضافات، فيجب عليك استخدام Glimmer.

إذا كان عليك الإرفاق بعنصر واجهة مستخدم، يمكنك استخدام RenderGlimmer لتحقيق ذلك.

مثال هنا:

javascripts/discourse/widgets/layouts-tag-combo.js.es6

أتوسل إليك ألا تعتمد كثيرًا على نماذج اللغة الكبيرة دون تعلم الأساسيات بنفسك أولاً، حيث يجب أن تكون أنت الضامن النهائي لما تنتجه نماذج اللغة الكبيرة.

تحتاج أيضًا إلى تصميم الحل بشكل صحيح.

اقرأ المزيد عن EmberJS هنا:

Templates are HTML - Components - Ember Guides

[SupportGeek (Coby David Adams Jr.)]

شكرا لك. سأدرس بالتأكيد أكثر بما أنني جديد تمامًا في مجال الخطاب و js.
أنا أعمل في شركة ذكاء اصطناعي لذا كان هذا أيضًا تمرينًا في هندسة الأوامر.

[merefield (Robert)]

رائع، لذا سيكون لديك فكرة جيدة عن نقاط قوتهم وضعفهم.

لقد كتبت أول روبوت ذكاء اصطناعي لـ Discourse يسمى Chatbot، لذا لدي بعض البصيرة أيضًا.

[sam (Sam Saffron)]

سيتم إضافة إرشادات خاصة إلى موجه النظام لضمان أن “ask” لا توصي أبدًا باستخدام الأدوات المصغرة