Vira Framework - Declarative UI framework layer over React
npm install @vira-ui/coreVira Framework - Declarative UI framework layer over React



Ядро фреймворка Vira. Базовые механизмы для работы с компонентами, состоянием и сервисами.
---
@vira-ui/core — это фундамент для построения React-приложений с декларативным подходом. Предоставляет систему компонентов, реактивности, DI контейнер и множество других возможностей.
- ✅ Компоненты как декларация — defineComponent() вместо обычных функций
- ✅ Реактивность — автоматические обновления при изменении данных (signals, reactive)
- ✅ DI контейнер — управление сервисами и их зависимостями
- ✅ Actions — автоматическая обработка загрузки, ошибок, логирования
- ✅ Модели — валидация форм и данных
- ✅ REST клиент — работа с API
- ✅ Роутер — навигация
- ✅ SSR — серверный рендеринг
- ✅ VRP клиент — Vira Reactive Protocol для real-time синхронизации
---
``bash`
npm install @vira-ui/core react
Требования:
- React 18.2.0+
- TypeScript 5.3+ (рекомендуется)
---
`tsx
import { defineComponent } from '@vira-ui/core';
const MyComponent = defineComponent({
props: { name: String },
render: ({ name }) =>
// Использование
`
`tsx
import { signal, useSignal } from '@vira-ui/core';
function Counter() {
const [count, setCount] = useSignal(0);
return (
Count: {count()}
$3
`tsx
import { createService, useService } from '@vira-ui/core';// Создание сервиса
createService('api', () => ({
async fetchUsers() {
const response = await fetch('/api/users');
return response.json();
}
}));
// Использование
function UsersList() {
const api = useService('api');
const [users, setUsers] = useState([]);
useEffect(() => {
api.fetchUsers().then(setUsers);
}, []);
return
{/ ... /};
}
`$3
`tsx
import { action, useAction } from '@vira-ui/core';const saveUser = action(async (data) => {
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(data)
});
return response.json();
});
function UserForm() {
const { execute, loading, error } = useAction(saveUser);
const handleSubmit = async (data) => {
const result = await execute(data);
console.log('Saved:', result);
};
return (
);
}
`---
📚 Документация
$3
#### defineComponent
Создание декларативного компонента:
`tsx
import { defineComponent } from '@vira-ui/core';const Button = defineComponent({
props: {
label: String,
onClick: Function,
disabled: Boolean
},
render: ({ label, onClick, disabled }) => (
)
});
`$3
#### Signals
Система сигналов для реактивности:
`tsx
import { signal, computed, effect } from '@vira-ui/core';const [count, setCount] = signal(0);
const double = computed(() => count() * 2);
effect(() => {
console.log('Count:', count());
console.log('Double:', double());
});
`#### Reactive Objects
Реактивные объекты через Proxy:
`tsx
import { reactive } from '@vira-ui/core';const state = reactive({
user: { name: 'John', age: 30 }
});
// Автоматически отслеживаются изменения
state.user.name = 'Jane';
`$3
#### Dependency Injection
`tsx
import { createService, useService } from '@vira-ui/core';// Создание сервиса
createService('userService', () => ({
users: [],
async loadUsers() {
this.users = await fetch('/api/users').then(r => r.json());
}
}));
// Использование
function Component() {
const userService = useService('userService');
// ...
}
`$3
#### defineModel
Создание модели с валидацией:
`tsx
import { defineModel } from '@vira-ui/core';const userModel = defineModel({
name: {
type: 'string',
required: true,
minLength: 2
},
email: {
type: 'string',
required: true,
validate: 'email'
},
age: {
type: 'number',
min: 18,
max: 100
}
});
// Валидация
const errors = userModel.validate({ name: '', email: 'invalid' });
`$3
`tsx
import { createRestClient, rest } from '@vira-ui/core';const api = createRestClient({
baseURL: '/api'
});
// Использование
const users = await rest.get('/users');
const user = await rest.post('/users', { name: 'John' });
`$3
`tsx
import { createViraConnection } from '@vira-ui/core';const connection = createViraConnection({
url: 'ws://45.90.35.155/ws',
authToken: 'token'
});
connection.subscribe('user:123', (data) => {
console.log('User updated:', data);
});
`---
🔗 Интеграция
Обычно используется через другие пакеты:
- @vira-ui/react — React хуки для VRP
- @vira-ui/bindings-react — Компоненты с автоматическим связыванием
- @vira-ui/ui — UI компоненты
Но можно импортировать напрямую для кастомных решений.
---
📖 Примеры
$3
`tsx
import { defineComponent, signal, useSignal } from '@vira-ui/core';const Counter = defineComponent({
props: {},
render: () => {
const [count, setCount] = useSignal(0);
return (
Count: {count()}
);
}
});
`$3
`tsx
import { createService, useService, signal } from '@vira-ui/core';createService('todoService', () => {
const todos = signal([]);
const loading = signal(false);
return {
todos,
loading,
async loadTodos() {
loading.set(true);
try {
const data = await fetch('/api/todos').then(r => r.json());
todos.set(data);
} finally {
loading.set(false);
}
}
};
});
function TodoList() {
const service = useService('todoService');
useEffect(() => {
service.loadTodos();
}, []);
return (
{service.loading() && Loading...}
{service.todos().map(todo => (
{todo.text}
))}
);
}
`---
📄 License
MIT
---
🔗 Связанные пакеты
@vira-ui/react - React хуки для VRP
- @vira-ui/ui - UI компоненты
- @vira-ui/bindings-react` - Компоненты с auto-binding