Splitter: fix dispose logic (#6170)

* Splitter: fix dispose logic

* auto generate id

Author: stsrki

Source/Extensions/Blazorise.Splitter/JSSplitModule.cs

@@ -1,15 +1,18 @@
-using System.Collections.Generic;
+#region Using directives
+using System.Collections.Generic;
 using System.Threading.Tasks;
 using Blazorise.Modules;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
+#endregion
 
 namespace Blazorise.Splitter;
 
 /// <summary>
 /// Default implementation of the splitter JS module.
 /// </summary>
-public class JSSplitModule : BaseJSModule
+public class JSSplitModule : BaseJSModule,
+    IJSDestroyableModule
 {
     #region Constructor
 
@@ -30,12 +33,21 @@ public JSSplitModule( IJSRuntime jsRuntime, IVersionProvider versionProvider, Bl
     /// <summary>
     /// Initializes a new splitter instance.
     /// </summary>
+    /// <param name="elementId">Id of the splitter element.</param>
+    /// <param name="elementRef">Reference to the splitter element.</param>
     /// <param name="sectionElementRefs">Sections of the splitter.</param>
     /// <param name="splitterOptions">Splitter configuration options.</param>
     /// <param name="splitterGutterOptions">Gutter configuration options</param>
     /// <returns>A <see cref="IJSObjectReference"/> to the Splitter object.</returns>
-    public virtual ValueTask<IJSObjectReference> InitializeSplitter( IEnumerable<ElementReference> sectionElementRefs, SplitterOptions splitterOptions, SplitterGutterOptions splitterGutterOptions )
-        => InvokeSafeAsync<IJSObjectReference>( "initializeSplitter", sectionElementRefs, splitterOptions, splitterGutterOptions );
+    public virtual ValueTask InitializeSplitter( ElementReference elementRef, string elementId, IEnumerable<ElementReference> sectionElementRefs, SplitterOptions splitterOptions, SplitterGutterOptions splitterGutterOptions )
+    {
+        return InvokeSafeVoidAsync( "initializeSplitter", elementRef, elementId, sectionElementRefs, splitterOptions, splitterGutterOptions );
+    }
+
+    public virtual ValueTask Destroy( ElementReference elementRef, string elementId )
+    {
+        return InvokeSafeVoidAsync( "destroy", elementRef, elementId );
+    }
 
     #endregion
 

Source/Extensions/Blazorise.Splitter/Splitter.razor.cs

@@ -80,24 +80,13 @@ protected override async Task OnAfterRenderAsync( bool firstRender )
     /// <inheritdoc/>
     protected override async ValueTask DisposeAsync( bool disposing )
     {
-        if ( disposing )
+        if ( disposing && Rendered )
         {
-            if ( JSSplitInstance is not null )
+            if ( JSModule is not null )
             {
-                var task = JSSplitInstance.InvokeVoidAsync( "destroy" );
+                await JSModule.SafeDestroy( ElementRef, ElementId );
 
-                try
-                {
-                    await task;
-                }
-                catch when ( task.IsCanceled )
-                {
-                }
-                catch ( Microsoft.JSInterop.JSDisconnectedException )
-                {
-                }
-
-                await JSSplitInstance.DisposeAsync();
+                await JSModule.SafeDisposeAsync();
             }
         }
 
@@ -163,12 +152,11 @@ private async Task CreateInstance()
 
         try
         {
-            if ( JSSplitInstance is not null )
-                await JSSplitInstance.InvokeVoidAsync( "destroy" );
+            await JSModule.Destroy( ElementRef, ElementId );
 
             if ( splitterSections.Count > 0 )
             {
-                JSSplitInstance = await JSModule.InitializeSplitter( splitterSections.Select( x => x.ElementRef ), new SplitterOptions
+                await JSModule.InitializeSplitter( ElementRef, ElementId, splitterSections.Select( x => x.ElementRef ), new SplitterOptions
                 {
                     Sizes = splitterSections.Any( x => x.Size != null )
                         ? splitterSections.Select( x => new JavascriptNumber( x.Size ?? 0 ) ).ToArray()
@@ -202,16 +190,14 @@ private async Task CreateInstance()
 
     #region Properties
 
+    /// <inheritdoc />
+    protected override bool ShouldAutoGenerateId => true;
+
     /// <summary>
     /// Gets or sets the <see cref="JSSplitModule"/> instance.
     /// </summary>
     protected JSSplitModule JSModule { get; private set; }
 
-    /// <summary>
-    /// Gets or sets the reference to the JS splitter instance.
-    /// </summary>
-    protected IJSObjectReference JSSplitInstance { get; private set; }
-
     /// <summary>
     /// Gets or sets the JS runtime.
     /// </summary>

Source/Extensions/Blazorise.Splitter/wwwroot/blazorise.splitter.js

@@ -1,7 +1,11 @@
 import './vendors/split.js?v=1.8.0.0';
 
+import { getRequiredElement } from "../Blazorise/utilities.js?v=1.8.0.0";
+
 document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<link rel=\"stylesheet\" href=\"_content/Blazorise.Splitter/blazorise.splitter.css?v=1.8.0.0\" />");
 
+const _instances = [];
+
 /**
  * Configuration options for Split
  * @typedef {Object} SplitOptions
@@ -22,7 +26,12 @@ document.getElementsByTagName("head")[0].insertAdjacentHTML("beforeend", "<link
  * @param {SplitOptions} splitterOptions Configuration options
  * @return A split instance
  */
-export function initializeSplitter(elements, splitterOptions, splitterGutterOptions) {
+export function initializeSplitter(element, elementId, elements, splitterOptions, splitterGutterOptions) {
+    element = getRequiredElement(element, elementId);
+
+    if (!element)
+        return;
+
     const parsedSplitterOptions = parseOptions(splitterOptions);
 
     if (splitterGutterOptions && splitterGutterOptions.backgroundImage) {
@@ -38,7 +47,32 @@ export function initializeSplitter(elements, splitterOptions, splitterGutterOpti
         return gutterElement;
     };
 
-    return Split(elements, parsedSplitterOptions);
+    const split = Split(elements, parsedSplitterOptions);
+
+    const instance = {
+        element: element,
+        elementId: elementId,
+        split: split
+    };
+
+    _instances[elementId] = instance;
+}
+
+export function destroy(element, elementId) {
+    const instances = _instances || {};
+    const instance = instances[elementId];
+
+    if (instance && instance.split) {
+        if (instance.split) {
+            try {
+                instance.split.destroy();
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
+        delete instances[elementId];
+    }
 }
 
 /**