Upgrade to dotnet 7 and latest MermaidJS

.github/workflows/main.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup .NET Core SDK
         uses: actions/[email protected]
         with:
-          dotnet-version: "5.0"
+          dotnet-version: "7.0"
 
       - run: dotnet tool install -g Microsoft.Web.LibraryManager.Cli
       - run: |

.gitignore

@@ -351,3 +351,6 @@ MigrationBackup/
 
 # Client-Side Libraries
 **/wwwroot/lib/
+
+# vscode
+.vscode/

demo/MermaidJS.Blazor.Demo/MermaidJS.Blazor.Demo.csproj

@@ -1,13 +1,15 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
+    <TargetFramework>net7.0</TargetFramework>
+    <Nullable>disable</Nullable>
+		<ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />
-    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.10" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.10" PrivateAssets="all" />
+    <PackageReference Include="System.Net.Http.Json" Version="7.0.1" />
   </ItemGroup>
 
   <ItemGroup>

demo/MermaidJS.Blazor.Demo/Program.cs

@@ -1,32 +1,16 @@
-using System;
-using System.Collections.Generic;
-using System.Net.Http;
-using System.Text;
-using System.Threading.Tasks;
-
+using MermaidJS.Blazor;
+using MermaidJS.Blazor.Demo;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using Microsoft.Extensions.Configuration;
-using Microsoft.Extensions.DependencyInjection;
-using Microsoft.Extensions.Logging;
 
-namespace MermaidJS.Blazor.Demo
-{
-    public class Program
-    {
-        public static async Task Main(string[] args)
-        {
-            var builder = WebAssemblyHostBuilder.CreateDefault(args);
-            builder.RootComponents.Add<App>("#app");
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add<App>("#app");
 
-            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
-            builder.Services.AddMermaidJS(options =>
-            {
-                options.MaxTextSize = 100000;
-                options.SecurityLevel = MermaidSecurityLevels.Loose;
-            });
+builder.Services.AddMermaidJS(options =>
+{
+    options.MaxTextSize = 100000;
+    options.SecurityLevel = MermaidSecurityLevels.Loose;
+});
 
-            await builder.Build().RunAsync();
-        }
-    }
-}
+await builder.Build().RunAsync();

src/MermaidJS.Blazor/Extensions/IServiceCollectionExtensions.cs

@@ -1,10 +1,11 @@
-using System;
-
-using MermaidJS.Blazor;
+using MermaidJS.Blazor;
 using MermaidJS.Blazor.Internal;
 
 namespace Microsoft.Extensions.DependencyInjection
 {
+    /// <summary>
+    /// MermaidJS service collection extensions
+    /// </summary>
     public static class IServiceCollectionExtensions
     {
         /// <summary>

src/MermaidJS.Blazor/Internal/MermaidDiagramInterop.cs

@@ -1,20 +1,15 @@
-using System;
-using System.Threading.Tasks;
-
-using Microsoft.Extensions.Options;
+using Microsoft.Extensions.Options;
 using Microsoft.JSInterop;
 
 namespace MermaidJS.Blazor.Internal
 {
     internal class MermaidDiagramInterop
     {
-        private readonly IJSRuntime _jsRuntime;
         private readonly IOptionsSnapshot<MermaidOptions> _mermaidOptions;
         private readonly Lazy<Task<IJSObjectReference>> _jsModule;
 
         public MermaidDiagramInterop(IJSRuntime jsRuntime, IOptionsSnapshot<MermaidOptions> mermaidOptions)
         {
-            _jsRuntime = jsRuntime;
             _mermaidOptions = mermaidOptions;
             _jsModule = new(() => jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/MermaidJS.Blazor/MermaidDiagramInterop.js").AsTask());
         }

src/MermaidJS.Blazor/MermaidJS.Blazor.csproj

@@ -1,8 +1,9 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
+    <TargetFramework>net7.0</TargetFramework>
     <Nullable>enable</Nullable>
+		<ImplicitUsings>enable</ImplicitUsings>
     <Authors>JoshJohnson, TrueCommercePSG</Authors>
     <Company>TrueCommerce, Inc</Company>
     <Product>MermaidJS.Blazor</Product>
@@ -17,7 +18,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="5.0.7" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.10" />
   </ItemGroup>
 
 </Project>

src/MermaidJS.Blazor/MermaidOptions.cs

@@ -1,7 +1,4 @@
-using System.Collections.Generic;
-using System.Linq;
-
-namespace MermaidJS.Blazor
+namespace MermaidJS.Blazor
 {
     /// <summary>
     /// Options used when initializing MermaidJS.
@@ -39,7 +36,7 @@ public class MermaidOptions
         public string SecurityLevel { get; set; } = "strict";
 
         /// <summary>
-        /// Dictates whether mermaind starts on Page load.
+        /// Dictates whether mermaid starts on Page load.
         /// </summary>
         public bool StartOnLoad { get; set; } = true;
 

src/MermaidJS.Blazor/libman.json

@@ -3,7 +3,7 @@
   "defaultProvider": "cdnjs",
   "libraries": [
     {
-      "library": "mermaid@8.13.2",
+      "library": "mermaid@10.3.0",
       "destination": "wwwroot/lib/mermaid"
     }
   ]

src/MermaidJS.Blazor/wwwroot/MermaidDiagramInterop.js

@@ -9,7 +9,7 @@
                 script.async = false;
                 script.defer = false;
                 script.onload = () => {
-                    window.mermaid.mermaidAPI.initialize(window.mermaidDiagramBlazorOptions);
+                    window.mermaid.initialize(window.mermaidDiagramBlazorOptions);
 
                     resolve();
                 };
@@ -52,14 +52,15 @@ export function beginRender(componentId, definition) {
             return;
         }
 
+        if (!definition) {
+            return;
+        }
+
         try {
-            window.mermaid.mermaidAPI.render(`${componentId}-svg`, definition, (svg, bind) => {
+            mermaid.render(`${componentId}-svg`, definition).then(({ svg, bindFunctions }) => {
                 const host = document.getElementById(componentId);
-
                 host.innerHTML = svg;
-
-                bind(host);
-
+                bindFunctions?.(host);
                 componentRef.invokeMethodAsync("OnRenderCompleted");
             });
         }