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.

3 curtidas
5

Tolamente apaguei a versão que estava testando e agora não consigo executar a sua versão mais recente

theme-initializer.gjs:18 Uncaught (in promise) ReferenceError: constid is not defined
    at n.loadPosts (theme-initializer.gjs:18:10)
    at new n (theme-initializer.gjs:12:10)
    at h.createComponent (index.js:259:12)
    at $.create (index.js:419:28)
    at Object.evaluate (index.js:985:23)
    at Object.evaluate (index.js:103:106)
    at tr.evaluateSyscall (index.js:2873:20)
    at tr.evaluateInner (index.js:2852:64)
    at tr.evaluateOuter (index.js:2849:10)
    at tH.next (index.js:4167:45)
    at tH._execute (index.js:4157:21)
    at tH.execute (index.js:4133:41)
    at tq.sync (index.js:4194:120)
    at tz.render (index-BCp6wOJU.js:4636:43)
    at index-BCp6wOJU.js:4934:16
    at eX (index.js:2414:7)
    at tG._renderRoots (index-BCp6wOJU.js:4914:7)
    at tG._renderRootsTransaction (index-BCp6wOJU.js:4962:12)
    at tG._renderRoot (index-BCp6wOJU.js:4904:10)
    at tG._appendDefinition (index-BCp6wOJU.js:4828:10)
    at tG.appendOutletView (index-BCp6wOJU.js:4818:10)
    at invoke (index.js:264: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)

Por favor, me ajude a consertar.

6

Sim, let e const são efetivamente idênticos aqui, então esse não é o problema.

7

Acredito que você só pode incluir modelos com essa sintaxe em um arquivo .gjs autônomo, pois esse sufixo sinaliza ao interpretador para pré-compilá-lo.

Mudar para o GitHub é, em qualquer caso, uma ótima ideia.

2 curtidas
8

Obrigado por esse conselho, estou tentando fazer isso agora. Chegar até onde cheguei me deu encorajamento. O código do Nate acima realmente funciona e coloca os dois tópicos no topo. Vou começar um novo tópico com minha ideia de tema e tentar documentar o que aprendo. ask.discourse.org é absolutamente incrível!

2 curtidas