Справочник

Архитектура

Четыре пакета, построенные на одном движке: @macrulez/masonry-kit-core делает всю реальную работу вообще без зависимости от фреймворка — единственная фабрика createMasonryEngine(container, options), которая измеряет карточки через getBoundingClientRect() за наблюдателем на ResizeObserver, батчащим через requestAnimationFrame, упаковывает их skyline-алгоритмом, обобщённым на бенто-спаны, и позиционирует каждую через transform: translate(). @macrulez/masonry-kit-vue и @macrulez/masonry-kit-react — оба тонкие адаптеры: пара компонент/функция <MasonryGrid>, рендерящая одну обёртку на карточку, плюс composable/хук useMasonry для тех, кто хочет владеть элементами самостоятельно. Оба реэкспортируют всю поверхность ядра, так что установки любого из них достаточно — отдельно ставить ядро не нужно. @macrulez/masonry-kit-nuxt не добавляет ничего своего, кроме автоимпортов и универсального (сервер + клиент) плагина, который подсевает общие настройки Vue-пакета по умолчанию из nuxt.config.ts.

Совместимость с SSR

Сам движок создаётся только на клиенте (onMounted/useLayoutEffect, под защитой проверки на отсутствие window) — каждый адаптер до этого рендерит приближение через CSS columns, и во время SSR, и один клиентский кадр до первого реального измерения, а затем сменяет его на точную transform-раскладку в тот же кадр, когда движок измеряет. Полную механику смотрите на странице SSR-рендеринг. Обёртка <ClientOnly> нигде не нужна, включая модуль Nuxt.

Доступность

Сама упакованная раскладка чисто визуальна — содержимое карточек (рендерящееся через слот #item/render-prop children) сохраняет ту доступность, которую вы сами ему задали, и никак не затрагивается позиционированием движка. sortable — единственная часть пакета с собственной поверхностью доступности: каждая пересортируемая карточка получает role="button", aria-roledescription и aria-pressed, а каждое поднятие/перемещение/отпускание/отмена озвучивается через визуально скрытый live-регион — смотрите Компонент MasonryGrid.

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

У @macrulez/masonry-kit-core вообще нет peer-зависимостей — пригоден для самостоятельного использования в любом окружении. @macrulez/masonry-kit-vue зависит от @macrulez/masonry-kit-core (workspace:*) и указывает peer на vue: ^3.3.0. @macrulez/masonry-kit-react зависит от @macrulez/masonry-kit-core и указывает peer на react: ^18.0.0 || ^19.0.0. @macrulez/masonry-kit-nuxt зависит от @macrulez/masonry-kit-vue и @nuxt/kit, и указывает peer на nuxt: ^3.9.0 || ^4.0.0. Все четыре поставляются с sideEffects: false.

Разработка

Монорепо на pnpm workspaces (packages/core, packages/vue, packages/react, packages/nuxt, плюс playground на Vue).

pnpm install
pnpm build       # собирает каждый пакет
pnpm test        # запускает тесты каждого пакета
pnpm typecheck   # сборка + typecheck по всем пакетам
pnpm dev         # запускает Vue playground
pnpm lint        # eslint по всему монорепо
pnpm format      # prettier --write по всему монорепо

Лицензия

MIT.