Move to Avalonia.Web and implement settings storage via JS interop

webprofusion · Jan 16, 2023 · 8cce804 · 8cce804
1 parent aa5b8bb
commit 8cce804
Show file tree

Hide file tree

Showing 23 changed files with 330 additions and 305 deletions.
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/App.razor b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/App.razor
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/App.razor.cs b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/App.razor.cs
diff --git a/...a/Scalex.Avalonia.UI.Web/wwwroot/Logo.svg → ...Scalex.Avalonia.UI.Web/AppBundle/Logo.svg b/...a/Scalex.Avalonia.UI.Web/wwwroot/Logo.svg → ...Scalex.Avalonia.UI.Web/AppBundle/Logo.svg
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/AppBundle/app.css b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/AppBundle/app.css
@@ -0,0 +1,67 @@
+/* HTML styles for the splash screen */
+
+.highlight {
+    color: white;
+    font-size: 2.5rem;
+    display: block;
+}
+
+.purple {
+    color: #8b44ac;
+}
+
+.icon {
+    opacity: 0.05;
+    height: 35%;
+    width: 35%;
+    position: absolute;
+    background-repeat: no-repeat;
+    right: 0px;
+    bottom: 0px;
+    margin-right: 3%;
+    margin-bottom: 5%;
+    z-index: 5000;
+    background-position: right bottom;
+    pointer-events: none;
+}
+
+#avalonia-splash a {
+    color: whitesmoke;
+    text-decoration: none;
+}
+
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+#avalonia-splash {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    color: whitesmoke;
+    background: #1b2a4e;
+    font-family: 'Nunito', sans-serif;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    justify-content: center;
+    align-items: center;
+}
+
+.splash-close {
+    animation: fadeout 0.25s linear forwards;
+}
+
+@keyframes fadeout {
+    0% {
+        opacity: 100%;
+    }
+
+    100% {
+        opacity: 0;
+        visibility: collapse;
+    }
+}
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/AppBundle/favicon.ico b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/AppBundle/favicon.ico
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/AppBundle/index.html b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/AppBundle/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Scalex - Guitar Toolkit</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <base href="/" />
+    <link rel="modulepreload" href="./main.js" />
+    <link rel="modulepreload" href="./dotnet.js" />
+    <link rel="modulepreload" href="./avalonia.js" />
+    <link rel="stylesheet" href="./app.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+</head>
+
+<body style="margin: 0px; overflow: hidden">
+    <div id="out">
+        <div id="avalonia-splash">
+            <div class="center">
+                <h2 class="purple">
+                    Powered by
+                    <a class="highlight" href="https://www.avaloniaui.net/" target="_blank">Avalonia UI</a>
+                </h2>
+            </div>
+            <img class="icon" src="Logo.svg" alt="Avalonia Logo" />
+        </div>
+    </div>
+    <script type='module' src="./main.js"></script>
+</body>
+
+</html>
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/AppBundle/main.js b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/AppBundle/main.js
@@ -0,0 +1,16 @@
+import { dotnet } from './dotnet.js'
+import { registerAvaloniaModule } from './avalonia.js';
+
+const is_browser = typeof window != "undefined";
+if (!is_browser) throw new Error(`Expected to be running in a browser`);
+
+const dotnetRuntime = await dotnet
+    .withDiagnosticTracing(false)
+    .withApplicationArgumentsFromQuery()
+    .create();
+
+await registerAvaloniaModule(dotnetRuntime);
+
+const config = dotnetRuntime.getConfig();
+
+await dotnetRuntime.runMainAndExit(config.mainAssemblyName, [window.location.search]);
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/AppBundle/store.js b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/AppBundle/store.js
@@ -0,0 +1,7 @@
+export function setLocalStorageItem(name, value) {
+	window.localStorage.setItem(name, value);
+}
+
+export function getLocalStorageItem(name) {
+	return window.localStorage.getItem(name) || '{}';
+};
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Pages/Index.razor b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Pages/Index.razor
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Program.cs b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Program.cs
@@ -1,30 +1,34 @@
-using System;
-using System.Net.Http;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using Microsoft.Extensions.DependencyInjection;
+using Avalonia;
+using Avalonia.ReactiveUI;
+using Avalonia.Web;
+using Scalex.UI;
 using Scalex.UI.Web;
+using System.Runtime.InteropServices.JavaScript;
+using System.Runtime.Versioning;
+using System.Threading.Tasks;
 
+[assembly: SupportedOSPlatform("browser")]
 
-public class Program
+internal partial class Program
 {
-    public static async Task Main(string[] args)
+    private static async Task Main(string[] args)
     {
-        await CreateHostBuilder(args).Build().RunAsync();
+        var appBuilder = await BuildAvaloniaApp();
+
+        appBuilder
+            .UseReactiveUI()
+            .SetupBrowserApp("out");
     }
 
-    public static WebAssemblyHostBuilder CreateHostBuilder(string[] args)
+    public static async Task<AppBuilder> BuildAvaloniaApp()
     {
-        var builder = WebAssemblyHostBuilder.CreateDefault(args);
-
-        builder.RootComponents.Add<App>("#app");
-
-        builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+        await JSHost.ImportAsync("./store.js", "./store.js");
 
-        return builder;
+        return AppBuilder.Configure<App>(() =>
+        {
+            var app = new App(new SettingsProvider());
+            return app;
+        });
     }
-}
-
-
-
 
+}
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Scalex.UI.Web.csproj b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Scalex.UI.Web.csproj
@@ -1,37 +1,21 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
-	<PropertyGroup>
-		<TargetFramework>net7.0</TargetFramework>
-		<RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
-		<WasmMainJSPath>main.js</WasmMainJSPath>
-		<OutputType>Exe</OutputType>
-		<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
-		<MSBuildEnableWorkloadResolver>true</MSBuildEnableWorkloadResolver>
-		<WasmBuildNative>true</WasmBuildNative>
-		<EmccFlags>-sVERBOSE -sERROR_ON_UNDEFINED_SYMBOLS=0</EmccFlags>
-	</PropertyGroup>
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <TargetFramework>net7.0</TargetFramework>
+    <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
+    <WasmMainJSPath>AppBundle\main.js</WasmMainJSPath>
+    <OutputType>Exe</OutputType>
+	<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
+  </PropertyGroup>
 
-	<PropertyGroup Condition="'$(Configuration)'=='Release'">
-		<RunAOTCompilation>true</RunAOTCompilation>
-		<PublishTrimmed>true</PublishTrimmed>
-		<TrimMode>full</TrimMode>
-		<WasmBuildNative>true</WasmBuildNative>
-		<InvariantGlobalization>true</InvariantGlobalization>
-		<WasmEnableSIMD>true</WasmEnableSIMD>
-		<EmccCompileOptimizationFlag>-O3</EmccCompileOptimizationFlag>
-		<EmccLinkOptimizationFlag>-O3</EmccLinkOptimizationFlag>
-	</PropertyGroup>
+  <ItemGroup>
+    <WasmExtraFilesToDeploy Include="AppBundle\**" />
+  </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Avalonia.Skia" Version="11.0.0-preview3" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0" PrivateAssets="all" />
-    <PackageReference Include="Avalonia.Web.Blazor" Version="11.0.0-preview3" />
-    <PackageReference Include="SkiaSharp" Version="2.88.3" />
-    <PackageReference Include="SkiaSharp.NativeAssets.WebAssembly" Version="2.88.3" />
+    <PackageReference Include="Avalonia.Web" Version="11.0.0-preview4" />
   </ItemGroup>
-  
+
   <ItemGroup>
     <ProjectReference Include="..\Scalex.Avalonia.UI\Scalex.UI.csproj" />
   </ItemGroup>
-
 </Project>
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/SettingsProvider.cs b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/SettingsProvider.cs
@@ -0,0 +1,45 @@
+using Newtonsoft.Json;
+using Scalex.UI.ViewModels;
+
+using System.Runtime.InteropServices.JavaScript;
+
+namespace Scalex.UI.Web
+{
+    public partial class SettingsProvider : IAppSettingsPprovider
+    {
+        public AppSettings LoadSettings()
+        {
+            var storedSettings = Interop.getLocalStorageItem("_scalexSettings");
+            return JsonConvert.DeserializeObject<AppSettings>(storedSettings);
+        }
+
+        public void SaveSettings(AppSettings settings)
+        {
+            var json = JsonConvert.SerializeObject(settings);
+            Interop.setLocalStorageItem("_scalexSettings", json);
+        }
+    }
+
+    /// <summary>
+    /// Implement JS interop to set/get local storage items
+    /// </summary>
+    internal static partial class Interop
+    {
+        public static string getLocalStorageItem(string name)
+        {
+            var value = _getLocalStorageItem(name);
+            return value;
+        }
+
+        public static void setLocalStorageItem(string name, string value)
+        {
+            _setLocalStorageItem(name, value);
+        }
+
+        [JSImport("setLocalStorageItem", "./store.js")]
+        internal static partial void _setLocalStorageItem(string name, string value);
+
+        [JSImport("getLocalStorageItem", "./store.js")]
+        internal static partial string _getLocalStorageItem(string name);
+    }
+}
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Shared/MainLayout.razor b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Shared/MainLayout.razor
diff --git a/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Shared/MainLayout.razor.css b/src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Shared/MainLayout.razor.css