Elenco comune di importazioni per Componenti Tema/plugin (JS)

Wiki della community Sviluppatori
1

Trovo spesso che devo cercare importazioni per cose diverse quando creo un Componente Tema, quindi ho deciso di compilarne alcune e metterle qui.

Correlati a Ember

Nome Importazione Utilizzo
Component import Component from "@glimmer/component"; export default class MyComponentClass extends Component {}
Decoratore action import { action } from "@ember/object"; @action
Decoratore tracked import { tracked } from "@glimmer/tracking"; @tracked myTrackedVar
Decoratore service import { service } from "@ember/service"; @service modal
(Template Glimmer) on import { on } from "@ember/modifier"; <p {{on "click" this.someAction}}>Click me!</p>[1]

Correlati a Discourse

Nome Importazione Utilizzo
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/components/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 "chiave_locale"}}[5]
(Template Glimmer) Equals, not equals, greater than, greater than or equals, less than, less than or equals, or, not, and, has, includes import { eq, and, ... } from "truth-helpers"; {{#if (eq this.something this.something2)}}[6]

Potresti vederli combinati, come variabili tracciate come condizione per ConditionalLoadingSpinner, o azioni per DButton, ecc.

Spero sia d’aiuto!

Non sono un professionista, quindi se noti delle inesattezze, per favore aiutami a correggerle o segnalale, grazie :slightly_smiling_face:.

  1. Puoi usare anche eventi come input, mousedown, focusin, ecc ↩︎

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

  3. Penso sia consigliato usare apiInitializer invece; penso che questa sia la versione vecchia? ↩︎

  4. Funziona in modo simile a fetch(). Mettilo in una funzione async, con la parola chiave await. ↩︎

  5. Se stai ottenendo la lingua dal core repo, es. user.summary.stats ↩︎

  6. Cose come and e or possono avere più di 2 argomenti ↩︎

9 Mi Piace
2

Ah, questo è fantastico! Ho lo stesso e l’IA/autocompletamento in VS Code spesso inventa un percorso :wink:

1 Mi Piace