Sostituire jQuery.once() con javascript once() in Drupal 10

Drupal 10 è arrivato! E Drupal 10 non include più la libreria drupal/jquery.once:

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

jQuery once è stato rimosso dal core di Drupal, ma è ancora presente in molti moduli contrib:

I maintainer dei moduli hanno ricevuto ticket di aggiornamento con patch chiamate "Automated Drupal 10 compatibility fixes":

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

Ma questi aggiornamenti non contengono correzioni per jquery.once. Quindi molti maintainer erano convinti che i moduli fossero pronti per Drupal 10 e non li hanno ancora testati.

Quindi, se ricevi l’errore "Uncaught TypeError: $(...).once is not a function", non preoccuparti: è facile da risolvere.

1. Devi sostituire la libreria core/jquery.once con core/once nel file *.libraries.yml (vedi screenshot sopra)

dependencies:
  - core/jquery
  - core/once

2. Aggiorna il codice javascript e sostituisci $.once() con la funzione javascript once(), ad esempio il codice con jQuery.once():

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

Codice con javascript once() (Codice funzionante in Drupal 10):

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

Drupal 10 utilizza ancora jQuery, quindi possiamo racchiudere la funzione once() nel simbolo dollaro di jQuery, in modo che restituisca un oggetto jQuery dalla funzione once() e possiamo usare il metodo .each() di jQuery.

Puoi anche non usare affatto jQuery nel tuo javascript personalizzato:

https://youmightnotneedjquery.com/

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

Ma in questo caso dovrai riscrivere tutto il codice jQuery all’interno della funzione di callback 'click'.