Альтернатива WinBox
WinBox.js — маленькая и приятная библиотека окон, с неё начинали многие проекты. Последний её релиз вышел в 2023 году. Если нужна поддерживаемая библиотека, на которой код под WinBox продолжит работать, и в которой есть то, чего у WinBox не было, — у wmkit есть @surdeddd/wmkit/winbox, говорящий на API WinBox 0.2.
Окна выше созданы вызовами new WinBox(...) — ровно так, как их пишет README самого WinBox.
Переезд — это один импорт
// было
import WinBox from 'winbox/src/js/winbox.js'
import 'winbox/dist/css/winbox.min.css'
// стало
import WinBox from '@surdeddd/wmkit/winbox'
new WinBox('Hello', { x: 'center', y: 'center', width: '50%', height: '50%' })Опции, методы, колбэки и классы .winbox остаются прежними, поэтому CSS, написанный под WinBox, продолжает работать. Все соответствия и все отличия — в руководстве по переезду.
Сравнение
| WinBox.js 0.2 | wmkit | |
|---|---|---|
| Поддержка | последний релиз в 2023 | релизы в 2026 |
| Зоны снэпа с превью | — | половины, четверти, трети |
| Управление с клавиатуры | — | движение, ресайз, снэп, перебор окон, отмена |
| Анонсы для скринридеров | — | один вежливый live-регион, любую фразу можно заменить |
| Отмена и повтор | — | каждое действие, всё перетаскивание — один шаг |
| Сохранение раскладки | — | persist() в localStorage или своё хранилище |
| Вкладки, рабочие столы, докинг | — | из коробки |
| Вынос на другой монитор | — | Picture-in-Picture или всплывающее окно |
| Адаптеры для фреймворков | обёртки сообщества | React, Vue, Svelte, Solid, Angular, Preact, Lit, Qwik, веб-компоненты |
| Своя разметка | собственный DOM | любая разметка или DOM WinBox через модуль совместимости |
| TypeScript | типы сообщества | строгие, в пакете |
| Размер (brotli) | 5,4 кБ | около 22 кБ у модуля совместимости вместе с менеджером |
WinBox остаётся более лёгким вариантом, если ничего из этого не нужно. Разница в размере — плата за поведение из остальных строк таблицы.
Дальше модуля совместимости
Модуль совместимости — это только вход. WinBox.manager() отдаёт сам оконный менеджер, так что остальной wmkit в одном вызове:
import WinBox from '@surdeddd/wmkit/winbox'
import { persist } from '@surdeddd/wmkit/persist'
persist(WinBox.manager(), { key: 'my-desktop' })Когда придёт время перейти на свою разметку или на фреймворк, адаптеры оставят тот же менеджер под деревом компонентов React, Vue, Svelte, Solid, Angular, Preact, Lit или Qwik.
Дальше
- Переезд с WinBox — все опции, методы и колбэки
- Перетаскиваемое окно с ресайзом на React
- Справочник API