Preview panel

[JordanMarr]

I wonder what it would take to get the Avalonia preview panel to work with FuncUI. I'm assuming it must take in an xml string from the .axaml file. If it is possible to serialize a FuncUI hierarchy to XML, then maybe the Avalonia preview panel could be modified to natively work with FuncUI.

[JaggerJo]

Having the previewer work would be awesome, I have no idea what would be necessary tho.

Maybe @ForNeVeR could point us in the right direction here?

[ForNeVeR]

The current Avalonia Previewer works because XAML reload is possible. The same can't be said for the F# code, AFAIK.

But still, something's possible to do here. Maybe start from "auto-build + reload" approach?

Sorry, I am not so fluent in FuncUI, so something I say may be a bit off.

We'll need a way to identify a FuncUI component (for the IDE to say to the previewer "I want you to show a component name", and then some way (maybe a custom protocol command) for the previewer process to construct the aforementioned component.

The latter may very well reuse existing infrastructure in the Avalonia Previewer.

If these two basic requirements are met, then we'll be able to implement the preview in any IDE, using the existing Avalonia infrastructure. It won't work too fast (yet!), but it will be already something useful.

[ForNeVeR]

Auto-generating of a XAML file proposed by @JordanMarr is also an exciting idea. Avalonia Previewer already has a facility that accepts a XAML text and shows it in a preview window. Some small modifications to make it work without the initial XAML file, and I guess something better (than my initial proposal) may come out?

[JaggerJo]

Hey @ForNeVeR 👋

I think one important difference between XAML preview and F# preview is that one F# file often contains more than one component. I basically have a bare bones version of what you suggested (auto-build + reload) running - see my comment below.

[JaggerJo]

@JordanMarr I guess we'd need to build something on top of the Avalonia Designer Project.

We'd need to know the function (constrained by args/unit -> Component) to preview.

[JaggerJo]

Worked on a prototype this evening.

Pretty simple actually, the previewer app just watches a dll for changes, dotnet watch is then run form the application we want to see "live".

Untitled.mp4

(had to split the recoding)

Untitled.mp4

[JordanMarr]

Yeah, this totally needs to be a thing.

[JaggerJo]

It's "hacked in an hour" but here is the code if you want to try it

https://github.com/fsprojects/Avalonia.FuncUI/tree/live-view-experiments

[JordanMarr]

I tried it out. It does display the counter app! Very cool!
What are you doing to get the preview to refresh? Saving doesn't work, and building crashes.

I also tried it on Examples.ChordParser, but it was unable to load Elmish.dll.

[JaggerJo]

you need to 'dotnet watch build' the counter app

[edgarfgp]

Looks promising 😀. I wish we could preview iOS and android as well

[Numpsy]

Sounds interesting, I'll try to give it a go later

[fischgeek]

Looks great guys! Very excited for this!