¿api.renderInOutlet no se está renderizando?

Desarrollador
1

Estoy legítimamente entrando en pánico. Estoy intentando renderizar un componente .gjs, pero no aparece. Intenté renderizar en etiquetas de plantilla <h1>Hi</h1>, pero ni siquiera eso aparece. ¿Qué está pasando?

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) =\u003e {
  api.renderInOutlet("above-main-container", \u003ctemplate\u003e\u003ch1\u003eHi\u003c/h1\u003e\u003c/template\u003e);
});

He omitido la importación del componente porque no se renderiza con o sin ella.

Honestamente, no sé qué estoy haciendo mal.

2

Soy increíblemente ciego. El archivo estaba en api_initializers, no en api-initializers :facepalm:.

2 Me gusta
3

Genial… ahora mi componente no se está renderizando…

¿Alguien tiene alguna idea?
Mi archivo api-initializers:

import { apiInitializer } from "discourse/lib/api";
import CategoryHeader from "../components/category-header";

export default apiInitializer((api) => {
  api.renderInOutlet("above-category-heading", CategoryHeader);
});

Y mi archivo de componente (.gjs):

import icon from "discourse/helpers/d-icon";
import Component from "@glimmer/component";
import { inject as service } from "@ember/service";

export default class CategoryHeader extends Component {
  @service siteSettings;
  
  get ifParentCategory() {
    if (this.args.category.parentCategory) {
      return true;
    }
  }

  get catDesc() {
    if (settings.show_category_description) {
      return true;
    }
  }

  get logoImg() {
    if (settings.show_category_logo && this.args.category.uploaded_logo) {
      return this.args.category.uploaded_logo.url;
    } else if (settings.show_category_logo && settings.show_parent_category_logo && this.args.category.parentCategory && this.args.category.parentCategory.uploaded_logo) {
      return this.args.category.parentCategory.uploaded_logo.url;
    } else if (settings.show_site_logo && this.siteSettings.logo_small) {
      return this.siteSettings.logo_small;
    }
  }

  get ifParentProtected() {
    if (this.args.category.parentCategory && this.args.category.parentCategory.read_restricted) {
      return true;
    }
  }

  get ifProtected() {
    if (this.args.category.read_restricted) {
        return true;
    }
  }

  get lockIcon() {
    return settings.category_lock_icon || 'lock';
  }

  get showHeader() {
    console.log(this.args.category);
    const isException = this.args.category && settings.hide_category_exceptions.split("|").includes(this.args.category.name);
    const hideMobile = !settings.show_mobile && this.site.mobileView;
    const subCat = !settings.show_subcategory_header && this.args.category.parentCategory;
    const noDesc = !settings.hide_if_no_category_description && !this.args.category.description_text;
    const path = window.location.pathname;
    return (/^\\/c\\//.test(path)
      && !isException
      && !noDesc
      && !subCat
      && !hideMobile
    );
  }

  get getHeaderStyle() {
    let headerStyle = "";
    if (settings.header_style == "box") {
      headerStyle += "border-left: 6px solid #" + this.args.category.color + ";";
    }
    if (settings.header_style == "banner") {
      headerStyle += "background-color: #" + this.args.category.color + "; color: #" + this.args.category.text_color + ";";
    }
    if (this.args.category.uploaded_background) {
      if (settings.header_background_image != "outside"){
        headerStyle += "background-image: url(" + this.args.category.uploaded_background.url + ");";
      }
    }
    return headerStyle;
  }
          
  get aboutTopicUrl() {
    if (settings.show_read_more_link && this.args.category.topic_url) {
      return settings.read_more_link_text;
    }
  }

  <template>
    {{#if this.showHeader}}
      <div class="category-title-header category-banner-{{this.args.category.slug}}" style="{{this.getHeaderStyle}}">
        <div class="category-title-contents">
          <div class="category-logo aspect-image">
            <img src="{{this.logoImg}}">
          </div>
          <div class="category-title-name">
            {{#if this.ifParentProtected}}
              {{icon this.lockIcon}}
            {{/if}}
            {{#if this.ifParentCategory}}
              <a class="parent-box-link" href="{{this.args.category.parentCategory.url}}">
                <h1>{{this.args.category.parentCategory.name}}: </h1>
              </a>
            {{/if}}
            {{#if this.ifProtected}}
              {{icon this.lockIcon}}
            {{/if}}
            <h1>{{this.args.category.name}}</h1>
          </div>
          <div class="category-title-description">
            {{#if this.catDesc}}
              <div class="cooked">
                {{this.args.category.description}}
              </div>
            {{/if}}
          </div>
        </div>
        <div class="category-about-url">
          <a href="{{this.args.category.topic_url}}">{{this.aboutTopicUrl}}</a>
        </div>
      </div>
    {{/if}}
  </template>
}

Todo parece técnicamente correcto, así que, ¿por qué no se renderiza? :thinking:..?

Esto te puede sonar familiar… sí, estoy intentando cambiar widgets por componentes Glimmer.

4

¿Cómo concluyes que parece correcto? ¿Seguiste los pasos básicos?

  1. Comprueba los errores y advertencias de eslint y resuélvelos
  2. Comprueba los errores y advertencias de la consola y resuélvelos
2 Me gusta
5

No vi ninguno, así que me salté el primero.

Resulta que :facepalm:

Una interfaz de tema oscuro muestra una lista de herramientas de análisis de código —ESLint, Stylelint, Prettier y Ember template lint— cada una marcada con una 'x' roja que indica errores. (Subtitulado por IA)
Una interfaz de tema oscuro muestra una lista de herramientas de análisis de código —ESLint, Stylelint, Prettier y Ember template lint— cada una marcada con una 'x' roja que indica errores. (Subtitulado por IA)625×249 8.25 KB

1 me gusta
6

@manuel Así que he arreglado todo (excepto algunos errores vagos de Prettier:

Una ventana de terminal muestra la salida de la ejecución del comando , seguida de advertencias sobre problemas de estilo de código en varios archivos y un error que indica que el proceso se completó con un código de salida de 1. (Subtitulado por IA)
Una ventana de terminal muestra la salida de la ejecución del comando , seguida de advertencias sobre problemas de estilo de código en varios archivos y un error que indica que el proceso se completó con un código de salida de 1. (Subtitulado por IA)824×251 7.39 KB

) pero nada se renderiza. Todavía no hay ningún error en la consola del navegador, excepto una advertencia sobre
imagen
, ¿pero no creo que esa pueda ser la causa?

¿Alguna idea?

7

No estoy seguro de cuál es tu código actual después de tus correcciones, pero viendo la advertencia que estás recibiendo, el div .category-title-header debería al menos estar renderizándose en el DOM. Recomiendo inspeccionar la página en tu navegador. Además, intenta añadir un montón de console.log para ver hasta dónde llega la aplicación en el código. Alternativamente, existe la extensión del navegador Ember Inspector disponible para Chrome y Firefox que te permitirá leer el árbol de componentes.

1 me gusta
8

Si puedes, la forma más fácil de obtener comentarios sobre esto sería compartir tu repositorio. Los archivos que compartiste anteriormente no son independientes y también requieren un archivo de configuración.

9

Sí, disculpa por no haberlo incluido antes. Sería:
https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new

(La rama fix-compatibility-issues-new-new.)

Gracias, le echaré un vistazo más de cerca.

10

@Alteras En realidad está ahí, pero por alguna razón no se muestra. Añadir display: block !important hizo que apareciera, pero el estilo es ahora bastante diferente :slightly_frowning_face:

EDIT: He arreglado el CSS y ahora se muestran las cabeceras. ¡Muchas gracias @merefield @Alteras @manuel!

2 Me gusta
11

Parece que ahora funciona bien :+1:

Todavía obtengo algunos errores indefinidos en la consola. Deberías usar encadenamiento opcional con el operador ?. al buscar estructuras anidadas. Por ejemplo:

this.args.category.description?.replace
12

Yo también acabo de ver ese error cuando no hay descripción de categoría. ¡Gracias por la sugerencia!

1 me gusta