Is there any chance of getting a hot-reloading designer?

[avestura]

Is there any approach that we can have a hot-reloading designer for the DSL-based view engine? If not, how much effort does it need to build one?

[JaggerJo]

Hey @0xAryan!

we were talking about something similar a while ago - but it was more about a live view during design time. Would love to have something like Apple has for SwiftUI.

I would like to work on tooling for FuncUI but I currently don't really have enough free time to really pull this off. I'm working on a Avalonia code editor control from time to time, but it in an early stage. I'm really thinking big here and might sound a bit crazy, I know 😁

Also Fabulous has some experimental hot-reloading, but I haven't had a chance to try it. Maybe this could be (easily) ported to also work with FuncUI.

Let me know if you have ideas on this. Would also be curious what your envisioned hot-reload/designer tool would look like. 😀

[smolck]

@JaggerJo What needs to be done to make this a reality? I'm happy to help where I can; this library is already really good, and hot-reloading would make it that much better!

[AngelMunoz]

@0xAryan @smolck @JaggerJo
do you know any resources on how to perform hot-reload on compiled languages?
Java, Flutter (though Flutter HMR could be using some sort of compile to js thing) or similar

I kind of get the overall idea in jsland but it would be nice if we could put some information together so we could see if someone (myself included) could take a jab and see what can be within reach and if nothing gets there at least we have resources for the next one trying

[Zaid-Ajaj]

Fabulous already does something similar by executing parts of the diffed code. I know the specifics by there has already been work done towards the same goal in there

[smolck]

@AngelMunoz Great idea! So I'm only somewhat (almost not at all) familiar with how hot-reload works in Dart/Flutter, but here's a really short "explanation" of how it works: https://flutter.dev/docs/development/tools/hot-reload#how-it-works

I'm not sure how useful looking into Flutter's hot-reload is though, since I recall the reason Flutter's hot-reload works as it does is because of Dart's VM, and I'm not sure if the same sort of implementations/ideas would work with .NET. I could be wrong about that though.

I wonder if F#'s scripting capabilities (F# Interactive) could make this fairly easy to implement? I'm not familiar with hot-reloading and how it works under the hood, but maybe that could potentially be useful since it doesn't really require a compilation step?

[smolck]

So I just found this, and after a quick glance it looks quite interesting. Not sure if it could be used for this in its current state (if at all), but it could be a great building block (or proof-of-concept) if nothing else: https://github.com/SvenEV/FsHotReloading

[AngelMunoz]

made some digs per @Zaid-Ajaj suggestion, I found some relevant projects/discussions from the Fabulous folks

https://github.com/fsprojects/Fabulous/issues?q=is%3Aissue+label%3Aa%2Fliveupdate+
humhei/FCSWatch#37
https://github.com/fsprojects/FSharp.Compiler.PortaCode
https://github.com/humhei/FCSWatch#from-cli

So I just found this, and after a quick glance it looks quite interesting. Not sure if it could be used for this in its current state (if at all), but it could be a great building block (or proof-of-concept) if nothing else: https://github.com/SvenEV/FsHotReloading

that's a pretty cool finding

[smolck]

@AngelMunoz Nice!

I've also found this file, which might be quite useful: https://github.com/fsprojects/Fabulous/blob/7ddc29cb2e7dddb9ff5ac151f29c475e4254e139/src/Fabulous.LiveUpdate/LiveUpdate.fs

I haven't really looked into it, but is that all that's needed to make the live update feature work? Because if so it shouldn't be too hard to port, right?

EDIT: There's also this section in the Fabulous docs which goes a bit into how the live update feature works: https://fsprojects.github.io/Fabulous/Fabulous.XamarinForms/tools.html#live-update

[smolck]

This is also interesting, but I can't seem to find a link to a repository for this project, so I"m not sure about it: https://www.nuget.org/packages/Elmish.HotReload.Bolero/0.1.4-preview-rc1

On another note, looking into the FsHotReloading library I posted earlier, to use that I think we'd need to put the view functions in a registry and read them from that in order to get the hot reloading. I think I'll try doing that with the counter example and see if I get anywhere with it.

[smolck]

Okay, so I'm now able to sense when the view changes. Now I just need a way to reload the window when that happens and I think I'll have really rough example of hot-reloading using FsHotReloading. Is there a way to reload the window using a Msg/Cmd or something in a subscription? Essentially just a way to re-call the view function, which I think should do it.

EDIT: Actually, I'm not sure. I think the problem is that I'm unable to get the new, updated view and render that instead of the old one. Hmm . . .

[smolck]

@AngelMunoz @0xAryan Okay, so this doesn't do a hot-reload, but it is a proof-of-concept which shows we can figure out when the file changes (and that hopefully we can tinker with and modify to actually work): https://gist.github.com/smolck/90dd6505f5a10bad174bace4dff0c27a

All we need to do is find a way to access the new view value after the file changes and render that instead of the old one and we'll have a working demo of hot-reloading (that would/will need a lot of polish to get an MVP, but it's a start).

[AngelMunoz]

Hey there going back, in the sample you provided it doesn't really work because the view needs to be re-evaluated every time the state changes then it is repainted, so it's trying to re-register the same View every time you click on the buttons.
I tried playing with it by wrapping the view function with another function but it doesn't seem to work either

I'll keep trying some approaches and see if I get something meaningful back in the next week or so

[JaggerJo]

https://github.com/worldbeater/Live.Avalonia

[AngelMunoz]

Made AvaloniaUI/Live.Avalonia#2 that should make it work for FuncUI projects as well (in case it gets merged) thanks @JaggerJo

the question here is how to retain state, the C# projects use the existing ViewModel in the DataContext property so they can just reuse the existing viewmodel
https://github.com/worldbeater/Live.Avalonia/blob/main/Live.Avalonia.Sample/App.xaml.cs#L36
window.DataContext ??= new AppViewModel();

not entirely sure how does that apply to FuncUI

[JaggerJo]

@AngelMunoz should be pretty simple as we only need to store the state and inject it into the new elmish program

[JordanMarr]

I was thinking about this the other day.
Looks like I wasn’t the only one.

Unfortunately, there doesn’t seem to be any utilities in Avalonia for serializing components back to xaml (unless i just missed it).

[SilkyFowl]

Has there been any progress on this Issue?
It seems that Live Preview is possible with the combination of FSharp.Analyzers.SDK and fsi.
I'm thinking of going in this direction if it hasn't been realized yet.

https://twitter.com/lululu63499233/status/1529066139451822081?t=juBLywhhi05FnWXC-ZNoUA&s=19

[JordanMarr]

Do it!!

[SilkyFowl]

The above video is in my personal experimental repository.
I would like to create an alpha version of the code by selecting only the parts related to LivePreview.

I think it would be challenging for me to develop a so-called HotReload that also reflects breakpoints, so I would like to go for the fs/fsx version of XAML Studio, which seems to be feasible at the present time.
Analyzers, on which LivePreview relies, will be updated.
I think it would be good to implement breakpoints, etc. after the next generation API specification is finalized.

EDIT:draft created. In the meantime, I will aim for an alpha version.

[JordanMarr]

Fantastic work! I’m really excited for this.

[SilkyFowl]

Thank you for your patience, I have completed the minimum implementation and would like to merge this PR and release it as v0.0.1-alpha.
It has been tested on Windows and Ubuntu (WSL) I'm wondering if it will work on a MacOS ......
https://github.com/SilkyFowl/Avalonia.FuncUI.LiveView/tree/v0.0.1

livepreview.mp4

[JordanMarr]

Thank you for your patience, I have completed the minimum implementation and would like to merge this PR and release it as v0.0.1-alpha. It has been tested on Windows and Ubuntu (WSL) I'm wondering if it will work on a MacOS ...... https://github.com/SilkyFowl/Avalonia.FuncUI.LiveView/tree/v0.0.1

livepreview.mp4

Ready to merge it as soon as you send a PR. 😃

[SilkyFowl]

It's clearly fatter than other analyzers: 😱

However, I can' t release it forever as it is, so I would like to make the diet an issue for v0.0.2...

[SilkyFowl]

I will merge the corresponding Issue in v0.0.2 or later when I compile it.
You can try it as written in the README.

https://github.com/SilkyFowl/Avalonia.FuncUI.LiveView/tree/v0.0.1

Ready to merge it as soon as you send a PR. 😃

@JordanMarr I would like to confirm, since my English is not good enough... Does it mean that I can PR LivePreview to this repository?

[JordanMarr]

I will merge the corresponding Issue in v0.0.2 or later when I compile it. You can try it as written in the README.

https://github.com/SilkyFowl/Avalonia.FuncUI.LiveView/tree/v0.0.1

Ready to merge it as soon as you send a PR. 😃

@JordanMarr I would like to confirm, since my English is not good enough... Does it mean that I can PR LivePreview to this repository?

I think I speak for everyone when I say that your LivePreview contribution would be very much appreciated! This is a huge feature that is much needed, and I am of the opinion that it should live in this repository.

Please feel free to make a PR wherever you are ready.

[SilkyFowl]

I think I speak for everyone when I say that your LivePreview contribution would be very much appreciated! This is a huge feature that is much needed, and I am of the opinion that it should live in this repository.

Please feel free to make a PR wherever you are ready.

Thank you very much. I am honored.
I have created it and found various issues, but I have decided that it is a v0.0.1-alpha that works at a minimum, so I have merged it.

https://github.com/SilkyFowl/Avalonia.FuncUI.LiveView

I will try to create a PR based on this, but it should be possible to run it by following the instructions in the README, so if you are interested, please give it a try.

[JordanMarr]

I tried to use LiveView with my https://github.com/JordanMarr/FSharp.ChordParser project, but I have not yet been able to get it to work. Issue has been created here.

[JordanMarr]

Closing this issue since we can now use the viewer by @SilkyFowl.