DiscourseのEmber APIでiframeを挿入するのに問題があります

Drew-ART · 2024 年 3 月 22 日午後 6:15

プラグインは Discourse に i-frame を挿入します。こちらで見つけることができます。

最新バージョンにほぼ追従しているので、破壊的変更は最近発生しました。現在、3.3.0.beta1-dev を実行しています。

コンソールには、次のような 3 つのエラーメッセージが表示されます。

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

この Ember オブジェクトは、最近の Discourse のバージョンで Discourse API から削除された可能性が非常に高く、このエラーは、これらのオブジェクトに影響を与える Discourse のアップグレード後に発生します。

私が加えた修正はすべてここにあります。

変更 1

assets\javascripts\discourse\initializers\docuss.js.es6
232 行目

old:

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

new:

import { schedule } from '@ember/runloop'

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

変更 2

assets\javascripts\discourse\lib\DcsIFrame.js.es6
858 行目

old:

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

new:

	import { schedule } from '@ember/runloop'

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

変更 3

assets\javascripts\discourse\lib\onDidTransition.js.es6
239 行目

old:

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

new:

import { schedule } from '@ember/runloop'

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

これにより、コンソール上のすべてのエラーメッセージは解消されましたが、新しいエラーがいくつか発生しました。

 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

プラグインが有効になっているライブプラットフォームはこちらです。参考になれば幸いです

Ember API オブジェクトの変更で問題が発生したことは誰かにありますか？修正方法に関する提案をいただけると幸いです。

Arkshine · 2024 年 3 月 23 日午前 12:52

こんにちは！

これを忘れています。

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

このようにすれば、おそらく機能すると思います。

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

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

}

ちなみに、コンポーザーコントローラーは現在サービスに移動されました。

Heliosurge · 2024 年 3 月 23 日午前 1:47

GitHubのページで推奨されている代替案を確認しましたか？

作者はここにいると思います。

Drew-ART · 2024 年 3 月 23 日午後 3:58

@Heliosurge、提案ありがとうございます。しかし、その古いものはプロジェクトに深く組み込まれているため、作者の許可を得て、私たちがメンテナンスを引き継ぐことにしました。

ただし、現在、オープンソースコミュニティには関連スキルを持つ開発者が不足しています。

Heliosurge · 2024 年 3 月 23 日午後 11:38

はい、よくわかります。

Drew-ART · 2024 年 3 月 29 日午後 8:38

@Arkshineさん、ありがとうございます。充電回路を壊した交換用充電器でノートパソコンが壊れてしまい、昨日ノートパソコンを修理するまでテストできませんでした。

インポート文をページの先頭に配置し、その下にコードを配置しましたが、それや類似のバリエーションを追加しようとすると構文エラーが発生しているようです。

Visual Basic Studioはこれらのエラーを見つけます。

// @observesデコレータを使用した新しいtagsChanged関数
@observes("model.tags")
tagsChanged() {
  // バルーンタグかどうかを確認します

この行の末尾にある開き括弧：tagsChanged() {
には、次のエラーメッセージが表示されます。
';'が予期されています。ts(1005)

コードの最後の括弧にも、次のメッセージが表示されるエラーフラグが付いています。
'}'が予期されています。ts(1005)
docuss.js.es6(219, 54): パーサーは、ここで ‘{’ トークンに対応する ‘}’ を見つけることを期待していました。

これは219行目です。
tagsChanged: Ember.observer('model.tags', function() {

ビルドしようとすると、サーバーは次のように表示されます。

  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: 予期しないトークン (253:25)

Drew-ART · 2024 年 9 月 4 日午後 10:10

なぜなのか分かりませんが、この修正は他のファイルでは問題なく機能したのに、このファイルでは機能しませんでした。しばらく他のことに集中していましたが、ずっと気になっていました。

今見返しても、何が問題を引き起こしているのか分かりません。元の状態に戻しました。新しいEmber APIに更新するために、何を変更する必要があるか誰か分かりますか？

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 · 2024 年 9 月 5 日午前 2:16

いくつかポインターを挙げます。

サイト設定はサービスに移動されました。

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

location:discourse-location → location:history
afterRender().then(() => onAfterRender(container));
afterRender はコンポーネントクラスのメソッドの上に配置するデコレーターであり、直接関数として使用するものではありません。
おそらく、次のようなものが必要だと思います（必要ないようですが）。
```
import { schedule } from '@ember/runloop';
schedule("afterRender", () => onAfterRender(container))
```
composeStateChanged 関数の外に大きなコードブロックがあるようです。
また、ここでルーターサービスを使用できます: container.lookup('router:main').transitionTo(path); → this.router.transitionTo(path);
ヘッダーが最新化されました。home-logo ウィジェットでのカスタマイズは、あなたのコンテキストでは非推奨です。詳細はこちら: https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544。
この場合、glimmer header mode 設定を auto または enabled に設定する必要があります。その後、プラグインのアウトレットを使用してコンテンツを置き換えることができます。
```
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>`);
```
注: グリマーの <template> 構文を使用するには、ファイル拡張子を .gjs. に変更してください。
この方法でも使用できます。
```
 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;
  });
```
URL を変更するには:
```
api.registerValueTransformer("home-logo-href", () => container.dcsHeaderLogo._href);
```
注: setLogo で再レンダリングするためのコードは、グリマーコンポーネントでは機能しないと思います。

注（テスト後）: ただし、ヘッダーはロゴを JSON から取得する前にレンダリングされるため、どちらのソリューションも機能しません。これに対する既製のソリューションはありません。より良い方法があるかどうかはわかりません。JSON の読み込みをサービスに移動し、結果を追跡することをお勧めします。次に、上記のプラグインアウトレットをグリマーコンポーネントで使用します。これにより、追跡変数に基づいてコンポーネントの更新が自動的にトリガーされます。

これにより、ある程度機能します。コンポーザーのような動作する部分はまだありません。これについてはあまり深く調べていません。少なくとも、これ以上ブロックするエラーはありません。

お役に立てば幸いです。

Drew-ART · 2024 年 9 月 5 日午後 1:23

とても参考になりました。ありがとうございます

トピック		返信	表示
Upgrading Ember to 2.10 Dev ember	71	10685	2016 年 12 月 22 日
A versioned API for client side plugins Dev rest-api	34	19858	2024 年 6 月 21 日
Preparing for Discourse's upgrade to Ember 5 Announcements	57	7276	2025 年 5 月 12 日
Upgrading Discourse to Ember 4 Dev ember	19	3063	2024 年 12 月 19 日
Some basic questions about discourse and rails Dev	4	1921	2019 年 8 月 23 日

DiscourseのEmber APIでiframeを挿入するのに問題があります

関連トピック