BlockBuilder
Блочный конструктор с чистой архитектурой
Создавайте мощные no-code конструкторы с правильной архитектурой. Поддержка Vue3, Pure JavaScript и TypeScript из коробки.
Открытый исходный код
Изучайте код, вносите вклад или используйте в своих проектах
Почему BlockBuilder?
Библиотека, которая позволяет создавать блочные конструкторы с правильной архитектурой
Чистая архитектура
Проект построен по принципам Clean Architecture с четким разделением на слои: Core, Infrastructure и UI.
SOLID принципы
Каждый класс имеет одну ответственность. Код легко тестировать, расширять и поддерживать.
Vue3 компоненты из коробки
Готовые Vue3 Single File Components для быстрой интеграции в ваше приложение.
Pure JavaScript поддержка
Работает как с фреймворками, так и с чистым JavaScript без зависимостей.
Плагинная система
Легко расширяйте функциональность через кастомные типы полей и рендереры.
TypeScript
Полная типизация для безопасной разработки и отличной поддержки IDE.
Автоматический UI
Встроенный UI с формами, валидацией и модальными окнами работает из коробки.
Покрытие тестами
Unit, интеграционные и E2E тесты для гарантии качества кода.
Примеры использования
Быстрый старт с готовыми примерами кода
<template>
<BlockBuilderComponent
:config="{ availableBlockTypes }"
:block-management-use-case="blockManagementUseCase"
:api-select-use-case="apiSelectUseCase"
:custom-field-renderer-registry="customFieldRendererRegistry"
:on-save="handleSave"
:initial-blocks="initialBlocks"
:is-edit="isEdit"
/>
</template>
<script setup>
import { ref } from 'vue'
import {
BlockBuilderComponent,
createBlockManagementUseCase,
ApiSelectUseCase,
FetchHttpClient,
CustomFieldRendererRegistry
} from '@mushket-co/block-builder/vue'
import YourTextBlock from './components/YourTextBlock.vue'
const blockManagementUseCase = createBlockManagementUseCase()
const httpClient = new FetchHttpClient()
const apiSelectUseCase = new ApiSelectUseCase(httpClient)
const customFieldRendererRegistry = new CustomFieldRendererRegistry()
// Регистрируем компоненты
const componentRegistry = blockManagementUseCase.getComponentRegistry()
componentRegistry.register('text', YourTextBlock)
const availableBlockTypes = ref([
{
type: 'text',
label: 'Текст',
render: {
kind: 'component',
framework: 'vue',
component: YourTextBlock
},
fields: [
{
field: 'content',
label: 'Содержимое',
type: 'textarea',
defaultValue: 'Hello'
}
],
defaultProps: { content: 'Hello' }
}
])
const isEdit = ref(true)
const handleSave = async (blocks) => {
localStorage.setItem('saved-blocks', JSON.stringify(blocks))
return true
}
const initialBlocks = ref([])
</script>Быстрый старт
Готовые компоненты и UI из коробки
Гибкость
Используйте с UI или только API
Расширяемость
Создавайте свои типы полей
Архитектура
Построено по принципам Clean Architecture
Core Layer (Ядро)
- • Entities - бизнес-правила и сущности
- • Use Cases - сценарии использования
- • Ports - интерфейсы для внешнего мира
- • DTO - объекты передачи данных
Infrastructure Layer
- • Repositories - реализации хранилищ
- • HTTP Clients - работа с API
- • Registries - регистры компонентов
UI Layer
- • Vue3 Components - готовые компоненты
- • Controllers - управление UI
- • Services - UI сервисы
- • Core не зависит от внешних слоев
- • Легко тестировать и мокать
- • Простая замена реализаций
- • Четкое разделение ответственности
Приобретите PRO версию
Получите доступ ко всем возможностям BlockBuilder
- API Select поля для интеграции с внешними API
- Приоритетная поддержка
- Расширенные возможности кастомизации
- Обновления и новые функции
Начните прямо сейчас
Установка и настройка займет всего несколько минут
Установка
npm install @mushket-co/block-builderУстановите пакет
Используйте npm или yarn для установки библиотеки
Настройте блоки
Создайте конфигурацию с типами блоков и их полями
Готово!
Начните создавать блоки с автоматическим UI