Справочник

Архитектура

responsive-media
│
├── BaseResponsiveState  (абстрактный)
│     Прокси над обычным Record<string, boolean>
│     Пакетные обновления — все колбэки matchMedia/ResizeObserver собираются
│     перед тем, как срабатывает единый notify()
│     Реестр подписок: глобальные слушатели + слушатели по конкретному ключу
│     Debounce для subscribe(); слушатели по ключу никогда не дебаунсятся
│     Упорядоченные хелперы брейкпоинтов: current / isAbove / isBelow / between
│     Утилиты: syncCSSVars / emitDOMEvents / toSignal / hydrate / destroy
│
├── ReactiveResponsiveState  extends BaseResponsiveState
│     setupSources()  → window.matchMedia на каждый ключ конфига
│     Сгенерированная строка media query хранится в карте mediaQueries
│     Пакетирует все события 'change' MediaQueryList, затем сбрасывает
│     setConfig() / destroy() cleanupSources() удаляет обработчики matchMedia
│
├── ContainerState  extends BaseResponsiveState
│     setupSources()  → единственный ResizeObserver на целевом элементе
│     Вычисляет условия width/height/orientation/aspect-ratio в JS
│     Переподключает observer при изменении конфига; teardown в destroy()
│
├── createResponsiveState(config, options)
│     Фабрика — возвращает новый экземпляр ReactiveResponsiveState
│
├── responsiveState  (глобальный синглтон)
│     Предварительно настроен с ResponsiveConfig по умолчанию (mobile/tablet/desktop)
│     setResponsiveConfig() / getResponsiveState() / getResponsiveMediaQueries()
│     делегируют этому экземпляру
│
├── toMediaQueryString(conditions)
│     Конвертирует MediaQueryConfig → CSS-строку
│     AND: плоский массив → объединяется через ' and '
│     OR:  вложенный массив → группы объединяются через ', '
│     Числовые значения получают суффикс 'px' (кроме raw / orientation / …)
│
├── match(state, map, fallback?)
│     Поиск первого совпадения — возвращает сопоставленное значение для первого истинного ключа в map
│
├── subscribeMediaQuery(query, callback)
│     Тонкая обёртка вокруг window.matchMedia + addEventListener('change')
│     Возвращает функцию очистки
│
├── Адаптер Vue  (vue-responsive.ts)
│     ResponsivePlugin  — app.use(); вызывает setResponsiveConfig
│     useResponsive()   — возвращает shallowReactive-зеркало; subscribe() синхронизирует его
│     useBreakpoints()  — возвращает { current, isAbove, isBelow, between }
│                          все методы читают из реактивного зеркала
│     useMediaQuery()   — оборачивает subscribeMediaQuery в ref + onUnmounted
│     useContainerState() — watchEffect над templateRef; создаёт/уничтожает
│                           ContainerState; возвращает shallowReactive-зеркало
│
├── Адаптер React  (react-responsive.ts)
│     useResponsive()     — useSyncExternalStore(subscribe, getState, getState)
│     useBreakpoints()    — useSyncExternalStore + оборачивает упорядоченные хелперы
│     useMediaQuery()     — useSyncExternalStore над subscribeMediaQuery
│     useContainerState() — useEffect создаёт ContainerState; useState-зеркало
│
└── Пресеты  (presets.ts)
      ResponsiveConfig     — mobile/tablet/desktop по умолчанию
      TailwindPreset / TailwindOrder
      BootstrapPreset / BootstrapOrder
      AccessibilityPreset

Размер бандла и peer-зависимости

Точка входа	Peer-зависимости	Заметки
responsive-media	(не требуются)	Ядро + Vue composables (tree-shaking, когда Vue отсутствует)
responsive-media/react	react ^19	Только React-хуки
responsive-media/presets	(нет)	Только конфиги пресетов — добавляются в любой экземпляр
responsive-media/container	(нет)	Только класс ContainerState + фабрика

Пакет поставляется как tree-shakeable ESM и CommonJS. Vue composables (ResponsivePlugin, useResponsive и т. д.) включены в основной бандл, но резолвятся в no-op, когда Vue не установлен, так что базовый вес остаётся минимальным в проектах без Vue. Точка входа React разбита на отдельный чанк и никогда не импортируется основным бандлом.

Справочник по экспортируемому API

Основная точка входа (responsive-media)

Экспорт	Тип	Описание
responsiveState	ReactiveResponsiveState	Глобальный синглтон, ResponsiveConfig по умолчанию
setResponsiveConfig	функция	Перенастроить глобальный синглтон
getResponsiveState	функция	Получить снапшот состояния из глобального синглтона
getResponsiveMediaQueries	функция	Получить CSS-строки запросов из глобального синглтона
createResponsiveState	функция	Создать изолированный экземпляр ReactiveResponsiveState
createContainerState	функция	Создать ContainerState для элемента
toMediaQueryString	функция	Конвертировать MediaQueryConfig в CSS-строку
match	функция	Выбрать значение по первому совпавшему ключу брейкпоинта
subscribeMediaQuery	функция	Подписаться на сырую строку CSS media query
ResponsiveConfig	const	Брейкпоинты mobile / tablet / desktop по умолчанию
BaseResponsiveState	класс	Абстрактная база (для расширения)
ReactiveResponsiveState	класс	Состояние вьюпорта (на базе matchMedia)
ContainerState	класс	Состояние контейнера-элемента (на базе ResizeObserver)
ResponsivePlugin	плагин Vue	Плагин приложения Vue
useResponsive	composable Vue	Объект реактивного состояния
useBreakpoints	composable Vue	Упорядоченные хелперы брейкпоинтов
useMediaQuery	composable Vue	Одиночный сырой media query
useContainerState	composable Vue	Контейнерные запросы элемента
ConfigToState	тип	Выводит тип состояния из конфига
MediaQueryConfig	тип	Тип записи конфига
MediaQueryCondition	тип	Тип одиночного условия
ResponsiveState	тип	Record<string, boolean>
SetConfigOptions	тип	Опции для setConfig / createResponsiveState
BreakpointHelpers	тип	Тип возвращаемого значения useBreakpoints

Точка входа React (responsive-media/react)

Экспорт	Описание
useResponsive	Хук состояния (useSyncExternalStore)
useBreakpoints	Хук упорядоченных хелперов брейкпоинтов
useMediaQuery	Хук одиночного сырого media query
useContainerState	Хук контейнерных запросов элемента
BreakpointHelpers	Тип возвращаемого значения useBreakpoints

Точка входа Presets (responsive-media/presets)

Экспорт	Описание
TailwindPreset	Брейкпоинты Tailwind CSS v3/v4
TailwindOrder	Упорядоченный массив ключей для TailwindPreset
BootstrapPreset	Брейкпоинты Bootstrap 5
BootstrapOrder	Упорядоченный массив ключей для BootstrapPreset
AccessibilityPreset	Медиа-запросы пользовательских предпочтений

Точка входа Container (responsive-media/container)

Экспорт	Описание
ContainerState	Класс для контейнерных запросов элемента
createContainerState	Фабричная функция

Лицензия

MIT