Учебник Popper.js

Введение
- Что такое Popper.js и зачем он нужен
- История создания и эволюция библиотеки
- Сравнение с альтернативными решениями
- Установка и подключение
- Первый пример использования
Основные концепции
- Понятие позиционирования элементов
- Проблемы стандартного CSS positioning
- Архитектура Popper.js
- Терминология: reference, popper, placement
- Система координат и области видимости
- Жизненный цикл экземпляра Popper
Создание базового Popper
- Минимальная конфигурация
- Выбор reference и popper элементов
- Параметр placement и его значения
- Метод createPopper
- Управление видимостью
- Уничтожение экземпляра
Placement и positioning
- Основные направления размещения
- Вариации выравнивания
- Автоматический выбор позиции
- Приоритеты при конфликтах пространства
- Fallback стратегии
- Кастомные placement конфигурации
Modifiers
- Концепция модификаторов
- Встроенные модификаторы
- Порядок выполнения модификаторов
- Фазы работы модификаторов
- Включение и отключение модификаторов
- Конфигурация отдельных модификаторов
Offset модификатор
- Базовое смещение элемента
- Синтаксис задания offset
- Смещение по осям X и Y
- Процентные и абсолютные значения
- Функциональный offset
- Практические примеры
Flip модификатор
- Автоматическое переворачивание
- Настройка fallback позиций
- Ограничение области flip
- Padding и boundary
- Стратегия выбора лучшей позиции
- Отключение flip для конкретных направлений
Prevent overflow
- Предотвращение выхода за границы
- Boundary элемент
- Root boundary
- Padding параметры
- Тип boundary: clippingParents
- Алтернативные стратегии
Arrow модификатор
- Добавление стрелки к Popper
- Разметка стрелки
- Автоматическое позиционирование
- Padding для стрелки
- Стилизация стрелки
- Адаптация под разные placement
Event listeners
- Управление слушателями событий
- Scroll events
- Resize events
- Оптимизация производительности
- Debounce и throttle
- Ручное управление обновлениями
Обновление Popper
- Метод update
- Метод forceUpdate
- Автоматические обновления
- Условия для обновления
- Батчинг обновлений
- Производительность при частых обновлениях
Virtual elements
- Концепция виртуальных элементов
- Создание виртуального reference
- Интерфейс getBoundingClientRect
- Использование с курсором мыши
- Динамические виртуальные элементы
- Ограничения виртуальных элементов
Boundary и clipping
- Понятие boundary
- Viewport как boundary
- Родительские элементы как boundary
- ClippingParents
- Настройка altBoundary
- Обработка overflow
Создание кастомных модификаторов
- Структура модификатора
- Lifecycle hooks
- Фаза read
- Фаза main
- Доступ к state и options
- Изменение координат
- Добавление данных в state
- Зависимости между модификаторами
- Порядок выполнения кастомных модификаторов
State объект
- Структура state
- Elements в state
- Options в state
- Placement в state
- Coordinates и positioning
- Modifiers data
- Чтение и модификация state
Detect overflow
- Утилита detectOverflow
- Параметры функции
- Получение данных о переполнении
- Использование в кастомных модификаторах
- Альтернативные стратегии детекции
Работа с тенями и контекстами
- Shadow DOM
- IFrames
- Transform contexts
- Stacking contexts
- Проблемы и решения
Производительность
- Профилирование Popper
- Оптимизация модификаторов
- Минимизация reflow и repaint
- Lazy initialization
- Переиспользование экземпляров
- GPU acceleration
- Оптимизация для мобильных устройств
Интеграция с фреймворками
- React интеграция
- Vue интеграция
- Angular интеграция
- Svelte интеграция
- Управление жизненным циклом во фреймворках
Доступность
- ARIA атрибуты
- Keyboard navigation
- Focus management
- Screen readers
- Role атрибуты
Адаптивность и responsive design
- Media queries
- Различные конфигурации для разных экранов
- Touch устройства
- Ориентация экрана
- Динамическое изменение настроек
Типичные UI компоненты
- Tooltips
- Dropdowns
- Popovers
- Context menus
- Date picker позиционирование
- Select с позиционированием опций
Отладка
- Включение debug режима
- Логирование state
- Визуализация boundaries
- Проверка modifiers
- Частые проблемы и решения
- Использование DevTools
TypeScript
- Типизация основных сущностей
- Типы для модификаторов
- Generic типы
- Создание типобезопасных оберток
- Инференс типов из конфигурации
Миграция
- Переход с Popper.js v1
- Изменения в API
- Устаревшие возможности
- Новые возможности v2
- Стратегия постепенной миграции
Расширенные техники
- Композиция модификаторов
- Условные модификаторы
- Динамическая конфигурация
- Мультипозиционирование
- Координация нескольких Popper
- Анимации и transitions
Тестирование
- Unit тестирование модификаторов
- Интеграционные тесты
- Тестирование в различных браузерах
- Моки и стабы
- Симуляция скролла и resize
- Visual regression testing
Безопасность
- XSS риски
- Санитизация контента
- Content Security Policy
- Безопасное использование innerHTML
- Валидация пользовательского ввода
Сборка и оптимизация
- Tree shaking
- Минификация
- Бандлинг с Webpack
- Бандлинг с Rollup
- Бандлинг с Vite
- Анализ размера bundle
Референс API
- createPopper
- Instance методы
- Instance свойства
- Типы Options
- Типы Modifiers
- Утилитарные функции
- Константы и enums