♻️ se Blazor WASM render mode

src/BlazeKit.Website.Islands/BlazeKit.Website.Islands.csproj

@@ -4,13 +4,19 @@
     <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
+    <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
+    <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
+    <CompilerGeneratedFilesOutputPath>.blazekit</CompilerGeneratedFilesOutputPath>
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.CustomElements" Version="8.0.1" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
     <ProjectReference Include="..\..\src\BlazeKit.Reactivity\BlazeKit.Reactivity.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="Components\MVVM\" />
+  </ItemGroup>
+
 </Project>

src/BlazeKit.Website.Islands/Components/BlzInteractive.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace BlazeKit.Website.Islands;
+
+[__PrivateComponentRenderModeAttribute]
+public abstract class BlzInteractive : ComponentBase
+{
+    public BlzInteractive()
+    { }
+
+    private sealed class __PrivateComponentRenderModeAttribute : global::Microsoft.AspNetCore.Components.RenderModeAttribute
+    {
+        private static global::Microsoft.AspNetCore.Components.IComponentRenderMode ModeImpl => RenderMode.InteractiveWebAssembly;
+        public override global::Microsoft.AspNetCore.Components.IComponentRenderMode Mode => ModeImpl;
+    }
+}

src/BlazeKit.Website.Islands/Components/Counter.razor

@@ -1,4 +1,5 @@
 @inherits ReactiveComponentEnvelope
+
 @code
 {
     private ISignal<string> text;

src/BlazeKit.Website.Islands/Components/HydratedComponent.razor

@@ -0,0 +1,23 @@
+@code {
+    [Parameter] required public RenderFragment SSG {get;set;}
+    [Parameter] required public RenderFragment CSR {get;set;}
+
+    [Inject] required public IJSRuntime jsRuntime {get;set;}
+
+    @* [Parameter] public BlazeKit.Islands.LoadOn LoadAt {get;set;} = BlazeKit.Islands.LoadOn.Hover; *@
+    private string id = "";
+    protected override async void OnInitialized()
+    {
+        if(!OperatingSystem.IsBrowser()) {
+            // generate SSG id for compoennt
+            id = Guid.NewGuid().ToString();
+        }
+    }
+
+}
+@if(!OperatingSystem.IsBrowser()) {
+    @* <div load-on="@LoadAt.ToString().ToLower()" blazekit-id="@id"> *@
+        @SSG
+    @* </div> *@
+}
+@CSR

src/BlazeKit.Website.Islands/Components/MVVM/Counter.razor

@@ -0,0 +1,26 @@
+@inherits ReactiveComponentEnvelope
+@code {
+    public Islands.Components.MVVM.VMCounter ViewModel { get; set; }
+
+    public Counter() { }
+
+    override protected void OnInitialized()
+    {
+        ViewModel = new Islands.Components.MVVM.VMCounter(this);
+    }
+
+    private MarkupString AsHtml(string code)
+    {
+        return new MarkupString(code);
+    }
+}
+@if(ViewModel == null) {
+    <p>Loading...</p>
+} else {
+    <article>
+        <p>Counter: @ViewModel.Counter.Value</p>
+        <p>Doubled: @ViewModel.Doubled.Value</p>
+        <button role="button" @onclick:preventDefault="true" @onclick="() => ViewModel.Increment()">Increment</button>
+        <button role="button" @onclick:preventDefault="true" @onclick="() => ViewModel.Decrement()">Decrement</button>
+    </article>
+}

src/BlazeKit.Website/Routes/Reactivity/MVVM/VMCounter.cs → src/BlazeKit.Website.Islands/Components/MVVM/VMCounter.cs

@@ -2,7 +2,7 @@
 using BlazeKit.Reactivity;
 using BlazeKit.Reactivity.Blazor;
 
-namespace BlazeKit.Site.Pages.Reactivity.MVVM
+namespace BlazeKit.Website.Islands.Components.MVVM
 {
     public sealed class VMCounter
     {

src/BlazeKit.Website.Islands/Components/MyCounter.razor

@@ -0,0 +1,12 @@
+@* @inherits BlzInteractive *@
+@code {
+    [Parameter] public int CurrentCount { get; set; }
+
+     private void IncrementCount()
+    {
+        CurrentCount++;
+    }
+}
+<h3>MyCounter</h3>
+<p>Current Count = @CurrentCount</p>
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

src/BlazeKit.Website.Islands/Components/MyCounter.razor.cs

@@ -0,0 +1,6 @@
+namespace BlazeKit.Website.Islands;
+
+public partial class MyCounter : BlzInteractive
+{
+
+}

src/BlazeKit.Website.Islands/_Imports.razor

@@ -10,3 +10,4 @@
 @using BlazeKit.Reactivity
 @using BlazeKit.Reactivity.Signals
 @using BlazeKit.Reactivity.Blazor
+@using static Microsoft.AspNetCore.Components.Web.RenderMode

src/BlazeKit.Website/AppRouter.razor

@@ -1,5 +1,3 @@
-@using BlazeKit.Site;
-@using BlazeKit.Site.Pages;
 <Router AppAssembly="@typeof(Index).Assembly">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(Routes.Layout)" />

src/BlazeKit.Website/BlazeKit.Website.csproj

@@ -8,17 +8,14 @@
     <CompilerGeneratedFilesOutputPath>.blazekit</CompilerGeneratedFilesOutputPath>
   </PropertyGroup>
 
-
   <ItemGroup>
-    <SupportedPlatform Include="browser" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.1" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.0" />
+    <!-- <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.1" /> -->
     <PackageReference Include="Markdig" Version="0.33.0" />
     <ProjectReference Include="..\..\src\BlazeKit.Reactivity\BlazeKit.Reactivity.csproj" />
     <ProjectReference Include="..\BlazeKit\BlazeKit.csproj" OutputItemType="Analyzer" ReferenceOutputAssembly="false" />
+    <ProjectReference Include="..\BlazeKit.Website.Islands\BlazeKit.Website.Islands.csproj" />
+    <ProjectReference Include="..\BlazeKit.Static\BlazeKit.Static.csproj" />
   </ItemGroup>
 
   <ItemGroup>
@@ -33,10 +30,6 @@
     <Watch Include="Routes/**/*.md" />
   </ItemGroup>
 
-  <ItemGroup>
-    <ProjectReference Include="..\BlazeKit.Website.Islands\BlazeKit.Website.Islands.csproj" />
-    <ProjectReference Include="..\BlazeKit.Static\BlazeKit.Static.csproj" />
-  </ItemGroup>
 
   <!-- <Target Name="SSG" AfterTargets="AfterPublish">
     <PropertyGroup>

src/BlazeKit.Website/Program.cs

@@ -18,25 +18,28 @@
 var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
-builder.Services.AddRazorComponents().AddInteractiveWebAssemblyComponents();
+builder.Services.AddRazorComponents()
+            .AddInteractiveWebAssemblyComponents();
 
 var app = builder.Build();
 // Configure the HTTP request pipeline.
-if (!app.Environment.IsDevelopment())
+if (app.Environment.IsDevelopment())
+{
+    app.UseWebAssemblyDebugging();
+}
+else
 {
     app.UseExceptionHandler("/Error", createScopeForErrors: true);
     // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
     app.UseHsts();
-} else {
-  app.UseWebAssemblyDebugging();
 }
-app.UseBlazorFrameworkFiles();
+// app.UseBlazorFrameworkFiles();
 
 app.UseHttpsRedirection();
-
 app.UseStaticFiles();
 app.UseAntiforgery();
 
-app.MapRazorComponents<BlazeKit.Website.Index>().AddInteractiveWebAssemblyRenderMode();
+app.MapRazorComponents<BlazeKit.Website.Index>()
+        .AddInteractiveWebAssemblyRenderMode();
 
 app.Run();

src/BlazeKit.Website/Properties/launchSettings.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+    "iisSettings": {
+      "windowsAuthentication": false,
+      "anonymousAuthentication": true,
+      "iisExpress": {
+        "applicationUrl": "http://localhost:45568",
+        "sslPort": 44379
+      }
+    },
+    "profiles": {
+      "http": {
+        "commandName": "Project",
+        "dotnetRunMessages": true,
+        "launchBrowser": true,
+        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+        "applicationUrl": "http://localhost:5000",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      },
+      "https": {
+        "commandName": "Project",
+        "dotnetRunMessages": true,
+        "launchBrowser": true,
+        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+        "applicationUrl": "https://localhost:7089;http://localhost:5001",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      },
+      "IIS Express": {
+        "commandName": "IISExpress",
+        "launchBrowser": true,
+        "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      }
+    }
+  }

src/BlazeKit.Website/Routes/Layouts/Page.md

@@ -1,14 +1,6 @@
 # 🖼️ File-based Layouts
 **BlazeKit** uses a file-based layout convention which is inspired by [SvelteKit](https/kit.svelte.dev). Again a huge shoutout to the svelte Team for the inspiration.
 
-<div>
-<!--Blazor:{"type":"webassembly","prerenderId":"a6352c03-e287-4367-b7b0-3252740b1477","key":{"locationHash":"cf243a98-9ca6-450a-8723-f31a73a08cc5","formattedComponentKey":""},"assembly":"BlazeKit.Website.Islands","typeName":"BlazeKit.Website.Islands.Components.Counter","parameterDefinitions":"W10=","parameterValues":"W10="}-->
-<BlazeKit.Website.Islands.Components.BlzIsland ComponentType="@(typeof(BlazeKit.Website.Islands.Components.Counter))">
-    <BlazeKit.Website.Islands.Components.Counter />
-</BlazeKit.Website.Islands.Components.BlzIsland>
-<!--Blazor:{"prerenderId":"a6352c03-e287-4367-b7b0-3252740b1477"}-->
-</div>
-
 ## Layout nesting
 Similar to the file-based routing, a layout can be defined in a folder by adding `Layout.razor` file.
 This file **needs to inherit** from **`LayoutComopentBase`**

src/BlazeKit.Website/Routes/Reactivity/Basic/Page.razor

@@ -10,11 +10,11 @@
     }
 }
 <h1>Basic</h1>
+
 <BlzIsland ComponentType="@(typeof(Counter))">
     <Counter />
 </BlzIsland>
 
-
 <h4>Code Example</h4>
 <pre>
 <code class="language-cshtml-razor">

src/BlazeKit.Website/Routes/Reactivity/MVVM/Page.razor

@@ -1,14 +1,4 @@
-@using BlazeKit.Site.Pages.Reactivity.MVVM
 @code {
-    public VMCounter ViewModel { get; set; }
-
-    public Page()
-    { }
-
-    override protected void OnInitialized()
-    {
-        ViewModel = new VMCounter(this);
-    }
 
     private MarkupString AsHtml(string code)
     {
@@ -17,12 +7,9 @@
 }
 <h1>Model View ViewModel</h1>
 <p>You can even use an MVVM pattern if you like 👍</p>
-<article>
-    <p>Counter: @ViewModel.Counter.Value</p>
-    <p>Doubled: @ViewModel.Doubled.Value</p>
-    <button role="button" @onclick:preventDefault="true" @onclick="() => ViewModel.Increment()">Increment</button>
-    <button role="button" @onclick:preventDefault="true" @onclick="() => ViewModel.Decrement()">Decrement</button>
-</article>
+<BlzIsland ComponentType="@(typeof(BlazeKit.Website.Islands.Components.MVVM.Counter))">
+    <BlazeKit.Website.Islands.Components.MVVM.Counter />
+</BlzIsland>
 <h3>Code Example</h3>
 <pre>
     <code class="language-cshtml-razor">

src/BlazeKit.Website/_Imports.razor

@@ -4,7 +4,6 @@
 @using Microsoft.AspNetCore.Components.Web
 @* @using Microsoft.AspNetCore.Components.WebAssembly.Http *@
 @using Microsoft.JSInterop
-@using BlazeKit.Site
 @using BlazeKit.Website.Components
 @using BlazeKit.Website
 @using BlazeKit.Website.Islands.Components

src/BlazeKit.Website/appsettings.Development.json

@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}

src/BlazeKit.Website/appsettings.json

@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}