Creating your first app - wiresnchains/wave GitHub Wiki

Introduction

First, you will need to install the library. You can do that by installing a bundled version or if you use TypeScript and/or a npm package you can install npm package

Creating HTML app structure

We will create a structure for our app inside of our HTML document where we will reference our count variable, add button events and some text with a wave-condition attribute.

<div id="app">
    <h1>Count: {{ count }}</h1>
    <button onclick="increment()">Increment</button>
    <button onclick="reset()">Reset</button>
    <h2 wave-condition="count > 10 && count < 20">Counter is between 10 and 20</h2>
</div>

Creating a WaveApp

Now, we are going to create our app, we will reference the selector #app because our app container uses that identifier.

const app = new WaveApp("#app");

Then, we will need to create a WaveStore, declare the count variable and reference it in our app.
NOTE We can use multiple stores in one app, we just have to reference it using the useStore() method
Remember that we have to wrap the useStore() method in a try/catch block since it throws out an exception if the app is already mounted

const store = new WaveStore({
    data: {
        count: 0
    }
});

try {
    app.useStore(store);
}
catch (err) {
    console.error("Failed to use store due to", err);
}

Now, we are going to need to create our button event functions (increment & reset)

const count = store.get("count");

function increment() {
    if (!count)
        return;

    count.update(count.getValue() + 1);
}

function reset() {
    if (!count)
        return;
    
    count.update(count.initialValue);
}

After that, we can finally mount our app, so that it registers the updaters for the app container
Remember that the mount() method should be wrapped in a try/catch block since it throws out an exception if the element cannot be found or if the app is already mounted

try {
    app.mount();
}
catch (err) {
    console.error("Failed to mount app due to", err);
}

And this is it for our first simple counter app!
You can find a full example with styles on the wave-counter repository.

Complete code example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <div id="app">
            <h1>Count: {{ count }}</h1>
            <button onclick="increment()">Increment</button>
            <button onclick="reset()">Reset</button>
            <h2 wave-condition="count > 10 && count < 20">Counter is between 10 and 20</h2>
        </div>
        <script type="text/javascript" src="wave.js"></script>
        <script type="text/javascript">
            const app = new WaveApp("#app");

            const store = new WaveStore({
                data: {
                    count: 0
                }
            });

            try {
                app.useStore(store);
            }
            catch (err) {
                console.error("Failed to use store due to", err);
            }

            const count = store.get("count");

            function increment() {
                if (!count)
                    return;

                count.update(count.getValue() + 1);
            }

            function reset() {
                if (!count)
                    return;
                
                count.update(count.initialValue);
            }

            try {
                app.mount();
            }
            catch (err) {
                console.error("Failed to mount app due to", err);
            }
        </script>
    </body>
</html>