api.renderInOutlet non renderizza?

[NateDhaliwal]

Sto legittimamente andando nel panico. Sto cercando di renderizzare un componente .gjs, ma non viene visualizzato. Ho provato a renderizzare nei tag di template <h1>Hi</h1>, ma anche quello non viene visualizzato. Cosa sta succedendo?

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

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

Ho omesso l’importazione del componente perché non viene renderizzato con o senza di esso.

Onestamente non so cosa sto sbagliando.

[NateDhaliwal]

Sono incredibilmente cieco. Il file era in api_initializers, non in api-initializers .

[NateDhaliwal]

Ottimo… ora il mio componente non viene renderizzato…

---

Qualcuno ha qualche idea?
Il mio file api-initializers:

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

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

E il mio file 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>
}

Sembra tutto tecnicamente corretto, allora perché non viene renderizzato …?

Potrebbe sembrarti familiare… sì, sto cercando di passare dai widget ai componenti Glimmer.

[manuel (Manuel Kostka)]

@NateDhaliwal

Tutto sembra tecnicamente corretto, quindi perché non viene visualizzato ..?

Come concludi che sembra corretto, hai seguito i passaggi di base?

1. Controlla gli errori e gli avvisi di eslint e risolvili
2. Controlla gli errori e gli avvisi della console e risolvili

[NateDhaliwal]

@manuel

Controlla gli errori e gli avvisi della console e risolvili

Non ne ho visti, quindi ho saltato il primo.

A quanto pare

[NateDhaliwal]

@manuel Ho risolto tutto (tranne alcuni vaghi errori di Prettier:

) ma non viene visualizzato nulla. Ancora nessun errore nella console del browser, tranne un avviso su

, ma non penso che possa essere la causa?

Qualche idea?

[Alteras (Steven Chang)]

Non sono sicuro di quale sia il tuo codice attuale dopo le tue correzioni, ma vedendo l’avviso che stai ricevendo, il div .category-title-header dovrebbe almeno essere renderizzato nel DOM.

Ti consiglio di ispezionare la pagina nel tuo browser. Prova anche ad inserire un po’ di console.log per vedere dove l’applicazione raggiunge il codice. In alternativa, c’è l’estensione del browser Ember Inspector disponibile per Chrome e Firefox che ti permetterà di leggere l’albero dei componenti.

[manuel (Manuel Kostka)]

@NateDhaliwal

Qualche idea?

Se puoi, il modo più semplice per ottenere un feedback su questo sarebbe condividere il tuo repository. I file che hai condiviso sopra non sono autonomi e richiedono anche un file di impostazioni.

[NateDhaliwal]

Sì, scusa per non averlo incluso prima. Sarebbe:
https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new

(Il branch fix-compatibility-issues-new-new.)

@Alteras

Ti consiglio di ispezionare la pagina nel tuo browser. Inoltre, prova a inserire un po’ di console.log per vedere dove l’applicazione raggiunge il codice. In alternativa, è disponibile l’estensione del browser Ember Inspector per Chrome e Firefox che ti permetterà di leggere l’albero dei componenti.

Grazie, ci darò un’occhiata più da vicino.

[NateDhaliwal]

@Alteras In realtà c’è, ma per qualche motivo non viene visualizzato. L’aggiunta di display: block !important l’ha fatto apparire, ma lo stile ora è piuttosto diverso

MODIFICA: Ho sistemato il CSS e le intestazioni ora vengono visualizzate. Grazie mille @merefield @Alteras @manuel !

[manuel (Manuel Kostka)]

Sembra funzionare bene ora

Ricevo ancora alcuni errori undefined nella console. Dovresti usare optional chaining con l’operatore ?. quando cerchi strutture nidificate. Ad esempio:

this.args.category.description?.replace

[NateDhaliwal]

Ho anche appena visto quell’errore quando non c’è una descrizione della categoria. Grazie per il suggerimento!