Lista común de importaciones para componentes/plugins de temas (JS)

Wiki de la comunidad Desarrolladores
1

Normalmente me encuentro buscando importaciones para diferentes cosas cuando creo un Componente de Tema, así que decidí compilar algunas y ponerlas aquí.

Relacionado con Ember

Nombre Importación Uso
Component import Component from \"@glimmer/component\"; export default class MyComponentClass extends Component {}
Decorador de acción import { action } from \"@ember/action\"; @action
Decorador de seguimiento import { tracked } from \"@glimmer/tracking\"; @tracked myTrackedVar
Decorador de servicio import { service } from \"@ember/service\"; @service modal
(Plantilla Glimmer) on import { on } from \"@ember/modifier\"; \u003cp {{on \"click\" this.someAction}}\u003eHaz clic aquí\u003c/p\u003e[1]

Relacionado con Discourse

Nombre Importación 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]
(Plantilla 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]

Podrías verlos combinados, como variables rastreadas como condición para ConditionalLoadingSpinner, o acciones para DButton, etc.

¡Espero que esto ayude!

\u003csmall\u003eNo soy un profesional, así que si detectas alguna inexactitud, por favor ayúdame a corregirla o a mencionarla, gracias :slightly_smiling_face:.\u003c/small\u003e

  1. También puedes usar eventos como input, mousedown, focusin, etc. ↩︎

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

  3. Creo que se recomienda usar apiInitializer en su lugar; ¿creo que esta es la versión antigua? ↩︎

  4. Funciona algo así como fetch(). Pon esto en una función async, con una palabra clave await. ↩︎

  5. Si estás obteniendo la configuración regional del repositorio principal, por ejemplo, user.summary.stats ↩︎

  6. Cosas como and y or pueden tener más de 2 argumentos ↩︎

6 Me gusta