Lazy load JS modules (#3159)

* Lazy loads the JS modules * Fix tests * Safer dispose * Check element * Null checks * Null checks * Remove duplicate AddDataGrid setup * Null check for button
Megabit · Nov 29, 2021 · 8a7cd8a · 8a7cd8a
1 parent 733e89a
commit 8a7cd8a
Show file tree

Hide file tree

Showing 29 changed files with 187 additions and 88 deletions.
diff --git a/Source/Blazorise/Modules/BaseJSModule.cs b/Source/Blazorise/Modules/BaseJSModule.cs
@@ -1,6 +1,7 @@
 #region Using directives
 using System;
 using System.Threading.Tasks;
+using Blazorise.Extensions;
 using Microsoft.JSInterop;
 #endregion
 
@@ -24,7 +25,7 @@ public abstract class BaseJSModule : IBaseJSModule, IAsyncDisposable
         /// <summary>
         /// Awaitable module instance.
         /// </summary>
-        protected Task<IJSObjectReference> moduleTask;
+        private Lazy<Task<IJSObjectReference>> lazyModuleTask;
 
         #endregion
 
@@ -39,6 +40,17 @@ public BaseJSModule( IJSRuntime jsRuntime, IVersionProvider versionProvider )
         {
             this.jsRuntime = jsRuntime;
             this.versionProvider = versionProvider;
+
+            lazyModuleTask = new Lazy<Task<IJSObjectReference>>( LazyModuleFactory );
+        }
+
+        /// <summary>
+        /// Handles the loading of the JS module.
+        /// </summary>
+        /// <returns>An awaitable JS module reference.</returns>
+        protected virtual Task<IJSObjectReference> LazyModuleFactory()
+        {
+            return jsRuntime.InvokeAsync<IJSObjectReference>( "import", ModuleFileName ).AsTask();
         }
 
         #endregion
@@ -65,12 +77,19 @@ protected virtual async ValueTask DisposeAsync( bool disposing )
 
                     if ( disposing )
                     {
-                        if ( moduleTask != null )
+                        if ( lazyModuleTask != null )
                         {
-                            var moduleInstance = await moduleTask;
-                            await moduleInstance.DisposeAsync();
+                            var moduleTask = lazyModuleTask.Value;
+
+                            if ( moduleTask != null )
+                            {
+                                var moduleInstance = await moduleTask;
+                                await moduleInstance.SafeDisposeAsync();
+
+                                moduleTask = null;
+                            }
 
-                            moduleTask = null;
+                            lazyModuleTask = null;
                         }
                     }
                 }
@@ -91,8 +110,7 @@ protected virtual async ValueTask DisposeAsync( bool disposing )
         protected bool AsyncDisposed { get; private set; }
 
         /// <inheritdoc/>
-        public Task<IJSObjectReference> Module
-            => moduleTask ??= jsRuntime.InvokeAsync<IJSObjectReference>( "import", ModuleFileName ).AsTask();
+        public Task<IJSObjectReference> Module => lazyModuleTask.Value;
 
         /// <inheritdoc/>
         public abstract string ModuleFileName { get; }

diff --git a/Source/Blazorise/Modules/JSBreakpointModule.cs b/Source/Blazorise/Modules/JSBreakpointModule.cs
@@ -38,25 +38,17 @@ public virtual async ValueTask RegisterBreakpoint( DotNetObjectReference<Breakpo
         /// <inheritdoc/>
         public virtual async ValueTask UnregisterBreakpoint( IBreakpointActivator component )
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
+            var moduleInstance = await Module;
 
-                await moduleInstance.InvokeVoidAsync( "unregisterBreakpointComponent", component.ElementId );
-            }
+            await moduleInstance.InvokeVoidAsync( "unregisterBreakpointComponent", component.ElementId );
         }
 
         /// <inheritdoc/>
         public virtual async ValueTask<string> GetBreakpoint()
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
-
-                return await moduleInstance.InvokeAsync<string>( "getBreakpoint" );
-            }
+            var moduleInstance = await Module;
 
-            return await Task.FromResult<string>( null );
+            return await moduleInstance.InvokeAsync<string>( "getBreakpoint" );
         }
 
         #endregion

diff --git a/Source/Blazorise/Modules/JSButtonModule.cs b/Source/Blazorise/Modules/JSButtonModule.cs
@@ -38,12 +38,9 @@ public virtual async ValueTask Initialize( ElementReference elementRef, string e
         /// <inheritdoc/>
         public virtual async ValueTask Destroy( ElementReference elementRef, string elementId )
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
+            var moduleInstance = await Module;
 
-                await moduleInstance.InvokeVoidAsync( "destroy", elementRef, elementId );
-            }
+            await moduleInstance.InvokeVoidAsync( "destroy", elementRef, elementId );
         }
 
         #endregion

diff --git a/Source/Blazorise/Modules/JSClosableModule.cs b/Source/Blazorise/Modules/JSClosableModule.cs
@@ -38,12 +38,9 @@ public virtual async ValueTask Register( DotNetObjectReference<CloseActivatorAda
         /// <inheritdoc/>
         public virtual async ValueTask Unregister( ICloseActivator component )
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
+            var moduleInstance = await Module;
 
-                await moduleInstance.InvokeVoidAsync( "unregisterClosableComponent", component.ElementRef );
-            }
+            await moduleInstance.InvokeVoidAsync( "unregisterClosableComponent", component.ElementRef );
         }
 
         #endregion

diff --git a/Source/Blazorise/Modules/JSMemoEditModule.cs b/Source/Blazorise/Modules/JSMemoEditModule.cs
@@ -38,12 +38,9 @@ public virtual async ValueTask Initialize( ElementReference elementRef, string e
         /// <inheritdoc/>
         public virtual async ValueTask Destroy( ElementReference elementRef, string elementId )
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
+            var moduleInstance = await Module;
 
-                await moduleInstance.InvokeVoidAsync( "destroy", elementRef, elementId );
-            }
+            await moduleInstance.InvokeVoidAsync( "destroy", elementRef, elementId );
         }
 
         /// <inheritdoc/>

diff --git a/Source/Blazorise/Modules/JSModalModule.cs b/Source/Blazorise/Modules/JSModalModule.cs
@@ -38,12 +38,9 @@ public virtual async ValueTask OpenModal( ElementReference elementRef, bool scro
         /// <inheritdoc/>
         public virtual async ValueTask CloseModal( ElementReference elementRef )
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
+            var moduleInstance = await Module;
 
-                await moduleInstance.InvokeVoidAsync( "close", elementRef );
-            }
+            await moduleInstance.InvokeVoidAsync( "close", elementRef );
         }
 
         #endregion

diff --git a/Source/Blazorise/Modules/JSNumericEditModule.cs b/Source/Blazorise/Modules/JSNumericEditModule.cs
@@ -38,23 +38,17 @@ public virtual async ValueTask Initialize( DotNetObjectReference<NumericEditAdap
         /// <inheritdoc/>
         public virtual async ValueTask Destroy( ElementReference elementRef, string elementId )
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
+            var moduleInstance = await Module;
 
-                await moduleInstance.InvokeVoidAsync( "destroy", elementRef, elementId );
-            }
+            await moduleInstance.InvokeVoidAsync( "destroy", elementRef, elementId );
         }
 
         /// <inheritdoc/>
         public virtual async ValueTask UpdateOptions( ElementReference elementRef, string elementId, object options )
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
+            var moduleInstance = await Module;
 
-                await moduleInstance.InvokeVoidAsync( "updateOptions", elementRef, elementId, options );
-            }
+            await moduleInstance.InvokeVoidAsync( "updateOptions", elementRef, elementId, options );
         }
 
         #endregion

diff --git a/Source/Blazorise/Modules/JSTextEditModule.cs b/Source/Blazorise/Modules/JSTextEditModule.cs
@@ -38,12 +38,9 @@ public virtual async ValueTask Initialize( ElementReference elementRef, string e
         /// <inheritdoc/>
         public virtual async ValueTask Destroy( ElementReference elementRef, string elementId )
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
+            var moduleInstance = await Module;
 
-                await moduleInstance.InvokeVoidAsync( "destroy", elementRef, elementId );
-            }
+            await moduleInstance.InvokeVoidAsync( "destroy", elementRef, elementId );
         }
 
         #endregion

diff --git a/Source/Blazorise/Modules/JSTooltipModule.cs b/Source/Blazorise/Modules/JSTooltipModule.cs
@@ -38,23 +38,17 @@ public virtual async ValueTask Initialize( ElementReference elementRef, string e
         /// <inheritdoc/>
         public virtual async ValueTask Destroy( ElementReference elementRef, string elementId )
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
+            var moduleInstance = await Module;
 
-                await moduleInstance.InvokeVoidAsync( "destroy", elementRef, elementId );
-            }
+            await moduleInstance.InvokeVoidAsync( "destroy", elementRef, elementId );
         }
 
         /// <inheritdoc/>
         public virtual async ValueTask UpdateContent( ElementReference elementRef, string elementId, string content )
         {
-            if ( moduleTask != null )
-            {
-                var moduleInstance = await moduleTask;
+            var moduleInstance = await Module;
 
-                await moduleInstance.InvokeVoidAsync( "updateContent", elementId );
-            }
+            await moduleInstance.InvokeVoidAsync( "updateContent", elementId );
         }
 
         #endregion

diff --git a/Source/Blazorise/wwwroot/button.js b/Source/Blazorise/wwwroot/button.js
@@ -1,9 +1,16 @@
-const _instances = [];
+import { getRequiredElement } from "./utilities.js";
+
+const _instances = [];
 
 export function initialize(element, elementId, options) {
+    element = getRequiredElement(element, elementId);
+
+    if (!element)
+        return;
+
     _instances[elementId] = new ButtonInfo(element, elementId, options);
 
-    if (element.type === "submit") {
+    if (element && element.type === "submit") {
         element.addEventListener("click", (e) => {
             click(_instances[elementId], e);
         });

diff --git a/Source/Blazorise/wwwroot/colorPicker.js b/Source/Blazorise/wwwroot/colorPicker.js
@@ -4,6 +4,11 @@ import * as utilities from "./utilities.js";
 const _instancesInfos = [];
 
 export function initialize(dotnetAdapter, element, elementId, options) {
+    element = utilities.getRequiredElement(element, elementId);
+
+    if (!element)
+        return;
+
     const picker = Pickr.create({
         el: element,
         theme: 'monolith', // or 'monolith', or 'nano'

diff --git a/Source/Blazorise/wwwroot/datePicker.js b/Source/Blazorise/wwwroot/datePicker.js
@@ -4,6 +4,11 @@ import * as utilities from "./utilities.js";
 const _pickers = [];
 
 export function initialize(element, elementId, options) {
+    element = utilities.getRequiredElement(element, elementId);
+
+    if (!element)
+        return;
+
     function mutationObserverCallback(mutationsList, observer) {
         mutationsList.forEach(mutation => {
             if (mutation.attributeName === 'class') {

diff --git a/Source/Blazorise/wwwroot/fileEdit.js b/Source/Blazorise/wwwroot/fileEdit.js
@@ -1,6 +1,13 @@
-const _instances = [];
+import { getRequiredElement } from "./utilities.js";
+
+const _instances = [];
 
 export function initialize(adapter, element, elementId) {
+    element = getRequiredElement(element, elementId);
+
+    if (!element)
+        return;
+
     var nextFileId = 0;
 
     // save an instance of adapter
@@ -38,6 +45,8 @@ export function destroy(element, elementId) {
 }
 
 export function reset(element, elementId) {
+    element = getRequiredElement(element, elementId);
+
     if (element) {
         element.value = '';
 

diff --git a/Source/Blazorise/wwwroot/inputMask.js b/Source/Blazorise/wwwroot/inputMask.js
@@ -6,6 +6,9 @@ let _instances = [];
 export function initialize(dotnetAdapter, element, elementId, options) {
     element = getRequiredElement(element, elementId);
 
+    if (!element)
+        return;
+
     const maskOptions = options.mask ? { mask: options.mask } : {};
     const regexOptions = options.mask ? { regex: options.regex } : {};
     const aliasOptions = options.alias ? { alias: options.alias, inputFormat: options.inputFormat, outputFormat: options.outputFormat } : {};

diff --git a/Source/Blazorise/wwwroot/memoEdit.js b/Source/Blazorise/wwwroot/memoEdit.js
@@ -1,8 +1,14 @@
 import { Behave } from "./vendors/Behave.js";
+import { getRequiredElement } from "./utilities.js";
 
 const _instances = [];
 
 export function initialize(element, elementId, options) {
+    element = getRequiredElement(element, elementId);
+
+    if (!element)
+        return;
+
     const replaceTab = options.replaceTab || false;
     const tabSize = options.tabSize || 4;
     const softTabs = options.tabSize || true;

diff --git a/Source/Blazorise/wwwroot/numericEdit.js b/Source/Blazorise/wwwroot/numericEdit.js
@@ -1,8 +1,14 @@
 import { NumericMaskValidator } from "./validators/NumericMaskValidator.js";
+import { getRequiredElement } from "./utilities.js";
 
 let _instances = [];
 
 export function initialize(dotnetAdapter, element, elementId, options) {
+    element = getRequiredElement(element, elementId);
+
+    if (!element)
+        return;
+
     const instance = new NumericMaskValidator(dotnetAdapter, element, elementId, options);
 
     _instances[elementId] = instance;