Это правильный способ создания компонента темы?

Разработка
1

У меня есть опыт создания кастомных решений на других платформах/фреймворках, и я хочу понять, является ли этот подход правильным для создания компонента темы в Discourse.

Кажется, что это работает, но это не обязательно означает, что это правильный способ.

Если кратко, этот код должен скрывать реакцию в зависимости от категории, в которой находится тема. Правильно ли я это делаю?

<script type="text/discourse-plugin" version="0.1">
$(document).ready(function() {
    try {
      const isTopicPage = /^\/t\//.test(window.location.pathname);
      
      if (!isTopicPage) return;

      const allowedCategories = ['ask-a-question'];

      const topic = Discourse.__container__.lookup("controller:topic");
      const categorySlug = topic && topic.get("model.category.slug");
      const isAllowedCategory = categorySlug && allowedCategories.includes(categorySlug);

      const toggleReactionEmoji = () => {
        const emoji = document.querySelector("[data-reaction='frog']");
        
        if (emoji) {
          emoji.style.display = isAllowedCategory ? '' : 'none';
          console.log(`Эмодзи с data-reaction='frog' ${isAllowedCategory ? 'показывается' : 'скрывается'}.`);
        }
      };

      toggleReactionEmoji();

      const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          mutation.addedNodes.forEach(node => {
            if (node.nodeType === 1) {
              const emoji = node.querySelector("[data-reaction='frog']");
              if (emoji) {
                emoji.style.display = isAllowedCategory ? '' : 'none';
                console.log(`Эмодзи с data-reaction='frog' найден в мутации и ${isAllowedCategory ? 'показывается' : 'скрывается'}.`);
              }
            }
          });
        });
      });

      observer.observe(document.body, { childList: true, subtree: true });

      api.cleanupStream(() => observer.disconnect());

    } catch (error) {
      console.error("В скрипте переключения эмодзи произошла ошибка:", error);
    }
  });
</script>
2

Хотя такой подход технически возможен, он не является идеальным.

Вместо использования тегов <script> и jQuery $(document).ready лучше корректно работать с системой рендеринга Ember.

Для начала рекомендуется создать репозиторий компонентов темы с правильной структурой папок для вашего компонента темы. Обратите внимание на CLI discourse_theme, так как он создаст для вас эту структуру и упростит разработку компонента. (Альтернативно, если вам нужна только структура, а не дополнительные возможности CLI темы, можно использовать скелет темы).

Далее я бы использовал встроенные в Discourse инструменты для расширения функциональности, такие как apiInitializers, pluginAPI, слоты плагинов и другие, чтобы решить вашу задачу.

Лучший способ разобраться в этих вещах — изучить Руководства для разработчиков на Meta (в частности, разделы, посвящённые темам и компонентам тем). Кроме того, рекомендую просмотреть категорию #theme-component и найти соответствующие репозитории на GitHub. Изучение их кода и того, как они реализуют те или иные функции, также будет вам полезно.

Надеюсь, это поможет!

3

Если это ваша цель, вы можете сделать это с помощью простого CSS:

body.category-ask-a-question .discourse-reactions-picker.frog {
  display: none;
}