Started to implement LivePreview

.vscode/launch.json

@@ -0,0 +1,43 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "FunUI Launch",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            "program": "${workspaceFolder}/ChordParser.UI/bin/Debug/net6.0/ChordParser.UI.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}",
+            "console": "internalConsole",
+            "stopAtEntry": false,
+            "linux": {
+                "env": {
+                    "LANG": "en_US.UTF-8"
+                }
+            }
+        },
+        {
+            "name": "FuncUI Launch(Live Preview)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            "program": "${workspaceFolder}/ChordParser.UI/bin/Debug/net6.0/ChordParser.UI.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}",
+            "console": "internalConsole",
+            "stopAtEntry": false,
+
+            "env": {
+                "LANG": "en_US.UTF-8",
+                "FUNCUI_LIVEPREVIEW": "1"
+            },
+            "linux": {
+                "env": {
+                    "LANG": "en_US.UTF-8",
+                    "FUNCUI_LIVEPREVIEW": "1"
+                }
+            }
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "FSharp.enableAnalyzers": true,
+    "FSharp.analyzersPath": [
+        "packages/analyzers"
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,14 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "msbuild",
+            "problemMatcher": [
+                "$msCompile"
+            ],
+            "group": "build",
+            "label": "build",
+            "detail": "Build fsproj project using dotnet build"
+        }
+    ]
+}

ChordParser.UI/ChordParser.UI.fsproj

@@ -12,16 +12,13 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="JaggerJo.Avalonia.FuncUI.DSL" Version="0.5.0" />
+    <PackageReference Include="JaggerJo.Avalonia.FuncUI.DSL" Version="0.5.3" />
     <PackageReference Include="JaggerJo.Avalonia.FuncUI.Elmish" Version="0.5.0" />
+    <PackageReference Include="SilkyFowl.Avalonia.FuncUI.LiveView" Version="0.0.1-alpha2" />
   </ItemGroup>
 
   <ItemGroup>
     <ProjectReference Include="..\ChordParser\ChordParser.fsproj" />
   </ItemGroup>
 
-  <ItemGroup>
-    <PackageReference Update="FSharp.Core" Version="6.0.3" />
-  </ItemGroup>
-
 </Project>

ChordParser.UI/ChordParserView.fs

@@ -7,6 +7,7 @@ open Avalonia.FuncUI.DSL
 open Avalonia.FuncUI.AvaloniaExtensions
 open Avalonia.FuncUI.Types
 open Avalonia.FuncUI.Elmish.ElmishHook
+open Avalonia.FuncUI.LiveView.Core.Types
 
 type Model = 
     { 
@@ -57,7 +58,8 @@ let update msg model =
     | Reset ->
         init
 
-let cmp () = Component (fun ctx ->
+[<LivePreview>]
+let render () = Component (fun ctx ->
     let model, dispatch = ctx.useElmish (init, update)
 
     Grid.create [
@@ -182,4 +184,4 @@ let cmp () = Component (fun ctx ->
         ]
     ]
     :> IView
-)
+)

ChordParser.UI/Program.fs

@@ -3,12 +3,28 @@ open Avalonia.Themes.Fluent
 open Avalonia.FuncUI.Hosts
 open Avalonia.Controls.ApplicationLifetimes
 open ChordParser.UI
+open Avalonia.FuncUI.LiveView
+open Avalonia.Controls
 
-type MainWindow() =
+module LiveView =
+    [<Literal>]
+    let FUNCUI_LIVEPREVIEW = "FUNCUI_LIVEPREVIEW"
+
+    let enabled =
+        match System.Environment.GetEnvironmentVariable FUNCUI_LIVEPREVIEW with
+        | null -> false
+        | "1" -> true
+        | _ -> false
+
+type MainWindow() as this =
     inherit HostWindow()
     do
         base.Title <- "Chord Parser"
-        base.Content <- ChordParserView.cmp ()
+        base.Content <- ChordParserView.render ()
+
+#if DEBUG
+        this.AttachDevTools()
+#endif
 
 type App() =
     inherit Application()
@@ -19,9 +35,11 @@ type App() =
     override this.OnFrameworkInitializationCompleted() =
         match this.ApplicationLifetime with
         | :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
-            let mainWindow = MainWindow()
-            mainWindow.Show()
-            desktopLifetime.MainWindow <- mainWindow
+            desktopLifetime.MainWindow <-
+                if LiveView.enabled then
+                    LiveViewWindow() :> Window
+                else
+                    MainWindow()
         | _ -> ()
 
 module Program =