Modernizzazione dei tag script inline per template e API JS

[david (David Taylor)]

L’uso di <script type='text/discourse-plugin'> o <script type='text/x-handlebars'> nei temi è ora deprecato. Qualsiasi uso di questi tag nei temi dovrebbe essere aggiornato secondo le istruzioni seguenti.

Gli <script> regolari e <script type='text/javascript'> non sono interessati da questa modifica.

Tempistiche

Queste sono stime approssimative, soggette a modifiche

• Maggio 2025 - abilitati messaggi di deprecazione nella console

• Luglio 2025 - abilitati banner di avviso per gli amministratori

• Fine Settembre 2025 - rimozione della funzionalità

Conversione di <script type='text/x-handlebars'>

I template introdotti con questo metodo dovrebbero essere spostati in file .hbs dedicati, o rifattorizzati in file gjs.

Per mantenere come HBS, i template dei connettori possono essere inseriti in:

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

e i template dei componenti possono essere inseriti in:

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

Per creare connettori e componenti nel formato moderno .gjs, consulta questo capitolo del tutorial per sviluppatori di temi:

Theme Developer Tutorial: 4. Using Outlets to insert and replace content

Discourse uses the Ember JS Framework for its user interface. On top of Ember, Discourse provides a number of APIs to allow themes to customize the user interface. The most commonly-used API is Plugin Outlets. These outlets are positioned throughout Discourse core, and allow themes to render Ember Components inside them. Those components are given access to some contextual information called “outlet args”. Some outlets also “wrap” part of the core user interface, which allows themes to add the…

Conversione di <script type='text/discourse-plugin'>

Il codice all’interno di questi tag può essere migrato in un file JavaScript dedicato.

Se sviluppi il tuo tema tramite l’interfaccia del pannello di amministrazione, copia il codice fuori dallo <script>, e spostalo nella scheda JS (dove dice // your code here).

Se sviluppi il tuo tema localmente, crea un nuovo file in

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

quindi aggiungi questo wrapper, e inserisci il tuo codice nel punto indicato:

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

export default apiInitializer((api) => {
  // Your code here
});

Nei tag script, l’unico modo per importare altri moduli JS era usando la sintassi require(). Sebbene questo funzioni ancora in un file .js, sarà presto deprecato, quindi questo sarebbe un buon momento per convertirlo agli import ES6 moderni. Ad esempio:

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

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

Per maggiori informazioni sugli inizializzatori JS:

Theme Developer Tutorial: 6. Using the JS API

In the last couple of chapters, we’ve explored how to use the JavaScript API to render content into outlets. renderInOutlet is the most commonly-used API, but there are a ton more! In this chapter we’ll try out a few of them, and show you how to discover more. Common API methods getCurrentUser() api.getCurrentUser() will return information about the current user, or null if nobody is logged in. This can be used for all sorts of things, including per-group logic, or rendering a user’s username i…

[jimkleiber]

Forse una domanda molto stupida, ma ho un componente tema molto molto semplice che ho inserito direttamente nella console di amministrazione sotto \u003chead\u003e:

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

Se sto seguendo correttamente questo post, significa che ora devo creare una cartella separata per il componente tema, ospitarla su GitHub e aggiungere il componente solo per qualcosa di semplice come l’aggiunta a un plugin outlet?

Spero di no, perché ciò interromperebbe la maggior parte dei miei semplici componenti tema

[NateDhaliwal]

Ora c’è la scheda JS, quindi probabilmente puoi usare api.renderInOutlet ora.

[jimkleiber]

@NateDhaliwal

ecco la scheda JS ora, così puoi probabilmente usare api.renderInOutlet ora.

@david

Se sviluppi il tuo tema tramite l’interfaccia del pannello di amministrazione, copia il codice dalla sezione \u003cscript\u003e e spostalo nella scheda JS (dove dice // your code here).

Ah, non avevo visto che fosse possibile farlo anche con i connettori/componenti, ma nell’articolo collegato ho trovato questo:

@system

Il componente più semplice è un “componente solo template”, e può essere creato così:

const MyComponent = \u003ctemplate\u003eHello World\u003c/template\u003e;
api.renderInOutlet("some-outlet", MyComponent);

// Oppure su una riga
api.renderInOutlet("some-outlet", \u003ctemplate\u003eHello World\u003c/template\u003e);

Forse più facile di quanto pensassi, grazie!

[Sujeeva_Tissaarachchi]

Grazie per questo post!
Potrebbe essere una domanda molto basilare, credo:
Dato che non abbiamo una sandbox, devo essere sicuro prima di procedere.
Devo aggiornare un tema interessato, quindi ho ragione se dico che tutto il codice relativo a “Script” dalla scheda “head” deve essere spostato nella scheda JS come illustrato di seguito:

[NateDhaliwal]

Quasi, ma non del tutto. Dovresti rimuovere i tag script e cambiare le importazioni in qualcosa come:

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

Quindi, incolla tutto questo nella scheda JS, all’interno:

@david

export default apiInitializer((api) => {
  // Il tuo codice qui
});

[BradCray (Brad Chamberlain)]

Il nostro sito Discourse (ospitato da Discourse) sta attualmente generando la seguente barra di errore (che è ciò che mi ha portato a questo thread):

Non sono a conoscenza di aver apportato alcuna personalizzazione al tema ‘Light’ da parte nostra e, guardando la sua pagina di amministrazione, non vedo nulla che suggerisca che si tratti di altro se non del predefinito fornito dal sistema (ma potrei facilmente perdermi qualcosa).

Per un sito ospitato come il nostro, è probabile che si risolva da solo nel tempo o richiede un’azione da parte nostra?

Grazie,
-Brad

[david (David Taylor)]

Dovrai intervenire per risolvere questo problema: non sparirà da solo.

Ho dato una rapida occhiata al tuo sito in Chrome DevTools e sembra che il codice pertinente sia correlato all’aggiunta della lingua ‘chapel’ a highlightjs.

Se visiti il tuo tema ‘Light’ e fai clic su ‘modifica codice’, dovresti trovarlo sotto una delle schede HTML. Quindi puoi seguire le istruzioni nell’OP di questo argomento per spostarlo nella scheda ‘JS’.

[BradCray (Brad Chamberlain)]

Grazie @david! Avevo dimenticato che avevamo apportato alcune personalizzazioni per ottenere l’evidenziazione di Chapel e non sono sicuro che sarei arrivato da solo dal banner di errore, quindi apprezzo l’assistenza e i suggerimenti.

-Brad

[marco084]

Ho un semplice file .html:

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

Sono un po’ confuso riguardo ai diversi modi per eseguire questa migrazione. Apprezzerei se qualcuno mi spiegasse cosa fare. Grazie

[Lhc_fl (Linca)]

Basta renderInOutlet al connettore

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

[marco084]

Grazie. Ho provato e non ha funzionato

Questa è la mia struttura e questi sono

below-site-header.js

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

E below-siteheader-connectors.hbs

<div></div>

Sono nuovo in questo, quindi qualsiasi aiuto è apprezzato. Ho preso questo repository da uno sviluppatore precedente.

[NateDhaliwal]

Ciao, potresti condividere il link al tuo repository Github? Grazie!

[Yuun (Sam)]

Quindi ho inserito il mio piccolo script “make-avatar-bigger” nella scheda JS (da Desktop - ), e funziona abbastanza semplicemente, ma c’è almeno un modo rapido e “sporco” per far sì che si applichi solo su Desktop? Anche i miei avatar mobili sono ora grandi e sembra piuttosto sciocco.

Il codice di riferimento è:

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

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

[NateDhaliwal]

Hmm… forse aggiustare questo con CSS?

[Yuun (Sam)]

Ha funzionato perfettamente, grazie!

[Lhc_fl (Linca)]

Solo un promemoria amichevole: changeWidgetSetting su post-avatar è un’API deprecata e verrà rimossa presto.

Forse dovresti cambiare il tuo codice in questo

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";
        }
      }
    );
  }
});

[JammyDodger]

Penso che ci sia anche un componente #ufficiale per questo? Avatar Size and Shape

Non sono sicuro che si adatti al caso d’uso particolare, ma sembra che dovrebbe (con il bonus aggiunto che qualcuno lo correggerà se avrà bisogno di aggiornamenti )

[Yuun (Sam)]

Sono passato da “quick 'n dirty” a ufficialmente supportato, grazie a tutti!

[ES-Alexander]

Da notare per chi ha componenti legacy (che utilizzano una gestione separata Desktop/Mobile) che la scheda JS è disponibile solo nella sezione Common - si spera che questo risparmi ad altri qualche ricerca