jQuery.once() durch javascript once() in Drupal 10 ersetzen

Drupal 10 ist da! Und in Drupal 10 gibt es die Bibliothek drupal/jquery.once nicht mehr:

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

jQuery once wurde aus dem Drupal Core entfernt, ist aber immer noch in vielen Contrib-Modulen vorhanden:

Modul-Pflegende erhielten Update-Tickets mit Patches mit dem Namen "Automated Drupal 10 compatibility fixes":

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

Aber diese Updates enthalten keine Fixes für jquery.once. Viele Maintainer waren daher der Meinung, dass die Module bereit für Drupal 10 sind und haben sie noch nicht getestet.

Wenn Sie also den Fehler "Uncaught TypeError: $(...).once is not a function" sehen, keine Sorge, das ist leicht zu beheben.

1. Sie müssen die Bibliothek core/jquery.once durch core/once in der *.libraries.yml-Datei ersetzen (siehe Screenshot oben)

dependencies:
  - core/jquery
  - core/once

2. Aktualisieren Sie den JavaScript-Code und ersetzen Sie $.once() durch das neue JavaScript once(), zum Beispiel ursprünglicher Code mit jQuery.once():

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

Code mit JavaScript once() (Drupal-10-kompatibler Code):

  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 verwendet weiterhin jQuery, daher können wir die once()-Funktion mit dem Dollarzeichen von jQuery umschließen, so dass ein jQuery-Objekt zurückgegeben wird und wir weiterhin .each() verwenden können.

Sie können in Ihrem eigenen JavaScript auch komplett auf jQuery verzichten:

https://youmightnotneedjquery.com/

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

Dann müssen Sie jedoch auch den gesamten jQuery-Code innerhalb der 'click'-Callback-Funktion in Plain JavaScript umschreiben.