Ich habe einige Probleme beim Einfügen von iframes mit der Ember API von Discourse

Drew-ART · 22. März 2024 um 18:15

Das Plugin fügt einen i-Frame in Discourse ein und Sie finden es hier

Ich halte es mehr oder weniger auf dem neuesten Stand, sodass die Breaking Change kürzlich aufgetreten ist. Wir verwenden derzeit 3.3.0.beta1-dev.

In der Konsole erhalte ich 3 Fehlermeldungen, die wie folgt aussehen:

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

Höchstwahrscheinlich wurde dieses Ember-Objekt in einer neueren Version von Discourse aus der Discourse-API entfernt, sodass dieser Fehler nach einem Discourse-Upgrade auftritt, das diese Objekte betrifft.

Hier sind alle von mir vorgenommenen Korrekturen:

Änderung 1

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

alt:

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

neu:

import { schedule } from '@ember/runloop'

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

Änderung 2

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

alt:

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

neu:

	import { schedule } from '@ember/runloop'

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

Änderung 3

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

alt:

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

neu:

import { schedule } from '@ember/runloop'

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

Das hat alle Fehlermeldungen in der Konsole behoben, aber eine Reihe neuer erzeugt:

 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

Hier ist eine Live-Plattform mit aktiviertem Plugin, falls es hilfreich ist

Ist dieses Problem jemandem bekannt, der Probleme mit sich ändernden Ember API-Objekten hatte? Jede Hilfe bei der Behebung wäre sehr willkommen.

Arkshine · 23. März 2024 um 00:52

Hallo!

Du hast diesen hier vergessen:

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

Ich glaube, du könntest so etwas machen. Das sollte immer noch funktionieren.

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

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

}

Nebenbei bemerkt, wurde der Composer-Controller jetzt in einen Service verschoben.

Heliosurge · 23. März 2024 um 01:47

Haben Sie die empfohlene Alternative von der GitHub-Seite ausprobiert?

Ich glaube, der Autor ist hier aktiv.

Drew-ART · 23. März 2024 um 15:58

Danke für den Vorschlag @Heliosurge. Wir haben die alte Version jedoch ziemlich tief in unser Projekt integriert. Mit dem Segen des Autors haben wir die Wartung übernommen.

Im Moment mangelt es uns jedoch an Entwicklern mit den entsprechenden Fähigkeiten in unserer Open-Source-Community.

Heliosurge · 23. März 2024 um 23:38

Ja, das ergibt vollkommen Sinn.

Drew-ART · 29. März 2024 um 20:38

Danke, @Arkshine. Mein Laptop ist gestorben, als ein Ersatzladegerät den Ladeschaltkreis gebraten hat, daher konnte ich es erst gestern testen, als ich den Laptop reparieren konnte.

Ich habe die Importanweisung oben auf der Seite und deinen Code darunter eingefügt, scheine aber auf Syntaxfehler zu stoßen, wenn ich versuche, dies oder ähnliche Variationen davon hinzuzufügen:

Visual Basic Studio findet diese Fehler:

// Neue tagsChanged-Funktion mit @observes-Decorator
@observes("model.tags")
tagsChanged() {
  // Prüfen, ob es sich um ein Ballon-Tag handelt

Die öffnende Klammer am Ende dieser Zeile: tagsChanged() {
hat diese Fehlermeldung:
‘;’ erwartet.ts(1005)

Die letzte Klammer im Code hat ebenfalls eine Fehlerflagge mit dieser Meldung:
‘}’ erwartet.ts(1005)
docuss.js.es6(219, 54): Der Parser erwartete hier ein ‘}’, um das ‘{’-Token abzugleichen.

Dies ist Zeile 219:
tagsChanged: Ember.observer('model.tags', function() {

Mein Server sagt dies, wenn ich versuche zu bauen:

  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: Unerwartetes Token (253:25)

Drew-ART · 4. September 2024 um 22:10

Ich kann nicht verstehen, warum, aber ich konnte diesen Fix nie zum Laufen bringen, oder eine Reihe von Variationen davon, was seltsam ist, da er bei den anderen Dateien einwandfrei funktionierte. Meine Konzentration verschob sich für eine Weile, aber es hat mich geärgert.

Wenn ich jetzt darauf zurückblicke, kann ich nicht sehen, was das Problem verursacht. Ich habe es auf das Original zurückgesetzt. Kann jemand sehen, was hier geändert werden muss, um auf die neue Ember API zu aktualisieren?

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. September 2024 um 02:16

Hier sind ein paar Hinweise:

Die Website-Einstellungen wurden in einen Dienst verschoben:

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

location:discourse-location → location:history
afterRender().then(() => onAfterRender(container));
afterRender ist ein Dekorator, den Sie über einer Methode in einer Komponentklasse platzieren. Sie sollten ihn nicht direkt als Funktion verwenden.
Ich glaube, Sie möchten (es scheint nicht notwendig zu sein), möglicherweise:
```
import { schedule } from '@ember/runloop';
schedule("afterRender", () => onAfterRender(container))
```
Sie haben ein großes Stück Code außerhalb der composeStateChanged-Funktion, scheint es.
Außerdem können Sie hier den Router-Dienst verwenden: container.lookup('router:main').transitionTo(path); → this.router.transitionTo(path);
Der Header wurde modernisiert. Die Anpassung im home-logo-Widget ist in Ihrem Kontext veraltet. Weitere Informationen hier: Upcoming Header Changes - Preparing Themes and Plugins.
In Ihrem Fall müssen Sie die Einstellung glimmer header mode auf auto oder enabled setzen. Dann können Sie einen Plugin-Outlet verwenden, um den Inhalt zu ersetzen:
```
api.renderInOutlet("home-logo-contents", 
  @logoSmallUrl={{container.dcsHeaderLogo._smallLogoUrl}}
  @logoUrl={{container.dcsHeaderLogo._logoUrl}}
  @minimized={{@outletArgs.minimized}}
  @mobileLogoUrl={{container.dcsHeaderLogo._mobileLogoUrl}}
  @showMobileLogo={{@outletArgs.showMobileLogo}}
  @title={{@outletArgs.title}}
/>);
```
Hinweis: Um die Glimmer-Syntax <template> zu verwenden, stellen Sie sicher, dass Sie die Dateierweiterung in .gjs. umbenennen.
Sie können auch diesen Weg gehen:
```
 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;
  });
```
Um die URL zu ändern:
```
api.registerValueTransformer("home-logo-href", () => container.dcsHeaderLogo._href);
```
Hinweis: Ich glaube, der Code zum Neu-Rendern in setLogo funktioniert bei einer Glimmer-Komponente nicht.

Hinweis nach dem Testen: Keine der beiden Lösungen wird jedoch funktionieren, da der Header gerendert wird, bevor Sie die Logos aus dem JSON abrufen können. Ich habe keine fertige Lösung dafür. Ich bin mir nicht sicher, ob es einen besseren Weg gibt: Ich würde das Laden des JSON in einen Dienst verschieben und das Ergebnis verfolgen. Dann verwenden Sie den Plugin-Outlet oben mit einer Glimmer-Komponente. Auf diese Weise können Sie basierend auf einer Tracking-Variablen automatisch ein Update der Komponente auslösen.

Damit funktioniert es irgendwie. Es gibt immer noch keine funktionierenden Teile wie den Composer. Ich habe das nicht zu tief untersucht. Zumindest gibt es keinen blockierenden Fehler mehr.

Ich hoffe, das hilft.

Drew-ART · 5. September 2024 um 13:23

Das ist sehr hilfreich, danke

Thema		Antworten	Aufrufe
Upgrading Ember to 2.10 Dev ember	71	10685	22. Dezember 2016
A versioned API for client side plugins Dev rest-api	34	19858	21. Juni 2024
Preparing for Discourse's upgrade to Ember 5 Announcements	57	7276	12. Mai 2025
Upgrading Discourse to Ember 4 Dev ember	19	3063	19. Dezember 2024
Some basic questions about discourse and rails Dev	4	1921	23. August 2019

Ich habe einige Probleme beim Einfügen von iframes mit der Ember API von Discourse

Verwandte Themen