Añadir componentes de Ember a Discourse

Documentación Guías para desarrolladores
, ,
1

En el tutorial anterior mostré cómo configurar tanto las partes del servidor como las del cliente de Discourse para responder a una solicitud.

Ahora te recomendamos leer la documentación de componentes de Ember: Introducing Components - Components - Ember Guides

Antes de escribir un componente, revisa el UI kit de componentes, helpers y modificadores compartidos; la mayoría de los controles comunes ya existen allí.

Antiguo tutorial

En este tutorial, voy a crear un nuevo Ember Component como una forma de envolver JavaScript de terceros. Esto será similar a un video de YouTube que hice hace tiempo, que puede resultarte informativo, solo que esta vez es específico para Discourse y cómo organizamos los archivos en nuestro proyecto.

¿Por qué componentes?

Handlebars es un lenguaje bastante simple y tentador. Es solo HTML regular junto con algunas partes dinámicas. Es fácil de aprender y excelente para la productividad, pero no tanto para la reutilización de código. Si estás desarrollando una aplicación grande como Discourse, descubrirás que quieres reutilizar algunas de las mismas cosas una y otra vez.

Los componentes son la solución de Ember a este problema. Creemos un componente que mostrará nuestro snack de una manera más elegante.

Crear un nuevo Componente

Los componentes deben tener un guion en su nombre. Voy a elegir fancy-snack como nombre para este. Creemos nuestra plantilla:

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>

Ahora, para usar nuestro componente, reemplazaremos nuestra plantilla existente admin/snack con esto:

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

{{fancy-snack snack=model}}

Ahora podemos reutilizar nuestro componente fancy-snack en cualquier otra plantilla, pasando simplemente el modelo como se requiere.

Agregar código JavaScript personalizado

Además de la reutilizabilidad, los Componentes en Ember son excelentes para agregar de forma segura JavaScript personalizado, jQuery y otro código externo. Te da el control de cuándo se inserta el componente en la página y cuándo se elimina. Para hacer esto, definimos un Ember.Component con algo de 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();
  },
});

Si agregas el código anterior y actualizas la página, verás que nuestro snack tiene una animación de un fondo amarillo que se desvanece lentamente.

Explicemos qué está pasando aquí:

  1. Cuando el componente se renderiza en la página, llamará a didInsertElement

  2. La primera línea de didInsertElement (y willDestroyElement) es this._super(), que es necesario porque estamos subclaseando Ember.Component.

  3. La animación se realiza usando la función animate de jQuery.

  4. Finalmente, la animación se cancela en el hook willDestroyElement, que se llama cuando el componente se elimina de la página.

Podrías preguntarte por qué nos importamos tanto de willDestroyElement; la razón es que en una aplicación JavaScript de larga duración como Discourse es importante limpiar después de nosotros mismos, para no filtrar memoria ni dejar cosas funcionando. En este caso, detenemos la animación, lo que indica a cualquier temporizador de jQuery que no necesitan dispararse más ya que el componente ya no es visible en la página.

A dónde ir desde aquí

El tutorial final de esta serie cubre las pruebas automatizadas.

Este documento está controlado por versiones - sugiere cambios en github.

18 Me gusta
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 me gusta
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 Me gusta
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 Me gusta
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 Me gusta
13

Sería bueno ver documentación actualizada aquí, que podría apuntar a la documentación del componente Glimmer.

3 Me gusta