Häufige Liste von Importen für Theme-Komponenten/Plugins (JS)

Community-Wiki Entwickler
1

I usually find myself digging around to get imports for different things when I make a Theme Component, so I decided to compile a bunch of them and put them here.

Ember-related

Name Import Usage
Component import Component from "@glimmer/component"; export default class MyComponentClass extends Component {}
Action decorator import { action } from "@ember/action"; @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}}>Click me!</p>[1]

Discourse-related

Name Import Usage
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]

You might see them being combined, like tracked variables as the condition for ConditionalLoadingSpinner, or actions for DButton, etc.

Hope this helps!

I’m not a pro, so if you spot any inaccuracies, please help to correct it or bring it up, thanks :slightly_smiling_face:.

  1. You can also use events like input, mousedown, focusin, etc ↩︎

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

  3. I think it’s recommended to use apiInitializer instead; I think this is the old version? ↩︎

  4. Works something like fetch(). Put this in an async function, with an await keyword. ↩︎

  5. If you’re getting the locale from the core repo, e.g. user.summary.stats ↩︎

  6. Things like and and or can have more than 2 arguments ↩︎

6 „Gefällt mir“