Example for using derived Vars

[arminio]

I read this about derived Vars:

This can be useful to reduce boilerplate when implementing forms. You could zoom Var[MyFormState] into vars for every field and pass them down to the corresponding input components.

And this:

https://github.com/raquo/Airstream#derived-vars

It will be great to see a full working example in https://laminar.dev/examples. Is it possible to have a functioning example of the derived Vars functionality for/in a form (as stated above) please?

Points of confusion for me:

• Owner and how to obtain and manage its lifecycle
• how to use the zoom function

[raquo]

Heyo, I'll try to give you a head start but I'm too swamped to update the website right now. It would be nice to have such an example eventually, indeed.

So – if you have a component that uses derived vars, you want to get a reference to a suitable owner. 99% of the time that reference will come from an onMount* method, for example:

case class State(name: String, catchphrase: String)

def renderForm(owner: Owner): HtmlElement = {
  val rootVar = Var[State](initialState)
  val nameVar = rootVar.zoom(_.name)(newName => state.now().copy(name = newName))
  val phraseVar = rootVar.zoom(_.catchphrase)(newPhrase => state.now().copy(catchphrase = newPhrase))

  div(
    collectEvents(onSubmit.preventDefault)(_.flatMap(_ => AjaxEventStream.post(/* use rootVar.now() here if needed*/)) --> responseObserver/* (or Observer.empty)*/,
    input(controlled(onInput.mapToValue --> nameVar, value <-- nameVar)),
    input(controlled(onInput.mapToValue --> phraseVar, value <-- phraseVar))
  )
}

// Usage:

div(onMountInsert(ctx => renderForm(ctx.owner))

I also threw in controlled inputs and collectEvents in this example for good measure. Check the docs for those too.

Hope that helps. I'm rushing so there may be small typos. Lemme know if something's unclear.

For extra clarity, you don't really need derived vars most of the time. For example, here is similar logic without:

div(
    collectEvents(onSubmit.preventDefault)(_.flatMap(_ => AjaxEventStream.post(/* use rootVar.now() here if needed*/)) --> responseObserver/* (or Observer.empty)*/,
    input(controlled(
        onInput.mapToValue --> stateVar.updater((state, newName) => state.copy(name = newName)),
        value <-- stateVar.signal.map(_.name)
    )),
    ... // similarly for the catchphrase input
  )

DerivedVar-s are mostly just for convenience, nothing wrong with that but remember there's no magic to them.

[arminio]

That's exactly what I was looking for. Need to change my current form implementation using this to get a better feel for it.

Many thanks for your help @raquo!

[arminio]

Hi @raquo,

I finally got around to changing my implementation to use the zoom method. My code is much nicer now. Thanks for the help above.

btw, regarding an example for this, I was thinking that the Todo example you have is a perfect candidate for this approach. Perhaps we can keep the old way as it's also very useful for demonstrating another use case(contramap and observer) and have a new Todo example.

If you approve of this, I will try to implement it and raise a PR (laminar-examples)?

[raquo]

@arminio If you want to add to the laminar-examples repo, you're welcome to! Note – that repo doesn't get published to the website, but that also means it can have as many examples as we want.

[arminio]

I think that would be better if we published this example to the website. How can it be published to the website?

[raquo]

Examples for website are compiled using Scala mdoc library, and are located here: https://github.com/raquo/Laminar/tree/master/website/docs/examples. Running this locally is a bit more involved, see website/README.md

Is TodoMVC really the better example to showcase DerivedVar-s? It's a pretty big example, and bigger examples are harder to navigate and to understand (and that's especially annoying when it's based on another example you've already read, but different enough to be confusing).

I think a variation of the form state example will probably demonstrate DerivedVar usage just as well, in a smaller, easier to digest package.