78 lines
2.3 KiB
Markdown
78 lines
2.3 KiB
Markdown
|
# Mite
|
||
|
|
> The tiniest framework that *mite* work
|
||
|
|
|
||
|
|
```
|
||
|
|
/___\ ___ _
|
||
|
|
)O.o( |\/| o | |_ BE small
|
||
|
|
\_^_/ | | | | |_ be STRONG
|
||
|
|
" "
|
||
|
|
```
|
||
|
|
|
||
|
|
Brainspace is limited, time is limited, ideas are abundant, so enter stage left: **Mite**
|
||
|
|
|
||
|
|
**Mite** is a tiny `import` ui library that was born out of a necessity to rift out prototypes fast, and complement existing HTML/CSS/JS knowledge. The boiler-plate of most conventional frameworks takes longer than actually getting the core MVP of the idea out there.
|
||
|
|
|
||
|
|
**Mite** provides an extendable one-and-done solutions from decorating components to building out single-page-applications -- pure-frontend, and core-web for the win!
|
||
|
|
|
||
|
|
With **Mite** it is just one file and go...
|
||
|
|
|
||
|
|
## Getting Started
|
||
|
|
|
||
|
|
### Key Features
|
||
|
|
- **Reactive Data Binding**: Bind data to the DOM using `{{ }}` syntax, and Mite will automatically update the DOM when the data changes.
|
||
|
|
- **Directives**:
|
||
|
|
- `m-if`: Conditionally show or hide elements based on a truthy/falsy expression.
|
||
|
|
- `m-each`: Iterate over arrays to render lists dynamically.
|
||
|
|
- `:`-prefixed attributes (e.g., `:value`): Bind data to element attributes.
|
||
|
|
- **Event Handling**: Bind events to methods using `@event` syntax (e.g., `@click`).
|
||
|
|
- **Lightweight**: Mite is a single class with no external dependencies, making it easy to integrate into any project.
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
```html
|
||
|
|
|
||
|
|
<div id="counter">
|
||
|
|
<button @click="{increment}">{count}</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import Mite from './src/Mite.js';
|
||
|
|
|
||
|
|
new Mite('#counter', {
|
||
|
|
data: {count: 0},
|
||
|
|
increment(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
this.data.count++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
Any tag property that starts with a `@` is an event, so you can do `@click=""`;
|
||
|
|
|
||
|
|
|
||
|
|
## Test
|
||
|
|
|
||
|
|
**WIP**
|
||
|
|
|
||
|
|
`bun test`
|
||
|
|
|
||
|
|
> Currently [Bun]() is used as the development runtime
|
||
|
|
|
||
|
|
|
||
|
|
## Support
|
||
|
|
|
||
|
|
Please open [an issue](https://github.com/n2geoff/mite/issues/new) for support.
|
||
|
|
|
||
|
|
## Contributing
|
||
|
|
|
||
|
|
Anyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the [guidelines](CONTRIBUTING.md), they're minimalistic;)
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
[MIT](LICENSE)
|
||
|
|
|
||
|
|
---
|
||
|
|
*Last updated: March 29, 2025*
|