Elenco comune di import per componenti/estensioni del tema (JS)

Wiki della community Sviluppatori
1

Di solito mi ritrovo a cercare a lungo gli import per le varie cose quando creo un Componente Tema, quindi ho deciso di raccoglierne un bel po’ e metterli qui.

Relativi a Ember

Nome Import Uso
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]

Relativi a Discourse

Nome Import Uso
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]
(Template Glimmer) Uguale, non uguale, maggiore di, maggiore o uguale a, minore di, minore o uguale a, o, non, e, ha, include import { eq, and, ... } from "truth-helpers"; {{#if (eq this.something this.something2)}}[6]

Potresti vederli combinati, ad esempio variabili tracked come condizione per ConditionalLoadingSpinner, o azioni per DButton, ecc.

Spero che ti sia utile!

Non sono un professionista, quindi se noti imprecisioni, per favore aiuta a correggerle o segnala il problema, grazie :slightly_smiling_face:.

  1. Puoi anche usare 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. Credo che si consigli di usare apiInitializer al suo posto; credo 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 locale dal repository principale, ad esempio user.summary.stats ↩︎

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

11 Mi Piace
2

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

1 Mi Piace