Introduction

WakaPAC is a lightweight JavaScript toolkit for building interactive applications in plain HTML. It combines a Win32-style message system, reactive data binding, and declarative HTML templates in a single script with no build step. The name combines Waka (inspired by Pac-Man) with PAC, the Presentation–Abstraction–Control architecture pattern it implements.

explanation

Core Concept

WakaPAC applications are driven by messages. Browser input events, component communication, and system events all flow through a single handler called msgProc. This creates a predictable event pipeline similar to Win32 applications, where input handling, messaging, and state updates follow a consistent model. Instead of scattering listeners across components, you reason about all interaction in one place.

Quick Example

A minimal component showing reactive binding and the message loop together:

<!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: name" placeholder="Type your name">
        <p>Hello, {{ name }}!</p>
    </div>

    <script>
        wakaPAC('#app', {
            name: '',

            msgProc(event) {
                if (event.message === wakaPAC.MSG_KEYDOWN &&
                    event.wParam === wakaPAC.VK_RETURN
                ) {
                    console.log('Enter pressed:', this.name);
                }
            }
        });
    </script>
</body>
</html>

The greeting updates as you type — no manual event wiring — while msgProc handles Enter via VK_RETURN, the same mental model as a Win32 window procedure. No compilation, no virtual DOM, no JSX.

How WakaPAC Works

  1. Create a component with wakaPAC(selector, abstraction, options?)
  2. The abstraction object is exposed to the template via reactive bindings
  3. DOM bindings update automatically when state changes
  4. All input — keyboard, mouse, scroll, etc. — flows through msgProc
  5. Components communicate using sendMessage() and postMessage()

Size

WakaPAC is a single JavaScript file with no dependencies.

  • Source: ~460KB (with extensive comments)
  • Minified: ~98KB
  • Minified + gzipped: ~28KB