# Modernizando etiquetas de script en línea para plantillas y API de JS

**URL:** <https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482>\
**Category:** Development\
**Tags:** dev-news\
**Created:** [19 Mayo, 2025 09:55 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482 "2025-05-19T09:55:17Z")\
**Posts on this page:** 8\
**Page:** 3

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [20 Noviembre, 2025 04:31 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/42 "2025-11-20T04:31:00Z")

</div>

Hola de nuevo, ¡muchas gracias por la respuesta!

Este es el código obsoleto que funciona actualmente y que pego en la sección **`\u003chead\u003e`** de un componente de tema. También hay algo de CSS de soporte, pero eso no es un problema aquí.

```js
<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
        let images = new Array();
        let goTo = new Array();
        
/////////////////////////////////
        let imageCount = 2;
        images[0]="/uploads/3213123123123213.jpg";
        goTo[0]="https://example1.com";
        images[1]="/uploads/djdsalklkjdsajsalkd.jpg";
        goTo[1]="https://example2.com";
/////////////////////////////////
        
        imageCount-=1;
        let randPick = Math.round(imageCount * Math.random());
        let theLink = goTo[randPick];
        let theImage = images[randPick];

    return h("div.p3-image", [
      h(
        "a.p3-image-link",
        { href: theLink, target: "_blank" },
        h("img", { src: theImage})
      )
    ]);
  }
});
</script>

```

He seguido buscando y modificando fragmentos de código que hacen algo similar a lo que necesito con los métodos modernos, y esto es lo que he conseguido que funcione por ahora, pegado en la pestaña **JS** :

```js
import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";

function customizePost(api) {
  api.renderAfterWrapperOutlet(
    "post-article-content",
    class extends Component {
      static shouldRender(args) {
        return args.post?.post_number === 1;
      }

      <template>Hello is this working? Yes but CSS divs are needed...</template>
      
    }
  );
}

export default {
  name: "not-sure-if-I-need-this",
  initialize() {
    withPluginApi((api) => {
      customizePost(api);
    });
  }
};

```

---

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [20 Noviembre, 2025 05:49 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/43 "2025-11-20T05:49:49Z")

</div>

Prueba algo como:

```gjs
import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.renderAfterWrapperOutlet(
    "post-article-content",
    class extends Component {
      @tracked imageSrc = "";
      @tracked imageHref = "";

      constructor() {
        super(...arguments)
        this.randomImageLink();
      }

      static shouldRender(args) {
        return args.post?.post_number === 1;
      }
      
      randomImageLink() {
        let images = new Array();
        let goTo = new Array();
        
        /////////////////////////////////
        let imageCount = 2;
        images[0]="/uploads/3213123123123213.jpg";
        goTo[0]="https://example1.com";
        images[1]="/uploads/djdsalklkjdsajsalkd.jpg";
        goTo[1]="https://example2.com";
        /////////////////////////////////
        
        imageCount-=1;
        let randPick = Math.round(imageCount * Math.random());
        this.imageSrc = goTo[randPick];
        this.imageHref = images[randPick];
      }

      <template>
        <div class="p3-image">
          <a href={{this.imageHref}} target="_blank">
            <img src={{this.imageSrc}} />
          </a>
        </div>
      </template>
    }
  );
});

```

Es posible que tengas que ajustarlo un poco, no lo he probado completamente.

---

<div class="post-metadata">

**Author:** ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)\
**Post date:** [21 Noviembre, 2025 13:03 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/44 "2025-11-21T13:03:38Z")

</div>

Siento mi lenta respuesta, he estado un poco abrumado últimamente.

¡Muy bien! Funciona, solo que estas dos estaban al revés:

```plaintext
        this.imageSrc = images[randPick];
        this.imageHref = goTo[randPick];

```

Necesito leer sobre la cosa `@tracked` (ni siquiera sé cómo llamarla, ¿variables rastreadas?) así como ese método `constructor`. Tampoco entiendo del todo cómo o en qué momento se ejecuta el método `shouldRender`.

Muchas gracias por tu ayuda con esto, nunca se me habría ocurrido usar esos métodos por mi cuenta.

---

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [21 Noviembre, 2025 13:59 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/45 "2025-11-21T13:59:05Z")

</div>

Puede leer sobre las propiedades rastreadas [aquí](https://guides.emberjs.com/release/in-depth-topics/autotracking-in-depth/#toc_updating-tracked-properties).

Creo que `shouldRender` se ejecuta justo al principio, ya que decide si la plantilla es visible o no.

¡Me alegro de haber podido ayudar!

---

<div class="post-metadata">

**Author:** ![Monikas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/monikas/32/375316_2.png) [@Monikas](https://meta.discourse.org/u/Monikas)\
**Post date:** [2 Febrero, 2026 09:48 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/46 "2026-02-02T09:48:41Z")

</div>

```plaintext
<script type="text/x-handlebars" data-template-name="/connectors/discovery-list-container-top/moe-counter-banner">
  <div class="moe-counter-container">
    <img 
      src="https://moe.8845.top/get/?name=Monika&theme=booru-helltaker" 
      alt="Contador de visitantes" 
      class="moe-counter-img"
    >
  </div>
</script>

```

¿Cómo debería escribir esto? Yo también soy nuevo aquí.

---

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2 Febrero, 2026 11:37 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/47 "2026-02-02T11:37:37Z")

</div>

> [@Monikas](#):
>
> `discovery-list-container-top`

Prueba esto:

```js
api.renderInOutlet(
  "discovery-list-container-top",
  <template>
    <div class="moe-counter-container">
      <img 
        src="https://moe.8845.top/get/?name=Monika&theme=booru-helltaker" 
        alt="Contador de visitantes" 
        class="moe-counter-img"
      >
    </div>
  </template>
);

```

Ver:

> [@Theme Developer Tutorial: 4. Using Outlets to insert and replace content](https://meta.discourse.org/t/theme-developer-tutorial-4-using-outlets-to-insert-and-replace-content/357799):
>
> Discourse uses the [Ember JS Framework](https://emberjs.com/) 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…

---

<div class="post-metadata">

**Author:** ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)\
**Post date:** [11 Marzo, 2026 06:26 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/48 "2026-03-11T06:26:15Z")

</div>

4 publicaciones se dividieron en un nuevo tema: [Depuración de la API de cambio de página después de la migración](https://meta.discourse.org/t/debugging-the-page-change-api-after-migration/398132)

---

<div class="post-metadata">

**Author:** ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)\
**Post date:** [25 Marzo, 2026 10:46 UTC](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482/49 "2026-03-25T10:46:51Z")

</div>

> [@david](#):
>
> - **Mayo 2025** - Mensajes de advertencia de la desactivación de la consola activados
> - **Julio 2025** - Banners de advertencia para administradores activados
> - ~~**Finales de septiembre de 2025**~~ **Marzo de 2026** - Eliminación de la característica

El soporte para estas etiquetas de script en línea ha sido eliminado en la última versión de Discourse

> <https://github.com/discourse/discourse/pull/38856>
>
> These were deprecated in May 2025. https://meta.discourse.org/t/modernizing-inli…ne-script-tags-for-templates-js-api/366482

[Página anterior](https://meta.discourse.org/t/modernizing-inline-script-tags-for-templates-js-api/366482.md?page=2)