Universal Data-Driven UI Engine with live data, validation, and multi-platform support
npm install userface🚀 Универсальный движок для создания живых, data-driven интерфейсов с поддержкой мультиплатформенности и реактивности.
``bash`
npm install userface
`typescript
// ES Modules (рекомендуется)
import { engine, renderReact } from 'userface';
// CommonJS
const { engine, renderReact } = require('userface');
// Регистрация компонента
engine.registerComponent('my-button', {
type: 'button',
props: {
text: { type: 'string', required: true },
onClick: { type: 'function', required: false }
}
});
// Создание UserFace с данными
const userFace = {
component: 'my-button',
text: 'Click me!',
data: {
user: {
source: '/api/user/123',
config: {
cache: true,
realtime: true,
transform: (data) => ({ name: data.fullName })
}
}
}
};
// Рендеринг с живыми данными
const result = await renderReact(userFace);
`
`typescript
import { dataLayer } from 'userface';
// Регистрация источника данных
dataLayer.registerDataSource('/api/users', {
type: 'api',
url: 'https://api.example.com/users',
cache: true,
cacheTime: 300000, // 5 минут
polling: 30000 // Обновление каждые 30 сек
});
// Подписка на изменения
const subscription = dataLayer.subscribe('/api/users', (data, state) => {
console.log('Данные обновились:', data);
console.log('Состояние:', state.loading, state.error);
});
// Получение данных
const users = await dataLayer.getData('/api/users');
`
`typescript
import { validationEngine, errorRecovery } from 'userface';
// Валидация UserFace
const schema = registry.getSchema('my-button');
const validation = validationEngine.validateUserFace(userFace, schema);
if (!validation.isValid) {
console.log('Ошибки валидации:', validation.errors);
}
// Автоматическое восстановление от ошибок
const fallback = errorRecovery.handleComponentError(error, userFace);
`
`typescript
import { pluginSystem } from 'userface';
// Создание плагина
const myPlugin = {
id: 'my-plugin',
name: 'My Custom Plugin',
version: '1.0.0',
type: 'custom' as const,
install: async () => {
console.log('Плагин установлен');
},
uninstall: async () => {
console.log('Плагин удален');
}
};
// Регистрация и установка
await pluginSystem.registerPlugin(myPlugin);
await pluginSystem.installPlugin('my-plugin');
await pluginSystem.enablePlugin('my-plugin');
`
`typescript
import { componentAnalyzer } from 'userface';
// Автоматический анализ React компонента
const schema = componentAnalyzer.analyzeComponent(MyReactComponent, 'MyComponent');
console.log('Схема компонента:', schema);
// {
// name: 'MyComponent',
// platform: 'react',
// props: [
// { name: 'text', type: 'text', required: true },
// { name: 'onClick', type: 'function', required: false }
// ],
// events: [
// { name: 'onClick', parameters: [], description: 'Click event' }
// ]
// }
`
`typescript
import { registry } from 'userface';
// Получение статистики системы
const stats = registry.getStats();
console.log('Статистика:', stats);
// Статистика Data Layer
const dataStats = registry.getDataStats();
console.log('Data Layer:', dataStats);
`
`bashData Layer тесты
node -e "require('./build/index.js').runDataLayerTests()"
$3
`typescript
import { testingInfrastructure } from 'userface';// Создание тестового случая
const testCase = testingInfrastructure.createTestCase(
'My test',
async () => {
// Тестовая логика
}
);
// Создание мок компонента
const mockComponent = testingInfrastructure.createMockComponent(
'TestButton',
schema,
(props) => ({ type: 'button', children: props.text })
);
`📊 API Reference
$3
`typescript
class Registry {
// Регистрация компонентов
registerComponent(name: string, component: any): ComponentSchema
registerComponents(components: Record): ComponentSchema[]
// Получение данных
getComponent(name: string): any
getSchema(name: string): ComponentSchema
getAllComponents(): Record
// Рендеринг
renderWithAdapter(spec: UserFace, adapterId: string): Promise
renderWithData(spec: UserFace, adapterId: string): Promise
// Data Layer
registerDataSource(path: string, config: DataSourceConfig): void
getData(path: string, options?: any): Promise
subscribeToData(path: string, callback: Function): DataSubscription// Статистика
getStats(): any
getDataStats(): any
}
`$3
`typescript
interface UserFace {
component: string; // Имя компонента
id?: string; // Уникальный ID
children?: any; // Дочерние элементы
// Метаданные
meta?: {
className?: string;
visible?: boolean;
style?: Record;
theme?: string;
responsive?: Record;
accessibility?: Record;
};
// События
events?: {
[key: string]: (...args: any[]) => void;
};
// Живые данные
data?: {
[key: string]: {
source: string; // Путь к источнику данных
config?: {
cache?: boolean;
polling?: number;
realtime?: boolean;
transform?: (data: any) => any;
};
};
};
// Любые пропы компонента
[key: string]: any;
}
`$3
`typescript
// Источники данных
type DataSource = 'api' | 'local' | 'cache' | 'websocket' | 'file';interface DataSourceConfig {
type: DataSource;
url?: string;
method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
headers?: Record;
cache?: boolean;
cacheTime?: number;
polling?: number;
realtime?: boolean;
transform?: (data: any) => any;
validate?: (data: any) => boolean;
}
// Состояние данных
interface DataState {
loading: boolean;
error: string | null;
data: any;
lastUpdated: number;
source: DataSource;
}
`🏗️ Архитектура
$3
`
userface/
├── engine/ # Исходный код движка (только для разработки)
│ ├── registry.ts # Центральный оркестратор
│ ├── data-layer.ts # Живые данные
│ ├── validation.ts # Валидация
│ ├── error-recovery.ts # Восстановление ошибок
│ ├── plugin-system.ts # Система плагинов
│ ├── analyzer.ts # Анализ компонентов
│ ├── types.ts # Типы
│ ├── schema.ts # Схемы
│ ├── errors.ts # Ошибки
│ ├── api.ts # API интерфейсы
│ ├── adapter-manager.ts # Управление адаптерами
│ ├── initializer.ts # Инициализация
│ ├── monitor.ts # Мониторинг
│ ├── scanner.ts # Сканирование
│ ├── logger.ts # Логирование
│ └── render-*.ts # Рендереры платформ
├── build/ # Готовый билд для npm
│ ├── index.js # CommonJS (74KB)
│ ├── index.esm.js # ES Modules (104KB)
│ └── index.d.ts # TypeScript типы
├── testing-infrastructure.ts # Инфраструктура тестирования
├── comprehensive-tests.ts # Комплексные тесты
├── data-layer-tests.ts # Тесты Data Layer
├── index.ts # Публичный API
└── package.json
`Примечание: В npm пакет попадает только
build/` - готовый оптимизированный движок для встраивания в чужие системы.| Модуль | Размер | Описание |
|--------|--------|----------|
| Registry | 15.6 KB | Центральный оркестратор |
| Data Layer | 16.4 KB | Живые данные и реактивность |
| Validation | 8.7 KB | Валидация и типобезопасность |
| Error Recovery | 5.1 KB | Обработка ошибок |
| Plugin System | 8.4 KB | Расширяемость |
| Analyzer | 8.2 KB | Анализ компонентов |
| Testing | 10.1 KB | Инфраструктура тестирования |
- Размер сборки: 85.12 KB (gzip: 23.21 KB)
- Кэширование: 50x быстрее повторных запросов
- Рендеринг: < 1ms для простых компонентов
- Валидация: < 0.1ms на компонент
- Тесты: 37 тестов за ~2 секунды
- ✅ Умное кэширование данных
- ✅ Ленивая загрузка компонентов
- ✅ Оптимизированные рендереры
- ✅ Эффективная валидация
- ✅ Минимальный bundle size
- Всего тестов: 37
- Покрытие: 100%
- Модули: Все протестированы
- Интеграция: Полная проверка
- ✅ TypeScript - полная типизация
- ✅ ESLint - качество кода
- ✅ Prettier - форматирование
- ✅ Vite - быстрая сборка
- ✅ Vitest - быстрые тесты
- ✅ Обратная совместимость сохранена
- ✅ Старые API работают
- ✅ Новые возможности опциональны
- ✅ Постепенная миграция возможна
- 🚀 Data Layer - живые данные
- 🛡️ Validation Engine - валидация
- 🔧 Error Recovery - восстановление
- 🔌 Plugin System - расширяемость
- 🧪 Testing Infrastructure - тестирование
MIT License - свободное использование для коммерческих и некоммерческих проектов.
- 📧 Issues: GitHub Issues
- 📚 Документация: Встроенная в код
- 🧪 Тесты: Полное покрытие
- 🔧 Примеры: В README и тестах
---
UserFace - превращаем статические интерфейсы в живые, data-driven приложения! 🚀✨