Tendo alguns problemas ao inserir iframes usando a API Ember do Discourse

Drew-ART · Março 22, 2024, 6:15pm

O plugin insere um i-frame no Discourse e você pode encontrá-lo aqui

Eu o mantenho mais ou menos atualizado com a versão mais recente, então a mudança que quebra veio recentemente. Atualmente estamos executando a versão 3.3.0.beta1-dev.

No console, recebo 3 mensagens de erro que se parecem com isto:

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

Muito provavelmente, este objeto Ember foi removido da API do Discourse em uma versão recente do Discourse, então este erro ocorre após uma atualização do Discourse que afeta esses objetos.

Aqui estão todas as correções que fiz:

Mudança 1

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

antigo:

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

novo:

import { schedule } from '@ember/runloop'

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

Mudança 2

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

antigo:

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

novo:

	import { schedule } from '@ember/runloop'

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

Mudança 3

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

antigo:

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

novo:

import { schedule } from '@ember/runloop'

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

Isso limpou todas as mensagens de erro no console, mas criou uma série de novas:

 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

Aqui está uma plataforma ao vivo com o plugin ativado, caso seja útil

Essa questão é familiar para alguém que encontrou problemas com a mudança de objetos da API Ember. Alguma sugestão sobre como corrigi-los seria muito apreciada.

Arkshine · Março 23, 2024, 12:52am

Olá!

Você esqueceu 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"
                );

Acredito que você poderia fazer algo assim. Isso ainda deve funcionar.

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

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

}

Em tempo, o controlador do composer foi movido para um serviço agora.

Heliosurge · Março 23, 2024, 1:47am

Você já deu uma olhada na alternativa recomendada na página do GitHub?

Acredito que o autor esteja ativo aqui.

Drew-ART · Março 23, 2024, 3:58pm

Obrigado pela sugestão @Heliosurge. Nós incorporamos o antigo bem profundamente em nosso projeto, então com a bênção dos autores, assumimos a manutenção.

No entanto, estamos um pouco com poucos desenvolvedores com as habilidades relevantes em nossa comunidade de Código Aberto no momento.

Heliosurge · Março 23, 2024, 11:38pm

Sim, faz todo o sentido.

Drew-ART · Março 29, 2024, 8:38pm

Obrigado por isso, @Arkshine. Meu laptop morreu quando um carregador substituto fritou o circuito de carregamento, então não pude testá-lo até conseguir consertar o laptop ontem.

Coloquei a instrução de importação no topo da página e seu código abaixo, mas parece que estou encontrando erros de sintaxe quando tento adicionar isso ou variações semelhantes:

O Visual Basic Studio encontra esses erros:

// Nova função tagsChanged com decorador @observes
@observes("model.tags")
tagsChanged() {
  // Verifica se é uma tag de balão

O colchete aberto no final desta linha: tagsChanged() {
tem esta mensagem de erro:
‘;’ esperado.ts(1005)

O último colchete no código também tem um sinalizador de erro com esta mensagem:
‘}’ esperado.ts(1005)
docuss.js.es6(219, 54): O analisador esperava encontrar um ‘}’ para corresponder ao token ‘{’ aqui.

Esta é a linha 219:
tagsChanged: Ember.observer('model.tags', function() {

Meu servidor diz isso quando tento compilar:

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

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

Não consigo entender o porquê, mas nunca consegui fazer com que essa correção funcionasse, nem várias variações dela, o que é estranho, pois funcionou bem nos outros arquivos. Meu foco mudou por um tempo, mas isso tem me incomodado.

Olhando para trás agora e não consigo ver o que está causando o problema. Eu reverti para o original. Alguém pode ver o que precisa ser alterado aqui para atualizar para a nova API do 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 · Setembro 5, 2024, 2:16am

Aqui estão alguns pontos:

As configurações do site foram movidas para um serviço:

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

location:discourse-location → location:history
afterRender().then(() => onAfterRender(container));
afterRender é um decorador que você coloca acima de um método em uma classe de componente; você não deve usá-lo diretamente como uma função.
Eu acho que você quer (parece que não é necessário), possivelmente:
```
import { schedule } from '@ember/runloop';
schedule("afterRender", () => onAfterRender(container))
```
Você tem um grande pedaço de código fora da função composeStateChanged, parece.
Além disso, você pode usar o serviço de roteador aqui: container.lookup('router:main').transitionTo(path); → this.router.transitionTo(path);
O cabeçalho foi modernizado. A personalização no widget home-logo está obsoleta no seu contexto. Mais informações aqui: Upcoming Header Changes - Preparing Themes and Plugins.
No seu caso, você precisará definir a configuração glimmer header mode como auto ou enabled. Em seguida, você pode usar um plugin outlet para substituir o conteúdo:
```
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 a sintaxe de template Glimmer <template>, certifique-se de renomear a extensão do arquivo para .gjs.
Você também pode usar esta maneira:
```
 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 alterar o URL:
```
api.registerValueTransformer("home-logo-href", () => container.dcsHeaderLogo._href);
```
Nota: Acredito que o código para renderizar novamente em setLogo não funcionará em um componente Glimmer.

Nota após teste: No entanto, nenhuma das soluções funcionará porque o cabeçalho é renderizado antes que você possa obter os logos do JSON. Não tenho uma solução pronta para isso. Não tenho certeza se há uma maneira melhor: eu moveria o carregamento do JSON para um serviço e rastrearia o resultado. Em seguida, usaria o plugin outlet acima com um componente Glimmer. Desta forma, com base em uma variável de rastreamento, você pode acionar automaticamente uma atualização no componente.

Com isso, funciona de alguma forma. Ainda não há peças funcionando como o compositor. Não examinei isso muito a fundo. Pelo menos, não há mais erros bloqueadores. :sorrindo_ligeiramente:

Espero que isso ajude.

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

Isso é muito útil, obrigado

Tópico		Respostas	Visualizações
Upgrading Ember to 2.10 Dev ember	71	10684	22 de Dezembro de 2016
A versioned API for client side plugins Dev rest-api	34	19857	21 de Junho de 2024
Preparing for Discourse's upgrade to Ember 5 Announcements	57	7273	12 de Maio de 2025
Upgrading Discourse to Ember 4 Dev ember	19	3063	19 de Dezembro de 2024
Some basic questions about discourse and rails Dev	4	1921	23 de Agosto de 2019

Tendo alguns problemas ao inserir iframes usando a API Ember do Discourse

Tópicos relacionados