Adicionar Componentes Ember ao Discourse

Documentação Guias do Desenvolvedor
, ,
1

No tutorial anterior mostrei como configurar as partes do lado do servidor e do lado do cliente do Discourse para responder a uma solicitação.

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

Tutorial antigo

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

Por que Componentes?

Handlebars é uma linguagem de template bastante simples. É apenas HTML comum 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 uma aplicação grande como o Discourse, descobrirá que deseja reutilizar algumas das mesmas coisas repetidamente.

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

Componentes precisam ter um hífen em seu nome. Vou escolher fancy-snack como 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, substituiremos 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 outro código externo. Isso lhe dá 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 willDestroyElement) é this._super() que é necessário porque estamos subclassificando 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; o motivo é que em uma aplicação Javascript de longa duração como o Discourse é importante limpar o que usamos, para não vazar memória ou deixar coisas rodando. Neste caso, paramos a animação, o que diz a quaisquer temporizadores 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 cobre testes automatizados.

Este documento é controlado por versão - sugira alterações no github.

17 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

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