Modernizando tags de script inline para templates e API JS

Dev
42

Olá novamente, muito obrigado pela resposta!

Este é o código obsoleto que funciona atualmente e que eu colei na seção \u003chead\u003e de um componente de tema. Há também algum CSS de suporte, mas isso não é um problema aqui.

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

Eu continuei pesquisando e mexendo em trechos de código que fazem algo semelhante ao que preciso com os métodos modernos, e isto é o que consegui fazer funcionar por enquanto, colado na aba 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>Olá, isso está funcionando? Sim, mas as divs de CSS são necessárias...</template>
      
    }
  );
}

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

Tente algo como:

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

Você pode ter que ajustar um pouco, eu não testei completamente.

44

Desculpe pela minha resposta lenta, estou um pouco sobrecarregado recentemente.

Muito bom!! Funciona, só que estes dois estavam invertidos:

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

Preciso ler sobre a coisa do @tracked (eu nem sei como chamar isso, variáveis rastreadas?) assim como aquele método constructor. Eu também não entendo muito bem como ou em que ponto o método shouldRender é executado.

Muito obrigado pela sua ajuda com isso, eu nunca teria pensado em usar esses métodos sozinho.

45

Você pode ler sobre propriedades rastreadas aqui.

Acredito que shouldRender é executado logo no início, pois decide se o template está visível ou não.

Fico feliz em ter ajudado!

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

Como devo escrever isto? Eu também sou novo aqui.

47

Tente isto:

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

Veja:

49

O suporte para estas tags de script embutidas foi removido na versão mais recente do Discourse