Vide global state example

vide_global.fs

module Components.Demo

open Fable.Core
open Fable.Core.JsInterop
open Vide
open type Html

importSideEffects("./Demo.scss")


[<Mangle>]
type ICounter =
    abstract member Counter: MutableValue<int>

[<Mangle>]
type IDoubleCounter =
    abstract member DoubleCounter: MutableValue<int>

type ITest =
    abstract member Test: int

type GlobalState = {
    Counter: MutableValue<int>
    DoubleCounter: MutableValue<int>
}
with
    interface ICounter with
        member this.Counter = this.Counter
    interface IDoubleCounter with
        member this.DoubleCounter = this.DoubleCounter

let counter1 (globalState: #ICounter) =
    vide {
        div {
            let! count = ofMutable {0}
            button.onclick(fun _ ->
                count.Value <- count.Value + 1
                globalState.Counter.Value <- globalState.Counter.Value + 1
            ) {
                $"Count"
            }
            $"Value={count.Value} Global1={globalState.Counter.Value}"
        }
    }

let counter2 (globalState: #IDoubleCounter) =
    vide {
        div {
            let! count = ofMutable {0}
            button.onclick(fun _ ->
                count.Value <- count.Value + 1
                globalState.DoubleCounter.Value <- globalState.DoubleCounter.Value + 2
            ) {
                $"Count"
            }
            $"Value={count.Value} Global2={globalState.DoubleCounter.Value}"
        }
    }

let initState() =
    vide {
        let! counterState = ofMutable {0}
        let! doubleCounterState = ofMutable {0}
        return { Counter = counterState; DoubleCounter = doubleCounterState }
    }

let someProxy globalState =
    vide {
        do! counter1 globalState
        do! counter2 globalState
    }

let view =
    vide {
        let! globalState = initState()
        do! someProxy globalState
        $"Value={globalState.Counter.Value} Global2={globalState.DoubleCounter.Value}"
    }