Quick Start

Build a working WakaPAC app in five steps. Each step adds one concept to the same file, so by the end you have a complete todo list app.

Step 1: Set Up the Page

Create an HTML file and load WakaPAC from the CDN. Add an empty container for the app:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/gh/quellabs/wakapac@main/wakapac.min.js"></script>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

Step 2: Create the Component

Call wakaPAC(selector, abstraction) to attach reactive state to the container. Start with a single todos array:

<script>
    wakaPAC('#app', {
        todos: ['Learn WakaPAC', 'Build an app']
    });
</script>

Step 3: Render the List

Use data-pac-bind="foreach: todos" to render one <li> per item. data-pac-item names the variable used inside the loop:

<div id="app">
    <ul data-pac-bind="foreach: todos" data-pac-item="todo">
        <li>{{todo}}</li>
    </ul>
</div>

Step 4: Add New Todos

Bind an input's value to a newTodo property with data-pac-bind="value: newTodo", and wire a button's click to a method that pushes it onto the array:

<div id="app">
    <input data-pac-bind="value: newTodo" placeholder="Add a todo">
    <button data-pac-bind="click: addTodo">Add</button>

    <ul data-pac-bind="foreach: todos" data-pac-item="todo">
        <li>{{todo}}</li>
    </ul>
</div>

<script>
    wakaPAC('#app', {
        newTodo: '',
        todos: ['Learn WakaPAC', 'Build an app'],

        addTodo() {
            if (this.newTodo.trim()) {
                this.todos.push(this.newTodo);
                this.newTodo = '';
            }
        }
    });
</script>

Step 5: Remove Todos

Add a remove button inside the loop. WakaPAC passes the current loop item as a second argument to the handler:

<ul data-pac-bind="foreach: todos" data-pac-item="todo">
    <li>
        {{todo}}
        <button data-pac-bind="click: removeTodo">×</button>
    </li>
</ul>

<script>
    wakaPAC('#app', {
        // ...
        removeTodo(event, item) {
            const index = this.todos.indexOf(item.todo);
            this.todos.splice(index, 1);
        }
    });
</script>

Result

Putting it all together, the complete app is:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/gh/quellabs/wakapac@main/wakapac.min.js"></script>
</head>
<body>
    <div id="app">
        <input data-pac-bind="value: newTodo" placeholder="Add a todo">
        <button data-pac-bind="click: addTodo">Add</button>

        <ul data-pac-bind="foreach: todos" data-pac-item="todo">
            <li>
                {{todo}}
                <button data-pac-bind="click: removeTodo">×</button>
            </li>
        </ul>
    </div>

    <script>
        wakaPAC('#app', {
            newTodo: '',
            todos: ['Learn WakaPAC', 'Build an app'],

            addTodo() {
                if (this.newTodo.trim()) {
                    this.todos.push(this.newTodo);
                    this.newTodo = '';
                }
            },

            removeTodo(event, item) {
                const index = this.todos.indexOf(item.todo);
                this.todos.splice(index, 1);
            }
        });
    </script>
</body>
</html>

That's a full reactive app: state, two-way binding, and list rendering, in one file with no build step.