api.renderInOutlet não está renderizando?

[NateDhaliwal]

Estou genuinamente apavorado(a). Estou tentando renderizar um componente .gjs, mas ele não aparece. Tentei renderizar em tags de template <h1>Hi</h1>, mas nem isso aparece. O que está acontecendo?

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);
});

Omiti a importação do componente porque ele não renderiza com ou sem ela.

Sinceramente, não sei o que estou fazendo de errado.

[NateDhaliwal]

Sou terrivelmente cego. O arquivo estava em api_initializers, não em api-initializers .

[NateDhaliwal]

Ótimo… agora meu componente não está renderizando…

---

Alguém tem alguma ideia?
Meu arquivo 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 meu arquivo 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>
}

Tudo parece tecnicamente correto, então por que não renderiza ..?

Isso pode parecer familiar… sim, estou tentando trocar widgets por componentes Glimmer.

[manuel (Manuel Kostka)]

@NateDhaliwal

Tudo parece tecnicamente correto, então por que não renderiza ..?

Como você conclui que parece correto, você seguiu os passos básicos?

1. Verifique os erros e avisos do eslint e resolva-os
2. Verifique os erros e avisos do console e resolva-os

[NateDhaliwal]

@manuel

Verifique os erros e avisos do console e resolva-os

Não vi nenhum, então pulei o primeiro.

Acontece que

[NateDhaliwal]

@manuel Então, corrigi tudo (exceto alguns erros vagos do Prettier:

) mas nada é renderizado. Ainda não há erro no console do navegador, exceto por um aviso sobre

, mas não acho que isso possa ser a causa?

Alguma ideia?

[Alteras (Steven Chang)]

Não tenho certeza de qual é o seu código atual após suas correções, mas vendo o aviso que você está recebendo, a div .category-title-header deve pelo menos estar sendo renderizada no DOM.

Recomendo inspecionar a página no seu navegador. Tente também adicionar vários console.log para ver onde o aplicativo chega ao código. Alternativamente, existe a extensão de navegador Ember Inspector disponível para Chrome e Firefox que permitirá que você leia a árvore de componentes.

[manuel (Manuel Kostka)]

@NateDhaliwal

Alguma ideia?

Se puder, a maneira mais fácil de obter feedback sobre isso seria compartilhar seu repositório. Os arquivos que você compartilhou acima não são independentes e também exigem um arquivo de configurações.

[NateDhaliwal]

Sim, desculpe por não ter incluído isso antes. Seria:
https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new

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

@Alteras

Recomendo inspecionar a página no seu navegador. Além disso, tente adicionar vários console.log para ver onde a aplicação chega ao código. Alternativamente, existe a extensão do navegador Ember Inspector disponível para Chrome e Firefox que permitirá ler a árvore de componentes.

Obrigado, vou dar uma olhada mais de perto nisso.

[NateDhaliwal]

@Alteras Na verdade, está lá, mas por algum motivo não está aparecendo. Adicionar display: block !important fez com que aparecesse, mas o estilo agora é bem diferente

EDIT: Consegui corrigir o CSS, e os cabeçalhos agora estão sendo exibidos. Muito obrigado @merefield @Alteras @manuel !

[manuel (Manuel Kostka)]

Parece que agora funciona

Ainda recebo alguns erros indefinidos no console. Você deve usar optional chaining com o operador ?. ao procurar por estruturas aninhadas. Por exemplo:

this.args.category.description?.replace

[NateDhaliwal]

Eu também acabei de ver esse erro quando não há descrição de categoria. Obrigado pela sugestão!