Sto riscontrando alcuni problemi nell'inserire iframe utilizzando l'API Ember di Discourse

Drew-ART · 22 Marzo 2024, 6:15pm

Il plugin inserisce un i-frame in Discourse e puoi trovarlo qui

Lo tengo più o meno aggiornato all’ultima versione, quindi la modifica che rompe le cose è avvenuta di recente. Attualmente stiamo eseguendo la versione 3.3.0.beta1-dev.

Nella console ottengo 3 messaggi di errore che assomigliano a questo:

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

Molto probabilmente questo oggetto Ember è stato rimosso dall’API di Discourse in una versione recente di Discourse, quindi questo errore si verifica dopo un aggiornamento di Discourse che influisce su tali oggetti.

Ecco tutte le correzioni che ho apportato:

Modifica 1

assets\javascripts\discourse\initializers\docuss.js.es6
linea 232

vecchio:

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

nuovo:

import { schedule } from '@ember/runloop'

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

Modifica 2

assets\javascripts\discourse\lib\DcsIFrame.js.es6
linea 858

vecchio:

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

nuovo:

    import { schedule } from '@ember/runloop'

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

Modifica 3

assets\javascripts\discourse\lib\onDidTransition.js.es6
linea 239

vecchio:

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

nuovo:

import { schedule } from '@ember/runloop'

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

Ciò ha risolto tutti i messaggi di errore nella console, ma ne ha creati una serie di nuovi:

 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

Ecco una piattaforma live con il plugin attivato, nel caso fosse utile

Questo problema è familiare a qualcuno che ha riscontrato problemi con gli oggetti API di Ember che cambiano. Qualsiasi suggerimento su come risolverli sarebbe molto apprezzato.

Arkshine · 23 Marzo 2024, 12:52am

Ciao!

Ti sei dimenticato questo:

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"
                );

Credo che potresti fare qualcosa di simile. Questo dovrebbe ancora funzionare.

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

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

}

A parte questo, il controller del composer è stato spostato in un servizio ora.

Heliosurge · 23 Marzo 2024, 1:47am

Hai già dato un’occhiata all’alternativa consigliata dalla pagina di GitHub?

Credo che l’autore sia attivo qui.

Drew-ART · 23 Marzo 2024, 3:58pm

Grazie per il suggerimento @Heliosurge. Tuttavia, abbiamo integrato profondamente il vecchio nel nostro progetto, quindi con la benedizione dell’autore abbiamo assunto la manutenzione.

Al momento, però, scarseggiano gli sviluppatori con le competenze pertinenti nella nostra community Open Source.

Heliosurge · 23 Marzo 2024, 11:38pm

Sì, ha perfettamente senso.

Drew-ART · 29 Marzo 2024, 8:38pm

Grazie @Arkshine. Il mio portatile è morto quando un caricabatterie sostitutivo ha bruciato il circuito di ricarica, quindi non sono stato in grado di testarlo finché non ho riparato il portatile ieri.

Ho inserito l’istruzione di importazione in cima alla pagina e il tuo codice sotto, ma sembra che stia riscontrando errori di sintassi quando provo ad aggiungere quello o variazioni simili:

Visual Basic Studio trova questi errori:

// Nuova funzione tagsChanged con decoratore @observes
@observes("model.tags")
tagsChanged() {
  // Vedi se è un tag balloon

La parentesi graffa aperta alla fine di questa riga: tagsChanged() {
ha questo messaggio di errore:
‘;’ previsto.ts(1005)

Anche l’ultima parentesi graffa nel codice ha un flag di errore con questo messaggio:
‘}’ prevista.ts(1005)
docuss.js.es6(219, 54): L’analizzatore si aspettava di trovare una ‘}’ per corrispondere al token ‘{’ qui.

Questa è la riga 219:
tagsChanged: Ember.observer('model.tags', function() {

Il mio server dice questo quando provo a creare:

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

Drew-ART · 4 Settembre 2024, 10:10pm

Non riesco a capire perché, ma non sono mai riuscito a far funzionare questa correzione, né una serie di variazioni su di essa, il che è strano dato che ha funzionato perfettamente sugli altri file. La mia attenzione si è spostata per un po’, ma mi sta dando fastidio.

Riguardandola ora non riesco a vedere cosa stia causando il problema. L’ho ripristinata all’originale. Qualcuno vede cosa deve essere cambiato qui per aggiornare alla nuova API di 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 Settembre 2024, 2:16am

Ecco alcuni suggerimenti:

Le impostazioni del sito sono state spostate in un servizio:

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

location:discourse-location → location:history
afterRender().then(() => onAfterRender(container));
afterRender è un decoratore che si applica sopra un metodo in una classe di componente; non dovresti usarlo direttamente come funzione.
Credo che tu voglia (non sembra essere necessario), forse:
```
import { schedule } from '@ember/runloop';
schedule("afterRender", () => onAfterRender(container))
```
Hai un grosso pezzo di codice fuori dalla funzione composeStateChanged, a quanto pare.
Inoltre, puoi usare il servizio router qui: container.lookup('router:main').transitionTo(path); → this.router.transitionTo(path);
L’header è stato modernizzato. La personalizzazione nel widget home-logo è deprecata nel tuo contesto. Maggiori informazioni qui: Upcoming Header Changes - Preparing Themes and Plugins.
Nel tuo caso, dovrai impostare glimmer header mode su auto o enabled. Quindi, puoi usare un plugin outlet per sostituire il contenuto:
```
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: per utilizzare la sintassi template di glimmer, assicurati di rinominare l’estensione del file in .gjs.
Puoi anche usare questo modo:
```
 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;
  });
```
Per cambiare l’URL:
```
api.registerValueTransformer("home-logo-href", () => container.dcsHeaderLogo._href);
```
Nota: credo che il codice per il re-rendering in setLogo non funzionerà su un componente glimmer.

Nota dopo il test: Tuttavia, nessuna delle due soluzioni funzionerà perché l’header viene renderizzato prima che tu possa ottenere i loghi dal JSON. Non ho una soluzione pronta per questo. Non sono sicuro se ci sia un modo migliore: sposterei il caricamento del JSON in un servizio e ne traccerei il risultato. Quindi, userei il plugin outlet sopra con un componente glimmer. In questo modo, basandoti su una variabile di tracciamento, puoi attivare automaticamente un aggiornamento del componente.

Con questo, in qualche modo funziona. Non ci sono ancora pezzi funzionanti come il composer. Non ci ho guardato troppo a fondo. Almeno, non ci sono più errori bloccanti.

Spero che questo aiuti.

Drew-ART · 5 Settembre 2024, 1:23pm

È molto utile, grazie

Argomento		Risposte	Visualizzazioni
Upgrading Ember to 2.10 Dev ember	71	10684	Dicembre 22, 2016
A versioned API for client side plugins Dev rest-api	34	19858	Giugno 21, 2024
Preparing for Discourse's upgrade to Ember 5 Announcements	57	7273	Maggio 12, 2025
Upgrading Discourse to Ember 4 Dev ember	19	3063	Dicembre 19, 2024
Some basic questions about discourse and rails Dev	4	1921	Agosto 23, 2019

Sto riscontrando alcuni problemi nell'inserire iframe utilizzando l'API Ember di Discourse

Argomenti correlati