https://github.com/ui-monk/mivue
Simple and Slim JS library inspired from Vue.js and Alpine.js - PreCursor to pyvue
https://github.com/ui-monk/mivue
alpinejs angular angularjs html js react vue vuejs vuejs3
Last synced: 2 months ago
JSON representation
Simple and Slim JS library inspired from Vue.js and Alpine.js - PreCursor to pyvue
- Host: GitHub
- URL: https://github.com/ui-monk/mivue
- Owner: ui-monk
- License: mit
- Created: 2025-04-05T11:00:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-15T18:30:13.000Z (about 1 year ago)
- Last Synced: 2025-10-02T16:45:18.753Z (9 months ago)
- Topics: alpinejs, angular, angularjs, html, js, react, vue, vuejs, vuejs3
- Language: JavaScript
- Homepage:
- Size: 17.3 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MiVue - v0.02
MiVue is simple, slim JS UI framework inspired from Vue.js and Alpine.js
A lightweight, reactive MiVue provides the core reactivity features of Vue with a simple and intuitive API of Alpine making is easier for beginners and non-ui devs to get the job done.
NOTE: Python pyvue is also in the making
## Features
- **Reactive Data Binding** - Automatically updates the DOM when data changes
- **Template Syntax** - Familiar mustache syntax `{{ value }}` for text interpolation
- **Two-way Binding** - Form elements stay in sync with your data model
- **Conditional Rendering** - Show/hide elements based on data conditions
- **Event Handling** - Easily attach event listeners with method binding and parameters
- **Attribute Binding** - Dynamically set HTML attributes based on data
- **Form Support** - Works with various form elements (inputs, checkboxes, select dropdowns, etc.)
- **Developer Tools** - Debug mode with detailed logging
- **Error Handling** - Comprehensive error catching and reporting
- **Directives** - Powerful template syntax for manipulating the DOM
- **Component-Based** - Organize your UI into modular components
- **Computed Properties** - Derived state that updates automatically
- **List Rendering** - Efficiently render lists with the m-for directive
## Getting Started
### Installation
Simply include the script in your HTML:
```html
```
### Basic Usage
```html
{{ message }}
const app = new MiVue({
el: '#app',
data: {
message: 'Hello MiVue!'
}
});
```
## Directives
### Text Interpolation
Use double curly braces to display reactive data in your templates:
```html
Hello, {{ name }}!
```
### m-model
Creates two-way data binding on form elements:
```html
Option 1
Option 2
```
### m-if
Conditionally render an element based on a boolean value:
```html
This content will only show when showContent is true.
```
### m-bind
Dynamically bind HTML attributes based on expressions:
```html
Submit
Colored Text
```
### Event Handling
Bind event listeners with multiple syntax options:
```html
Click Me
Click Me
Add 5
Hover over me
```
### m-for
Render lists of items:
```html
- {{ item.name }}
```
You can also include an index:
```html
{{ index }}: {{ item.name }}
```
Inside m-for loops, you can access:
- The current item directly
- Item properties using dot notation: `item.property`
- Methods and data from the main instance
Example with events and conditional styling:
```html
{{ todo.text }}
Delete
```
## Options API
```javascript
const app = new MiVue({
// Element to mount to
el: '#app',
// Debug mode
debug: true,
// Data properties (reactive)
data: {
message: 'Hello MiVue!',
count: 0,
isVisible: true,
buttonColor: 'blue',
linkUrl: 'https://example.com'
},
// Methods
methods: {
increment(amount = 1) {
this.count += amount;
},
toggleVisibility() {
this.isVisible = !this.isVisible;
},
handleEvent(event) {
console.log('Event triggered:', event.type);
}
}
});
```
## Complete Example
```html
MiVue Example
.btn {
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin-right: 8px;
}
{{ title }}
Count: {{ count }}
Increment
Add 5
Decrement
Mouse position: X: {{ mouseX }}, Y: {{ mouseY }}
const app = new MiVue({
el: '#app',
debug: true,
data: {
title: 'MiVue Demo',
titlePlaceholder: 'Enter a title',
count: 0,
buttonColor: '#42b883',
showExtra: true,
linkUrl: 'https://github.com',
mouseX: 0,
mouseY: 0,
isMaxedOut: false
},
methods: {
increment(amount = 1) {
this.count += amount;
this.isMaxedOut = this.count >= 10;
},
decrement() {
if (this.count > 0) {
this.count--;
this.isMaxedOut = false;
}
},
trackMouse(event) {
this.mouseX = event.offsetX;
this.mouseY = event.offsetY;
}
}
});
```
## How It Works
MiVue uses JavaScript's `Object.defineProperty` to make data properties reactive. When a property is accessed during rendering, it's registered as a dependency. When the property changes, all registered dependencies are notified to update.
The update process uses a publisher-subscriber pattern with Dep (dependency) and Watcher classes inspired by Vue's implementation.
### Event Handling System
MiVue's event handling supports:
- Direct method binding (`@click="handleClick"`)
- Method calls with parameters (`@click="increment(5)"`)
- Access to the DOM event via `$event` parameter
- Support for all standard DOM events (click, input, change, mouseenter, etc.)
### Attribute Binding System
The attribute binding system allows:
- Binding any HTML attribute to data properties
- Supporting expressions with concatenation and simple operations
- Boolean attributes (like disabled, required) that respond to truthy/falsy values
- Style and class binding for dynamic styling
## Limitations
Being a minimal implementation, MiVue lacks some Vue.js features:
- No virtual DOM
- No component system
- No computed properties (currently)
- No lifecycle hooks
- No transitions
- No directive modifiers
- Limited expression evaluation capability
## License
MIT
## Testing
MiVue includes a comprehensive test suite to ensure all framework features work correctly.
### Test Setup
The test suite uses:
- **Mocha**: Test runner
- **JSDOM**: For simulating a browser environment in Node.js
- **Built-in assertions**: For verifying behavior
### Running Tests
To run tests, make sure you have Node.js installed, then:
1. Install dependencies first:
```bash
npm install
```
2. Run the test suite:
```bash
npm test
```
3. For continuous testing during development:
```bash
npm run test:watch
```
### What Gets Tested
The test suite verifies all core functionality:
- Data binding and reactivity
- Two-way binding with m-model directive
- Conditional rendering with m-if directive
- Event handling with parameters and $event
- Attribute binding with dynamic attributes
### Troubleshooting Framework Issues
If you encounter issues:
1. Enable debug mode: `debug: true` in your MiVue instance
2. Check the console for detailed logs of what's happening
3. Verify that your templates are correctly structured
4. Review the event handlers and attribute bindings for syntax errors