Gemeinsame Liste von Imports für Theme-Komponenten/Plugins (JS)

Community-Wiki Entwickler
1

Wenn ich eine Theme-Komponente erstelle, muss ich mich normalerweise durchsuchen, um die richtigen Imports für verschiedene Dinge zu finden. Deshalb habe ich mich entschieden, eine Sammlung davon zusammenzustellen und hier zu veröffentlichen.

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}}>Klicke 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/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]
(Glimmer-Template) Gleich, ungleich, größer als, größer gleich, kleiner als, kleiner gleich, oder, nicht, und, hat, enthält import { eq, and, ... } from "truth-helpers"; {{#if (eq this.something this.something2)}}[6]

Man sieht sie oft kombiniert, zum Beispiel als Bedingung für ConditionalLoadingSpinner oder als Aktionen für DButton.

Ich hoffe, das hilft!

Ich bin kein Profi, also korrigiere bitte Unstimmigkeiten oder bring sie zur Sprache, wenn du welche bemerkst. Danke :slightly_smiling_face:.

  1. Du kannst 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, dies ist die ältere Version? ↩︎

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

  5. Falls du das Locale aus dem Core-Repo erhältst, z. B. user.summary.stats ↩︎

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

11 „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“