Teniendo algunos problemas al insertar iframes usando el API Ember de Discourse

Drew-ART · 22 Marzo, 2024 18:15

El plugin inserta un i-frame en Discourse y puedes encontrarlo aquí

Lo mantengo más o menos actualizado a la última versión, por lo que el cambio drástico ocurrió recientemente. Actualmente estamos ejecutando la versión 3.3.0.beta1-dev.

En la consola obtengo 3 mensajes de error que se ven así:

docuss.js:225 Uncaught (in promise) ReferenceError: Ember is not defined
    at docuss.js:225:1

Lo más probable es que este objeto Ember haya sido eliminado de la API de Discourse en una versión reciente de Discourse, por lo que este error aparece después de una actualización de Discourse que afecta a esos objetos.

Aquí están todas las correcciones que hice:

Cambio 1

assets\javascripts\discourse\initializers\docuss.js.es6
línea 232

antiguo:

const afterRender = res =>
  new Promise(resolve => {
    // @ts-ignore
    Ember.run.schedule('afterRender', null, () => resolve(res))

nuevo:

import { schedule } from '@ember/runloop'

const afterRender = res =>
  new Promise(resolve => {
     schedule('afterRender', null, () => resolve(res))
  })

Cambio 2

assets\javascripts\discourse\lib\DcsIFrame.js.es6
línea 858

antiguo:

  const afterRender = res =>
    new Promise(resolve => {
        Ember.run.schedule('afterRender', null, () => resolve(res))
    })

nuevo:

    import { schedule } from '@ember/runloop'

    const afterRender = res =>
      new Promise(resolve => {
        schedule('afterRender', null, () => resolve(res))
      })

Cambio 3

assets\javascripts\discourse\lib\onDidTransition.js.es6
línea 239

antiguo:

const afterRender = res =>
  new Promise(resolve => {
    Ember.run.schedule('afterRender', null, () => resolve(res))

nuevo:

import { schedule } from '@ember/runloop'

const afterRender = res =>
  new Promise(resolve => {
      schedule('afterRender', null, () => resolve(res))

Eso eliminó todos los mensajes de error en la consola, pero creó una serie de nuevos:

 Discourse v3.3.0.beta1-dev — https://github.com/discourse/discourse/commits/4c7d58a883 — Ember v5.5.0
app.js:197 Uncaught ReferenceError: Ember is not defined
    at s.callback (docuss.js:210:1)
    at s.exports (loader.js:106:1)
    at requireModule (loader.js:27:1)
    at y (app.js:171:18)
    at w (app.js:194:19)
    at app.js:157:29
    at e.start (app.js:51:5)
    at HTMLDocument.<anonymous> (start-app.js:5:7)
    at discourse-boot.js:20:12
    at discourse-boot.js:1:1

Aquí hay una plataforma en vivo con el plugin activado por si acaso es útil

¿Alguien más se ha encontrado con este problema al tratar con objetos de API de Ember que cambian? Cualquier sugerencia sobre cómo solucionarlo sería muy apreciada.

Arkshine · 23 Marzo, 2024 00:52

Hola!

Te olvidas de este:

github.com/focallocal/dcs-discourse-plugin

assets/javascripts/discourse/initializers/docuss.js.es6

master


      
          });
          
          // Auto-select "hidden" category when composer opens (Task #3)
          api.onAppEvent("composer:opened", () => {
            schedule("afterRender", () => {
              const composerController = container.lookup("controller:composer");
              if (!composerController) return;
          
              const model = composerController.get("model");
              if (!model || !model.get) return;
          
              // Only set category if not already set and if creating a new topic
              const categoryId = model.get("categoryId");
              const action = model.get("action");
          
              if (!categoryId && action === Composer.CREATE_TOPIC) {
                // Find the "hidden" category
                const appCtrl = container.lookup("controller:application");
                const hiddenCategory = appCtrl.site.categories.find(
                  c => c.name.toLowerCase() === "hidden"
                );

Creo que podrías hacer algo como esto. Esto aún debería funcionar.

import { observes } from "discourse-common/utils/decorators";

@observes("model.tags")
tagsChanged() {

}

Por cierto, el controlador del compositor se ha movido a un servicio ahora.

Heliosurge · 23 Marzo, 2024 01:47

¿Has consultado la alternativa recomendada en la página de GitHub?

Creo que el autor está activo aquí.

Drew-ART · 23 Marzo, 2024 15:58

Gracias por la sugerencia @Heliosurge. Sin embargo, hemos integrado la antigua bastante profundamente en nuestro proyecto, así que con la bendición del autor, nos hemos hecho cargo de su mantenimiento.

Sin embargo, actualmente tenemos pocos desarrolladores con las habilidades relevantes en nuestra comunidad de código abierto.

Heliosurge · 23 Marzo, 2024 23:38

Sí, tiene perfecto sentido.

Drew-ART · 29 Marzo, 2024 20:38

Gracias por eso @Arkshine. Mi portátil murió cuando un cargador de reemplazo quemó el circuito de carga, así que no pude probarlo hasta que pude reparar el portátil ayer.

Puse la declaración de importación al principio de la página y tu código debajo, pero parece que me encuentro con errores de sintaxis cuando intento agregar eso o variaciones similares:

Visual Basic Studio encuentra estos errores:

// Nueva función tagsChanged con decorador @observes
@observes("model.tags")
tagsChanged() {
  // Ver si es una etiqueta de globo

El corchete abierto al final de esta línea: tagsChanged() {
tiene este mensaje de error:
‘;’ esperado.ts(1005)

El último corchete en el código también tiene una bandera de error con este mensaje:
Se esperaba ‘}’.ts(1005)
docuss.js.es6(219, 54): El analizador esperaba encontrar un ‘}’ para que coincida con el token ‘{’ aquí.

Esta es la línea 219:
tagsChanged: Ember.observer('model.tags', function() {

Mi servidor dice esto cuando intento compilar:

  251 |     }, 0);
  252 |   }
> 253 | }.observes("model.tags"),
      |                          ^
        en /tmp/broccoli-6523ExbXtskE5c0h/out-1067-funnel
        en Babel (Babel: discourse-plugins)
  - nombre: Error
  - nodeAnnotation: Babel: discourse-plugins
  - nodeName: Babel
  - originalErrorMessage: /var/www/discourse/app/assets/javascripts/discourse/discourse/plugins/docuss/discourse/initializers/docuss.js: Token inesperado (253:25)

Drew-ART · 4 Septiembre, 2024 22:10

No puedo ver por qué, pero nunca pude hacer que esta corrección funcionara, ni una serie de variaciones de la misma, lo cual es extraño ya que funcionó bien en los otros archivos. Mi enfoque cambió por un tiempo, pero me ha estado molestando.

Mirándolo de nuevo ahora y no puedo ver qué está causando el problema. Lo he revertido a lo original. ¿Alguien puede ver qué necesita cambiarse aquí para actualizar a la nueva API de Ember?

github.com/focallocal/dcs-discourse-plugin

assets/javascripts/discourse/initializers/docuss.js.es6

c2cd9507c

//import ApplicationRoute from 'discourse/routes/application'
//import TagsShowRoute from 'discourse/routes/tags-show'
//import DiscourseURL from 'discourse/lib/url'
import ComposerController from 'discourse/controllers/composer'
import Composer from 'discourse/models/composer'
//import TopicNavigation from 'discourse/components/topic-navigation'
import SiteHeaderComponent from 'discourse/components/site-header'
import { setDefaultHomepage } from 'discourse/lib/utilities'
import { withPluginApi } from 'discourse/lib/plugin-api'

import { onAfterRender } from '../lib/onAfterRender'
import { onDidTransition } from '../lib/onDidTransition'
import { DcsTag } from '../lib/DcsTag'
import { DcsIFrame } from '../lib/DcsIFrame'
import { discourseAPI } from '../lib/discourseAPI'
//import { simplifyTopicStates } from '../lib/simplifyTopicStates.js'

export default {
  name: 'docuss',
  initialize(container, app) {

This file has been truncated. show original

Arkshine · 5 Septiembre, 2024 02:16

Aquí tienes algunos puntos:

La configuración del sitio se ha trasladado a un servicio:

const siteSettings = container.lookup('service:site-settings');
if (!siteSettings.docuss_enabled) {
  return;
}

location:discourse-location → location:history
afterRender().then(() => onAfterRender(container));
afterRender es un decorador que pones encima de un método en una clase de componente; no debes usarlo directamente como una función.
Creo que quieres (no parece ser necesario), posiblemente:
```
import { schedule } from '@ember/runloop';
schedule("afterRender", () => onAfterRender(container))
```
Tienes una gran parte de código fuera de la función composeStateChanged, parece.
Además, puedes usar el servicio de enrutador aquí: container.lookup('router:main').transitionTo(path); → this.router.transitionTo(path);
La cabecera se ha modernizado. La personalización en el widget home-logo está obsoleta en tu contexto. Más información aquí: Upcoming Header Changes - Preparing Themes and Plugins.
En tu caso, necesitarás la configuración glimmer header mode en auto o enabled. Luego, puedes usar un outlet de plugin para reemplazar el contenido:
```
api.renderInOutlet("home-logo-contents", `<template>
    <HomeLogoContents
      @logoSmallUrl={{container.dcsHeaderLogo._smallLogoUrl}}
      @logoUrl={{container.dcsHeaderLogo._logoUrl}}
      @minimized={{@outletArgs.minimized}}
      @mobileLogoUrl={{container.dcsHeaderLogo._mobileLogoUrl}}
      @showMobileLogo={{@outletArgs.showMobileLogo}}
      @title={{@outletArgs.title}}
    />
  </template>`);
```
Nota: para usar la sintaxis de plantilla glimmer <template>, asegúrate de renombrar la extensión del archivo a .gjs.
También puedes usar esta forma:
```
 api.registerValueTransformer("home-logo-image-url", (transformer) => {
    let url = transformer.value;
    if (transformer.context.name === 'logo') {
      url = container.dcsHeaderLogo._logoUrl;
    } else if (transformer.context.name === 'logo_small') {
      url = container.dcsHeaderLogo._smallLogoUrl;
    } else if (transformer.context.name === 'logo_mobile') {
      url = container.dcsHeaderLogo._mobileLogoUrl;
    }
    return url;
  });
```
Para cambiar la URL:
```
api.registerValueTransformer("home-logo-href", () => container.dcsHeaderLogo._href);
```
Nota: Creo que el código para volver a renderizar en setLogo no funcionará en un componente glimmer.

Nota después de probar: Sin embargo, ninguna de las soluciones funcionará porque la cabecera se renderiza antes de que puedas obtener los logos del JSON. No tengo una solución lista para eso. No estoy seguro de si hay una mejor manera: movería la carga del JSON a un servicio y rastrearía el resultado. Luego, usaría el outlet del plugin anterior con un componente glimmer. De esta manera, basándose en una variable de seguimiento, puedes activar automáticamente una actualización en el componente.

Con eso, funciona de alguna manera. Todavía no hay piezas que funcionen como el compositor. No lo he mirado muy a fondo. Como mínimo, ya no hay errores bloqueantes.

Espero que esto ayude.

Drew-ART · 5 Septiembre, 2024 13:23

Eso es muy útil, gracias

Tema		Respuestas	Vistas
Upgrading Ember to 2.10 Dev ember	71	10684	22 Diciembre 2016
A versioned API for client side plugins Dev rest-api	34	19857	21 Junio 2024
Preparing for Discourse's upgrade to Ember 5 Announcements	57	7273	12 Mayo 2025
Upgrading Discourse to Ember 4 Dev ember	19	3063	19 Diciembre 2024
Some basic questions about discourse and rails Dev	4	1921	23 Agosto 2019

Teniendo algunos problemas al insertar iframes usando el API Ember de Discourse

Temas relacionados