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

Wiki da comunidade Desenvolvedores
1

Eu geralmente me vejo procurando as importações para diferentes coisas quando crio um Componente de Tema, então decidi compilar uma série delas e colocá-las aqui.

Relacionado ao Ember

Nome Importação 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"; <p {{on "click" this.someAction}}>Clique em mim!</p>[1]

Relacionado ao Discourse

Nome Importação Uso
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]
(Template Glimmer) Igual, não igual, 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 combinados, como variáveis rastreadas como condição para ConditionalLoadingSpinner, ou ações para DButton, etc.

Espero que isso ajude!

Eu não sou um profissional, então, se você notar alguma imprecisão, por favor, ajude a corrigir ou aponte isso, obrigado :slightly_smiling_face:.

  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 semelhante a 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 ↩︎

11 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