@vira-ui/core

---

🎯 Что это?

@vira-ui/core — это фундамент для построения React-приложений с декларативным подходом. Предоставляет систему компонентов, реактивности, DI контейнер и множество других возможностей.

$3

- ✅ Компоненты как декларация — 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+ (рекомендуется)

---

🚀 Быстрый старт

$3

`tsx
import { defineComponent } from '@vira-ui/core';

const MyComponent = defineComponent({
props: { name: String },
render: ({ name }) =>

// Использование

`

$3

`tsx
import { signal, useSignal } from '@vira-ui/core';

function Counter() {
const [count, setCount] = useSignal(0);

return (


`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

`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 (


`tsx
import { defineComponent } from '@vira-ui/core';

const Button = defineComponent({
props: {
label: String,
onClick: Function,
disabled: Boolean
},
render: ({ label, onClick, disabled }) => (

{label}

)
});
`

$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 (


`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 (


- @vira-ui/react - React хуки для VRP
- @vira-ui/ui - UI компоненты
- @vira-ui/bindings-react` - Компоненты с auto-binding