ezui-framework
Advanced tools
Enterprise-grade reactive web framework with advanced state management, security, performance optimization, and comprehensive development tools
A production-ready reactive web framework with comprehensive validation, security, and development tools. EZUI provides enterprise-level features while maintaining simplicity and performance.
npm install ezui-framework
Or with yarn:
yarn add ezui-framework
import { EZUI } from 'ezui-framework';
// Initialize EZUI
const ezui = new EZUI({
enableValidation: true,
enableSecurity: true,
enableDevTools: process.env.NODE_ENV === 'development'
});
// Create a simple counter component
class Counter {
constructor(props = {}) {
this.props = props;
this.state = ezui.createState({
count: props.initialCount || 0
});
// Add validation
this.state.addValidation('count', (value) => {
if (typeof value !== 'number') {
throw new Error('Count must be a number');
}
if (value < 0) {
throw new Error('Count cannot be negative');
}
return true;
});
}
increment() {
this.state.set('count', this.state.get('count') + 1);
}
decrement() {
this.state.set('count', this.state.get('count') - 1);
}
render() {
const count = this.state.get('count');
return `
<div class="counter">
<h2>Counter: ${count}</h2>
<button class="increment">+</button>
<button class="decrement">-</button>
</div>
`;
}
mount(parent) {
this.element = document.createElement('div');
this.element.innerHTML = this.render();
parent.appendChild(this.element);
// Bind events
this.element.querySelector('.increment').onclick = () => this.increment();
this.element.querySelector('.decrement').onclick = () => this.decrement();
// Setup reactive updates
this.state.on('count', () => this.update());
return this;
}
update() {
if (this.element) {
this.element.innerHTML = this.render();
// Rebind events after update
this.element.querySelector('.increment').onclick = () => this.increment();
this.element.querySelector('.decrement').onclick = () => this.decrement();
}
}
unmount() {
if (this.element && this.element.parentNode) {
this.element.parentNode.removeChild(this.element);
}
}
}
// Register and mount component
ezui.component('counter', Counter);
// Mount to DOM
ezui.mount('counter', document.getElementById('app'), {
initialCount: 5
}).then(instance => {
console.log('Counter mounted:', instance);
}).catch(error => {
console.error('Failed to mount counter:', error);
});
import { ReactiveState } from 'ezui-framework';
// Create reactive state with validation
const appState = new ReactiveState({
user: {
name: '',
email: '',
preferences: {
theme: 'light',
language: 'en'
}
},
todos: [],
ui: {
loading: false,
error: null
}
});
// Add validation rules
appState.addValidation('user.email', (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
throw new Error('Invalid email format');
}
return true;
});
// Add middleware for logging
appState.applyMiddleware((key, newValue, oldValue, next) => {
console.log(`State change: ${key}`, { oldValue, newValue });
next(newValue);
});
// Transaction support
appState.transaction(() => {
appState.set('user.name', 'John Doe');
appState.set('user.email', 'john@example.com');
appState.set('ui.loading', false);
});
// Undo/Redo support
appState.enableHistory();
appState.set('user.name', 'Jane Doe');
appState.undo(); // Reverts to 'John Doe'
appState.redo(); // Back to 'Jane Doe'
// Watch for changes
appState.on('user.name', (newName, oldName) => {
console.log(`User name changed from ${oldName} to ${newName}`);
});
// Batch updates
appState.batch(() => {
appState.set('ui.loading', true);
appState.set('ui.error', null);
// All changes are applied together
});
EZUI includes a comprehensive testing framework:
import { createTestRunner, expect } from 'ezui-framework/testing';
const testRunner = createTestRunner();
testRunner.describe('Counter Component', () => {
testRunner.it('should increment count when button is clicked', async () => {
const wrapper = await testRunner.mountComponent(Counter, { initialCount: 0 });
expect(wrapper.text()).toContain('Counter: 0');
await wrapper.click('.increment');
expect(wrapper.text()).toContain('Counter: 1');
expect(wrapper.getState('count')).toBe(1);
});
testRunner.it('should validate negative counts', async () => {
const wrapper = await testRunner.mountComponent(Counter);
expect(() => {
wrapper.setState('count', -1);
}).toThrow('Count cannot be negative');
});
});
// Run tests
testRunner.run().then(results => {
console.log('Test results:', results);
});
npm run dev # Start development server with hot reload
npm run test:watch # Run tests in watch mode
npm run lint # Run ESLint
npm run build # Build for production
npm run test:ci # Run tests for CI
npm run analyze # Analyze bundle size
dist/ezui.js - Development UMD builddist/ezui.min.js - Production UMD build (minified)dist/ezui.esm.js - ES Module builddist/ezui.cjs.js - CommonJS buildgit checkout -b feature/amazing-feature)npm test)git commit -m 'Add amazing feature')git push origin feature/amazing-feature)This project is licensed under the MIT License - see the LICENSE file for details.
Built with care by the EZUI Team
FAQs
Enterprise-grade reactive web framework with advanced state management, security, performance optimization, and comprehensive development tools
We found that ezui-framework demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.