Устаревшие возможности

Эволюция API и причины устаревания

Библиотека Popper.js прошла несколько этапов развития: от версии 1.x к полностью переработанной архитектуре 2.x. Основная причина появления устаревших возможностей — изменение внутренней модели позиционирования, переход на модульную систему модификаторов и повышение производительности.

В версии 1.x значительная часть логики была жестко связана с конфигурацией через объект настроек. Это приводило к усложнению расширения и поддержки. В версии 2.x архитектура стала более декларативной и модульной, благодаря чему многие старые параметры и подходы были признаны устаревшими.

Устаревшие параметры конфигурации

modifiers старого формата

В Popper.js v1 модификаторы задавались как объект:

modifiers: {
  offset: { offset: '10, 20' },
  preventOverflow: { boundariesElement: 'viewport' }
}

В v2 используется массив объектов:

modifiers: [
  {
    name: 'offset',
    options: {
      offset: [10, 20],
    },
  },
]

Причины устаревания:

  • невозможность контролировать порядок выполнения
  • сложность расширения
  • ограниченная типизация и предсказуемость

positionFixed

В версии 1.x:

positionFixed: true

В версии 2.x заменено на стратегию позиционирования:

strategy: 'fixed'

Почему устарело:

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

eventsEnabled

В v1:

eventsEnabled: true

В v2 управление событиями вынесено в модификатор eventListeners:

modifiers: [
  {
    name: 'eventListeners',
    options: {
      scroll: true,
      resize: true,
    },
  },
]

Недостатки старого подхода:

  • отсутствие гибкости (включить/выключить всё сразу)
  • невозможность точечно управлять событиями

removeOnDestroy

В v1:

removeOnDestroy: true

Удалён в v2.

Причина:

  • управление DOM должно происходить вне Popper.js
  • библиотека больше не отвечает за жизненный цикл элементов

Устаревшие модификаторы

flip (старый формат настроек)

В v1:

flip: {
  beh * avior: ['top', 'bottom', 'right'],
}

В v2:

{
  name: 'flip',
  options: {
    fallbackPlacements: ['top', 'bottom', 'right'],
  },
}

Что изменилось:

  • переименование параметров
  • унификация API модификаторов

offset (строковый формат)

В v1:

offset: '10, 20'

В v2 используется массив:

offset: [10, 20]

Почему строка устарела:

  • сложность парсинга
  • ошибки при передаче значений
  • несовместимость с типизацией

preventOverflow.boundariesElement

В v1:

preventOverflow: {
  boundariesElement: 'viewport'
}

В v2:

{
  name: 'preventOverflow',
  options: {
    boundary: 'viewport',
  },
}

Причина изменений:

  • унификация названий
  • устранение неоднозначности

Устаревшие методы экземпляра

scheduleUpdate()

В v1:

popper.scheduleUpdate();

В v2 заменён на:

popper.update();

или асинхронный вариант:

await popper.update();

Причины:

  • улучшение контроля над обновлением
  • переход к промисам
  • устранение неявных операций

update() (синхронный)

В v1 метод был синхронным. В v2:

  • возвращает Promise
  • может выполняться асинхронно

Изменение поведения:

  • повышена точность вычислений
  • улучшена работа с layout

Устаревшие способы создания экземпляра

Конструктор new Popper(...)

В v1:

new Popper(reference, popper, options);

В v2 используется фабричная функция:

createPopper(reference, popper, options);

Причины отказа от конструктора:

  • упрощение API
  • возможность tree-shaking
  • лучшая интеграция с современными сборщиками

Устаревшие значения placement

Некоторые устаревшие комбинации и поведение:

  • нестабильная работа auto в v1
  • отсутствие строгой системы fallback

В v2:

placement: 'auto-start'

и используется система fallback через flip.

Что изменилось:

  • более предсказуемый выбор позиции
  • улучшенная логика коллизий

Устаревшие подходы к стилям

Inline-стили от Popper

В v1 библиотека активно управляла стилями напрямую:

style="position: absolute; top: 0; left: 0;"

В v2:

  • стили по-прежнему применяются, но контроль стал более прозрачным
  • рекомендуется использовать собственные стили и CSS

Причины:

  • разделение ответственности
  • улучшение кастомизации

Устаревшая работа с GPU acceleration

В v1:

computeStyle: {
  gpuAcceleration: true
}

В v2:

{
  name: 'computeStyles',
  options: {
    gpuAcceleration: true,
  },
}

Изменения:

  • перенос в модификатор
  • более точечное управление

Устаревшие внутренние хуки

В v1 существовали внутренние фазы:

  • onCreate
  • onUpdate

В v2 они заменены системой фаз модификаторов:

  • beforeRead
  • read
  • afterRead
  • beforeMain
  • main
  • afterMain
  • beforeWrite
  • write
  • afterWrite

Преимущества новой системы:

  • строгий порядок выполнения
  • расширяемость
  • контроль зависимостей

Устаревшие паттерны расширения

Прямое изменение модификаторов

В v1 можно было изменять модификаторы после создания:

popper.options.modifiers.flip.enabled = false;

В v2:

  • требуется пересоздание или обновление через API
  • модификаторы считаются иммутабельными

Причина:

  • предотвращение побочных эффектов
  • улучшение предсказуемости

Устаревшие зависимости и окружение

Popper.js v1:

  • зависел от DOM API напрямую
  • хуже работал в SSR

Popper.js v2:

  • лучше адаптирован под серверный рендеринг
  • уменьшен размер
  • улучшена совместимость с современными фреймворками

Устаревшие best practices

Использование jQuery-обёрток

Ранее Popper часто применялся вместе с jQuery:

$(element).popper(...)

В современных версиях:

  • полностью нативный JavaScript
  • отсутствие зависимости от сторонних библиотек

Жёсткая привязка к Bootstrap 4

Popper v1 активно использовался в Bootstrap 4.

С переходом на Bootstrap 5:

  • используется Popper v2
  • API полностью обновлён

Проблемы совместимости

При миграции с v1 на v2:

  • старые конфигурации не работают
  • требуется переписывание модификаторов
  • изменены названия параметров

Типичные ошибки:

  • использование строк вместо массивов (offset)
  • неправильная структура modifiers
  • попытка использовать устаревшие методы (scheduleUpdate)

Общая стратегия отказа от устаревших возможностей

  • переход к модульной архитектуре
  • унификация API
  • отказ от магических значений
  • повышение предсказуемости поведения
  • улучшение производительности

Каждое устаревшее свойство или метод в Popper.js отражает переход от монолитной конфигурации к декларативной, расширяемой системе, где ключевую роль играют модификаторы и строгая структура выполнения.

Оглавление