Universal Data-Driven UI Engine with live data, validation, and multi-platform support
🚀 Универсальный движок для создания живых, data-driven интерфейсов с поддержкой мультиплатформенности и реактивности.
npm install userface
// 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);
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');
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);
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');
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' }
// ]
// }
import { registry } from 'userface';
// Получение статистики системы
const stats = registry.getStats();
console.log('Статистика:', stats);
// Статистика Data Layer
const dataStats = registry.getDataStats();
console.log('Data Layer:', dataStats);
# Data Layer тесты
node -e "require('./build/index.js').runDataLayerTests()"
# Комплексные тесты движка
node -e "require('./build/index.js').runComprehensiveTests()"
import { testingInfrastructure } from 'userface';
// Создание тестового случая
const testCase = testingInfrastructure.createTestCase(
'My test',
async () => {
// Тестовая логика
}
);
// Создание мок компонента
const mockComponent = testingInfrastructure.createMockComponent(
'TestButton',
schema,
(props) => ({ type: 'button', children: props.text })
);
class Registry {
// Регистрация компонентов
registerComponent(name: string, component: any): ComponentSchema
registerComponents(components: Record<string, any>): ComponentSchema[]
// Получение данных
getComponent(name: string): any
getSchema(name: string): ComponentSchema
getAllComponents(): Record<string, any>
// Рендеринг
renderWithAdapter(spec: UserFace, adapterId: string): Promise<any>
renderWithData(spec: UserFace, adapterId: string): Promise<any>
// Data Layer
registerDataSource(path: string, config: DataSourceConfig): void
getData(path: string, options?: any): Promise<any>
subscribeToData(path: string, callback: Function): DataSubscription
// Статистика
getStats(): any
getDataStats(): any
}
interface UserFace {
component: string; // Имя компонента
id?: string; // Уникальный ID
children?: any; // Дочерние элементы
// Метаданные
meta?: {
className?: string;
visible?: boolean;
style?: Record<string, any>;
theme?: string;
responsive?: Record<string, any>;
accessibility?: Record<string, any>;
};
// События
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;
}
// Источники данных
type DataSource = 'api' | 'local' | 'cache' | 'websocket' | 'file';
interface DataSourceConfig {
type: DataSource;
url?: string;
method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
headers?: Record<string, string>;
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;
}
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 | Инфраструктура тестирования |
MIT License - свободное использование для коммерческих и некоммерческих проектов.
UserFace - превращаем статические интерфейсы в живые, data-driven приложения! 🚀✨
FAQs
Universal Data-Driven UI Engine with live data, validation, and multi-platform support
We found that userface demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.