Drupal 10 で jQuery.once() を JavaScript の once() に置き換える

Drupal 10 が登場しました! そして Drupal 10 には、もう drupal/jquery.once ライブラリがありません:

https://www.drupal.org/node/3158256

jQuery once は Drupal コアから削除されましたが、今なお多くのコントリビュートモジュールに存在しています:

モジュールのメンテナは、「Automated Drupal 10 compatibility fixes」という名前のパッチ付き更新チケットを受け取りました:

https://www.drupal.org/project/media_library_edit/issues/3288511

しかし、これらの更新には jquery.once の修正が含まれていません。そのため、多くのメンテナはモジュールが Drupal 10 に対応済みだと思い込み、まだテストしていませんでした。

ですから、「Uncaught TypeError: $(...).once is not a function」というエラーが出ても、心配しないでください。簡単に修正できます。

1. *.libraries.yml ファイルで core/jquery.once ライブラリを core/once に変更する必要があります(上のスクリーンショット参照):

dependencies:
  - core/jquery
  - core/once

2. JavaScript コードを更新し、$.once() を JavaScript の once() に置き換えます。例えば jQuery.once() を使ったコード:

  Drupal.behaviors.fileBrowserClickProxy = {
    attach: function (context, settings) {
      $('.grid-item', context).once('bind-click-event').click(function () {
        // javascript/jQuery code here.
      });
    }
  };

JavaScript の once() を使ったコード(Drupal 10 で動作するコード):

  Drupal.behaviors.fileBrowserClickProxy = {
    attach: function (context, settings) {
      $(once('bind-click-event', '.grid-item', context)).each(function () {
        $(this).on('click', function() {
          // javascript/jQuery code here.
        });
      });
    }
  };

Drupal 10 は今も jQuery を使っているので、once() 関数を jQuery のドル記号で包むことができます。そうすると once() 関数から jQuery オブジェクトが返され、.each() の jQuery メソッドを使えます。

また、カスタム JavaScript で jQuery をまったく使わないこともできます:

https://youmightnotneedjquery.com/

  Drupal.behaviors.fileBrowserClickProxy = {
    attach: function (context, settings) {
      once('bind-click-event', '.grid-item', context).forEach(el => {
        el.addEventListener('click', () => {
          // Only plain Javascript here.
        });
        el.classList.add(className);
      });
    }
  };

ただしその場合は、'click' コールバック関数内のすべての jQuery コードを書き直す必要があります。