Архитектура монолита и новые версии
Репозиторий xyflow теперь объединяет все пакеты в единый монолит. Ключевым обновлением стала выход React Flow 12 (пакет @xyflow/react). Старая версия 11 (пакет reactflow) сохранена в ветке v11 для обратной совместимости. Также в репозитории представлены Svelte Flow (@xyflow/svelte) и общая библиотека системных хелперов (@xyflow/system).
Коммерческая модель и лицензирование
Разработчики четко разделили использование библиотек. Для личных проектов и open-source инициатив библиотеки остаются бесплатными под лицензией MIT. Однако для коммерческого использования в организациях, где создается прибыль, предлагается React Flow Pro. Поддержка проекта также возможна через GitHub Sponsors.
Технические детали и интеграция
Библиотеки позиционируются как готовые к использованию (out-of-the-box) с бесконечной кастомизацией. Установка осуществляется через стандартные менеджеры пакетов. Ниже приведена структура пакетов в новом монолите:
| Пакет | Название в npm | Версия / Статус | Назначение |
|---|---|---|---|
| React Flow | @xyflow/react |
v12 (актуальная) | Основная библиотека для React |
| React Flow (Legacy) | reactflow |
v11 (ветка v11) | Старая версия для миграции |
| Svelte Flow | @xyflow/svelte |
Актуальная | Библиотека для Svelte |
| System | @xyflow/system |
Shared | Общие хелперы и утилиты |
Примеры использования
Для React Flow базовый сценарий включает импорт компонентов ReactFlow, MiniMap, Controls и Background, а также хуков useNodesState и useEdgesState. В Svelte Flow используется store-подход с writable для управления состоянием узлов и ребер. Обе библиотеки поддерживают встроенные элементы управления, мини-карты и фоновые паттерны.
Почему это важно
Переход на монолитную структуру упрощает поддержку и обновление зависимостей. Для разработчиков это означает более стабильную экосистему для создания визуальных редакторов, диаграмм и node-based интерфейсов. Коммерческая модель Pro позволяет команде xyflow продолжать разработку под открытой лицензией, не жертвуя качеством поддержки бизнеса.
Источник: Github ↗