¿Es esta la forma correcta de crear un componente de tema?

Desarrollador
1

Tengo experiencia creando soluciones personalizadas con otras plataformas/frameworks y quiero entender si esta es la forma correcta de crear un componente de tema en Discourse.

Parece estar funcionando, pero eso no significa necesariamente que sea la forma correcta.

En resumen, esto debería ocultar la reacción dependiendo de la categoría en la que se encuentre un tema. ¿Es esta la forma correcta de hacerlo?


$(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(`Emoji con data-reaction='frog' ${isAllowedCategory ? 'mostrado' : 'oculto'}.`);
        }
      };

      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(`Emoji con data-reaction='frog' encontrado en la mutación y ${isAllowedCategory ? 'mostrado' : 'oculto'}.`);
              }
            }
          });
        });
      });

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

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

    } catch (error) {
      console.error("Ocurrió un error en el script de alternancia de emoji:", error);
    }
  });
2

Aunque esta forma de hacerlo es técnicamente posible, no es el enfoque ideal.

En lugar de usar etiquetas script y jQuery $(document).ready, sería mejor trabajar correctamente con el sistema de renderizado de Ember.

Para empezar, sería bueno crear un repositorio de componentes de tema con una estructura de carpetas adecuada para tu componente de tema. Echa un vistazo a la CLI discourse_theme, ya que esta generará esa estructura por ti y te facilitará el desarrollo del componente. (Alternativamente, también existe el esqueleto de tema si solo necesitas la estructura y no ninguna de las otras comodidades de la CLI de temas).

A partir de aquí, yo utilizaría las herramientas que Discourse tiene disponibles para la extensibilidad, como apiInitializers, la pluginAPI, los puntos de salida de plugins, etc., para lograr lo que estás intentando hacer.

La mejor manera de aprender sobre estas cosas es revisar las Guías para desarrolladores aquí en Meta (específicamente las secciones de tema/componente de tema). Además, te recomiendo que revises la categoría Customization > Theme component y busques sus repositorios de GitHub. Analizar su código y cómo logran las cosas también te ayudará.

¡Espero que esto sea de ayuda!

3

Si este es tu objetivo, puedes hacerlo con CSS simple:

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