Take Sutil towards the Svelte experience

[joshushmaximus]

Opening an issue to discuss/document this idea further:

I would love to see how far the Fable compiler plugins could take Sutil towards the Svelte experience - by which I mean no "Bind.el" or "disposeOnUnmount" boilerplate that we currently have in Sutil. Svelte does all this for you
[via: https://x.com/DaveDawkins/status/1850538811442229667]

I personally am not familiar with fable (or really f# that much tbh).
I get what you're saying that if you could analyze the code being generated at the right stage (what stage?), you could automatically generate more code and reduce the burder on the user. Svelte is already a compiler and so it does this, to do the same you'd have to extend fable somehow to be able to generate more AST nodes for these things that eventually need to be bind.el-d?

Is it like this?

sutil -> fable -> html/ts

and if we do this

sutil -> [bind-identification-and-emitter] fable -> html/ts

then the sutil part becomes more like svelte (and also just simpler).

Can you expound on this further?

Recommended approach?

Best fable plugin documentation? (here is what i found, first seemed most applicable to this task)

• How to Write a Fable Compiler Plugin
• Fable Plugin Architecture
• Fable Plugin System Issue

[davedawkins]

Well, it's

F# -> Fable -> JS

Using Sutil, the F# you write looks like this:

let view() = 
    let model = Store.make 0

    Html.div [
        Ev.onUnmount (fun _ -> model.Dispose())
        Bind.el (model, fun m -> text (sprintf "Counter = %d" m))
        Html.button [
               text "+"
               Ev.onClick (fun _ -> model |> Store.modify (fun m -> m + 1))
        ]
    ]

The proposition for using plugins is to get closer to the above without any of the boilerplate

[<Sutil()>]
let view() = 
    let model = Store.make 0  // It's OK to be explicit about where our stores are defined

    Html.div [
        text (sprintf "Counter = %d" model)
        Html.button [
               text "+"
               Ev.onClick (fun _ ->  model <- model + 1 )
        ]
    ]

Note:

• We stay explicit in definining the store
• From then on, we treat model as if it had been defined as mutable variable of type int (eg 'let mutable model = 0')
• The plugin's job is to spot these references to 'model' and then wrap them with the Sutil boilerplate (disposing when out of scope, Binding for value access, and Store.modify for update)