[PAGO] Cache busting para scripts personalizados definidos no componente do tema

[rahim123]

O que você gostaria que fosse feito?

Neste tópico, expliquei que estava tentando adicionar um script simples em JavaScript para alternar entre algumas imagens aleatórias com api.createWidget, e recebi ajuda para usar corretamente api.onPageChange. Também planejo fazer algo semelhante com base em api.decorateWidget usando a solução aqui. Este é o código final que usei para a localização above-main-container:

HTML/CSS Personalizado no componente de tema

Head

<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("top-banner-widget", {
    tagName: "div.top-banner",
    html() {
        let banners = new Array();
        let goTo = new Array();
        
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        let bannerCount = 2;
        banners[0]="https://example.com/0.jpg";
        banners[1]="https://example.com/1.jpg";
        goTo[0]="https://google.com";
        goTo[1]="https://brave.com";
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        
        bannerCount-=1;
        let randPick = Math.round(bannerCount * Math.random());
        let theLink = goTo[randPick];
        let theImage = banners[randPick];
        
        api.onPageChange(() => {
            this.scheduleRerender();
        });
  
        return h("div#top-banner", [
          h(
            "a.custom-ad-link",
            { href: theLink },
            h("img", { src: theImage})
          )
        ]);
    }
});
</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/inject-widget">
  {{mount-widget widget="top-banner-widget"}}
</script>

CSS

.top-banner {
    padding-bottom: 1em;
    display: flex;
    clear: both;
    max-width: 100%;
    background-color: #FFFFFF;
    border: none;
    box-sizing: border-box;
    img {
        max-width: 100%;
        &.desktop {
            display: block;
        }
        &.mobile {
            display: none;
        }
    }
}

O problema que estou tendo com esses métodos é que eles exigem que os usuários façam uma recarga completa da página quando o URL da origem da imagem e/ou o URL do href são alterados, já que todo o script é armazenado em cache no código SPA do Discourse. Portanto, gostaria de aprender um método flexível para fazer o cache busting para esse tipo de script, para que ele obtenha a versão mais recente do JavaScript personalizado na próxima vez que o usuário carregar a página. Prefiro implementá-lo como estou fazendo atualmente por meio de um componente de tema que crio e adiciono CSS e JavaScript com o botão Editar CSS/HTML (e não por meio de um plugin definido em app.yml ou componente Ember ou repositório GIT externo). Gostaria de saber se o plugin oficial de Anúncios do Discourse conteria algum código reutilizável para realizar isso, pois as alterações no HTML definido pelo administrador das Casas de Anúncios são refletidas imediatamente na próxima página que o usuário navega.

Quando você precisa que seja feito?

Muito flexível.

Qual é o seu orçamento, em USD, que você pode oferecer para esta tarefa?

US$ 150 ou menos.