Liste courante des imports pour les composants/plugins de thème (JS)

Wiki de la communauté Développeurs
1

Je me retrouve généralement à chercher des importations pour différentes choses lorsque je crée un composant de thème, j’ai donc décidé d’en compiler un certain nombre et de les mettre ici.

Lié à Ember

Nom Importation Utilisation
Component import Component from \"@glimmer/component\"; export default class MyComponentClass extends Component {}
Décorateur d’action import { action } from \"@ember/action\"; @action
Décorateur suivi import { tracked } from \"@glimmer/tracking\"; @tracked myTrackedVar
Décorateur de service import { service } from \"@ember/service\"; @service modal
(Template Glimmer) on import { on } from \"@ember/modifier\"; \u003cp {{on \"click\" this.someAction}}\u003eCliquez-moi !\u003c/p\u003e[1]

Lié à Discourse

Nom Importation Utilisation
apiInitializer import { apiInitializer } from \"discourse/lib/api\"; export default apiInitializer((api) =\u003e {})
withPluginApi import { withPluginApi } from \"discourse/lib/plugin-api\"; withPluginApi((api) =\u003e {})[2][3]
ConditionalLoadingSpinner import ConditionalLoadingSpinner from \"discourse/components/conditional-loading-spinner\"; \u003cConditionalLoadingSpinner @condition={{this.loading}} /\u003e
DButton import DButton from \"discourse/components/d-button\"; \u003cDButton @icon=\"...\" @action={{this.someAction}} /\u003e
ajax import { ajax } from \"discourse/lib/ajax\"; ajax(\"/path/here\")[4]
i18n import { i18n } from \"discourse-i18n\"; {{i18n \"locale_key\"}}[5]
(Template Glimmer) Égal, différent de, supérieur à, supérieur ou égal à, inférieur à, inférieur ou égal à, ou, non, et, a, inclut import { eq, and, ... } from \"truth-helpers\"; {{#if (eq this.something this.something2)}}[6]

Vous pourriez les voir combinés, comme des variables suivies comme condition pour ConditionalLoadingSpinner, ou des actions pour DButton, etc.

J’espère que cela vous aidera !

\u003csmall\u003eJe ne suis pas un professionnel, donc si vous repérez des inexactitudes, n’hésitez pas à corriger ou à signaler, merci :slightly_smiling_face:.\u003c/small\u003e

  1. Vous pouvez également utiliser des événements comme input, mousedown, focusin, etc. ↩︎

  2. Voir discourse/app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js at 99ace1be120b928f6c694d0118959d745cc4bdbe · discourse/discourse · GitHub ↩︎

  3. Je pense qu’il est recommandé d’utiliser apiInitializer à la place ; je pense que c’est l’ancienne version ? ↩︎

  4. Fonctionne un peu comme fetch(). Mettez ceci dans une fonction async, avec un mot-clé await. ↩︎

  5. Si vous obtenez la locale du dépôt principal, par exemple user.summary.stats ↩︎

  6. Des choses comme and et or peuvent avoir plus de 2 arguments ↩︎

6 « J'aime »