Lista comum de imports para Componentes de Tema/plugins (JS)

Wiki da comunidade Desenvolvedores
1

Muitas vezes me pego procurando por imports para diferentes coisas quando crio um Componente de Tema, então decidi compilar alguns deles e colocá-los aqui.

Relacionados ao Ember

Nome Import Uso
Component import Component from \"@glimmer/component\"; export default class MyComponentClass extends Component {}
Decorador action import { action } from \"@ember/object\"; @action
Decorador tracked import { tracked } from \"@glimmer/tracking\"; @tracked myTrackedVar
Decorador 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]

Relacionados 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) 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]

Você pode vê-los sendo combinados, como variáveis rastreadas como a 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 corrigir ou levante a questão, 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 de forma parecida com fetch(). Coloque isso em uma função async, com a palavra-chave await. ↩︎

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

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

9 curtidas
2

Ah, isso é ótimo! Eu tenho o mesmo e o IA/preenchimento automático no VS Code frequentemente alucina um caminho :wink:

1 curtida