Общий список импортов для компонентов темы/плагинов (JS)

Вики Разработчики
1

Обычно мне приходится искать импорты для разных вещей, когда я создаю компонент темы, поэтому я решил собрать их все и разместить здесь.

Связанные с Ember

Название Импорт Использование
Component import Component from "@glimmer/component"; export default class MyComponentClass extends Component {}
Декоратор action import { action } from "@ember/object"; @action
Декоратор tracked import { tracked } from "@glimmer/tracking"; @tracked myTrackedVar
Декоратор service import { service } from "@ember/service"; @service modal
(Шаблон Glimmer) on import { on } from "@ember/modifier"; <p {{on "click" this.someAction}}>Нажми меня!</p>[1]

Связанные с Discourse

Название Импорт Использование
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) Равно, не равно, больше, больше или равно, меньше, меньше или равно, или, не, и, has, includes import { eq, and, ... } from "truth-helpers"; {{#if (eq this.something this.something2)}}[6]

Вы можете увидеть их использование в комбинации, например, переменные с декоратором tracked как условие для ConditionalLoadingSpinner или действия для DButton и т.д.

Надеюсь, это поможет!

Я не профессионал, поэтому, если вы заметите какие-либо неточности, пожалуйста, помогите исправить их или укажите на них, спасибо :slightly_smiling_face:.

  1. Вы также можете использовать события, такие как input, mousedown, focusin и т.д. ↩︎

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

  3. Кажется, рекомендуется использовать apiInitializer вместо этого; возможно, это старая версия? ↩︎

  4. Работает примерно как fetch(). Поместите это в асинхронную функцию (async) с использованием ключевого слова await. ↩︎

  5. Если вы получаете локаль из основного репозитория, например, user.summary.stats ↩︎

  6. Такие вещи, как and и or, могут принимать более двух аргументов ↩︎

11 лайков
2

Ха, это здорово! У меня то же самое, и AI/автозаполнение в VS Code часто выдумывает путь :wink:

1 лайк