Как избавиться от jQuery.once в теме Drupal раз и навсегда

Для того, чтобы запретить вызовы jquery.once() мы воспользуемся инструментом для статического анализа кода eslint и абстрактным синтаксическим деревом.

Каждый фронтенд разработчик должен уметь настраивать линтеры для CSS (Stylelint), или для JS (Eslint). Или хотя бы подключить и расширить существующие наборы конфигураций, такие как eslint-config-airbnb-base.

Абстрактное синтаксическое дерево#

Интерпретатор JavaScript перед выполнением превращает обычный текст программы в структуру данных, которая называется Абстрактным синтаксическим деревом.

Eslint использует абстрактные синтаксические деревья для проверки правильности синтаксических конструкций при статическом анализе кода.

Как это работает?#

В секции rules файла конфигурации Eslint мы можем определить кастомные правила для запрета каких-либо синтаксических конструкций с помощью абстрактного синтаксического дерева.

Для этого есть ключ no-restricted-syntax. С его помощью можно запретить некоторые синтаксические конструкции, к примеру вызов setTimeout с одним аргументом, вызов jQuery.once() и т.д. При этом можно написать кастомное сообщение для разработчиков.

Для создания селекторов в Eslint можно использовать визуализатор Abstract Syntax Tree.

К примеру, у нас есть классический вызов jQuery.once:

const $menu = $('.menu-label)', context)
$menu.once('menuLabels').each((_, label) => {
  label.closest('.menu-item').classList.add('menu-item--label')
})

Кликнув на .once в левом окне мы получаем соответственную ветвь синтаксического дерева в правом окне.

В нашем случае селектор получается: MemberExpression[property.name = 'once']

Записываем это в правило .eslintrc.json

{
  "rules": {
    "no-restricted-syntax": [
      "error",
      {
        "selector": "MemberExpression[property.name = 'once']",
        "message": "jQuery once is not allowed. Use native Drupal once implementation."
      }
    ]
  }
}

В результате мы получаем error в Eslint с соответствующей ошибкой.

Таким образом можно запретить любые синтаксические конструкции в Eslint.

Ссылки:

• Eslint docs
• Визуализация AST