Embrace Vue native componenets?

[Lanayx]

I know that many functional programmers like elmish, but if I wanted to use elmish, I wouldn't use Vue.js at all. Therefore I want to suggest a component concept, that will be familiar to any Vue.js programmer.

type Vue<'M, 'D>(
  el: string
  render: Vue<'M, 'D> -> Renderer -> unit
  mounted: Vue<'M, 'D> -> () -> unit
  methods: Vue<'M, 'D> -> 'M,
  data: Vue<'M, 'D> -> ()-> 'D
) as this =
    let _el = defaultarg el ""
    let _render = defaultarg (render(this)) fun(x) -> ()
    let _mounted = defaultarg (mounted(this)) fun(x) -> ()
    let _methods = defaultarg (methods(this)) default('M)
    let _data = defaultarg (data(this)) default('D)
    //Init
    do _render(FableRenderer())

    member this.el
       with get() = _el
       and set(value) = _el <- value
    member this.render
       with get() = _render
       and set(value) = _render <- value(this)
    member this.mounted
       with get() = mounted
       and set(value) = mounted <- value(this)
    member this.M<'M>
       with get() = _methods
       and set(value) = _methods <- value(this)
    member this.D<'D>
       with get() = _data
       and set(value) = _data <- value(this)


// component usage
new Vue(
  el = "#demo",
  render = fun this -> fun h -> {
    //some fable rendering
    return (
      <AnchoredHeading level={this.D.Field1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  },
  mounted = fun(this) -> fun () -> this.M.DoThat "test",
  
  methods = fun (this) -> {
      DoThis = fun () -> console.log(this.D.Field2)
      DoThat = fun param -> console.log(param)
  },
  data = fun (this) -> fun () -> {
      Field1 = 1
      Field2 = "sdfs"
  }  
})

[alfonsogarciacaro]

Hmm, the plan is indeed to stay as close to Vue components as possible, but not necessarily imitating the syntax. Right now the proposed syntax ☝️ may be complicated in F# as it forces you to declare records for the methods, the data, the props, child components... the situation may change with the new anonymous records but we still need to see how they work in Fable.

The model-update(-view) pattern is not the whole Elmish (this would also include the dispatching, commands, subscriptions) but I think it's a simple structure for components that most of the people get very quickly. And it's nice to use a union type for the Vue methods in order to enable pattern matching to discriminate incoming messages.

In any case, this is the time to explore and see which API works best. So it can be a good idea to implement a couple of ways to write components and let users give their feedback :)

[Lanayx]

Thanks for the response!
My initiative of imitating syntax is based on the question - how will fable look like to vue developers? And with current implementation with messages, I feel that it looks quite unfamiliar for them and there are some problems as well:

1. Many times in vue components we don't use methods / state at all. Therefore I'd want to make each of them optional
2. Quite often you call one method from another, or method from hook, with DU you'll have to extract common function
3. Very often methods don't need parameters and don't mutate state, instead they mutate Vuex, while data is displayed also with Vuex and computed properties.