api.renderInOutlet rendert niet?

Ontwikkelaar
1

Ik raak echt in paniek. Ik probeer een .gjs-component te renderen, maar die verschijnt niet. Ik heb geprobeerd te renderen in template tags <h1>Hi</h1>, maar zelfs dat verschijnt niet. Wat is er aan de hand?

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

export default apiInitializer((api) => {
  api.renderInOutlet("above-main-container", <h1>Hi</h1>);
});

Ik heb de componentimport weggelaten omdat deze er wel/niet mee/zonder mee rendert.

Ik weet eerlijk gezegd niet wat ik verkeerd doe.

2

Ik ben ongelooflijk blind. Het bestand stond in api_initializers, niet api-initializers :facepalm:.

2 likes
3

Great… now my component isn’t rendering…

Does anyone have any ideas?
My api-initializers file:

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

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

And my component (.gjs) file:

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

Everything looks technically correct, so why doesn’t it render :thinking:..?

This may look familiar… yes, I’m trying to switch widgets for Glimmer components.

4

How do you conclude that it looks correct, did you follow basic steps?

  1. Check eslint errors and warnings and resolve them
  2. Check console errors and warnings and resolve them
2 likes
5

Didn’t see any so I skipped the first one.

Turns out :facepalm:

A dark-themed interface displays a list of code linting tools—ESLint, Stylelint, Prettier, and Ember template lint—each marked with a red 'x' indicating errors. (Captioned by AI)
A dark-themed interface displays a list of code linting tools—ESLint, Stylelint, Prettier, and Ember template lint—each marked with a red 'x' indicating errors. (Captioned by AI)625×249 8.25 KB

1 like
6

@manuel So I’ve fixed everything (except for some vague Prettier errors:

A terminal window displays the output of running the command, followed by warnings about code style issues in several files and an error indicating the process completed with an exit code of 1. (Captioned by AI)
A terminal window displays the output of running the command, followed by warnings about code style issues in several files and an error indicating the process completed with an exit code of 1. (Captioned by AI)824Ă—251 7.39 KB

) but nothing renders. Still no error in the browser console, except for a warning about
image
, but I don’t think that could be the cause?

Any ideas?

7

Ik weet niet zeker wat je huidige code is na je correcties, maar gezien de waarschuwing die je krijgt, zou de .category-title-header div op zijn minst in de DOM moeten worden weergegeven.

Ik raad aan de pagina in je browser te inspecteren. Probeer ook een paar console.log statements toe te voegen om te zien waar de applicatie de code bereikt. Als alternatief is er de Ember Inspector browser-extensie beschikbaar voor Chrome en Firefox, waarmee je de componentenboom kunt lezen.

1 like
8

If you can, the easiest way to get feedback on this would be to share your repo. The files you shared above are not stand-alone and require a settings file as well.

9

Yes, sorry for not including that earlier. That would be:

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

Thanks, I’ll take a closer look into that.

10

@Alteras It’s actually there, but not showing for some reason. Adding display: block !important made it appear, but the styling is now quite different :slightly_frowning_face:

EDIT: Got the CSS fixed, and the headers are now displaying. Thanks so much @merefield @Alteras @manuel !

2 likes
11

Seems to work fine now :+1:

I still get some undefined errors in the console. You should use optional chaining with the ?. operator when looking up nested structures. For example:

this.args.category.description?.replace
12

Ik zag die fout ook net toen er geen categoriebeschrijving was. Bedankt voor de suggestie!

1 like