VueCraft NPM

Responsive Media ​

2.2.2 ​

2026-10-02

  • Изменено: общий объект responsiveState, который создаётся один раз на весь пакет, раньше создавался в момент загрузки любой части пакета, поэтому сборщик не мог его убрать. Теперь он создаётся в отдельном исходном файле, а в package.json пакет объявляет sideEffects: false. Сборщик больше не оставляет общее состояние, если импортируется только часть пакета: useMediaQuery из responsive-media/vue уменьшился примерно с 6,7 кБ до 0,6 кБ в минифицированном виде, а responsive-media/container — с 7,7 кБ до 6,8 кБ. Поведение и публичный API не изменились.
  • Добавлено: npm run size в репозитории пакета измеряет все точки входа и типичные импорты. Результат tree-shaking охраняет тест. См. Справочник.

2.2.1 ​

2026-10-02

  • Исправлено: при отложенной гидратации компонент, который гидратируется позже первого тика после монтирования — асинхронный компонент, лениво гидратируемая секция, — встречал настоящее состояние вместо серверного и расходился. Плагин Vue теперь принимает commit: 'manual': значения сервера остаются, пока не вызвана commitHydration(), а запасным вариантом служит commitTimeout (по умолчанию 10 секунд); defineResponsive() возвращает commitHydration рядом с plugin. Модуль Nuxt использует это: он переключает, когда Nuxt сообщает app:suspense:resolve, то есть когда страница догидратировалась. Для обычного Vue по умолчанию остаётся 'auto' — следующий тик после монтирования. См. SSR и гидратация.

2.2.0 ​

2026-10-02

  • Новое: гидратация без несовпадений. В Vue defineResponsive() принимает hydration: 'deferred': пока приложение монтируется поверх серверной разметки, плагин держит значения сервера и применяет настоящие на следующем тике, так что Vue не сообщает о несовпадении при гидратации. Клиентское приложение никогда не откладывается. В React хуки теперь возвращают серверный снимок (getSsrState()) как getServerSnapshot, поэтому гидратация больше не заканчивается recoverable-ошибкой, когда размер браузера отличается от ssrState. См. SSR и гидратация.
  • Новое: подсказки запроса для сервера. resolveSsrState(config, input, options?) выбирает серверное состояние по cookie (собственные <ширина>x<высота> браузера) и user-agent (mobile, tablet или desktop), а составными частями служат detectDevice(), serializeViewportCookie(), parseViewportCookie(), statesFromSize() и getSsrState(). В Vue плагин принимает результат как app.use(plugin, { ssrState }), а на сервере даёт каждому приложению собственное состояние, так что параллельные запросы больше не делят одно.
  • Новое: useMediaQuery() в Vue принимает строку, ref или геттер и пересоздаёт подписку при изменении запроса.
  • Новое: useResponsiveValue(map, fallback?) в Vue и React — значение первого активного брейкпоинта из map; типизируется по конфигу, если пришёл из defineResponsive().
  • Новое: useUserPreferences() в Vue и React — dark, light, reducedMotion, highContrast, lowContrast, noHover, coarsePointer, forcedColors и print поверх пресета доступности, без настройки; и getUserPreferencesState() для обычного JavaScript.
  • Новое: useViewportSize(options?) в Vue и React, а в ядре getViewportSize() / subscribeViewportSize() — размер окна числами, с ограничением частоты.
  • Новое: CSS из того же конфига — toMediaQueries(), toScssModule(), toScssMap(), toCustomMedia() и toTailwindScreens(). См. Интеграция с CSS.
  • Новое: responsive-media/testing — createViewportMock() заменяет window.matchMedia управляемым вьюпортом (setViewport(), setFeature()), а evaluateMediaQuery() — сам вычислитель. См. Тестирование.
  • Новое в модуле Nuxt: hydration (по умолчанию 'deferred'), ssrHints ('cookie', 'user-agent'), ssrDevices, cookie, devBadge (плашка с брейкпоинтом при разработке) и css (scss, customMedia — генерируемые файлы стилей). useResponsiveValue, useUserPreferences и useViewportSize тоже подключаются автоматически. Ключ responsive в nuxt.config.ts теперь типизирован, так что редактор подсказывает и проверяет его. См. Интеграция с Nuxt.
  • Изменено: модуль Nuxt теперь по умолчанию использует hydration: 'deferred', так что первый рендер на клиенте использует значения сервера, а настоящие приходят сразу после монтирования. Чтобы сохранить поведение 2.1, задайте hydration: 'immediate'.
  • Исправлено: useResponsive() в React возвращал настоящее состояние как серверный снимок, из-за чего гидратация расходилась всякий раз, когда размер браузера отличался от догадки сервера. Теперь он возвращает серверный снимок.
  • Документация: Другие фреймворки показывает Svelte, Solid и Angular на существующем объекте состояния, который уже следует контракту стора.