Modules

Hypen modules are nothing more than a set of components with a common state & actions. A module can represent a screen, a widget, a form or whatever you need.

The only difference between a Module and a Component is that a module keeps state as long as it exists.

Defining a module

To define a module we use a module block.

```dart
//We import the actions file
require(what: Actions, from: "/actions.js")

//We define the module with actions and the initial state
module MyModule(actions: Actions,
                state: {
                    counter: 0   
                }) {

    // The module's components and their children can use the @state reference to access the module's state
    Text("Count is ${@state.counter}")
    Button {
        Text("Increment")
    }.action(incrementCounter)

}
```

To define the action, we can import it from our actions file

// All actions follow the same function pattern

function incrementCounter(action, state, dispatch){
    state.counter++ //We update the state
    dispatch.updateState(state) //We publish the state update
}

Using a module

To use a module, you can just include it in your hypen app like any other component.

application App {
    Route("/") {
        MyModule()
    }
}

Module lifecycle

A module has a lifecycle that is similar to a component's lifecycle, with one major difference - a module's state is persistent as long as the module exists, meaning that if you navigate away from a module and then navigate back to it, the state will be the same as when you left it. If you create a new instance of the module, it's state will be separate from the previous one.

How does it work?

Your module's state is a reactive state in hypen engine, that is exposed to the rest of the module. The actions are compiled to wasm when the module is first instantiated (or precompiled) and executed with the local state when invoked.