WaveStore

WaveStore is a class that is used to store data and allow access them across the app.

Constructor

The constructor takes an object as an argument with the following properties:

data
proxies
components All of these properties are optional

new WaveStore({
    data: {},
    proxies: {},
    components: {}
});

Data

Data is an object containing the variables that can be used in your html with the {{ variable }} syntax

<h1>Count: {{ count }}</h1>

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

Reading/writing data

You can alter the value of your data using several methods.
First is very simple, the setValue method. It take a string, as the key of your variable and a value as an argument as the new value of your variable.

store.setValue("count", 10);

Second method is using the built-in getter method</br/> It is recommended to use this method since it is more readable and throws an error when the variable is not found.
Remember to use await if you have an async proxy bound to this variable

const count = store.get("count"); // We can also use store.set("count", 10); to set the value and get the same result as the `get` method for updating the value later

await count.update(10); // Use await if you have an async proxy bound to this variable

You can also easily get the value of the count variable using the following methods:

store.getValue("count");

// OR: In case of `store.get()` method
count.getValue();
// OR: Getting the initial value of the variable (the value when the `get` method was called)
count.initialValue;

Proxies

The proxies object contains the methods that are called when the variable with the same key in data object changes. It rejects or accepts the new value using a boolean as a return value
We can also use async!

const store = new WaveStore({
    data: {
        count: 0,
        asyncData: 0,
    }
    proxies: {
        count: (newValue) => {
            if (typeof newValue !== "number") {
                console.error("`count` must be a number");
                return false;
            }

            return true;
        },
        asyncData: async (newValue) => {
            await new Promise(resolve => setTimeout(resolve, 2000));
            return true;
        }
    }
});

store.setValue("count", "20"); // This will log an error and not change the value
store.setValue("count", 20); // This will change the value in 2 seconds
await store.setValue("asyncData", 20); // This will change the value in 2 seconds

Components

The components object contains the methods that can be used as templates for HTML blocks (with parameters)
They should return an HTML element (for example using the document.createElement method)
We can also use async here!

{{ button("Click me") }}
{{ asyncButton("This will appear in 2 seconds") }}

const store = new WaveStore({
    components: {
        button: (text) => {
            const button = document.createElement("button");
            button.textContent = text;
            return button;
        },
        asyncButton: async (text) => {
            await new Promise(resolve => setTimeout(resolve, 2000));

            const button = document.createElement("button");
            button.textContent = text;
            return button;
        }
    }
});