Counter Example using rust and riot.js

Counter.riot

<app>
    <script type="rust" module="counter">
        use serde::{Serialize, Deserialize};

        #[derive(Serialize, Deserialize)]
        pub struct CounterState {
            counter: i32
        }

        impl Default for CounterState {
            fn default() -> Self {
                CounterState {
                    counter: 42
                }
            }
        }

        #[allow(non_camel_case_types)]
        #[derive(Serialize, Deserialize)]
        pub enum CounterAction {
            increment(i32),
            decrement(i32),
            double
        }
    
        fn counter_reducer(state: CounterState, action: CounterAction) -> CounterState {
            match action {
                CounterAction::increment(i) => CounterState {
                    counter: state.counter + i
                },
                CounterAction::decrement(i) => CounterState {
                    counter: state.counter - i
                },
                CounterAction::double => CounterState {
                    counter: state.counter * 2
                }
            }
        }
        export!(counter_state, counter_dispatch, counter_reducer, CounterState, CounterAction);
    </script>
    <div class="flex bg-gray-100 py-24 justify-center">
        <div class="p-12 text-center max-w-2xl">
            <div class="md:text-3xl text-3xl font-bold">Your Counter is at { state.counter }</div>
            <div class="text-xl font-normal mt-4">Play around with
            </div>
            <div class="mt-6 flex justify-center h-12 relative">
                <button class=" shadow-md mx-2 font-medium py-2 px-4 text-green-100 cursor-pointer bg-green-600 rounded text-lg tr-mt" onclick={() => increment(1)}>Add +</button>
                <button class=" shadow-md font-medium mx-2 py-2 px-4 text-red-100 cursor-pointer bg-green-600 rounded text-lg tr-mt " onclick={() => decrement(1)}>Subtract -</button>
                <button class=" shadow-md font-medium mx-2 py-2 px-4 text-yellow-100 cursor-pointer bg-green-600 rounded text-lg tr-mt" onclick={() => double()}>Double * 2</button>
            </div>
        </div>
    </div>
</app>