Insertar un componente Glimmer después del primer mensaje

[pfaffman (Jay Pfaffman)]

Tengo un componente de Glimmer. Está funcionando. Pero necesito que vaya después de la primera publicación en un tema. No hay una salida de plugin allí.

Descubrí cómo insertar algo de texto en el innerHTML de la etiqueta <article>, y eso pone ese texto donde lo quiero, pero no parece haber una forma de hacerlo con un componente.

¿Me estoy perdiendo algo?

Miré cómo el adplugin inserta anuncios entre publicaciones, pero no pude entenderlo del todo.

export default {
  name: "initialize-ad-plugin",
  initialize(container) {
    registerWidgetShim(
      "after-post-ad",
      "div.widget-connector",
      hbs`<PostBottomAd @model={{@data}} />`
    );

    withPluginApi("0.1", (api) => {
      api.decorateWidget("post:after", (helper) => {
        return helper.attach("after-post-ad", helper.widget.model);
      });
    });

....

[david (David Taylor)]

@pfaffman

No hay una salida de plugin ahí.

¡Añadamos una! ¿Dónde te gustaría?

(hay formas heredadas de lograr lo que estás haciendo, pero se romperán cuando modernicemos la vista del tema. Si agregamos una salida de plugin, será mucho más a prueba de futuro)

[david (David Taylor)]

Esta salida coincidiría con la funcionalidad de decorateWidget("post:after, que es lo que utiliza el adplugin:

DEV: Add after-post plugin outlet

[pfaffman (Jay Pfaffman)]

¡Eso es genial! ¡Quejarse y recibirás!

En realidad, “sé” que es “fácil” agregar enchufes de complementos, pero cuando “sabía” cómo agregarlos, era en un archivo hbs.

¿Será eso después de cada publicación? ¿Así que necesitaré descubrir alguna magia para que sea solo después de la primera?

article:after es lo que había ideado en algún momento en mis intentos anteriores.

[david (David Taylor)]

@pfaffman

Necesitaré encontrar algo de magia

La publicación se pasa como uno de los argumentos de salida, por lo que puedes verificar post.post_number == 1

@pfaffman

¡Queja y recibirás!

Jaja! Siempre feliz de ayudar con este tipo de preguntas. Es mucho mejor para todos si podemos hacer que los temas y complementos utilicen API estándar como esta en lugar de soluciones alternativas de widgets (que serán obsoletas en un futuro no muy lejano).

@pfaffman

cuando he sabido cómo añadirlos, estaba en un archivo hbs.

Sí, eso es justo. Añadirlos dentro de los widgets es un dolor de cabeza en el lado del núcleo. Pero desde el lado del tema/complemento debería ser súper limpio

---

Intentaré averiguar esos fallos en las pruebas y fusionar la PR mañana. (Parece que el elemento HTML adicional está interfiriendo con algunos selectores frágiles en las pruebas qunit)

[pfaffman (Jay Pfaffman)]

@david

La publicación se pasa como uno de los argumentos de salida, por lo que puedes comprobar post.post_number == 1

¡Ajá! @outletArgs={{hash post=@data.post}}. Hay una buena probabilidad de que pueda averiguar cómo hacerlo.

¡Gracias de nuevo!

[david (David Taylor)]

Lamento tener que admitir que quizás fui un poco optimista aquí @pfaffman, ¡lo siento! El PR que hice introduciría un nuevo envoltorio <div> entre cada publicación, incluso si la salida no se estuviera utilizando. Eso no es realmente algo que queramos hacer.

Puede haber formas de evitar el envoltorio… pero nada sencillo que podamos hacer de inmediato.

Así que creo que la mejor solución inmediata para ti será copiar la implementación de adplugin a la que hiciste referencia en el OP.

@pfaffman

pero no pude entenderlo del todo

Esencialmente:

1. Crea un componente (Glimmer o clásico, no importa) que renderice lo que quieras.

2. Usa registerWidgetShim para hacer que ese componente esté disponible como un widget. El ejemplo de adplugin está creando un widget llamado “after-post-ad”, que renderiza el componente PostBottomAd. Está pasando todos los atributos del widget (@data) al argumento @model del componente.

3. Usa api.decorateWidget para renderizar tu nuevo widget shim en la posición post:after. En tu caso, dado que solo lo quieres en la primera publicación, podrías hacer algo como:

   api.decorateWidget("post:after", (helper) => {
     if (helper.widget.model.post_number === 1) {
       return helper.attach("my-widget-shim");
     }
   });
   

Cuando finalmente hagamos el “glimmer-ify” de la página del tema, deberás eliminar el widget shim/decoración y reemplazarlo con una salida de plugin. Eso debería ser bastante fácil, ya que toda tu lógica de visualización en el componente será reutilizable en la salida del plugin.

¡Cuéntanos cómo te va! Estaremos encantados de ayudarte con cualquier pregunta de seguimiento; sé que hay muchas partes móviles aquí.

[pfaffman (Jay Pfaffman)]

¡Estoy muy cerca!

El único problema es que el componente necesita currentUser y no puedo averiguar cómo pasarlo. Esto es lo que no funciona.

import { hbs } from "ember-cli-htmlbars";
import { withPluginApi } from "discourse/lib/plugin-api";
import Site from "discourse/models/site";
import { registerWidgetShim } from "discourse/widgets/render-glimmer";
import Banner from "../components/banner";

export default {
  name: "initialize-banner-widget",
  initialize(container) {
    registerWidgetShim(
      "geo-banner-widget",
      "div.widget-connector",
      hbs`<Banner @currentUser={{currentUser}} />`
    );

    // withPluginApi("0.1", (api) => {
    //   console.log("doing plugin");
    //   api.decorateWidget("post:after", (helper) => {
    //     return helper.attach("geo-banner-widget", helper.widget.model);
    //   });
    // });

    withPluginApi("0.1", (api) => {
      const currentUser = container.lookup("service:current-user");
      api.decorateWidget("post:after", (helper) => {
        console.log(`decorate widget ${currentUser.username}`, );
        if(helper.widget.model.post_number === 1){
          return helper.attach("geo-banner-widget", { currentUser });
        }
      });
    });
  },
};

[david (David Taylor)]

En tu componente Banner, puedes inyectar el servicio currentUser de esta manera:

class Banner extends Component {
  @service currentUser;
}

entonces no necesitarás pasarlo desde el widget.

[pfaffman (Jay Pfaffman)]

Sabía que era estúpido pasar currentUser, ¡pero no pude resolverlo!

La otra parte, en el improbable caso de que a alguien más le resulte útil, es

import Service, { inject as service } from "@ember/service";

import { hbs } from "ember-cli-htmlbars";
import { withPluginApi } from "discourse/lib/plugin-api";
import { registerWidgetShim } from "discourse/widgets/render-glimmer";

export default {
  name: "initialize-banner-widget",
  initialize(container) {
    registerWidgetShim(
      "geo-banner-widget",
      "div.widget-connector",
      hbs`<Banner/>`
    );

    withPluginApi("0.1", (api) => {
      api.decorateWidget("post:after", (helper) => {
        const currentUser = container.lookup("service:current-user");
        if(helper.widget.model.post_number === 1){
          return helper.attach("geo-banner-widget");
        }
      });
    });
  },
};

[david (David Taylor)]

@pfaffman

El otro fragmento, en el improbable caso de que a alguien más le resulte útil, es

import Service, { inject as service } from "@ember/service";

¡Sí!

En este caso, no creo que necesites importar la clase Service. Eso solo sería necesario si estuvieras creando tu propio Servicio. Solo necesitas el decorador de inyección service.

Y en la última versión de Discourse/Ember, se puede simplificar aún más para evitar la necesidad del alias ‘inject as’. Ember ahora hace que el decorador de inyección esté disponible directamente como service.

import { service } from "@ember/service";

(pero el antiguo { inject as service } todavía funciona, y no tengo conocimiento de ningún plan para deprecarlo en Ember)

EDITAR: Pero tal vez pueda usar decorateWidget en lugar de un plugin outlet. . .

[pfaffman (Jay Pfaffman)]

@david

, no creo que necesites importar la clase Service.

Eso es lo que piensa el linter también

@david

import { service } from "@ember/service";

Me gusta más. El plugin de anuncios de la casa todavía lo hace a la antigua.