vide-collabo / Vide

Vide - for state-aware function composition, usable from modern UIs to digital signal processing.
https://vide-dev.io/
Apache License 2.0
88 stars 4 forks source link

Ideas for Samples #13

Open SchlenkR opened 7 months ago

SchlenkR commented 7 months ago

https://twitter.com/1kap10/status/1729494967205105781

Nice project, would like to see examples with global state management, listening to window events and json handling.

How do rendering work? Vdom/Signals/Rerender everything or something else?

SchlenkR commented 7 months ago

... https://twitter.com/1kap10/status/1729502984071979313

I'd like to implement a global persistent record. It reads json from localstorage on startup and encode and save the record to storage on every update. Here is how it's done in svelte:

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA61UwY6bMBD9lSlabYhEyJ1NUu2hlVpVbaWVeimrrgND1ltikG1CI8S_d4ztANv0UpVIAY_fm3lvGNMFBS9RBcn3LhDsiEES3Nd1EAX6XJuFOmGpkdaqamRmIhuVSV7rXSpSzY91JTV0WSUKfuihkNURFvG6Rqm40ij0D6UrifGLWtwZQokaTBnYwqKtZJnbMP3EZj0mFpt61xlcv1nXNvBmtYJNLXHX3bhqtEVLWK0IQAKPVc4LjnmQaNlgH138_CFmdPeips68G2gl12xfIjhHqWvDeuCngdEs8NeAJjFq-CdJ5CqTyDR-vZR8MIwwDSwgDaKuXw70ohGZ5pX4C-MnniMuuOas_MbKBpfQpQJctUFGPsSpZFllrDQsdsD4gPqDxqPhmzqeUTOpRsaU_xY-Pnz5HA-AcLKxhASmAu5elac0vk3hJLs155HPTOQlOm3vTuSOaCGahyVsd9YTAC9cMFYWek89ge127g1ub8GiyNywa0z6HL6kwNbbtGAf8DCYW56DliPqin1z2RFSqMMLx-315tbbeaanlou8amOW54PxT8PbRUmz4EzSMFxpkG-gq9PszanYYxie7FsZu6bleTQ_GwI1DkFkvSotuTjw4uzSXDRDxnT2TO1_1ciqxLhlUoRP7xl9IHLQFSh2QrjpKGtvlkNJcGYS2sD-ad6L-TB0QLoiaOqc5j2CizUS4UbSwSXqRgqvx5Dsk2O6sKe7NQ1-AuG0P_9yWkbWfzox5nJ-Jhl9lyI_MsPYiGvfscf-N3-eGwmjBQAA

PS: The repl is sandboxed so it won't work there.

Lanayx commented 7 months ago

Hi, thank you for the project! I'm giving it a try and it's not a clear how to use global state. This is what I've tried, but it doesn't work

let globalCount<'a> = ofMutable {0}

let counter =
    vide {
        div {
            let! count = ofMutable {0}
            let! gv = globalCount
            button.onclick(fun _ ->
                count.Value <- count.Value + 1
                gv.Value <- gv.Value + 1
            ) {
                $"Count"
            }
            $"Value={count.Value} Global={gv.Value}"
        }
    }
let view =
    vide {
        do! counter
        do! counter
    }

UPD: I've managed to make global state using standard F# DI approach https://gist.github.com/Lanayx/7b9426cbb11ed7a2ffa29c83e6653a24