{"id":27439022,"url":"https://github.com/ui-monk/mivue","last_synced_at":"2026-04-09T02:31:22.363Z","repository":{"id":286273224,"uuid":"960919443","full_name":"ui-monk/mivue","owner":"ui-monk","description":"Simple and Slim JS library inspired from Vue.js and Alpine.js - PreCursor to pyvue","archived":false,"fork":false,"pushed_at":"2025-04-15T18:30:13.000Z","size":18130,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-02T16:45:18.753Z","etag":null,"topics":["alpinejs","angular","angularjs","html","js","react","vue","vuejs","vuejs3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ui-monk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-05T11:00:32.000Z","updated_at":"2025-04-15T18:30:16.000Z","dependencies_parsed_at":"2025-04-14T21:18:40.320Z","dependency_job_id":"c918b957-4420-439f-b8e1-f573abefd072","html_url":"https://github.com/ui-monk/mivue","commit_stats":null,"previous_names":["bhavik1st/minivue","ui-monk/mivue"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ui-monk/mivue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-monk%2Fmivue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-monk%2Fmivue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-monk%2Fmivue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-monk%2Fmivue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ui-monk","download_url":"https://codeload.github.com/ui-monk/mivue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-monk%2Fmivue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31582588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"online","status_checked_at":"2026-04-09T02:00:06.848Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpinejs","angular","angularjs","html","js","react","vue","vuejs","vuejs3"],"created_at":"2025-04-14T21:18:32.779Z","updated_at":"2026-04-09T02:31:22.347Z","avatar_url":"https://github.com/ui-monk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MiVue - v0.02\n\n![Version](https://img.shields.io/badge/version-0.0.4-blue.svg)\n![License](https://img.shields.io/badge/license-MIT-green.svg) \n![npm version](https://www.npmjs.com/package/mivue)\n\n\n\nMiVue is simple, slim JS UI framework inspired from Vue.js and Alpine.js\nA 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.\n\nNOTE: Python pyvue is also in the making\n\n## Features\n\n- **Reactive Data Binding** - Automatically updates the DOM when data changes\n- **Template Syntax** - Familiar mustache syntax `{{ value }}` for text interpolation\n- **Two-way Binding** - Form elements stay in sync with your data model\n- **Conditional Rendering** - Show/hide elements based on data conditions\n- **Event Handling** - Easily attach event listeners with method binding and parameters\n- **Attribute Binding** - Dynamically set HTML attributes based on data\n- **Form Support** - Works with various form elements (inputs, checkboxes, select dropdowns, etc.)\n- **Developer Tools** - Debug mode with detailed logging\n- **Error Handling** - Comprehensive error catching and reporting\n- **Directives** - Powerful template syntax for manipulating the DOM\n- **Component-Based** - Organize your UI into modular components\n- **Computed Properties** - Derived state that updates automatically\n- **List Rendering** - Efficiently render lists with the m-for directive\n\n## Getting Started\n![MiVue Logo](src/image.png)\n\n### Installation\n\nSimply include the script in your HTML:\n\n```html\n\u003cscript src=\"mivue.js\"\u003e\u003c/script\u003e\n```\n\n### Basic Usage\n\n```html\n\u003cdiv id=\"app\"\u003e\n  \u003cp\u003e{{ message }}\u003c/p\u003e\n  \u003cinput m-model=\"message\"\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n  const app = new MiVue({\n    el: '#app',\n    data: {\n      message: 'Hello MiVue!'\n    }\n  });\n\u003c/script\u003e\n```\n\n## Directives\n\n### Text Interpolation\n\nUse double curly braces to display reactive data in your templates:\n\n```html\n\u003cp\u003eHello, {{ name }}!\u003c/p\u003e\n```\n\n### m-model\n\nCreates two-way data binding on form elements:\n\n```html\n\u003c!-- Text input --\u003e\n\u003cinput type=\"text\" m-model=\"message\"\u003e\n\n\u003c!-- Checkbox --\u003e\n\u003cinput type=\"checkbox\" m-model=\"isChecked\"\u003e\n\n\u003c!-- Radio buttons --\u003e\n\u003cinput type=\"radio\" m-model=\"selectedOption\" value=\"option1\"\u003e\n\u003cinput type=\"radio\" m-model=\"selectedOption\" value=\"option2\"\u003e\n\n\u003c!-- Select dropdown --\u003e\n\u003cselect m-model=\"selected\"\u003e\n  \u003coption value=\"option1\"\u003eOption 1\u003c/option\u003e\n  \u003coption value=\"option2\"\u003eOption 2\u003c/option\u003e\n\u003c/select\u003e\n\n\u003c!-- Textarea --\u003e\n\u003ctextarea m-model=\"description\"\u003e\u003c/textarea\u003e\n```\n\n### m-if\n\nConditionally render an element based on a boolean value:\n\n```html\n\u003cdiv m-if=\"showContent\"\u003e\n  This content will only show when showContent is true.\n\u003c/div\u003e\n```\n\n### m-bind\n\nDynamically bind HTML attributes based on expressions:\n\n```html\n\u003c!-- Regular syntax --\u003e\n\u003cinput m-bind:placeholder=\"inputPlaceholder\"\u003e\n\u003cbutton m-bind:disabled=\"isDisabled\"\u003eSubmit\u003c/button\u003e\n\n\u003c!-- Shorthand syntax using \":\" --\u003e\n\u003cimg :src=\"imageUrl\" :alt=\"imageDescription\"\u003e\n\u003ca :href=\"linkUrl\"\u003eVisit Website\u003c/a\u003e\n\n\u003c!-- Expressions are supported --\u003e\n\u003cdiv :style=\"'color: ' + textColor\"\u003eColored Text\u003c/div\u003e\n\u003cprogress :value=\"progress\" :max=\"100\"\u003e\u003c/progress\u003e\n```\n\n### Event Handling\n\nBind event listeners with multiple syntax options:\n\n```html\n\u003c!-- Regular syntax --\u003e\n\u003cbutton m-on:click=\"handleClick\"\u003eClick Me\u003c/button\u003e\n\n\u003c!-- Shorthand syntax --\u003e\n\u003cbutton @click=\"handleClick\"\u003eClick Me\u003c/button\u003e\n\n\u003c!-- With parameters --\u003e\n\u003cbutton @click=\"increment(5)\"\u003eAdd 5\u003c/button\u003e\n\n\u003c!-- Using $event to access the original DOM event --\u003e\n\u003cinput @input=\"updateValue($event)\"\u003e\n\n\u003c!-- Multiple event types --\u003e\n\u003cdiv @mouseenter=\"handleMouseEnter\" @mouseleave=\"handleMouseLeave\"\u003e\n  Hover over me\n\u003c/div\u003e\n```\n\n### m-for\n\nRender lists of items:\n\n```html\n\u003cul\u003e\n  \u003cli m-for=\"item in items\"\u003e{{ item.name }}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nYou can also include an index:\n\n```html\n\u003cdiv m-for=\"(item, index) in items\"\u003e\n  {{ index }}: {{ item.name }}\n\u003c/div\u003e\n```\n\nInside m-for loops, you can access:\n- The current item directly\n- Item properties using dot notation: `item.property`\n- Methods and data from the main instance\n\nExample with events and conditional styling:\n\n```html\n\u003cdiv m-for=\"todo in todos\" :class=\"{'completed': todo.completed}\"\u003e\n  \u003cinput type=\"checkbox\" m-model=\"todo.completed\"\u003e\n  \u003cspan\u003e{{ todo.text }}\u003c/span\u003e\n  \u003cbutton @click=\"removeTodo(todo)\"\u003eDelete\u003c/button\u003e\n\u003c/div\u003e\n```\n\n## Options API\n\n```javascript\nconst app = new MiVue({\n  // Element to mount to\n  el: '#app',\n  \n  // Debug mode\n  debug: true,\n  \n  // Data properties (reactive)\n  data: {\n    message: 'Hello MiVue!',\n    count: 0,\n    isVisible: true,\n    buttonColor: 'blue',\n    linkUrl: 'https://example.com'\n  },\n  \n  // Methods\n  methods: {\n    increment(amount = 1) {\n      this.count += amount;\n    },\n    toggleVisibility() {\n      this.isVisible = !this.isVisible;\n    },\n    handleEvent(event) {\n      console.log('Event triggered:', event.type);\n    }\n  }\n});\n```\n\n## Complete Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eMiVue Example\u003c/title\u003e\n  \u003cstyle\u003e\n    .btn {\n      padding: 8px 16px;\n      border-radius: 4px;\n      cursor: pointer;\n      margin-right: 8px;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003ch1\u003e{{ title }}\u003c/h1\u003e\n    \n    \u003cinput type=\"text\" m-model=\"title\" :placeholder=\"titlePlaceholder\"\u003e\n    \n    \u003cp\u003eCount: {{ count }}\u003c/p\u003e\n    \u003cbutton @click=\"increment\" class=\"btn\" :style=\"'background-color: ' + buttonColor\"\u003eIncrement\u003c/button\u003e\n    \u003cbutton @click=\"increment(5)\" class=\"btn\" :disabled=\"isMaxedOut\"\u003eAdd 5\u003c/button\u003e\n    \u003cbutton @click=\"decrement\" class=\"btn\"\u003eDecrement\u003c/button\u003e\n    \n    \u003cdiv\u003e\n      \u003clabel\u003e\n        \u003cinput type=\"checkbox\" m-model=\"showExtra\"\u003e Show extra content\n      \u003c/label\u003e\n      \n      \u003cdiv m-if=\"showExtra\"\u003e\n        \u003cp\u003eThis is additional content that can be toggled.\u003c/p\u003e\n        \u003cinput type=\"text\" m-model=\"linkUrl\"\u003e\n        \u003cp\u003e\u003ca :href=\"linkUrl\" target=\"_blank\"\u003eVisit link\u003c/a\u003e\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv class=\"mouse-tracker\" \n         @mousemove=\"trackMouse($event)\"\n         :style=\"'border: 1px solid #ccc; height: 100px; display: flex; align-items: center; justify-content: center;'\"\u003e\n      \u003cspan\u003eMouse position: X: {{ mouseX }}, Y: {{ mouseY }}\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cscript src=\"mivue.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    const app = new MiVue({\n      el: '#app',\n      debug: true,\n      data: {\n        title: 'MiVue Demo',\n        titlePlaceholder: 'Enter a title',\n        count: 0,\n        buttonColor: '#42b883',\n        showExtra: true,\n        linkUrl: 'https://github.com',\n        mouseX: 0,\n        mouseY: 0,\n        isMaxedOut: false\n      },\n      methods: {\n        increment(amount = 1) {\n          this.count += amount;\n          this.isMaxedOut = this.count \u003e= 10;\n        },\n        decrement() {\n          if (this.count \u003e 0) {\n            this.count--;\n            this.isMaxedOut = false;\n          }\n        },\n        trackMouse(event) {\n          this.mouseX = event.offsetX;\n          this.mouseY = event.offsetY;\n        }\n      }\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## How It Works\n\nMiVue 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.\n\nThe update process uses a publisher-subscriber pattern with Dep (dependency) and Watcher classes inspired by Vue's implementation.\n\n### Event Handling System\n\nMiVue's event handling supports:\n- Direct method binding (`@click=\"handleClick\"`)\n- Method calls with parameters (`@click=\"increment(5)\"`)\n- Access to the DOM event via `$event` parameter\n- Support for all standard DOM events (click, input, change, mouseenter, etc.)\n\n### Attribute Binding System\n\nThe attribute binding system allows:\n- Binding any HTML attribute to data properties\n- Supporting expressions with concatenation and simple operations\n- Boolean attributes (like disabled, required) that respond to truthy/falsy values\n- Style and class binding for dynamic styling\n\n## Limitations\n\nBeing a minimal implementation, MiVue lacks some Vue.js features:\n\n- No virtual DOM\n- No component system\n- No computed properties (currently)\n- No lifecycle hooks\n- No transitions\n- No directive modifiers\n- Limited expression evaluation capability\n\n## License\n\nMIT\n\n## Testing\n\nMiVue includes a comprehensive test suite to ensure all framework features work correctly.\n\n### Test Setup\n\nThe test suite uses:\n- **Mocha**: Test runner\n- **JSDOM**: For simulating a browser environment in Node.js\n- **Built-in assertions**: For verifying behavior\n\n### Running Tests\n\nTo run tests, make sure you have Node.js installed, then:\n\n1. Install dependencies first:\n   ```bash\n   npm install\n   ```\n\n2. Run the test suite:\n   ```bash\n   npm test\n   ```\n\n3. For continuous testing during development:\n   ```bash\n   npm run test:watch\n   ```\n\n### What Gets Tested\n\nThe test suite verifies all core functionality:\n- Data binding and reactivity\n- Two-way binding with m-model directive\n- Conditional rendering with m-if directive\n- Event handling with parameters and $event\n- Attribute binding with dynamic attributes\n\n### Troubleshooting Framework Issues\n\nIf you encounter issues:\n\n1. Enable debug mode: `debug: true` in your MiVue instance\n2. Check the console for detailed logs of what's happening\n3. Verify that your templates are correctly structured\n4. Review the event handlers and attribute bindings for syntax errors\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-monk%2Fmivue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fui-monk%2Fmivue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-monk%2Fmivue/lists"}