Impossible de mettre le modèle dans la sortie souhaitée

Dev
1

J’essaie d’insérer un modèle dans un outlet de plugin spécifique dans mon fichier javascripts/discourse/initializers/persistent-banner.gjs.
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);
  }
}

Mais le HTML dans la balise <template> ne s’affiche pas à l’emplacement de l’outlet. En fait, il ne s’affiche pas du tout. Qu’est-ce que je fais de mal ?
Lien du dépôt : GitHub - NateDhaliwal/discourse-persistent-banner: A theme component for Discourse that cannot be closed by the user.

1 « J'aime »
2

N’utilisez pas d’initialiseur pour cela ? Utilisez le dossier des connecteurs. Il y a plein d’exemples.

2 « J'aime »
3

La raison est qu’il existe différentes sorties qui peuvent être sélectionnées.
J’ai adapté ce code du dépôt de Notification Banner.

2 « J'aime »
4

Ah, je comprends. Oui, c’est logique. Désolé, je n’étais pas sûr de votre intention fonctionnelle. J’aurais dû lire le code plus en détail.

1 « J'aime »
6

Quelques éléments pour vous aider à redémarrer :

  • Ce fichier a une parenthèse fermante manquante à la fin de votre appel apiInitializer - cela ne fonctionnera tout simplement pas.

En corrigeant ce problème, je vois d’autres erreurs.

  • banner_plugin_outlet n’est pas déclaré - vous avez besoin d’un const ici.

    Vous l’assignez deux fois ? Vous n’en avez pas besoin deux fois, je suppose :slight_smile:

    banner_plugin_outlet = settings.banner_position

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

  • Il vous manque des imports :

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

  • … mais je n’ai pas réussi à faire fonctionner themeSetting comme un helper ici. Aucune erreur, juste vide, alors essayez ce code à la place :

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

  • Vérifiez toujours la console pour les erreurs.

6 « J'aime »
7

J’ai importé htmlSafe et cela a fonctionné à merveille !
Merci beaucoup !

2 « J'aime »
8

Oui, le helper ne fonctionne pas (et n’est pas nécessaire) dans gjs. Définir un getter est bien. Mais si vous voulez l’éviter, vous pouvez référencer directement le « global » settings depuis le template :

<template>
  {{htmlSafe settings.banner_text_content}}
</template>
4 « J'aime »
9

Merci. Cela ne semblait pas très transparent ! :sweat_smile:

3 « J'aime »
10

C’est juste. Améliorons les messages d’erreur :

SCR-20241014-kvau
SCR-20241014-kvau1444×214 33.3 KB

SCR-20241014-kvmu
SCR-20241014-kvmu1480×234 32.6 KB

5 « J'aime »
11

Merci. Cela améliore vraiment l’expérience du développeur.

Ce qui, comme nous le savons, s’est considérablement amélioré avec .gjs par rapport aux widgets.

Cependant

Il existe de nombreuses erreurs très étranges que l’on peut obtenir lors de l’utilisation de composants gjs, ce qui ne facilite pas la recherche des problèmes.

Par exemple, déréglons le nom de l’assistant :
{{html_safe this.bannerTextContent}}

Mène au classique :

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

(cela se produit également ici avec un nom valide si vous oubliez l’importation)

Quoi ?! :sweat_smile: Il existe de nombreux exemples de ce type.

Je suppose que c’est un inconvénient de l’utilisation d’un framework ?

3 « J'aime »
12

Aïe, c’est un gros problème !

Quand j’essaie localement, je vois :

SCR-20241014-muuf
SCR-20241014-muuf1992×146 30.6 KB

Où avez-vous vu l’erreur WeakMap ? Sur un site de production ? Si oui… c’est peut-être l’une des vérifications qu’ember optimise hors des builds de production pour améliorer les performances.

Si vous le pouvez, je recommanderais toujours de développer des thèmes/plugins dans un environnement de développement approprié - il y a beaucoup de cas comme celui-ci où l’expérience sera meilleure.

4 « J'aime »
13

Oui, le site de production utilise le Theme CLI ( ce qui est, je suppose, l’un de ses inconvénients, malgré son flux de travail par ailleurs excellent ?)

[quote=“David Taylor, post:12, topic:330650, username:david”]aucun des contrôles que ember optimise hors des builds de production pour améliorer les performances.
[/quote]

Cela a tout à fait du sens.

Oui, avec les plugins, c’est mon choix, mais avec les TC, il y a une forte tentation de développer sur un site de production en raison de l’immédiateté du retour (sinon toujours très utile !)

Mais je viens de réaliser que l’on peut entrer en localhost avec le CLI et cela fonctionne.

Alors, duh !

image

Je l’utiliserai à l’avenir ! :rocket:

Je n’ai aucune idée pourquoi je pensais que ce ne serait pas possible :blush: :sweat_smile:

Comme d’habitude, merci pour votre aide, cela m’a fait gagner beaucoup de temps (à l’avenir :slight_smile: )

2 « J'aime »
14

Oui ! Je travaille avec Localhost et theme-cli, et c’est ce que je recommande aux autres. Nous pouvons certainement améliorer la documentation de ces flux de travail recommandés :eyes:

L’autre astuce est que discourse.theme-creator.io fonctionne avec des actifs Ember en mode développement. Cela devrait également afficher des messages d’erreur plus clairs.

4 « J'aime »
15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.