Lista comum de importações para componentes/plugins de tema (JS)

Wiki da comunidade Desenvolvedores
1

Eu geralmente me pego procurando por imports de diferentes coisas quando crio um Componente de Tema, então decidi compilar vários deles e colocá-los aqui.

Relacionado ao Ember

Nome Import Uso
Component import Component from \"@glimmer/component\"; export default class MyComponentClass extends Component {}
Decorator action import { action } from \"@ember/action\"; @action
Decorator tracked import { tracked } from \"@glimmer/tracking\"; @tracked myTrackedVar
Decorator service import { service } from \"@ember/service\"; @service modal
(Template Glimmer) on import { on } from \"@ember/modifier\"; \u003cp {{on \"click\" this.someAction}}\u003eClique em mim!\u003c/p\u003e[1]

Relacionado ao Discourse

Nome Import Uso
apiInitializer import { apiInitializer } from \"discourse/lib/api\"; export default apiInitializer((api) =\u003e {})
withPluginApi import { withPluginApi } from \"discourse/lib/plugin-api\"; withPluginApi((api) =\u003e {})[2][3]
ConditionalLoadingSpinner import ConditionalLoadingSpinner from \"discourse/components/conditional-loading-spinner\"; \u003cConditionalLoadingSpinner @condition={{this.loading}} /\u003e
DButton import DButton from \"discourse/components/d-button\"; \u003cDButton @icon=\"...\" @action={{this.someAction}} /\u003e
ajax import { ajax } from \"discourse/lib/ajax\"; ajax(\"/path/here\")[4]
i18n import { i18n } from \"discourse-i18n\"; {{i18n \"locale_key\"}}[5]
(Template Glimmer) Igual, diferente, maior que, maior ou igual, menor que, menor ou igual, ou, não, e, tem, inclui import { eq, and, ... } from \"truth-helpers\"; {{#if (eq this.something this.something2)}}[6]

Você pode vê-los sendo combinados, como variáveis tracked como condição para ConditionalLoadingSpinner, ou ações para DButton, etc.

Espero que isso ajude!

\u003csmall\u003eEu não sou um profissional, então se você notar alguma imprecisão, por favor, ajude a corrigi-la ou levante o problema, obrigado :slightly_smiling_face:.\u003c/small\u003e

  1. Você também pode usar eventos como input, mousedown, focusin, etc. ↩︎

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

  3. Acho que é recomendado usar apiInitializer em vez disso; acho que esta é a versão antiga? ↩︎

  4. Funciona algo como fetch(). Coloque isso em uma função async, com uma palavra-chave await. ↩︎

  5. Se você estiver obtendo a localidade do repositório principal, por exemplo, user.summary.stats ↩︎

  6. Coisas como and e or podem ter mais de 2 argumentos ↩︎

6 curtidas