README

BoxLang + Alpine.js Example

This example demonstrates how to define an Alpine.js Data Component using 100% BoxLang code.

How it works

1. Direct Access: The BoxLang script uses js.Alpine.data() to register a component.
2. Normalization: The BoxLang Struct returned by the constructor is automatically converted into a reactive JavaScript object.
3. Closures: The increment and decrement functions in BoxLang are wrapped as JS functions that Alpine can call.
4. Host Mutation: When the HTML calls @click="increment($data)", the BoxLang function receives a reference to the Alpine proxy and can update it directly.

Building the Example

You must compile the BoxLang script into a JavaScript/WASM bundle using the MatchBox CLI:

matchbox --target js counter.bxs

This will produce:

• counter.js: The ES module entry point.
• counter.wasm: The WASM binary containing the BoxLang VM and your compiled code.

Running the Example

Since browsers block WASM loading from file:// URIs, you must serve this folder using a local web server:

# Using Python
python3 -m http.server 8000

# Using Node.js (npx)
npx serve .

Then open http://localhost:8000 in your browser.