Как перевести Drupal Behavior на ванильный JavaScript

Работая над темой Drupal, часто возникают ситуации для вставки на страницу различных интерактивных элементов JavaScript. Так как Drupal имеет весьма много вызовов Ajax (включая BigPipe), часто возникает необходимость прицепить JavaScript таким образом, чтобы он обязательно сработал после того, как Ajax отрисует элементы страницы. Для этого мы используем Drupal.behavior (в связке с once()).

В свете глобального отказа от jQuery во фронтенде, нам необходимо обновить код Drupal.behavior таким образом, чтобы он использовал ванильный JavaScript.

jQuery#

mymodule.libraries.yml

myfeature:
  js:
    js/myfeature.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/jquery.once

myfeature.js

(function ($, Drupal) {
  Drupal.behaviors.myfeature = {
    attach(context) {
      const $elements = $(context).find('[data-myfeature]').once('myfeature')
      // `$elements` всегда объект jQuery.
      $elements.each(processingCallback)
    },
  }

  function processingCallback(index, value) {
    // код...
  }
})(jQuery, Drupal)

JavaScript#

mymodule.libraries.yml

myfeature:
  js:
    js/myfeature.js: {}
  dependencies:
    - core/drupal
    - core/once

myfeature.js

(function (Drupal, once) {
  Drupal.behaviors.myfeature = {
    attach(context) {
      const elements = once('my-feature', '[data-my-feature]', context)
      // `once` всегда возвращает массив.
      elements.forEach(processingCallback)
    },
  }

  // Параметры в методе $.each() и Array.foreach() меняются местами.
  function processingCallback(value, index) {
    // код...
  }
})(Drupal, once)

Можно заметить, что код стал изящнее, понятнее и проще.

Ссылки:

• Drupal.org