Remplacer jQuery.once() par la fonction JavaScript once() dans Drupal 10

Drupal 10 est arrivé ! Et Drupal 10 ne contient plus la bibliothèque drupal/jquery.once :

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

jQuery once a été retiré du cœur de Drupal, mais il est toujours présent dans de nombreux modules contrib :

Les mainteneurs de modules ont reçu des tickets de mise à jour avec des patchs nommés "Automated Drupal 10 compatibility fixes" :

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

Mais ces mises à jour ne contiennent pas de correctifs pour jquery.once. Beaucoup de mainteneurs pensaient donc que leurs modules étaient prêts pour Drupal 10 et ne les ont pas encore testés.

Donc si vous obtenez l'erreur "Uncaught TypeError: $(...).once is not a function", ne vous inquiétez pas, c’est facile à corriger.

1. Vous devez remplacer la bibliothèque core/jquery.once par core/once dans le fichier *.libraries.yml (voir capture d’écran ci-dessus) :

dependencies:
  - core/jquery
  - core/once

2. Mettez à jour le code JavaScript en remplaçant $.once() par la fonction JavaScript once(), par exemple, code utilisant jQuery.once() :

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

Code avec la fonction JavaScript once() (code fonctionnant sous Drupal 10) :

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

Drupal 10 utilise toujours jQuery, donc on peut envelopper la fonction once() avec le signe dollar jQuery, cela retournera un objet jQuery à partir de la fonction once() et on pourra utiliser la méthode jQuery .each().

Vous pouvez aussi ne pas utiliser jQuery du tout dans votre JavaScript personnalisé :

https://youmightnotneedjquery.com/

Drupal.behaviors.fileBrowserClickProxy = {
  attach: function (context, settings) {
    once('bind-click-event', '.grid-item', context).forEach(el => {
      el.addEventListener('click', () => {
        // Ici uniquement du JavaScript pur.
      });
      el.classList.add(className);
    });
  }
};

Mais dans ce cas, vous devrez réécrire tout le code jQuery à l’intérieur de la fonction de rappel 'click'.