Modernisation des balises script inline pour les templates et l'API JS

Dev
1

L’utilisation de <script type='text/discourse-plugin'> ou <script type='text/x-handlebars'> dans les thèmes est désormais obsolète. Toute utilisation de ces balises dans les thèmes doit être mise à jour conformément aux instructions ci-dessous.

Les balises <script> et <script type='text/javascript'> régulières ne sont pas affectées par ce changement.

Calendrier

Ce ne sont que des estimations approximatives, sujettes à modification

  • Mai 2025 - Messages de dépréciation dans la console activés

  • Juillet 2025 - Bannières d’avertissement pour les administrateurs activées

  • Fin septembre 2025 Mars 2026 - Suppression de la fonctionnalité

Conversion de <script type='text/x-handlebars'>

Les modèles introduits en utilisant cette méthode doivent être déplacés vers des fichiers .hbs dédiés, ou être refactorisés en fichiers .gjs.

Pour conserver le format HBS, les modèles de connecteurs peuvent être placés dans :

{theme}/javascripts/discourse/connectors/{outlet-name}/{connector-name}.hbs

et les modèles de composants peuvent être placés dans :

{theme}/javascripts/discourse/components/{component-name}.hbs

:warning: Depuis mars 2026, les fichiers .hbs sont également obsolètes. Après avoir effectué cette conversion, passez aux instructions de Deprecating .hbs file extension in themes and plugins

Pour créer des connecteurs et des composants dans le format .gjs moderne, consultez ce chapitre du tutoriel du développeur de thèmes :

Conversion de <script type='text/discourse-plugin'>

Le code à l’intérieur de ces balises peut être migré vers un fichier JavaScript dédié.

Si vous développez votre thème via l’interface du panneau d’administration, copiez le code hors de la balise <script> et déplacez-le dans l’onglet JS (là où il est indiqué // your code here).

Si vous développez votre thème localement, créez un nouveau fichier à l’adresse

{theme}/javascripts/discourse/api-initializers/init-theme.js

puis ajoutez ce wrapper, et placez votre code à l’endroit indiqué :

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

export default apiInitializer((api) => {
  // Votre code ici
});

Dans les balises script, la seule façon d’importer d’autres modules JS était d’utiliser la syntaxe require(). Bien que cela fonctionne toujours dans un fichier .js, cela sera bientôt obsolète, il est donc temps de le convertir aux importations ES6 modernes. Par exemple :

- const I18n = require("discourse-i18n").default;
+ import I18n from "discourse-i18n";

- const { h } = require("virtual-dom");
+ import { h } from "virtual-dom";

Pour plus d’informations sur les initialisateurs JS :

19 « J'aime »
2

Peut-être une question très stupide, mais j’ai un composant de thème très très simple que j’ai placé directement dans la console d’administration sous <head> :

<script type="text/x-handlebars" data-template-name="/connectors/top-notices/whos-online-below-site-header">
{{whos-online}}
</script>

Si je suis correctement ce post, cela signifie-t-il que je dois maintenant créer un dossier de composant de thème séparé, l’héberger sur GitHub et ajouter le composant juste pour quelque chose d’aussi simple que d’ajouter à un plugin outlet ?

J’espère que non, car cela casserait la plupart de mes composants de thème simples :grimacing:

3

Il y a maintenant l’onglet JS, donc vous pouvez probablement utiliser api.renderInOutlet maintenant.

1 « J'aime »
4

Ah, je n’avais pas vu qu’il était possible de faire cela avec les connecteurs/composants également, mais dans l’article lié, j’ai trouvé ceci :

Peut-être plus facile que je ne le pensais, merci !

2 « J'aime »
5

Merci pour cette publication !
C’est peut-être une question très basique, je crois :
Comme nous n’avons pas d’environnement bac à sable, je dois être sûr avant de continuer.
Je dois mettre à jour un thème affecté, donc est-ce que je dis correctement que tout le code lié au « Script » de l’onglet « head » doit être déplacé dans l’onglet JS, comme illustré ci-dessous :

Screenshot 2025-07-14 at 1.15.15 pm
Screenshot 2025-07-14 at 1.15.15 pm1334×1077 121 KB

6

Presque, mais pas tout à fait. Vous voudriez supprimer les balises script et changer les imports en quelque chose comme :

import { ajax } from "discourse/lib/ajax";

Ensuite, collez tout cela dans l’onglet JS, à l’intérieur de :

7

Notre site Discourse (hébergé par Discourse) génère actuellement la barre d’erreur suivante (ce qui m’a conduit à ce fil de discussion) :

Screenshot 2025-07-14 at 10.40.31 AM
Screenshot 2025-07-14 at 10.40.31 AM2162×148 26.8 KB

Je ne suis pas au courant que nous ayons effectué de personnalisation du thème ‘Light’ de notre côté, et en regardant sa page d’administration, je ne vois rien qui suggère que ce soit autre chose que la valeur par défaut fournie par le système (mais je pourrais facilement manquer quelque chose).

Pour un site hébergé comme le nôtre, est-il probable que cela se résolve de lui-même avec le temps, ou cela nécessite-t-il une action de notre part ?

Merci,
-Brad

8

Vous devrez agir pour résoudre ce problème - il ne disparaîtra pas de lui-même.

J’ai jeté un coup d’œil rapide à votre site dans les outils de développement Chrome, et il semble que le code pertinent soit lié à l’ajout de la langue ‘chapel’ à highlightjs.

SCR-20250714-qmbq
SCR-20250714-qmbq1564×998 122 KB

Si vous visitez votre thème ‘Light’ et cliquez sur ‘modifier le code’, vous devriez le trouver sous l’un des onglets HTML. Vous pourrez ensuite suivre les instructions dans le premier message de ce sujet pour le déplacer vers l’onglet ‘JS’.

1 « J'aime »
9

Merci @david ! J’avais oublié que nous avions fait quelques personnalisations pour obtenir la coloration syntaxique de Chapel et je ne suis pas sûr d’y être parvenu de moi-même à partir de la bannière d’erreur, donc j’apprécie l’aide et les conseils.

-Brad

1 « J'aime »
10

J’ai un fichier .html simple :

<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/oprs-top-container'>
    <div id='WW_T_D_1' class='oprs-top-leaderboard'></div>
</script>

Je suis un peu confus quant aux différentes manières de faire cette migration. J’apprécierais si quelqu’un pouvait m’expliquer quoi faire. Merci

11

Just renderInOutlet to the connector

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

export default apiInitializer((api) => {
  api.renderInOutlet("below-site-header", <template>
    <div id='WW_T_D_1' class='oprs-top-leaderboard'></div>
  </template>);
});
2 « J'aime »
12

Merci. J’ai essayé et ça n’a pas marché :confused:

Voici ma structure et voici

below-site-header.js


export function test() {
    let test2 = document.querySelector('.test');
    console.log('test ', test2);
}

Et below-siteheader-connectors.hbs


<div></div>

Je suis nouveau dans ce domaine, donc toute aide est appréciée. J’ai repris ce dépôt d’un ancien développeur.

image
image742×484 34.6 KB

13

Salut, pourriez-vous partager le lien vers votre dépôt Github ? Merci !

14

J’ai donc inséré mon petit script « agrandir-avatar » dans l’onglet JS (depuis Desktop - head), et cela fonctionne assez simplement, mais existe-t-il au moins un moyen rapide et simple de faire en sorte qu’il ne s’applique qu’à Desktop ? Mes avatars mobiles sont également maintenant grands et tout cela a l’air plutôt ridicule.

Le code de référence est :

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

export default apiInitializer((api) => {
  api.changeWidgetSetting('post-avatar', 'size', '70');
});
15

Hmm… peut-être ajuster ceci avec CSS ?

3 « J'aime »
16

Ça a parfaitement fonctionné, merci !

1 « J'aime »
17

Juste un rappel amical : changeWidgetSetting sur post-avatar est une API obsolète et sera bientôt supprimée.

Peut-être devriez-vous modifier votre code comme suit :

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

export default apiInitializer((api) => {
  const site = api.container.lookup("service:site");
  if (!site.mobileView) {
    api.modifyClass("component:post/avatar", (SuperClass) => class extends SuperClass {
      get size() { return "70"; }
    });
  }
});
5 « J'aime »
18

Je pense qu’il existe également un composant de thème #officiel pour cela ? Avatar Size and Shape

Je ne suis pas sûr que cela corresponde au cas d’utilisation particulier, mais il semble que ce devrait être le cas (avec le bonus supplémentaire que quelqu’un le corrigera s’il a besoin d’être mis à jour :slight_smile:)

7 « J'aime »
19

Je suis passé de « rapide et sale » à officiellement pris en charge, merci à tous !

4 « J'aime »
20

À noter pour les personnes utilisant des composants hérités (gestion distincte Bureau/Mobile) que l’onglet JS n’est disponible que dans la section Commune - j’espère que cela fera gagner quelques recherches à d’autres :slight_smile:

1 « J'aime »