Merge pull request #47 from veloek/dev/js-module

Use JS modules

Author: ChrJohansen

Tevling/Pages/Statistics.razor

@@ -10,4 +10,3 @@
 </div><div class="d-flex flex-wrap p-2" >
     <canvas id="totalTimeChart"></canvas>
 </div>
-<script src="Pages/Statistics.razor.js"></script>

Tevling/Pages/Statistics.razor.cs

@@ -3,15 +3,15 @@
 
 namespace Tevling.Pages;
 
-public partial class Statistics : ComponentBase
+public partial class Statistics : ComponentBase, IAsyncDisposable
 {
     [Inject] private IJSRuntime Js { get; set; } = null!;
     [Inject] private IAuthenticationService AuthenticationService { get; set; } = null!;
     [Inject] private IActivityService ActivityService { get; set; } = null!;
 
     private Athlete _athlete = null!;
     private Activity[] _activities = [];
-
+    private IJSObjectReference? _module;
 
     protected override async Task OnInitializedAsync()
     {
@@ -55,6 +55,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
+            _module = await Js.InvokeAsync<IJSObjectReference>("import", "./Pages/Statistics.razor.js");
+
             List<int> lastThreeMonths =
             [
                 DateTimeOffset.Now.AddMonths(-2).Month,
@@ -70,24 +72,40 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 GetAggregatedMeasurementData(a => (float)a.Details.MovingTimeInSeconds / 3600);
 
 
-            await Js.InvokeVoidAsync(
+            await _module.InvokeVoidAsync(
                 "drawChart",
                 distancesLastThreeMonths,
                 lastThreeMonths.Select(m => CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(m)).ToList(),
                 "totalDistanceChart",
                 "Total Distance [m]");
-            await Js.InvokeVoidAsync(
+            await _module.InvokeVoidAsync(
                 "drawChart",
                 elevationLastThreeMonths,
                 lastThreeMonths.Select(m => CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(m)).ToList(),
                 "totalElevationChart",
                 "Total Elevation [m]");
-            await Js.InvokeVoidAsync(
+            await _module.InvokeVoidAsync(
                 "drawChart",
                 timeLastThreeMonths,
                 lastThreeMonths.Select(m => CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(m)).ToList(),
                 "totalTimeChart",
                 "Total Time [h]");
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        try
+        {
+            if (_module != null)
+            {
+                await _module.DisposeAsync();
+                _module = null;
+            }
+        }
+        catch (JSDisconnectedException)
+        {
+            // Ignore, happens during page reload.
+        }
+    }
 }

Tevling/Pages/Statistics.razor.js

@@ -1,4 +1,4 @@
-window.drawChart = function (activityData, labels, chartName, chartTitle) {
+export function drawChart (activityData, labels, chartName, chartTitle) {
     var ctx = document.getElementById(chartName).getContext('2d');
     var canvas = document.getElementById(chartName);