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

Wiki de la communauté Développeurs
1

En général, je me retrouve à chercher les imports nécessaires pour différentes choses lorsque je crée un composant de thème, j’ai donc décidé de compiler une liste et de la partager ici.

Lié à Ember

Nom Import Utilisation
Component import Component from "@glimmer/component"; export default class MyComponentClass extends Component {}
Décorateur Action import { action } from "@ember/object"; @action
Décorateur Tracked import { tracked } from "@glimmer/tracking"; @tracked myTrackedVar
Décorateur Service import { service } from "@ember/service"; @service modal
(Gabarit Glimmer) on import { on } from "@ember/modifier"; <p {{on "click" this.someAction}}>Cliquez sur moi !</p>[1]

Lié à Discourse

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

Vous pouvez les voir combinés, par exemple des variables suivies (tracked) comme condition pour ConditionalLoadingSpinner, ou des actions pour DButton, etc.

J’espère que cela aidera !

Je ne suis pas un pro, donc si vous repérez des inexactitudes, merci de corriger ou de le signaler, merci :slightly_smiling_face:.

  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 crois que c’est l’ancienne version ? ↩︎

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

  5. Si vous obtenez la localisation depuis le dépôt principal, par ex. user.summary.stats ↩︎

  6. Des éléments comme and et or peuvent avoir plus de 2 arguments ↩︎

11 « J'aime »
2

Ah, c’est super ! J’ai le même et l’IA/l’autocomplétion dans VS Code invente souvent un chemin :wink:

1 « J'aime »