Merge pull request #358 from AvaloniaCommunity/wasm-demo

Add a wasm demo which can be run in the browser

.github/workflows/deploy.yml

@@ -0,0 +1,71 @@
+name: Deploy demo to static pages
+
+on:
+    push:
+        branches:
+            - master
+            - wasm-demo
+
+env:
+    PUBLISH_DIR: Material.Avalonia.Demo.Browser/bin/Release/net8.0/browser-wasm/AppBundle/
+
+jobs:
+    # Build job
+    build:
+        name: "Builds a Material.Avalonia.Demo.Browser"
+        runs-on: ubuntu-latest
+        steps:
+            -   uses: actions/checkout@v3
+                with:
+                    fetch-depth: 0
+            -   uses: actions/setup-dotnet@v4
+                with:
+                    dotnet-version: 8
+            -   name: 'Cache: .nuke/temp, ~/.nuget/packages'
+                uses: actions/cache@v3
+                with:
+                    path: |
+                        .nuke/temp
+                        ~/.nuget/packages
+                    key: ${{ runner.os }}-${{ hashFiles('**/global.json', '**/*.csproj', '**/Directory.Packages.props') }}
+            -   name: 'Install workload: wasm-tools'
+                run: dotnet workload install wasm-tools
+            -   name: 'Publish Material.Avalonia.Demo.Browser'
+                run: dotnet publish Material.Avalonia.Demo.Browser/Material.Avalonia.Demo.Browser.csproj -c Release
+            -   name: Fix permissions
+                run: |
+                    chmod -c -R +rX "${{ env.PUBLISH_DIR }}" | while read line; do
+                      echo "::info title=Invalid file permissions automatically fixed::$line"
+                    done
+            -   name: Rewrite base href
+                uses: SteveSandersonMS/ghaction-rewrite-base-href@v1
+                with:
+                    html_path: ${{ env.PUBLISH_DIR }}/index.html
+                    base_href: /Material.Avalonia/
+            -   name: Upload Pages artifact
+                uses: actions/upload-pages-artifact@v3
+                with:
+                    path: ${{ env.PUBLISH_DIR }}
+
+    # Deploy job
+    deploy:
+        name: "Deploy Material.Avalonia.Demo.Browser to GitHub Pages"
+        # Add a dependency to the build job
+        needs: build
+
+        # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+        permissions:
+            pages: write      # to deploy to Pages
+            id-token: write   # to verify the deployment originates from an appropriate source
+
+        # Deploy to the github-pages environment
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+
+        # Specify runner + deployment step
+        runs-on: ubuntu-latest
+        steps:
+            -   name: Deploy to GitHub Pages
+                id: deployment
+                uses: actions/deploy-pages@v4 # or specific "vX.X.X" version tag for this action

Directory.Packages.props

@@ -15,13 +15,15 @@
     <PackageVersion Include="Avalonia.Controls.ItemsRepeater" Version="$(AvaloniaVersion)" />
     <PackageVersion Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
     <PackageVersion Include="Avalonia.Themes.Simple" Version="$(AvaloniaVersion)" />
+    <PackageVersion Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
+    <PackageVersion Include="Microsoft.NET.WebAssembly.Threading" Version="8.0.0" />
     <!--For Material.Styles-->
     <PackageVersion Include="System.Reactive" Version="6.0.0" />
     <PackageVersion Include="aqua.tool.polyfill.IsExternalInit" Version="2.2.9">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageVersion>
-    <!--For Material.Demo-->
+    <!--For Material.Avalonia.Demo-->
     <PackageVersion Include="Material.Icons.Avalonia" Version="2.0.1" />
     <PackageVersion Include="DialogHost.Avalonia" Version="0.7.6" />
     <PackageVersion Include="ShowMeTheXaml.Avalonia" Version="$(ShowMeTheXamlVersion)" />

Material.Avalonia.Demo.Browser/AppBundle/app.css

@@ -0,0 +1,74 @@
+:root {
+    --sat: env(safe-area-inset-top);
+    --sar: env(safe-area-inset-right);
+    --sab: env(safe-area-inset-bottom);
+    --sal: env(safe-area-inset-left);
+}
+
+/* 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;
+    }
+}

Material.Avalonia.Demo.Browser/AppBundle/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>AvaloniaCrossPlatformSample.Browser</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" />
+</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>

Material.Avalonia.Demo.Browser/AppBundle/main.js

@@ -0,0 +1,13 @@
+import { dotnet } from './dotnet.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();
+
+const config = dotnetRuntime.getConfig();
+
+await dotnetRuntime.runMain(config.mainAssemblyName, [window.location.search]);

Material.Avalonia.Demo.Browser/Material.Avalonia.Demo.Browser.csproj

@@ -0,0 +1,27 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
+    <WasmMainJSPath>AppBundle\main.js</WasmMainJSPath>
+    <OutputType>Exe</OutputType>
+    <GeneratePackageOnBuild>false</GeneratePackageOnBuild>
+    <IsPackable>false</IsPackable>
+
+    <RunAOTCompilation>true</RunAOTCompilation>
+    <WasmBuildNative>true</WasmBuildNative>
+
+    <AvaloniaVersion>11.0.9</AvaloniaVersion>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <WasmExtraFilesToDeploy Include="AppBundle\**"/>
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Avalonia.Browser"/>
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\Material.Avalonia.Demo\Material.Avalonia.Demo.csproj"/>
+  </ItemGroup>
+</Project>

Material.Avalonia.Demo.Browser/Program.cs

@@ -0,0 +1,18 @@
+using System.Runtime.Versioning;
+using System.Threading.Tasks;
+using Avalonia;
+using Avalonia.Browser;
+using Material.Avalonia.Demo;
+using ShowMeTheXaml;
+
+[assembly: SupportedOSPlatform("browser")]
+
+internal sealed partial class Program
+{
+    private static Task Main(string[] args) => BuildAvaloniaApp()
+        .StartBrowserAppAsync("out");
+
+    public static AppBuilder BuildAvaloniaApp()
+        => AppBuilder.Configure<App>()
+            .UseXamlDisplay();
+}

Material.Avalonia.Demo.Browser/Properties/launchSettings.json

@@ -0,0 +1,13 @@
+{
+  "profiles": {
+    "AvaloniaCrossPlatformSample.Browser": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:5001;http://localhost:5000",
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/debug?browser={browserInspectUri}"
+    }
+  }
+}

Material.Avalonia.Demo.Browser/runtimeconfig.template.json

@@ -0,0 +1,11 @@
+{
+  "wasmHostProperties": {
+    "perHostConfig": [
+      {
+        "name": "browser",
+        "html-path": "index.html",
+        "Host": "browser"
+      }
+    ]
+  }
+}

Material.Demo/Material.Demo.csproj → Material.Avalonia.Demo.Desktop/Material.Avalonia.Demo.Desktop.csproj

@@ -4,11 +4,9 @@
     <OutputType>WinExe</OutputType>
     <TargetFramework>net8.0</TargetFramework>
     <GeneratePackageOnBuild>false</GeneratePackageOnBuild>
-    <AvaloniaVersion>11.0.9</AvaloniaVersion>
     <IsPackable>false</IsPackable>
 
     <PublishAot>true</PublishAot>
-
     <IsTrimmable>true</IsTrimmable>
     <TrimMode>link</TrimMode>
     <!--These can help when debugging weird exceptions especially when reflection is involved. See https://github.com/dotnet/corert/blob/master/Documentation/using-corert/optimizing-corert.md -->
@@ -17,30 +15,15 @@
     <IlcGenerateStackTraceData Condition="'$(Configuration.toUpper())' != 'DEBUG'">false</IlcGenerateStackTraceData>
     <IlcDisableUnhandledExceptionExperience>true</IlcDisableUnhandledExceptionExperience>
     <StripSymbols Condition="'$(Configuration.toUpper())' != 'DEBUG'">true</StripSymbols>
+
+    <AvaloniaVersion>11.0.9</AvaloniaVersion>
   </PropertyGroup>
-
+  
   <ItemGroup>
-    <PackageReference Include="Avalonia.Controls.DataGrid"/>
     <PackageReference Include="Avalonia.Desktop"/>
-    <PackageReference Include="Avalonia.Diagnostics"/>
-    <PackageReference Include="Avalonia.Themes.Simple"/>
-    <PackageReference Include="Material.Icons.Avalonia"/>
-    <PackageReference Include="DialogHost.Avalonia"/>
-    <PackageReference Include="ShowMeTheXaml.Avalonia"/>
-    <PackageReference Include="ShowMeTheXaml.Avalonia.AvaloniaEdit"/>
-    <PackageReference Include="ShowMeTheXaml.Avalonia.Generator"/>
-  </ItemGroup>
-  <ItemGroup>
-    <ProjectReference Include="..\Material.Avalonia\Material.Avalonia.csproj"/>
-    <ProjectReference Include="..\Material.Avalonia.Dialogs\Material.Avalonia.Dialogs.csproj" />
-    <ProjectReference Include="..\Material.Avalonia.DataGrid\Material.Avalonia.DataGrid.csproj" />
   </ItemGroup>
 
   <ItemGroup>
-    <RuntimeHostConfigurationOption Include="MaterialThemeIncludeDataGrid" Value="true" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <AvaloniaResource Include="Assets\**"/>
+    <ProjectReference Include="..\Material.Avalonia.Demo\Material.Avalonia.Demo.csproj"/>
   </ItemGroup>
 </Project>

Material.Demo/Program.cs → Material.Avalonia.Demo.Desktop/Program.cs

@@ -1,5 +1,6 @@
 using System;
 using Avalonia;
+using Material.Avalonia.Demo;
 using ShowMeTheXaml;
 
 namespace Material.Demo {

Material.Demo/App.axaml → Material.Avalonia.Demo/App.axaml

@@ -6,7 +6,7 @@
              xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
              xmlns:grammars="clr-namespace:TextMateSharp.Grammars;assembly=TextMateSharp.Grammars"
              xmlns:avaloniaEdit="clr-namespace:ShowMeTheXaml.Avalonia.AvaloniaEdit;assembly=ShowMeTheXaml.Avalonia.AvaloniaEdit"
-             x:Class="Material.Demo.App">
+             x:Class="Material.Avalonia.Demo.App">
   <Application.Resources>
     <FontFamily x:Key="ContentControlThemeFontFamily">fonts:Inter#Inter, $Default</FontFamily>
   </Application.Resources>

Material.Avalonia.Demo/App.axaml.cs

@@ -0,0 +1,22 @@
+using Avalonia;
+using Avalonia.Controls.ApplicationLifetimes;
+using Avalonia.Markup.Xaml;
+
+namespace Material.Avalonia.Demo;
+
+public class App : Application {
+    public override void Initialize() {
+        AvaloniaXamlLoader.Load(this);
+    }
+
+    public override void OnFrameworkInitializationCompleted() {
+        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop) {
+            desktop.MainWindow = new MainWindow();
+        }
+        else if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewPlatform) {
+            singleViewPlatform.MainView = new MainView();
+        }
+
+        base.OnFrameworkInitializationCompleted();
+    }
+}