Kann die Vorlage nicht in der gewünschten Steckdose einsetzen

[NateDhaliwal]

Ich versuche, eine Vorlage in einem bestimmten Plugin-Outlet in meiner javascripts/discourse/initializers/persistent-banner.gjs einzufügen.
Code:

import Component from "@glimmer/component";
import { apiInitializer } from "discourse/lib/api";

banner_plugin_outlet = settings.banner_position

export default apiInitializer("1.14.0", (api) => {
  try {
    banner_plugin_outlet = settings.banner_position
    api.renderInOutlet(
      banner_plugin_outlet,
      class persistentbanner extends Component {
        get bannerIsFilled() {
          if (settings.banner_text_content == "") {
            return false;
          } else if (settings.banner_visible == "hide") {
            return false;
          } else {
            return true;
          }
        }
        <template>
          {{#if this.bannerIsFilled}}
            <div class='persistent-banner'>
              <p>
                {{html_safe (theme-setting 'banner_text_content')}}
              </p>
            </div>
          {{/if}}
        </template>
      }
    );
  } catch (e) {
    console.log(e);
  }
}

Aber das HTML im <template>-Tag wird nicht am Outlet-Standort angezeigt. Tatsächlich wird es überhaupt nicht angezeigt. Was mache ich falsch?
Repo-Link: GitHub - NateDhaliwal/discourse-persistent-banner: A theme component for Discourse that cannot be closed by the user.

[merefield (Robert)]

Verwenden Sie hierfür keinen Initialisierer? Verwenden Sie den Ordner „Connectors“. Es gibt viele Beispiele.

[NateDhaliwal]

Der Grund dafür ist, dass verschiedene Ausgänge ausgewählt werden können.
Ich habe diesen Code aus dem Repository von Notification Banner übernommen.

[merefield (Robert)]

Verstanden. Ja, das ergibt Sinn. Entschuldigen Sie, ich war mir nicht sicher bezüglich Ihrer funktionalen Absicht. Ich hätte den Code genauer lesen sollen.

[merefield (Robert)]

Ein paar Dinge, damit Sie wieder loslegen können:

• Diese Datei hat eine fehlende schließende runde Klammer am Ende Ihres
  apiInitializer-Aufrufs – das wird einfach nicht funktionieren.

Nachdem ich dieses Problem behoben habe, sehe ich weitere Fehler.

• banner_plugin_outlet ist nicht deklariert – Sie benötigen hier ein const.

  Sie weisen ihm zweimal einen Wert zu? Sie brauchen ihn wahrscheinlich nicht zweimal

  banner_plugin_outlet = settings.banner_position
  
  export default apiInitializer("1.14.0", (api) => {
    try {
      banner_plugin_outlet = settings.banner_position
  

• Sie vermissen Importe:

  import { htmlSafe } from "@ember/template";
  import themeSetting from "discourse/helpers/theme-setting";
  

• … aber ich konnte themeSetting hier nicht als Helfer zum Laufen bringen. Kein Fehler, nur leer, also versuchen Sie stattdessen diesen Code:

          get bannerTextContent() {
            return settings.banner_text_content;
          }
          <template>
            {{#if this.bannerIsFilled}}
              <div class='persistent-banner'>
                <p>
                  {{htmlSafe this.bannerTextContent}}
  

• Überprüfen Sie immer die Konsole auf Fehler.

[NateDhaliwal]

Ich habe htmlSafe importiert und das hat wunderbar funktioniert!
Vielen Dank!

[david (David Taylor)]

@merefield

Ich konnte themeSetting hier nicht als Helfer zum Laufen bringen. Kein Fehler, nur leer, also versuchen Sie stattdessen diesen Code:

        get bannerTextContent() {
          return settings.banner_text_content;
        }
        <template>
          {{#if this.bannerIsFilled}}
            <div class='persistent-banner'>
              <p>
                {{htmlSafe this.bannerTextContent}}

Ja, der Helfer funktioniert nicht (und wird nicht benötigt) in gjs. Das Definieren eines Getters ist in Ordnung. Aber wenn Sie das vermeiden möchten, können Sie direkt aus der Vorlage auf das settings-„Global“ verweisen:

<template>
  {{htmlSafe settings.banner_text_content}}
</template>

[merefield (Robert)]

Danke. Das schien nicht sehr transparent!

[david (David Taylor)]

Das ist fair. Verbessern wir die Fehlermeldungen:

DEV: Improve error messages for legacy theme helpers in gjs

[merefield (Robert)]

Vielen Dank. Das verbessert die Entwicklererfahrung erheblich.

Was wir wissen, hat sich mit .gjs gegenüber Widgets dramatisch verbessert.

jedoch

Es gibt viele sehr seltsame Fehler, die bei der Verwendung von gjs-Komponenten auftreten können und die Fehlersuche nicht gerade einfach machen.

Verderben wir zum Beispiel den Hilfsnamen:
{{html_safe this.bannerTextContent}}

Führt zum Klassiker:

program.js:100 Uncaught (in promise) TypeError: Invalid value used as weak map key at WeakMap.set (<anonymous>)

(Dies geschieht hier auch mit einem gültigen Namen, wenn Sie den Import vergessen)

Was soll das denn?! Davon gibt es viele Beispiele.

Ich schätze, das ist ein Nachteil der Verwendung eines Frameworks?

[david (David Taylor)]

Autsch, das ist ein schlimmer Fehler!

Wenn ich es lokal versuche, sehe ich:

Wo hast du den WeakMap-Fehler gesehen? Auf einer Produktionsseite? Wenn ja… vielleicht ist das eine der Prüfungen, die Ember aus Produktions-Builds herausoptimiert, um die Leistung zu verbessern.

Wenn möglich, würde ich immer empfehlen, Themes/Plugins in einer richtigen Entwicklungsumgebung zu entwickeln – es gibt viele Fälle wie diesen, in denen die Erfahrung besser sein wird.

[merefield (Robert)]

Ja, die Produktionsseite nutzt das Theme CLI (, was ich als einen seiner Nachteile ansehe, trotz seines ansonsten großartigen Workflows?)

@david

keine der Prüfungen, die Ember aus Produktions-Builds herausoptimiert, um die Leistung zu verbessern.

Das ergibt total Sinn.

@david

Ich würde immer empfehlen, Themes … gegen eine richtige Entwicklungsumgebung zu entwickeln

Ja, mit Plugins ist das mein Favorit, aber mit TCs gibt es eine große Versuchung, gegen eine Produktionsseite zu entwickeln, wegen der Unmittelbarkeit des Feedbacks (wenn auch nicht immer sehr hilfreich!)

Aber mir ist gerade klar geworden, man kann mit dem CLI auf localhost zugreifen und es funktioniert.

Also, duh!

Das werde ich in Zukunft nutzen!

Ich habe keine Ahnung, warum ich dachte, das wäre nicht möglich

Wie immer, danke für deine Hilfe, das hat mir viel Zeit gespart (in der Zukunft )

[david (David Taylor)]

Ja! Localhost mit einem Theme-CLI ist, wie ich zu arbeiten versuche und was ich anderen Leuten empfehle. Wir können definitiv die Dokumentation dieser empfohlenen Workflows verbessern

Der andere Tipp ist, dass discourse.theme-creator.io mit Ember-Assets im Entwicklungsmodus läuft. Das sollte also auch die besseren Fehlermeldungen haben.