Avoir quelques problèmes avec l'insertion d'iframes en utilisant l'API Ember de Discourse

Drew-ART · Mars 22, 2024, 6:15

Le plugin insère un i-frame dans Discourse et vous pouvez le trouver ici

Je le maintiens plus ou moins à jour avec la dernière version, donc le changement radical est récent. Nous utilisons actuellement la version 3.3.0.beta1-dev.

Dans la console, j’obtiens 3 messages d’erreur qui ressemblent à ceci :

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

Très probablement, cet objet Ember a été supprimé de l’API Discourse dans une version récente de Discourse, donc cette erreur survient après une mise à niveau de Discourse affectant ces objets.

Voici toutes les corrections que j’ai apportées :

Changement 1

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

ancien :

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

nouveau :

import { schedule } from '@ember/runloop'

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

Changement 2

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

ancien :

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

nouveau :

    import { schedule } from '@ember/runloop'

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

Changement 3

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

ancien :

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

nouveau :

import { schedule } from '@ember/runloop'

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

Cela a résolu tous les messages d’erreur dans la console, mais en a créé une série de nouveaux :

 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

Voici une plateforme en direct avec le plugin activé au cas où cela serait utile

Ce problème est-il familier à quelqu’un qui a rencontré des problèmes avec les objets d’API Ember qui changent ? Des suggestions sur la façon de les résoudre seraient grandement appréciées.

Arkshine · Mars 23, 2024, 12:52

Bonjour !

Vous avez oublié celui-ci :

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

Je pense que vous pourriez faire quelque chose comme ça. Cela devrait toujours fonctionner.

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

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

}

Par ailleurs, le contrôleur du compositeur a été déplacé vers un service maintenant.

Heliosurge · Mars 23, 2024, 1:47

Avez-vous consulté la solution de remplacement recommandée sur la page GitHub ?

Je crois que l’auteur est actif ici.

Drew-ART · Mars 23, 2024, 3:58

Merci pour la suggestion @Heliosurge. Nous avons intégré l’ancienne dans notre projet assez profondément, donc avec la bénédiction de l’auteur, nous avons repris sa maintenance.

Manque un peu de développeurs ayant les compétences pertinentes dans notre communauté Open Source pour le moment.

Heliosurge · Mars 23, 2024, 11:38

Oui, ça a parfaitement du sens.

Drew-ART · Mars 29, 2024, 8:38

Merci pour cela @Arkshine. Mon ordinateur portable est tombé en panne lorsqu’un chargeur de remplacement a grillé le circuit de charge, je n’ai donc pas pu le tester avant d’avoir pu réparer l’ordinateur portable hier.

J’ai placé l’instruction d’importation en haut de la page et votre code en dessous, mais je semble rencontrer des erreurs de syntaxe lorsque j’essaie d’ajouter cela ou des variations similaires :

Visual Basic Studio trouve ces erreurs :

// Nouvelle fonction tagsChanged avec décorateur @observes
@observes("model.tags")
tagsChanged() {
  // Voir s'il s'agit d'une balise de ballon

Le crochet ouvrant à la fin de cette ligne : tagsChanged() {
a ce message d’erreur :
‘;’ attendu.ts(1005)

Le dernier crochet dans le code a également un indicateur d’erreur avec ce message :
‘}’ attendu.ts(1005)
docuss.js.es6(219, 54) : L’analyseur s’attendait à trouver un ‘}’ pour correspondre au jeton ‘{’ ici.

Ceci est la ligne 219 :
tagsChanged: Ember.observer('model.tags', function() {

Mon serveur dit ceci lorsque j’essaie de construire :

  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 : Jeton inattendu (253:25)

Drew-ART · Septembre 4, 2024, 10:10

Je ne vois pas pourquoi, mais je n’ai jamais réussi à faire fonctionner cette correction, ni un certain nombre de ses variations, ce qui est étrange car cela a très bien fonctionné sur les autres fichiers. Mon attention s’est déplacée pendant un certain temps, mais cela me tracasse.

En y regardant de plus près maintenant, je ne vois pas ce qui cause le problème. Je l’ai rétabli à l’original. Quelqu’un peut-il voir ce qui doit être changé ici pour mettre à jour la nouvelle API 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 · Septembre 5, 2024, 2:16

Voici quelques points :

Les paramètres du site ont été déplacés vers un service :

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

location:discourse-location → location:history
afterRender().then(() => onAfterRender(container));
afterRender est un décorateur que vous placez au-dessus d’une méthode dans une classe de composant ; vous ne devez pas l’utiliser directement comme une fonction.
Je pense que vous voulez (cela ne semble pas nécessaire), éventuellement :
```
import { schedule } from '@ember/runloop';
schedule("afterRender", () => onAfterRender(container))
```
Vous avez un gros morceau de code en dehors de la fonction composeStateChanged, semble-t-il.
De plus, vous pouvez utiliser le service de routage ici : container.lookup('router:main').transitionTo(path); → this.router.transitionTo(path);
L’en-tête a été modernisé. La personnalisation dans le widget home-logo est dépréciée dans votre contexte. Plus d’informations ici : Upcoming Header Changes - Preparing Themes and Plugins.
Dans votre cas, vous devrez définir le glimmer header mode sur auto ou enabled. Ensuite, vous pouvez utiliser une sortie de plugin pour remplacer le contenu :
```
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>`);
```
Remarque : pour utiliser la syntaxe template de glimmer, assurez-vous de renommer l’extension du fichier en .gjs.
Vous pouvez également utiliser cette méthode :
```
 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;
  });
```
Pour changer l’URL :
```
api.registerValueTransformer("home-logo-href", () => container.dcsHeaderLogo._href);
```
Remarque : je pense que le code pour ré-rendre dans setLogo ne fonctionnera pas sur un composant glimmer.

Remarque après test : cependant, aucune des deux solutions ne fonctionnera car l’en-tête est rendu avant que vous ne puissiez obtenir les logos du JSON. Je n’ai pas de solution prête pour cela. Je ne suis pas sûr s’il existe une meilleure façon : je déplacerais le chargement du JSON vers un service et suivrais le résultat. Ensuite, utilisez la sortie de plugin ci-dessus avec un composant glimmer. De cette façon, en fonction d’une variable de suivi, vous pouvez déclencher automatiquement une mise à jour du composant.

Avec cela, cela fonctionne plus ou moins. Il n’y a toujours pas de pièces fonctionnelles comme le compositeur. Je n’ai pas regardé trop en profondeur. Au moins, il n’y a plus d’erreur bloquante. :slightly_smiling_face:

J’espère que cela vous aidera.

Drew-ART · Septembre 5, 2024, 1:23

C’est très utile, merci

Sujet		Réponses	Vues
Upgrading Ember to 2.10 Dev ember	71	10685	Décembre 22, 2016
A versioned API for client side plugins Dev rest-api	34	19858	Juin 21, 2024
Preparing for Discourse's upgrade to Ember 5 Announcements	57	7276	Mai 12, 2025
Upgrading Discourse to Ember 4 Dev ember	19	3063	Décembre 19, 2024
Some basic questions about discourse and rails Dev	4	1921	Août 23, 2019

Avoir quelques problèmes avec l'insertion d'iframes en utilisant l'API Ember de Discourse

Sujets connexes