api.renderInOutlet ne rend pas ?

[NateDhaliwal]

Je suis vraiment paniqué. J’essaie de rendre un composant .gjs, mais il ne s’affiche pas. J’ai essayé de rendre dans des balises de modèle `

<h1>Hi</h1>

, mais même cela ne s’affiche pas. Que se passe-t-il ?

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

export default apiInitializer((api) =
  api.renderInOutlet("above-main-container", 

```html
<h1>Hi</h1>

);
});

J'ai omis l'importation du composant car il ne s'affiche pas avec ou sans.

Je ne sais honnêtement pas ce que je fais de mal.

[NateDhaliwal]

Je suis incroyablement aveugle. Le fichier était dans api_initializers, pas api-initializers .

[NateDhaliwal]

Super… maintenant mon composant ne s’affiche pas…

---

Quelqu’un a des idées ?
Mon fichier api-initializers :

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

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

Et mon fichier de composant (.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>
}

Tout semble techniquement correct, alors pourquoi ça ne s’affiche pas …?

Cela peut vous sembler familier… oui, j’essaie de remplacer des widgets par des composants Glimmer.

[manuel (Manuel Kostka)]

@NateDhaliwal

Tout semble techniquement correct, alors pourquoi ne s’affiche-t-il pas ..?

Comment concluez-vous que cela semble correct, avez-vous suivi les étapes de base ?

1. Vérifiez les erreurs et avertissements eslint et résolvez-les
2. Vérifiez les erreurs et avertissements de la console et résolvez-les

[NateDhaliwal]

@manuel

Vérifiez les erreurs et les avertissements de la console et résolvez-les

Je n’en ai vu aucun, j’ai donc sauté le premier.

Il s’avère que

[NateDhaliwal]

@manuel J’ai donc tout corrigé (sauf quelques erreurs vagues de Prettier :

) mais rien ne s’affiche. Toujours aucune erreur dans la console du navigateur, à l’exception d’un avertissement concernant

, mais je ne pense pas que cela puisse être la cause ?

Des idées ?

[Alteras (Steven Chang)]

Je ne suis pas sûr de votre code actuel après vos corrections, mais d’après l’avertissement que vous recevez, la div .category-title-header devrait au moins être rendue dans le DOM.

Je vous recommande d’inspecter la page dans votre navigateur. Essayez également d’ajouter plusieurs console.log pour voir où l’application atteint le code. Alternativement, il existe une extension de navigateur Ember Inspector disponible pour Chrome et Firefox qui vous permettra de lire l’arborescence des composants.

[manuel (Manuel Kostka)]

@NateDhaliwal

Des idées ?

Si vous le pouvez, le moyen le plus simple d’obtenir des commentaires à ce sujet serait de partager votre dépôt. Les fichiers que vous avez partagés ci-dessus ne sont pas autonomes et nécessitent également un fichier de configuration.

[NateDhaliwal]

Oui, désolé de ne pas l’avoir inclus plus tôt. Ce serait :
https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new

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

@Alteras

Je recommande d’inspecter la page dans votre navigateur. Essayez également d’ajouter un tas de console.log pour voir où l’application atteint le code. Alternativement, il existe une extension de navigateur Ember Inspector disponible pour Chrome et Firefox qui vous permettra de lire l’arborescence des composants.

Merci, je vais examiner cela de plus près.

[NateDhaliwal]

@Alteras C’est en fait là, mais pour une raison quelconque, ça ne s’affiche pas. L’ajout de display: block !important l’a fait apparaître, mais le style est maintenant assez différent

EDIT : J’ai corrigé le CSS, et les en-têtes s’affichent maintenant. Merci beaucoup @merefield @Alteras @manuel !

[manuel (Manuel Kostka)]

Cela semble fonctionner maintenant

J’obtiens toujours des erreurs undefined dans la console. Vous devriez utiliser le chaînage optionnel avec l’opérateur ?. lorsque vous recherchez des structures imbriquées. Par exemple :

this.args.category.description?.replace

[NateDhaliwal]

J’ai également vu cette erreur lorsqu’il n’y a pas de description de catégorie. Merci pour la suggestion !