Vervang jQuery.once() door JavaScript once() in Drupal 10

Drupal 10 is er! En Drupal 10 heeft de drupal/jquery.once bibliotheek niet meer:

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

jQuery once is verwijderd uit de Drupal core, maar het is nog steeds aanwezig in veel contrib-modules:

Modulebeheerders ontvingen update-tickets met patches met de naam "Automated Drupal 10 compatibility fixes":

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

Maar deze updates bevatten geen fixes voor jquery.once. Daardoor waren veel beheerders ervan overtuigd dat modules klaar waren voor Drupal 10 en hebben ze ze nog niet getest.

Dus als je de foutmelding krijgt "Uncaught TypeError: $(...).once is not a function", geen zorgen, het is eenvoudig op te lossen.

1. Je moet de core/jquery.once bibliotheek vervangen door core/once in het *.libraries.yml bestand (zie screenshot hierboven)

dependencies:
  - core/jquery
  - core/once

2. Werk de JavaScript-code bij en vervang $.once() door JavaScript once(), bijvoorbeeld code met jQuery.once():

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

Code met JavaScript once() (Drupal 10 werkende code):

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

Drupal 10 gebruikt nog steeds jQuery, dus we kunnen de once() functie inpakken in het jQuery dollarteken, zodat het een jQuery-object teruggeeft vanuit de once() functie en we de .each() jQuery-methode kunnen gebruiken.

Je kunt er ook voor kiezen om helemaal geen jQuery te gebruiken in je eigen JavaScript:

https://youmightnotneedjquery.com/

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

Maar dan zul je alle jQuery-code binnen de 'click' callback-functie moeten herschrijven.