# DoDo Framework
> A lightweight JavaScript framework for building reactive single-page applications — no build tools, no TypeScript, no complexity.
[](./LICENSE)
[](package.json)
DoDo is a modern frontend framework built on the **MVC pattern** (Model-View-Controller). If you've used Angular 1 or similar frameworks, you'll feel right at home. Unlike React, Vue, or Angular 2+, DoDo does **not** use components — instead, a single **Controller** manages the whole page.
---
## Why DoDo?
- **No build step** — write plain ES6+ JavaScript, open in the browser, done
- **No TypeScript required** — just JavaScript
- **No dependencies** — zero external packages
- **Familiar MVC pattern** — easy to reason about and test
- **Reactive `$model`** — change a property, the HTML updates automatically
- **Built-in utilities** — HTTP client, auth, forms, cookies, storage, events
---
## Installation
```bash
npm install --save @mikosoft/dodo
```
Or scaffold a full project instantly:
```bash
npm init dodo
```
---
## How It Works — The Big Picture
DoDo apps follow a simple flow:
```
URL changes → Router matches route → Controller runs → View renders
```
1. The **App** listens for URL changes.
2. When a URL matches a route, DoDo runs the corresponding **Controller**.
3. The Controller loads HTML views, sets data on `$model`, and calls `render()`.
4. DoDo processes all `dd-*` directives in the HTML and updates the DOM.
---
## Quick Start
### 1. Entry point — `app.js`
```javascript
import { App } from '@mikosoft/dodo';
import { $auth, $httpClient, $debugOpts } from './conf/index.js';
import HomeCtrl from './controllers/HomeCtrl.js';
import AboutCtrl from './controllers/AboutCtrl.js';
import NotfoundCtrl from './controllers/NotfoundCtrl.js';
const $routes = [
['when', '/', HomeCtrl],
['when', '/about', AboutCtrl],
['notfound', NotfoundCtrl]
];
const app = new App('myApp');
app
.auth($auth)
.httpClient($httpClient)
.debug($debugOpts);
app
.routes($routes)
.listen(); // start listening for URL changes
```
### 2. Controller — `HomeCtrl.js`
```javascript
import { Controller } from '@mikosoft/dodo';
class HomeCtrl extends Controller {
// 1. Load HTML views from files
async __loader(trx) {
await this.loadView('#main', '/views/home.html');
}
// 2. Set initial data
async __init(trx) {
this.$model.title = 'Welcome to DoDo!';
this.$model.users = [];
}
// 3. Render dd-* directives in the HTML
async __rend(trx) {
await this.render();
}
// 4. Run code after the page is rendered (attach plugins, fetch data, etc.)
async __postrend(trx) {
const resp = await this.$httpClient.get('/api/users');
this.$model.users = resp.data;
await this.render('users'); // re-render only the 'users' part
}
}
export default HomeCtrl;
```
### 3. View — `home.html`
```html
Go to About
```
That's it. When `$model.users` is set, calling `render('users')` updates only the `dd-each="users"` part of the page.
---
## App vs AppOne
| | `App` | `AppOne` |
|---|---|---|
| Routing | Yes — multiple routes/pages | No — single page only |
| Use case | SPAs, web panels | Browser extensions, simple tools |
```javascript
// Multi-page app with routing
import { App } from '@mikosoft/dodo';
const app = new App('myApp');
app.routes($routes).listen();
// Single page, no routing needed
import { AppOne } from '@mikosoft/dodo';
const app = new AppOne('myApp');
app.controller(MyCtrl);
```
---
## Controller Lifecycle
Every controller runs its hooks in this order:
```
__loader() → __init() → __rend() → __postrend()
```
| Hook | Purpose |
|---|---|
| `__loader(trx)` | Load HTML views/partials into the DOM |
| `__init(trx)` | Set initial values on `$model` |
| `__rend(trx)` | Call `render()` to process all `dd-*` directives |
| `__postrend(trx)` | Run code after rendering (fetch data, init plugins) |
| `__destroy()` | Cleanup listeners when navigating away |
The `trx` object carries route information:
```javascript
async __loader(trx) {
console.log(trx.uri); // '/users/42'
console.log(trx.params); // { id: '42' }
console.log(trx.query); // { sort: 'asc' }
}
```
---
## Directives Reference
Directives are special `dd-*` HTML attributes that DoDo processes during `render()`.
### Data Binding
| Directive | Description | Example |
|---|---|---|
| `dd-text` | Sets text content | `` |
| `dd-html` | Sets inner HTML | `` |
| `dd-model` | Two-way binding (input ↔ `$model`) | `` |
| `dd-value` | Sets the `value` attribute | `` |
| `dd-set` | One-way: input → `$model`, no re-render | `` |
| `dd-label` | Sets label text | `` |
| `dd-placeholder` | Sets placeholder text | `` |
| `dd-title` | Sets title attribute | `` |
| `dd-data` | Sets data-* attributes | `` |
### Conditionals
| Directive | Description | Example |
|---|---|---|
| `dd-if` | Show element if truthy | `