Ajouter des composants Ember à Discourse

Documentation Guides pour les développeurs
, ,
1

Dans le tutoriel précédent, j’ai montré comment configurer les parties côté serveur et côté client de Discourse pour répondre à une requête.

Nous vous recommandons désormais de consulter la documentation sur les composants Ember : Introducing Components - Components - Ember Guides

Ancien tutoriel

Dans ce tutoriel, je vais créer un nouveau composant Ember pour encapsuler du JavaScript tiers. Cela ressemblera à une vidéo YouTube que j’ai réalisée il y a quelque temps, que vous pourriez trouver instructive, sauf que cette fois, c’est spécifique à Discourse et à la façon dont nous organisons les fichiers dans notre projet.

Pourquoi des composants ?

Handlebars est un langage assez simple et tentant. Il s’agit simplement de HTML standard avec quelques parties dynamiques. C’est facile à apprendre et excellent pour la productivité, mais moins idéal pour la réutilisation du code. Si vous développez une grande application comme Discourse, vous constaterez que vous souhaitez réutiliser certaines choses encore et encore.

Les composants sont la solution d’Ember à ce problème. Créons un composant qui affichera notre snack de manière plus élégante.

Création d’un nouveau composant

Les composants doivent contenir un tiret dans leur nom. Je vais choisir fancy-snack comme nom pour celui-ci. Créons notre modèle :

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>

Maintenant, pour utiliser notre composant, nous allons remplacer notre modèle admin/snack existant par ceci :

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

{{fancy-snack snack=model}}

Nous pouvons désormais réutiliser notre composant fancy-snack dans n’importe quel autre modèle, en passant simplement le modèle comme requis.

Ajout de code JavaScript personnalisé

Outre la réutilisabilité, les composants dans Ember sont excellents pour ajouter en toute sécurité du JavaScript personnalisé, jQuery et d’autres codes externes. Ils vous donnent le contrôle du moment où le composant est inséré dans la page et du moment où il est supprimé. Pour cela, nous définissons un Ember.Component avec du code :

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 vous ajoutez le code ci-dessus et actualisez la page, vous verrez que notre snack a une animation d’un fond jaune qui s’estompe lentement.

Expliquons ce qui se passe ici :

  1. Lorsque le composant est rendu sur la page, il appelle didInsertElement.

  2. La première ligne de didInsertElement (et de willDestroyElement) est this._super(), ce qui est nécessaire car nous héritons de Ember.Component.

  3. L’animation est réalisée à l’aide de la fonction animate de jQuery.

  4. Enfin, l’animation est annulée dans le crochet willDestroyElement, qui est appelé lorsque le composant est supprimé de la page.

Vous vous demandez peut-être pourquoi nous nous soucions de willDestroyElement ; la raison est que dans une application JavaScript de longue durée comme Discourse, il est important de nettoyer après nous-mêmes, sous peine de fuir de la mémoire ou de laisser des processus en cours d’exécution. Dans ce cas, nous arrêtons l’animation, ce qui indique à tous les minuteurs jQuery qu’ils n’ont plus besoin de se déclencher car le composant n’est plus visible sur la page.

Où aller à partir d’ici

Le tutoriel final de cette série couvre les tests automatisés.

Ce document est versionné - proposez des modifications sur GitHub.

18 « J'aime »
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 « J'aime »
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 « J'aime »
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 « J'aime »
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 « J'aime »
13

Il serait agréable de voir une documentation mise à jour ici, qui pourrait pointer vers la documentation des composants Glimmer.

3 « J'aime »