Lista común de importaciones para componentes del tema/plugin (JS)

Wiki de la comunidad Desarrolladores
1

Normalmente me encuentro buscando los imports necesarios para distintas cosas cuando creo un Theme Component, así que decidí compilar una lista y ponerla aquí.

Relacionado con Ember

Nombre 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
(Plantilla Glimmer) on import { on } from "@ember/modifier"; <p {{on "click" this.someAction}}>¡Haz clic aquí!</p>[1]

Relacionado con Discourse

Nombre Import 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]
(Plantilla Glimmer) Igual, no igual, mayor que, mayor o igual, menor que, menor o igual, o, no, y, tiene, incluye import { eq, and, ... } from "truth-helpers"; {{#if (eq this.something this.something2)}}[6]

Puedes ver que se combinan, como variables tracked como condición para ConditionalLoadingSpinner, o acciones para DButton, etc.

¡Espero que esto ayude!

No soy un profesional, así que si notas alguna inexactitud, por favor ayuda a corregirla o menciónala, gracias :slightly_smiling_face:.

  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 de manera similar a fetch(). Coloca esto en una función async, con la palabra clave await. ↩︎

  5. Si estás obteniendo el locale del repositorio principal, p. ej. user.summary.stats ↩︎

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

11 Me gusta
2

¡Ja, esto es genial! Tengo el mismo y la IA/autocompletado en VS Code a menudo alucina una ruta :wink:

1 me gusta