Skip to content

Commit 8cce804

Browse files
Move to Avalonia.Web and implement settings storage via JS interop
1 parent aa5b8bb commit 8cce804

23 files changed

+330
-305
lines changed

src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/App.razor

Lines changed: 0 additions & 10 deletions
This file was deleted.

src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/App.razor.cs

Lines changed: 0 additions & 16 deletions
This file was deleted.
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/* HTML styles for the splash screen */
2+
3+
.highlight {
4+
color: white;
5+
font-size: 2.5rem;
6+
display: block;
7+
}
8+
9+
.purple {
10+
color: #8b44ac;
11+
}
12+
13+
.icon {
14+
opacity: 0.05;
15+
height: 35%;
16+
width: 35%;
17+
position: absolute;
18+
background-repeat: no-repeat;
19+
right: 0px;
20+
bottom: 0px;
21+
margin-right: 3%;
22+
margin-bottom: 5%;
23+
z-index: 5000;
24+
background-position: right bottom;
25+
pointer-events: none;
26+
}
27+
28+
#avalonia-splash a {
29+
color: whitesmoke;
30+
text-decoration: none;
31+
}
32+
33+
.center {
34+
display: flex;
35+
justify-content: center;
36+
align-items: center;
37+
height: 100vh;
38+
}
39+
40+
#avalonia-splash {
41+
position: relative;
42+
height: 100%;
43+
width: 100%;
44+
color: whitesmoke;
45+
background: #1b2a4e;
46+
font-family: 'Nunito', sans-serif;
47+
background-position: center;
48+
background-size: cover;
49+
background-repeat: no-repeat;
50+
justify-content: center;
51+
align-items: center;
52+
}
53+
54+
.splash-close {
55+
animation: fadeout 0.25s linear forwards;
56+
}
57+
58+
@keyframes fadeout {
59+
0% {
60+
opacity: 100%;
61+
}
62+
63+
100% {
64+
opacity: 0;
65+
visibility: collapse;
66+
}
67+
}
Binary file not shown.
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Scalex - Guitar Toolkit</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<base href="/" />
9+
<link rel="modulepreload" href="./main.js" />
10+
<link rel="modulepreload" href="./dotnet.js" />
11+
<link rel="modulepreload" href="./avalonia.js" />
12+
<link rel="stylesheet" href="./app.css" />
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
</head>
15+
16+
<body style="margin: 0px; overflow: hidden">
17+
<div id="out">
18+
<div id="avalonia-splash">
19+
<div class="center">
20+
<h2 class="purple">
21+
Powered by
22+
<a class="highlight" href="https://www.avaloniaui.net/" target="_blank">Avalonia UI</a>
23+
</h2>
24+
</div>
25+
<img class="icon" src="Logo.svg" alt="Avalonia Logo" />
26+
</div>
27+
</div>
28+
<script type='module' src="./main.js"></script>
29+
</body>
30+
31+
</html>
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { dotnet } from './dotnet.js'
2+
import { registerAvaloniaModule } from './avalonia.js';
3+
4+
const is_browser = typeof window != "undefined";
5+
if (!is_browser) throw new Error(`Expected to be running in a browser`);
6+
7+
const dotnetRuntime = await dotnet
8+
.withDiagnosticTracing(false)
9+
.withApplicationArgumentsFromQuery()
10+
.create();
11+
12+
await registerAvaloniaModule(dotnetRuntime);
13+
14+
const config = dotnetRuntime.getConfig();
15+
16+
await dotnetRuntime.runMainAndExit(config.mainAssemblyName, [window.location.search]);
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export function setLocalStorageItem(name, value) {
2+
window.localStorage.setItem(name, value);
3+
}
4+
5+
export function getLocalStorageItem(name) {
6+
return window.localStorage.getItem(name) || '{}';
7+
};

src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Pages/Index.razor

Lines changed: 0 additions & 3 deletions
This file was deleted.
Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,34 @@
1-
using System;
2-
using System.Net.Http;
3-
using System.Threading.Tasks;
4-
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
5-
using Microsoft.Extensions.DependencyInjection;
1+
using Avalonia;
2+
using Avalonia.ReactiveUI;
3+
using Avalonia.Web;
4+
using Scalex.UI;
65
using Scalex.UI.Web;
6+
using System.Runtime.InteropServices.JavaScript;
7+
using System.Runtime.Versioning;
8+
using System.Threading.Tasks;
79

10+
[assembly: SupportedOSPlatform("browser")]
811

9-
public class Program
12+
internal partial class Program
1013
{
11-
public static async Task Main(string[] args)
14+
private static async Task Main(string[] args)
1215
{
13-
await CreateHostBuilder(args).Build().RunAsync();
16+
var appBuilder = await BuildAvaloniaApp();
17+
18+
appBuilder
19+
.UseReactiveUI()
20+
.SetupBrowserApp("out");
1421
}
1522

16-
public static WebAssemblyHostBuilder CreateHostBuilder(string[] args)
23+
public static async Task<AppBuilder> BuildAvaloniaApp()
1724
{
18-
var builder = WebAssemblyHostBuilder.CreateDefault(args);
19-
20-
builder.RootComponents.Add<App>("#app");
21-
22-
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
25+
await JSHost.ImportAsync("./store.js", "./store.js");
2326

24-
return builder;
27+
return AppBuilder.Configure<App>(() =>
28+
{
29+
var app = new App(new SettingsProvider());
30+
return app;
31+
});
2532
}
26-
}
27-
28-
29-
3033

34+
}
Lines changed: 13 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,21 @@
1-
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
2-
<PropertyGroup>
3-
<TargetFramework>net7.0</TargetFramework>
4-
<RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
5-
<WasmMainJSPath>main.js</WasmMainJSPath>
6-
<OutputType>Exe</OutputType>
7-
<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
8-
<MSBuildEnableWorkloadResolver>true</MSBuildEnableWorkloadResolver>
9-
<WasmBuildNative>true</WasmBuildNative>
10-
<EmccFlags>-sVERBOSE -sERROR_ON_UNDEFINED_SYMBOLS=0</EmccFlags>
11-
</PropertyGroup>
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
<PropertyGroup>
3+
<TargetFramework>net7.0</TargetFramework>
4+
<RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
5+
<WasmMainJSPath>AppBundle\main.js</WasmMainJSPath>
6+
<OutputType>Exe</OutputType>
7+
<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
8+
</PropertyGroup>
129

13-
<PropertyGroup Condition="'$(Configuration)'=='Release'">
14-
<RunAOTCompilation>true</RunAOTCompilation>
15-
<PublishTrimmed>true</PublishTrimmed>
16-
<TrimMode>full</TrimMode>
17-
<WasmBuildNative>true</WasmBuildNative>
18-
<InvariantGlobalization>true</InvariantGlobalization>
19-
<WasmEnableSIMD>true</WasmEnableSIMD>
20-
<EmccCompileOptimizationFlag>-O3</EmccCompileOptimizationFlag>
21-
<EmccLinkOptimizationFlag>-O3</EmccLinkOptimizationFlag>
22-
</PropertyGroup>
10+
<ItemGroup>
11+
<WasmExtraFilesToDeploy Include="AppBundle\**" />
12+
</ItemGroup>
2313

2414
<ItemGroup>
25-
<PackageReference Include="Avalonia.Skia" Version="11.0.0-preview3" />
26-
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0" />
27-
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0" PrivateAssets="all" />
28-
<PackageReference Include="Avalonia.Web.Blazor" Version="11.0.0-preview3" />
29-
<PackageReference Include="SkiaSharp" Version="2.88.3" />
30-
<PackageReference Include="SkiaSharp.NativeAssets.WebAssembly" Version="2.88.3" />
15+
<PackageReference Include="Avalonia.Web" Version="11.0.0-preview4" />
3116
</ItemGroup>
32-
17+
3318
<ItemGroup>
3419
<ProjectReference Include="..\Scalex.Avalonia.UI\Scalex.UI.csproj" />
3520
</ItemGroup>
36-
3721
</Project>
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
using Newtonsoft.Json;
2+
using Scalex.UI.ViewModels;
3+
4+
using System.Runtime.InteropServices.JavaScript;
5+
6+
namespace Scalex.UI.Web
7+
{
8+
public partial class SettingsProvider : IAppSettingsPprovider
9+
{
10+
public AppSettings LoadSettings()
11+
{
12+
var storedSettings = Interop.getLocalStorageItem("_scalexSettings");
13+
return JsonConvert.DeserializeObject<AppSettings>(storedSettings);
14+
}
15+
16+
public void SaveSettings(AppSettings settings)
17+
{
18+
var json = JsonConvert.SerializeObject(settings);
19+
Interop.setLocalStorageItem("_scalexSettings", json);
20+
}
21+
}
22+
23+
/// <summary>
24+
/// Implement JS interop to set/get local storage items
25+
/// </summary>
26+
internal static partial class Interop
27+
{
28+
public static string getLocalStorageItem(string name)
29+
{
30+
var value = _getLocalStorageItem(name);
31+
return value;
32+
}
33+
34+
public static void setLocalStorageItem(string name, string value)
35+
{
36+
_setLocalStorageItem(name, value);
37+
}
38+
39+
[JSImport("setLocalStorageItem", "./store.js")]
40+
internal static partial void _setLocalStorageItem(string name, string value);
41+
42+
[JSImport("getLocalStorageItem", "./store.js")]
43+
internal static partial string _getLocalStorageItem(string name);
44+
}
45+
}

src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Shared/MainLayout.razor

Lines changed: 0 additions & 7 deletions
This file was deleted.

src/Platforms/Scalex.Avalonia/Scalex.Avalonia.UI.Web/Shared/MainLayout.razor.css

Lines changed: 0 additions & 70 deletions
This file was deleted.

0 commit comments

Comments
 (0)