Renderizar uma postagem acima do Outlet discovery-list-container-top

Dev
1

Sou novato nisso, desculpe

Usei o Ask Discourse para perguntar:

em um tema, quero renderizar o primeiro post de dois tópicos acima da lista de tópicos no outlet discovery-list-container-top

Ele me deu várias versões que, aos meus olhos, pareciam funcionar. Todas estão gerando um erro na pré-visualização. Eu pergunto ao Discourse:

como eu colocaria o código de exemplo na aba JS em vez de em arquivos?

Ele me deu esta versão

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

class FirstPosts extends Component {
  @tracked posts = [];

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

  async loadPosts() {
    let topicIds = [123, 456]; // mude para seus IDs de tópico
    let posts = [];
    for (let id of topicIds) {
      let res = await fetch(`/t/${id}.json`);
      let data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }
    this.posts = posts;
  }

  static template = <template>
    {{#each this.posts as |post|}}
      <div class="first-post-preview">
        <h4>{{post.topic_title}}</h4>
        {{{post.cooked}}}
      </div>
    {{/each}}
  </template>;
}

export default apiInitializer("0.11.1", api => {
  api.renderInOutlet("discovery-list-container-top", FirstPosts);
});

e quando colei o código do erro no Ask Discourse, ele me deu esta versão

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

// Armazenamento de dados global (gambiarra, mas funciona para a aba JS)
window.firstPostsData = [];

fetch("/t/123.json")
  .then(r => r.json())
  .then(data => window.firstPostsData.push(data.post_stream.posts[0]));

fetch("/t/456.json")
  .then(r => r.json())
  .then(data => window.firstPostsData.push(data.post_stream.posts[0]));

export default apiInitializer(api => {
  api.renderInOutlet("discovery-list-container-top", 
    <template>
      {{#each (theme-prefix "firstPostsData" window=true) as |post|}}
        <div class="first-post-preview">
          <h4>{{post.topic_title}}</h4>
          {{{post.cooked}}}
        </div>
      {{/each}}
    </template>
  );
});

Alguém pode me dizer o que estou fazendo de errado?

O erro no console foi:

Erro de compilação: SyntaxError: /theme-4/discourse/api-initializers/theme-initializer.gjs:

isto foi o que apareceu na pré-visualização

image
image1023×102 14.6 KB

Obrigado

1 curtida
2

Eu ajustei e isto parece funcionar:

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

class FirstPosts extends Component {
  @tracked posts = [];

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

  async loadPosts() {
    let topicIds = [123, 456]; // mude para os seus IDs de tópico
    let posts = [];
    for (let id of topicIds) {
      const res = await fetch(`/t/${id}.json`);
      const data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }
    this.posts = posts;
  }

  <template>
    {{#each this.posts as |post|}}
      <div class="first-post-preview">
        <h4>{{post.topic_title}}</h4>
        {{{post.cooked}}}
      </div>
    {{/each}}
  </template>;
}

export default apiInitializer((api) => {
  api.renderInOutlet("discovery-list-container-top", FirstPosts);
});

image
image1166×893 221 KB

1 curtida
3

Obrigado, Nate! Estou tentando descobrir o que você mudou

Seu código parece corresponder à minha primeira versão

Você substituiu let por const no loop for
isso está correto?

A versão do discourse lança erro

for (let id of topicIds) {
      let res = await fetch(`/t/${id}.json`);
      let data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }

A versão do Nate funciona

for (let id of topicIds) {
      const res = await fetch(`/t/${id}.json`);
      const data = await res.json();
      if (data.post_stream && data.post_stream.posts.length > 0) {
        posts.push(data.post_stream.posts[0]);
      }
    }

Alguém pode explicar o que está errado? Por que let não funcionaria e const sim?

Obrigado novamente, Nate

1 curtida
4

Eu tentei let e o resultado foi o mesmo. É só que eu normalmente usaria const ao usar fetch() ou ajax().

Acredito que o erro venha da linha static template = . Com ela, eu obtenho:

[THEME 10283 'Pokemon Theme'] Error: connector component has no associated template. Ensure the template is colocated or authored with gjs.
    at h (plugin-connectors.js:35:11)
    at eY.renderInOutlet (plugin-api.gjs:1116:5)
    at todo.gjs:43:7
    at eH (plugin-api.gjs:3363:10)
    at Object.initialize (api.js:21:14)
    at i.initialize (app.js:265:28)
    at index.js:379:19
    at e.each (index.js:183:7)
    at e.walk (index.js:112:10)
    at e.each (index.js:59:20)
    at e.topsort (index.js:65:10)
    at iL._runInitializer (index.js:392:11)
    at iL.runInstanceInitializers (index.js:377:10)
    at l._bootSync (instance.js:116:22)
    at iL.didBecomeReady (index.js:784:18)
    at invoke (index.js:262:14)
    at m.flush (index.js:180:11)
    at g.flush (index.js:334:19)
    at z._end (index.js:762:32)
    at _boundAutorunEnd (index.js:499:12)

E se eu usar \u003ctemplate\u003e diretamente, não há erro.

2 curtidas