Häufige Importliste für Theme Components/Plugins (JS)

Community-Wiki Entwickler
1

Ich ertappe mich oft dabei, nach Importen für verschiedene Dinge zu suchen, wenn ich eine Theme Component erstelle. Deshalb habe ich beschlossen, eine Reihe davon zusammenzustellen und hier abzulegen.

Ember-bezogen

Name Import Verwendung
Component import Component from "@glimmer/component"; export default class MyComponentClass extends Component {}
Action decorator import { action } from "@ember/object"; @action
Tracked decorator import { tracked } from "@glimmer/tracking"; @tracked myTrackedVar
Service decorator import { service } from "@ember/service"; @service modal
(Glimmer-Template) on import { on } from "@ember/modifier"; <p {{on "click" this.someAction}}>Klick mich!</p>[1]

Discourse-bezogen

Name Import Verwendung
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 "locale_key"}}[5]
(Glimmer-Template) 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]

Sie werden sehen, wie sie kombiniert werden, z. B. getrackte Variablen als Bedingung für ConditionalLoadingSpinner oder Aktionen für DButton usw.

Ich hoffe, das hilft!

Ich bin kein Profi, also wenn Sie Ungenauigkeiten bemerken, helfen Sie bitte mit der Korrektur oder weisen Sie darauf hin, danke :slightly_smiling_face:.

  1. Sie können auch Events wie input, mousedown, focusin usw. verwenden ↩︎

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

  3. Ich denke, es wird empfohlen, stattdessen apiInitializer zu verwenden; ich glaube, das ist die alte Version? ↩︎

  4. Funktioniert ähnlich wie fetch(). Fügen Sie dies in eine async-Funktion mit dem Schlüsselwort await ein. ↩︎

  5. Wenn Sie die Locale aus dem Core-Repo beziehen, z. B. user.summary.stats ↩︎

  6. Dinge wie and und or können mehr als 2 Argumente haben ↩︎

9 „Gefällt mir“
2

Ha, das ist großartig! Ich habe dasselbe und die KI/Autovervollständigung in VS Code halluziniert oft einen Pfad :wink:

1 „Gefällt mir“