api.renderInOutletがレンダリングされない？

開発
1

本当にパニックになっています。.gjs コンポーネントをレンダリングしようとしていますが、表示されません。テンプレートタグ <h1>Hi</h1> でレンダリングしようとしましたが、それさえも表示されません。何が起こっているのでしょうか？

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

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

コンポーネントのインポートは、それがあってもなくてもレンダリングされないため省略しました。

正直、何が間違っているのかわかりません。

2

私は信じられないほど盲目でした。ファイルは api-initializers にあり、api-initializers ではありませんでした :facepalm: 。

「いいね！」 2
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

どのように「正しく見える」と結論付けたのですか？基本的な手順に従いましたか？

  1. eslintのエラーと警告を確認し、解決する
  2. コンソールのエラーと警告を確認し、解決する
「いいね！」 2
5

エラーや警告は見当たらなかったので、最初のものはスキップしました。

: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
6

@manuel すべて修正しました（あいまいなPrettierエラーを除く：

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

）が、何もレンダリングされません。ブラウザのコンソールにもエラーは出ていませんが、以下の警告だけ出ています。
image
、これが原因だとは思えませんが？

何かアイデアはありますか？

7

修正後の現在のコードがどうなっているのか分かりませんが、表示されている警告を見ると、少なくとも .category-title-header の div は DOM にレンダリングされているはずです。

ブラウザでページをインスペクトすることをお勧めします。また、アプリケーションがコードのどこに到達するかを確認するために、たくさんの console.log を挿入してみてください。あるいは、Chrome および Firefox で利用可能な Ember Inspector ブラウザ拡張機能があり、コンポーネントツリーを読むことができます。

「いいね！」 1
8

もし可能であれば、これに関するフィードバックを得る最も簡単な方法は、リポジトリを共有することです。上記で共有されたファイルはスタンドアロンではなく、設定ファイルも必要とします。

9

はい、すみません、それを早く含めませんでした。それは次のようになります。
https://github.com/NateDhaliwal/discourse-category-headers/tree/fix-compatibility-issues-new-new

（fix-compatibility-issues-new-new ブランチです。）

ありがとうございます。詳しく調べてみます。

10

@Alteras 実際には存在しますが、何らかの理由で表示されていませんでした。display: block !important を追加すると表示されましたが、スタイリングがかなり異なってしまいました :slightly_frowning_face:

編集：CSSを修正し、ヘッダーが表示されるようになりました。@merefield @Alteras @manuel 本当にありがとうございました！

「いいね！」 2
11

これで正常に動作するようです :+1:

コンソールで未定義のエラーがいくつか発生しています。ネストされた構造を検索する際に、?. 演算子を使用したオプショナルチェイニングを使用する必要があります。たとえば、次のようになります。

this.args.category.description?.replace
12

私もちょうど、カテゴリの説明がない場合にそのエラーを見ました。提案ありがとうございます！

「いいね！」 1