window resize service

current.js

import Debouncer from "./debouncer.js"

// 1. Sollte in der regel const sein statt var; Dies verhindert viele Probleme.
var resizeHandler;
var debouncer;
var dotNetReferences = [];


// 2. Ist diese Funktion angedacht mehrmals zu rufen oder einmal?
// Aktuell ist gemäss Code ein gemisch, dass nicht aufgeht.
// Mehr dazu weiter in den Kommentaren.
// Ich nehme an, dass diese Funktion nur einmal aufgerufen werden soll, da der WindowService ein Singleton ist.
export function init(dotNetReference) {
	// 3. Normalerweise initialisiert man diese bei der Deklaration.
	// Falls mehrmals diese Funktion aufgerufen wird, geht die ursprünglich initialisierte instanz "verloren".
    debouncer = new Debouncer(250);
	
	// 3. Normalerweise initialisiert man diese bei der Deklaration.
	// Falls mehrmals diese Funktion aufgerufen wird, geht die ursprünglich initialisierte instanzen "verloren".
    dotNetReferences = [];

    resizeHandler = {
        handleEvent: () => { resized(); }
    }

	// 4. Es wird beabsichtigt mehrere Refernzen zu dotnet zu unterstützen. 
	// Es gibt aber keine möglichkeit mehr als 1 Instanz hier hinzuzufügen.
	// Bei mehrmaligen aufruf von init() gehen die alten Referenzen "verloren" und können nicht mehr disposed werden später.
    dotNetReferences.push(dotNetReference);
    if (dotNetReferences.length === 1) {
        window.addEventListener("resize", resizeHandler);
    }
}

export function dispose(dotNetReference) {
    dotNetReferences = dotNetReferences.filter(r => r !== dotNetReference);

    if (dotNetReferences.length === 0) {
        window.removeEventListener("resize", resizeHandler);
    }
}

export function getDimensions() {
    return { width: window.innerWidth, height: window.innerHeight };
}

// ist es üblich so zu benennen? Sollten callbacks in Js-Welt nicht mit "on"-Präfixt werden?
function resized() {
    debouncer.debounce(() => debouncedResized());
}

// 5. Naming: Hier wird nichts debounced. Besser wäre etwas anders wie `notifyDimensionsToObserver`
function debouncedResized() {
    const dimensions = getDimensions();

    dotNetReferences.forEach(r => {
        r.invokeMethodAsync('OnWindowResize', dimensions);
    });
}

exception1.txt

blazor.webassembly.js?v=@@version:1 [ 10:24:34.356 FTL ]  Unhandled exception rendering component: Object reference not set to an instance of an object. 
 System.NullReferenceException: Object reference not set to an instance of an object.
   at Messerli.BlazorUi.Shared.JsModules.JsModule.<InvokeAsync>d__4`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, CancellationToken cancellationToken, Object[] args)
   at Messerli.BlazorUi.Services.WindowSize.WindowSizeServiceJsInterop.InitAsync(CancellationToken cancellationToken)
   at Messerli.BlazorUi.Services.WindowSize.WindowSizeService.InitAsync(CancellationToken cancellationToken)
   at Messerli.NakaOne.App.Frontend.Shared.Layouts.MainLayout.OnInitializedAsync() in D:\repos\NakaOne\NakaOne\App\App.Frontend\Shared\Layouts\MainLayout.razor.cs:line 93
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Messerli.NakaOne.App.BlazorComponents.Components.AutoDisposable.AutoDisposableComponentBase.SetParametersAsync(ParameterView parameters) in D:\repos\NakaOne\NakaOne\App\App.BlazorComponents\Components\AutoDisposable\AutoDisposableComponentBase.cs:line 40
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

exception2.txt

blazor.webassembly.js?v=@@version:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
   at Messerli.BlazorUi.Shared.JsModules.JsModule.<InvokeAsync>d__4`1[[Messerli.BlazorUi.Services.WindowSize.Rect, Messerli.BlazorUi, Version=0.33.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at Messerli.BlazorUi.Services.WindowSize.WindowSizeServiceJsInterop.GetDimensions(CancellationToken cancellationToken)
   at Messerli.BlazorUi.Services.WindowSize.WindowSizeService.GetDimensions(CancellationToken cancellationToken)
   at Messerli.BlazorUi.Services.ScreenCategories.ScreenCategoryService.Get(CancellationToken cancellationToken)
   at Messerli.NakaOne.App.BlazorComponents.Components.ViewSelector.OnInitializedAsync() in D:\repos\NakaOne\NakaOne\App\App.BlazorComponents\Components\ViewSelector.razor:line 125
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Messerli.NakaOne.App.BlazorComponents.Components.AutoDisposable.AutoDisposableComponentBase.SetParametersAsync(ParameterView parameters) in D:\repos\NakaOne\NakaOne\App\App.BlazorComponents\Components\AutoDisposable\AutoDisposableComponentBase.cs:line 40
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

refactored.js

// Weiteres;
// Besser wäre es eine Funktion aufzurufen, die als Resultat ein Objekt zurückgibt.
// Und dieses stateful-Objekt sollte später benutzt werden, um Funktion aufzurufen.
// Alternative wären die globalen variablen wie hier. Diese sollten dann aber gleich bei der Deklaration initialisiert werden.
// Man könnte also alles gleich initialisieren und dann lediglich eine Funktion anbieten,
// um die Observers zur Liste hinzuzufügen oder diese wieder zu entfernen. Ebenso eine Funktion zum Dimension zu holen,

// refactoredService.js
export function addDotNetObserver(dotNetReference, dotNetCallbackMethodName){}
export function removeDotNetObserver(dotNetReference){}
export function getDimensions(){}