Adicionar componentes Ember ao Discourse

Documentação Guias do Desenvolvedor
, ,
1

No tutorial anterior, mostrei como configurar tanto a parte do servidor quanto a do cliente do Discourse para responder a uma solicitação.

Agora recomendamos que você leia a documentação de componentes do Ember: Introducing Components - Components - Ember Guides

Tutorial antigo

Neste tutorial, vou criar um novo Componente Ember como uma forma de encapsular JavaScript de terceiros. Isso será semelhante a um vídeo do YouTube que fiz há algum tempo, que você pode achar informativo. Só que desta vez, é específico para o Discourse e para como organizamos os arquivos em nosso projeto.

Por que Componentes?

Handlebars é uma linguagem bastante simples e tentadora. É apenas HTML regular junto com algumas partes dinâmicas. Isso é simples de aprender e ótimo para produtividade, mas não tão bom para reutilização de código. Se você estiver desenvolvendo um aplicativo grande como o Discourse, perceberá que deseja reutilizar algumas das mesmas coisas repetidamente.

Os componentes são a solução do Ember para esse problema. Vamos criar um componente que exibirá nosso lanche de uma maneira mais agradável.

Criando um novo Componente

Os componentes precisam ter um hífen no nome. Vou escolher fancy-snack como o nome para este. Vamos criar nosso template:

app/assets/javascripts/admin/templates/components/fancy-snack.hbs

<div class="fancy-snack-title">
  <h1>{{snack.name}}</h1>
</div>

<div class="fancy-snack-description">
  <p>{{snack.description}}</p>
</div>

Agora, para usar nosso componente, vamos substituir nosso template admin/snack existente por este:

app/assets/javascripts/admin/templates/snack.hbs

{{fancy-snack snack=model}}

Agora podemos reutilizar nosso componente fancy-snack em qualquer outro template, apenas passando o modelo conforme necessário.

Adicionando Código JavaScript Personalizado

Além da reutilização, os componentes no Ember são ótimos para adicionar com segurança JavaScript personalizado, jQuery e outros códigos externos. Eles dão a você controle sobre quando o componente é inserido na página e quando é removido. Para fazer isso, definimos um Ember.Component com algum código:

app/assets/javascripts/admin/components/fancy-snack.js

export default Ember.Component.extend({
  didInsertElement() {
    this._super();
    this.$().animate({ backgroundColor: "yellow" }, 2000);
  },

  willDestroyElement() {
    this._super();
    this.$().stop();
  },
});

Se você adicionar o código acima e atualizar a página, verá que nosso lanche tem uma animação de um fundo amarelo desaparecendo lentamente.

Vamos explicar o que está acontecendo aqui:

  1. Quando o componente é renderizado na página, ele chamará didInsertElement.

  2. A primeira linha de didInsertElement (e de willDestroyElement) é this._super(), o que é necessário porque estamos subclasses do Ember.Component.

  3. A animação é feita usando a função animate do jQuery.

  4. Finalmente, a animação é cancelada no hook willDestroyElement, que é chamado quando o componente é removido da página.

Você pode se perguntar por que nos importamos com willDestroyElement; a razão é que, em um aplicativo JavaScript de longa duração como o Discourse, é importante limpar após nós mesmos, para não vazar memória ou deixar coisas em execução. Neste caso, paramos a animação, o que diz a qualquer temporizador do jQuery que eles não precisam mais disparar, pois o componente não está mais visível na página.

Para onde ir a partir daqui

O tutorial final desta série aborda testes automatizados.

Este documento está sob controle de versão - sugira alterações no GitHub.

18 curtidas
Plugin routing problems
Write acceptance tests and component tests for Ember code in Discourse
Introduction to Discourse Development
2

Hi, how do i extend a discourse component thru a plugin? Can you give me some points. Thanks

1 curtida
3

Generally we prefer you don’t extend Discourse plugins, and you stick to plugin outlets or using the widget decoration API to add stuff.

But if you must, you can create an initializer and use Ember’s extend code. Here’s an example that extends an Ember object.

4 curtidas
4

Tried with initializer but didnt worked. What i actually want to do is to add 2 more classNames and some actions:

import { withPluginApi } from 'discourse/lib/plugin-api';

function initializeComponentTopicList(api) {
  // extend component from jsapp/components/topic-list.js.es6
  const TopicList = api.container.lookupFactory('component:topic-list');

  TopicList.extend({
    classNames: ['topic-list', 'round', 'table'],
    actions: {
        clickMe: function() {
            console.log('click');
        }
    }
  });
};

export default {
  name: "extend-for-component-topic-list",

  initialize() {
    withPluginApi('0.1', initializeComponentTopicList);
  }
};

And by “didnt worked”, i mean that topic list completly disappeared from page.
Thank you

5

Were there any logs in the console?

6

Nope, no logs at all. However i managed to fix it this way. I hope it will help someone.

import { default as TopicList } from 'discourse/components/topic-list';
import { withPluginApi } from 'discourse/lib/plugin-api';

function initializeComponentTopicList(api) {
  TopicList.reopen({
    classNames: ['topic-list', 'round', 'table'],
  });
};

export default {
  name: "extend-for-component-topic-list",

  initialize() {
    withPluginApi('0.1', initializeComponentTopicList);
  }
};
3 curtidas
7

I just ran into the same problem. Add the following as a css/html customisation and observe empty user cards:

<script type="text/discourse-plugin" version="0.5">
    api.container.lookupFactory('component:user-card-contents')
</script>
2 curtidas
13

Seria bom ver a documentação atualizada aqui, que poderia apontar para a documentação do componente Glimmer.

3 curtidas