♻️ Use Blazor Islands

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

@@ -7,6 +7,9 @@
     [EditorRequired]
     public Type ComponentType { get; set; }
 
+    [Parameter]
+    public WASMIsland.ClientLoadMode Client { get; set; } = WASMIsland.ClientLoadMode.Idle;
+
     private MarkupString beginBlazorWasmMarker;
     private MarkupString endBlazorWasmMarker;
     private IList<KeyValuePair<string,object>> load = new List<KeyValuePair<string, object>>();
@@ -22,7 +25,13 @@
 }
 @if(ChildContent != null)
 {
-    @beginBlazorWasmMarker
+    @if(Client != None) {
+        @(new MarkupString(@$"<div client={Client.ToString().ToLower()} blazekit-id=""{prerenderId}"">"));
+        @beginBlazorWasmMarker
+            @ChildContent
+        @endBlazorWasmMarker
+        @(new MarkupString($"</div>"));
+    } else {
         @ChildContent
-    @endBlazorWasmMarker
+    }
 }

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

@@ -0,0 +1,188 @@
+@code {
+
+    [Parameter]
+    public bool Interactive { get; set; } = true;
+
+    [Inject]
+    public Tools.IDevTools DevToolsData { get; set; } = default!;
+
+    private string view = "pages";
+
+    protected override async void OnInitialized() {
+        Console.WriteLine("DevTools.OnInitialized");
+        Console.WriteLine($"View: {view}");
+
+        if(!OperatingSystem.IsBrowser()) {
+            @* Routes.Clear(); *@
+            @* Routes = FindRoutes(); *@
+            @* Components = FindComponentsUsed(); *@
+            await InvokeAsync(StateHasChanged);
+        }
+
+    }
+
+    private void SetView(string view) {
+        this.view = view;
+        @* InvokeAsync(StateHasChanged); *@
+    }
+
+    private IList<string> FindRoutes()
+    {
+        var result = new List<string>();
+        var assemblies = AppDomain.CurrentDomain.GetAssemblies().Where(asm => !asm.FullName.StartsWith("Microsoft.") || !asm.FullName.StartsWith("System."));
+        foreach(var asm in assemblies) {
+            result.AddRange(
+            asm.GetExportedTypes()
+                .Select(t => {
+                    Console.WriteLine($"Looking for Routes in {t.Assembly.FullName}");
+                    return t;
+                })
+                .Where(t => t.GetCustomAttributes(typeof(RouteAttribute), true).Count() > 0)
+                .Select(t =>
+                {
+                    var route = t.GetCustomAttributes(typeof(RouteAttribute), true).FirstOrDefault() as RouteAttribute;
+                    return route!.Template;
+                })
+            );
+        }
+
+        return result;
+        @* return AppDomain.CurrentDomain.GetAssemblies()
+                .GetExportedTypes()
+                .Select(t => {
+                    Console.WriteLine($"Looking for Routes in {t.Assembly.FullName}");
+                    return t;
+                })
+                .Where(t => t.GetCustomAttributes(typeof(RouteAttribute), true).Count() > 0)
+                .Select(t =>
+                {
+                    var route = t.GetCustomAttributes(typeof(RouteAttribute), true).FirstOrDefault() as RouteAttribute;
+                    return route!.Template;
+                }).ToList(); *@
+
+    }
+
+    private IList<string> FindComponentsUsed()
+    {
+        var result = new List<string>();
+        @* var assemblies = AppDomain.CurrentDomain.GetAssemblies(); *@
+        var assemblies =
+            new DirectoryInfo(AppDomain.CurrentDomain.BaseDirectory).GetFiles("*.dll").ToList().Select(file => {
+                // load assembly for reflection only
+                var assembly = System.Reflection.Assembly.LoadFile(file.FullName);
+                return assembly;
+            });
+
+        foreach (var assembly in assemblies)
+        {
+            Console.WriteLine(assembly.FullName);
+            result.AddRange(
+                assembly
+                .GetExportedTypes()
+                .Where(t => t.IsClass)
+                @* .Where(t => t.BaseType.Name == "ComponentBase") *@
+                .Where(t => t.BaseType == (typeof(ComponentBase))  || t.BaseType.Name == "ReactiveComponentEnvelope")
+                .Select(t =>
+                {
+                    return $"{t.FullName}";
+                })
+            );
+        }
+       return result.Distinct().ToList();
+    }
+}
+<style>
+    /* define a css variable devtools-width */
+    :root {
+        --devtools-width: 80;
+    }
+    .devtools {
+        position: fixed;
+        left: 50%;
+        bottom: 0;
+    }
+
+    .devtools-button {
+
+        width: var(--devtools-width)px !important;
+        left: calc(var(--devtools-width) * 0.5px * -1);
+        position: relative;
+        height: var(--devtools-width)px !important;
+        padding: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        & img {
+            width: calc(var(--devtools-width) * 0.5px);
+            filter: invert(1);
+        }
+    }
+
+
+
+</style>
+<div data-permanent class="devtools">
+<script>
+    function toggleDevTools() {
+        const dialog = document.getElementById("devtools");
+        if(!dialog.open) {
+            dialog.showModal();
+        } else {
+            dialog.close();
+        }
+    }
+
+</script>
+<!-- Button to trigger the modal -->
+<button
+  data-target="devtools"
+  class="devtools-button"
+  onClick="toggleDevTools()">
+  <img src="./images/blazekit-logo.svg" alt="BlazeKit Logo" />
+  <span>🛠️</span>
+</button>
+
+<!-- Modal -->
+<dialog id="devtools">
+  <article>
+    <a href="#close"
+      aria-label="Close"
+      class="close"
+      data-target="modal-example"
+      onClick="toggleModal(event)">
+    </a>
+    <h3>BlazeKit DevTools</h3>
+    <p>
+      Use the DevTools to inspect the components and routes in your application.
+    </p>
+    <article>
+    <details>
+        <summary role="button">Routes</summary>
+        <ul>
+            @foreach (var route in DevToolsData.Routes())
+            {
+                <li><a href="@(route)">@route</a></li>
+            }
+        </ul>
+    </details>
+    <details>
+        <summary role="button">Components</summary>
+        <ul>
+            @foreach (var component in DevToolsData.Components())
+            {
+                <li>@component</li>
+            }
+        </ul>
+    </details>
+    </article>
+    <footer>
+      <button
+        @* role="button" *@
+        data-target="devtools"
+        onClick="toggleDevTools()">
+        Close
+      </button>
+    </footer>
+  </article>
+</dialog>
+</div>

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

@@ -4,7 +4,6 @@
 
     [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()
     {

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

@@ -1,8 +1,13 @@
-@* @inherits BlzInteractive *@
+@* @inherits WASMIsland *@
 @code {
     [Parameter] public int CurrentCount { get; set; }
 
-     private void IncrementCount()
+    public MyCounter()
+    {
+
+    }
+
+    private void IncrementCount()
     {
         CurrentCount++;
     }

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

@@ -0,0 +1,22 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Rendering;
+
+namespace BlazeKit.Website.Islands;
+
+public abstract class WASMIsland : ComponentBase
+{
+    [Parameter]
+    public ClientLoadMode Client { get; set; } = ClientLoadMode.Idle;
+
+    public WASMIsland()
+    {
+    }
+
+    public enum ClientLoadMode
+    {
+        Idle,
+        Hover,
+        Visible,
+        None
+    }
+}

src/BlazeKit.Website.Islands/DevTools/IDevTools.cs

@@ -0,0 +1,23 @@
+namespace BlazeKit.Tools;
+public interface IDevTools {
+
+    IList<string> Routes();
+    IList<string> Components();
+
+}
+
+public class DevToolsState : IDevTools {
+
+    private readonly IList<string> routes;
+    private readonly IList<string> components;
+
+    public DevToolsState(IList<string> routes, IList<string> components)
+    {
+        this.routes = routes;
+        this.components = components;
+    }
+
+    public IList<string> Routes() => routes;
+    public IList<string> Components() => components;
+
+}

src/BlazeKit.Website.Islands/_Imports.razor

@@ -10,4 +10,5 @@
 @using BlazeKit.Reactivity
 @using BlazeKit.Reactivity.Signals
 @using BlazeKit.Reactivity.Blazor
+@using static BlazeKit.Website.Islands.WASMIsland.ClientLoadMode;
 @using static Microsoft.AspNetCore.Components.Web.RenderMode

src/BlazeKit.Website/AppRouter.razor

@@ -1,3 +1,14 @@
+@code  {
+    [Inject]
+    public IHostEnvironment HostEnvironment { get; set; }
+}
+<WebAssemblyLoadProgress />
+@if(HostEnvironment.IsDevelopment())
+{
+    <BlzIsland Client="@(None)" ComponentType="@(typeof(DevTools))">
+        <DevTools />
+    </BlzIsland>
+}
 <Router AppAssembly="@typeof(Index).Assembly">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(Routes.Layout)" />

src/BlazeKit.Website/BlazeKit.Website.csproj

@@ -19,7 +19,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <None Include="..\BlazeKit.Website.Islands\Components\**\*.razor" Exclude="..\BlazeKit.Website.Islands\obj\**\*.razor;..\BlazeKit.Website.Islands\bin\**\*.razor;">
+    <None Include="..\BlazeKit.Website.Islands\Components\**\*.razor;..\BlazeKit.Website.Islands\Components\**\*.razor.cs" Exclude="..\BlazeKit.Website.Islands\obj\**\*.razor;..\BlazeKit.Website.Islands\bin\**\*.razor;">
       <Link>Components\Islands\%(RecursiveDir)/%(FileName)%(Extension)</Link>
     </None>
   </ItemGroup>

src/BlazeKit.Website/Components/WebAssemblyLoadProgress.razor

@@ -0,0 +1 @@
+<div id="blazor-loader" class="linear-progress"></div>

src/BlazeKit.Website/Index.razor

@@ -23,7 +23,15 @@
     <!--<link href="BlazeKit.Sample.styles.css" rel="stylesheet" />-->
     <link rel="stylesheet" href="css/highlightjs/default.min.css">
     <HeadOutlet />
-    <script src="_framework/blazor.web.js" autostart="true"></script>
+    @* <script src="_framework/blazor.web.js" autostart="true"></script> *@
+    <script src="_framework/blazekit.web.js" autostart="false"></script>
+    <script>
+         Blazor.start({
+                logLevel: 0
+            }).then((e) => {
+                console.log('Blazor started');
+            });
+    </script>
 </head>
 <body>
     <AppRouter />
@@ -33,6 +41,7 @@
     <script src="scripts/languages/cshtml-razor.min.js"></script>
     <script src="scripts/languages/shell.min.js"></script>
     <script>
+
         window.highlight = () => {
             hljs.highlightAll();
         }
@@ -46,7 +55,6 @@
             //console.log("Setting scroll position to " + x + ", " + y);
             window.scrollTo(x, y);
         }
-
         addEventListener('hashchange', event => {
             console.log('Fragment identifier or URL changed');
         });