Como ouvir corretamente a atualização pós-stream

Dev
1

Olá,

Estou tentando executar uma função personalizada quando conteúdo adicional for adicionado à página (para posts longos), usando a seguinte API:

api.onAppEvent('post-stream:refresh', () => {
       console.log('Novo conteúdo adicionado à página...');
});

… no entanto, o código acima não funcionou. O que estou fazendo de errado e qual seria a maneira correta de fazer isso?

2

Você pode compartilhar um pouco mais sobre o que está tentando alcançar? Existem algumas APIs diferentes que permitem modificar o conteúdo do post quando ele é renderizado. A mais comum seria api.decorateCookedElement

3

Na verdade, acabei de perceber que preciso executar a função no conteúdo do post adicionado ao DOM.

Estou praticamente recriando a API addPosterIcon, pois a minha precisa conter HTML personalizado. Já tenho tudo funcionando, exceto quando a página longa está sendo rolada.

Estou tentando adicionar um ícone ao lado do nome de usuário do poster, que aciona um evento personalizado. O único problema é que ele ainda não está sendo adicionado após a mudança no DOM.

4

O problema com esse método é que ele aciona múltiplos objetos cooked de uma vez e, portanto, prefere um ID (para evitar vazamentos de memória), o que não é algo que eu preciso. O que funcionaria para mim seria se apenas um evento fosse acionado após todos os elementos estarem cooked. Tenho uma ideia de como isso poderia ser feito, mas existe uma maneira adequada de fazer isso usando a API do Discourse?

5

A API decorateCookedElement será acionada uma vez para cada postagem renderizada. O callback receberá o elemento DOM contendo o conteúdo da postagem. A ideia é que você modifique apenas o elemento que lhe foi passado, e não qualquer outra coisa na página.

Mas, como você deseja fazer modificações nos metadados ao redor do conteúdo da postagem, decorateCookedElement provavelmente não é a opção correta.

Então, a melhor opção é provavelmente examinar como a API addPosterIcon é implementada:

Por baixo dos panos, trata-se de uma chamada à função api.decorateWidget. Você pode fazer essa chamada você mesmo e depois fazê-la renderizar HTML puro. Para mais informações sobre a API decorateWidget, consulte https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c-6.

6

A solução para mim fazer com que decorateCookedElement seja executado apenas uma vez para um tipo específico, e quando o último conteúdo cozido estiver pronto, foi tão simples quanto isso:

<script type="text/discourse-plugin" version="0.11">
  api.decorateCookedElement((callback, opts) => {
      if(opts?.widget?.dirtyKeys?.name === 'post-stream') {
          if(this?.cooking) clearTimeout(this.cooking);
          this.cooking = setTimeout(() => {
              console.log('Todo o cozimento foi concluído, atualizando novo conteúdo..');
          });
      }
  });
</script>

Por favor, me corrija se houver algo errado ou se houver alguma armadilha neste código.

7

Desculpe por adicionar uma pergunta a este tópico antigo.

Estávamos usando o código mencionado acima (decorateCookedElement) para chamar uma função de script curta quando posts adicionais em um tópico são renderizados.

Com o stream de posts Glimmer, este código não está funcionando corretamente. Recebemos a seguinte mensagem no console do desenvolvedor:

Acesso a helper.widget não é suportado ao usar api.decorateCookedElement com o Glimmer Post Stream e pode gerar resultados inesperados.

Como resultado, a função de script não é executada.

Existe alguma funcionalidade correspondente que possamos usar para o Glimmer post stream?

Agradeço antecipadamente por qualquer informação para ajustar nosso código.