Правильное использование @drupal/once

Для чего нужен @drupal/once#

Нам необходима библиотека drupal/once для того, чтобы обеспечить запуск кода ровно один раз. Так как Drupal Behaviors запускаются каждый раз, когда срабатывает Drupal Ajax, нам необходимо удостовериться, что код запускается единожды.

Ранее этим занималась библиотека jQuery.once, теперь у нас есть её нативная альтернатива, которая включена в ядро Drupal с версии 9.2.

Как пользоваться @drupal/once#

Add core/once library as a dependency to Drupal library:

my-library:
  dependencies:
    - core/once

Чтобы разрешить глобальную функцию в eslint, добавьте это в файл .eslintrc.json:

{
  "globals": {
    "once": true
  }
}

Примеры использования#

Найти один элемент:

const [editorMenu] = once('editor-menu', '.editor-menu', context)
if (editorMenu) {
  console.log(editorMenu)
}

Найти несколько элементов:

// Используя Array.foreach()
const editorMenuItems = once('editor-menu-items', '.menu-item', context)
editorMenuItems.forEach(item, index) => {
  console.log(item, index)
}

// или for...of
const editorMenuItems = once('editor-menu-items', '.menu-item', context)
for (item of editorMenuItems) {
  console.log(item)
}

Сниппеты для Vscode#

Для редактора VSCode мы можем подготовить кастомные сниппеты, чтобы не писать once каждый раз вручную:

{
  "once drupal behavior (one element)": {
    "prefix": "oncedrupal",
    "body": "const [${1:element}] = once('${2:once-string}', '${3:selector}', context);\nif (${1:element}) {\n// code \n}",
    "description": "once drupal behavior (one element)"
  },
  "once drupal behavior (array foreach)": {
    "prefix": "oncedrupal",
    "body": "const ${1:array} = once('${2:once-string}', '${3:selector}', context);\n${1:array}.forEach(${4:element} => {\n// code \n});",
    "description": "once drupal behavior (array foreach)"
  },
  "once drupal behavior (array for of)": {
    "prefix": "oncedrupal",
    "body": "const ${1:array} = once('${2:once-string}', '${3:selector}', context);\nfor (const ${4:element} of ${1:array}) {\n// code \n};",
    "description": "once drupal behavior (array for of)"
  }
}

Ссылки:

• NPM
• Drupal.org