トピックリストの今後の変更 - テーマとプラグインの準備方法

開発
1

Discourse のレンダリングシステムをコードベース全体で標準化するという継続的な取り組みの一環として、トピックリストの実装を置き換えています。

以前は、これは「生の Handlebars」（.hbr）アプローチを使用しており、テンプレートのオーバーライドや生のプラグインアウトレットを介してカスタマイズできました。トピックリストの新しい実装は、最新の Glimmer コンポーネントを使用しており、持続可能な方法でカスタマイズできるようにゼロから構築されています。

新しい実装は、glimmer_topic_list_mode 設定で利用できるようになりました。

  • disabled: レガシーな「生の Handlebars」トピックリストを使用します。
  • auto: 現在のプラグインとテーマの互換性を検出します。互換性のないものがある場合は、レガシーシステムを使用します。それ以外の場合は、新しい実装を使用します。
  • enabled: 新しいトピックリスト実装を使用します。互換性のないプラグインやテーマがある場合、サイトが破損する可能性があります。

ほとんどの公式テーマとプラグインは、新しいメニューとの互換性に合わせて既に更新されています。しかし、サードパーティ製のプラグイン、テーマ、またはテーマコンポーネントでトピックリストをカスタマイズしている場合は、それらをアップグレードする必要があります。

ブラウザのコンソールに、互換性のない原因を特定する警告メッセージが表示されます。

:timer_clock: ロールアウトのタイムライン

これらは変更される可能性のある大まかな見積もりです

2024 年第 4 四半期:

  • :white_check_mark: コア実装完了
  • :white_check_mark: 公式テーマ/プラグインの更新（進行中）
  • :white_check_mark: Meta で有効化
  • :white_check_mark: アップグレードアドバイスを公開

2025 年第 1 四半期:

  • :white_check_mark: 公式テーマ/プラグインの更新

  • :white_check_mark: glimmer_topic_list_mode が auto にデフォルト設定され、コンソールでの非推奨メッセージが有効になります。

  • :white_check_mark: 非推奨により、残りの問題に対して管理者に警告バナーが表示されます。

  • サードパーティ製のプラグインとテーマは更新される必要があります。

  • :white_check_mark: 3 月 1 日 - すべてのサイトで新しいトピックリストを有効にします。サイト設定のデフォルトは enabled に切り替わりますが、引き続き「disabled」に戻すことが可能です。

2025 年第 2 四半期

  • :white_check_mark: 4 月 1 日以降 - レガシーモードと関連コードの最終的な削除

:eyes: 私にとって何を意味しますか？

プラグインまたはテーマに「生の Handlebars」ファイル（.hbr または .raw.hbs という名前）がある場合、新しいバージョンとの互換性のために更新する必要があります。Ember コンポーネント/ルートの通常の .hbs ファイルは、この変更の影響を受けません。

component:topic-list または component:topic-list-item で modifyClass を使用している場合も、アップグレードが必要になります。

サイトにこれらの互換性のないカスタマイズのいずれかがある場合、ブラウザの開発者コンソールに警告メッセージが表示され、どのテーマ/プラグインが原因であるかの情報が含まれます。

置き換えは何ですか？

古い生のプラグインアウトレットの一部は、通常のプラグインアウトレットに変換されました。これらは 1 対 1 で更新できます。

より高度なカスタマイズは、ケースバイケースで評価する必要があります。新しいトピックリストには、簡単で堅牢なカスタマイズのための新しい API が多数用意されています。詳細はこちらをご覧ください。

例をいくつかご紹介します。

:sos: その他のカスタマイズについては？

導入した新しい API を使用してカスタマイズできない場合は、新しい #dev トピックを作成してご相談ください。

:sparkles: 私はプラグイン/テーマの作成者です。移行期間中に古いトピックリストと新しいトピックリストの両方をサポートするようにテーマ/プラグインを更新するにはどうすればよいですか？

新しいプラグインアウトレットは、トピックリストの古い実装と新しい実装の両方でレンダリングされます。したがって、新しいものを実装したら、古い生のプラグインアウトレットコネクタを削除するだけです。

DAG ベースのカスタマイズでテンプレートオーバーライドまたは非最新化されたアウトレットを置き換える場合は、移行期間中は両方の実装を維持する必要があります。

テーマ/プラグインが古い実装と新しい実装の両方をサポートしたら、すべての .hbr ファイルの先頭に次のマジックコメントを追加できます。

{{!-- has-modern-replacement --}}

これにより、非推奨メッセージがサイレントになり、「auto」モードで新しい実装が使用されるようになります。

「いいね！」 12
2

細かくて申し訳ありませんが、これは実際には「プラグインまたはテーマにトピックリストに関連する「生のHandlebars」ファイルがある場合、それらは更新する必要があります」という意味ではありませんか？

他のモデルに関連する私の生のHandlebarsファイルは、引き続き問題ないですよね？それとも、生のHandlebarsファイルは完全に廃止されるのですか？（追加のモデル/ルートには必要だと思いますよね？）

「いいね！」 3
3

「Raw handlebars」とは、ファイル拡張子が .hbr （または過去には .raw.hbs）である、Discourse 固有のテンプレートを意味します。このシステムはトピックリストと一部の「オートコンプリート」内部でのみ使用されていました。

他の .hbs ファイル（Ember コンポーネントやルート用など）は影響を受けません。

OP を更新して、その点を明確にします。@pfaffman さん、ありがとうございます！

編集：こちらです：

「いいね！」 1
4

ああ。本当に明確にしようとしたのですね。拡張子を明示的に記載しました。これ以上明確にすることはできないと思います。これは私のせいです。 :person_shrugging:

しかし、追加の一文があれば、私が読めるようになっていたかもしれません。

「いいね！」 1
5

共有ありがとうございます。長い間これを恐れていました、そしてそれは起こっています…:grimacing:簡単な道のりではなさそうです…:sweat_smile:しかし、バリュートランスフォーマーはおそらくそれを容易にするでしょう。:crossed_fingers:

「いいね！」 2
6

GitHub - discourse/discourse-topic-excerpts: Add topic excerpts to all topics in the topic list はまだ更新されていないと思いますが、いかがでしょうか？

「いいね！」 1
7

はい、まだ多くの公式テーマ/プラグインのアップグレードが保留中です。OPの箇条書きを第1四半期に延長します :writing_hand:

「いいね！」 1
8

ありがとうございます！今のところ開発者体験を楽しんでいます。TLPで何か問題が発生したら、またお知らせします。

「いいね！」 2
9

クール！公式の topic-list-thumbnails は更新が完了したものの1つなので、参考になるかもしれません。

「いいね！」 2
10

ああ、私の間違いでした！@isaac が先週 topic-excerpts を更新しました: DEV: Update plugin for `glimmer-topic-list` (#34) · discourse/discourse-topic-excerpts@0dd3c6c · GitHub

ですので、新しいトピックリストの下で正常に動作するはずです :crossed_fingers:

「いいね！」 1
11

エラーが発生しています。

ウェブサイトのエラーメッセージで、「Topic List Excerpts」によるエラーに関する警告が表示されています。（AIによるキャプション付き）
ウェブサイトのエラーメッセージで、「Topic List Excerpts」によるエラーに関する警告が表示されています。（AIによるキャプション付き）1302×164 24.6 KB

image
image644×144 19.5 KB

画像は、「Glimmer topic list mode」を有効にするためのユーザーインターフェイスとリセットボタンを示しています。（AIによるキャプション付き）
画像は、「Glimmer topic list mode」を有効にするためのユーザーインターフェイスとリセットボタンを示しています。（AIによるキャプション付き）1432×300 18.8 KB

どちらのバージョンも最新です。

12

列を追加する際、ソート可能な列ヘッダーを追加する戦略的な方法はありますか？

他のトランスフォーマーに加えて、

api.registerValueTransformer("topic-list-header-sortable-column"

を使用することで可能になりますか？

      api.registerValueTransformer(
        "topic-list-columns",

これだけでは機能しないようです。:thinking:

13

cc @isaac. 推測するに、未分類トピックを処理するために新しいロジックを更新する必要があるのかもしれません。

見つけたトランスフォーマーは、既存の列のソート可能性をオーバーライドするためのものです（例：時系列トピックビューにいるときに、他のソート方法が使用されないように、discourse-calendar で行っています）。

新しい列を追加する場合は、「単に」SortableColumn コンポーネントを使用してヘッダーを定義できるはずです。例：コアの例はこちらです。

（新しい API の本当に素晴らしい点の 1 つは、すべてのコア列が、テーマ/プラグインから使用するのと同じ API を使用して定義されていることです！）

「いいね！」 2
14

はい、コード検索をしたときにそれに気づきました。素晴らしいです！

「いいね！」 1
15

Fixed :slight_smile:

「いいね！」 2
16

Q: コンポーネント全体をセルに割り当てることは可能ですか？ \u003ctemplate\u003e だけでなく。

たとえば、最小限の JavaScript ロジックを必要とするセルに透明なボタンを表示したい場合はどうなりますか？

17

はい！技術的には、単一の<template>タグは「テンプレートのみのコンポーネント」を作成しています。これは、components/ディレクトリに単一の.hbsファイルをドロップしたときに得られるコンポーネントのタイプに似ています。

したがって、通常のコンポーネントクラスをインポートして渡すことも同様に機能します。クラシックコンポーネントでも機能します！（もちろん、よりモダンなGlimmerコンポーネントの使用をお勧めしますが）。

「いいね！」 2
18

それは全く素晴らしいです！

それは… たくさん 変わりますね！:exploding_head:

「いいね！」 1
20

どうでもいい質問かもしれませんが、

…モバイルのトピックリストにどのように変更を適用しますか？

「いいね！」 1
21

モバイルでは、(ラッパーアウトレットを含む) 新しいプラグインアウトレットを多数用意しています。

または、代替案として、valueTransformer を使用してデスクトップビューをどこでも強制できます (トピックサムネイルでこれを行っています)。

来週、「トピックリストのカスタマイズ方法」に関する詳細な Documentation > Developer Guides を書く予定なので、そこにその情報を含めるようにします。

「いいね！」 4