:::info
**We are moving to** https://misonou.github.io/
:::

## Webpack

If you are using webpack or other bundling libraries that support ES module import, you can use `npm install` and import the core module and then selectively enable extensions by:

npm i brew-js      # or
yarn add brew-js

import brew from "brew-js";

// selectively include extensions
import login from "brew-js/extension/login";
import router from "brew-js/extension/router";

brew.with(login, router)(app => {
      /* ... */ 
});

## UMD

Otherwise you can include brew.js and other dependencies as a global module:

<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/waterpipe"></script></script>
<script src="https://unpkg.com/zeta-dom"></script>
<script src="https://unpkg.com/brew-js"></script>

<script>
brew(function (app) {
      /* ... */  
});
</script>

# To-do list example

interface Task {
    title: string;
}

brew<{ add: (data: Task) => void }>((app) => {
    const tasks: Task[] = [];
    app.define({
        add(data) {
            tasks.push({ ...data });
            brew.setVar('#todo', {
                tasks: [...tasks]
            });
        }
    });
});

<div id="todo" var="{ tasks: null }">
    <ul foreach="tasks">
        <li template>{{foreach.title}}</li>
    </ul>
    <form>
        <input required name="title" type="text"/>
        <button context-method="add">Add</button>
    </form>
</div>

Or purely using HTML directives as a minimal app:

brew(_ => {});

<div id="todo" var="{ tasks: null }">
    <ul foreach="[ null | tasks ]">
        <li>{{foreach.title}}</li>
    </ul>
    <form var="{ data: null }" form-var="data">
        <input required name="title" type="text"/>
        <button set-var="{ tasks: [ tasks | data ] }">Add</button>
    </form>
</div>

# How it works

There are following aspects in brewing an application:
1. **App initialization**: configuring behevior
3. **Templates and directives**: defining layout
4. **Template variables**: state management
2. **Events**: handles user actions and wires up different parts