76 lines
2.3 KiB
Markdown
76 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 Two-Way 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.
|
|
- **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="{count++}">{count}</button>
|
|
</div>
|
|
|
|
<script type="module">
|
|
|
|
import Mite from './src/Mite.js';
|
|
|
|
new Mite('#counter', {
|
|
data: {count: 0},
|
|
});
|
|
|
|
</script>
|
|
```
|
|
|
|
### Options
|
|
- `selector`: A CSS selector (string) targets root DOM element (required).
|
|
- `opts`: An options object with properties:
|
|
- `data` (Object): Reactive data for the app. Changes to `data` properties trigger DOM updates.
|
|
- anything else you want, just a POJO
|
|
|
|
|
|
## 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* |