Try to fix async script loading

LayTec-AG · Sep 17, 2024 · 54d352c · 54d352c
1 parent 3258a9e
commit 54d352c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 17 deletions.
diff --git a/Plotly.Blazor.Generator/Plotly.Blazor.Generator.csproj b/Plotly.Blazor.Generator/Plotly.Blazor.Generator.csproj
@@ -33,7 +33,7 @@
             <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
             <CopyToOutputDirectory>Always</CopyToOutputDirectory>
         </None>
-        <None Update="src\wwwroot\plotly-interop-5.1.1.js">
+        <None Update="src\wwwroot\plotly-interop-5.1.2.js">
             <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
             <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
             <CopyToOutputDirectory>Always</CopyToOutputDirectory>

diff --git a/Plotly.Blazor.Generator/src/PlotlyJsInterop.cs b/Plotly.Blazor.Generator/src/PlotlyJsInterop.cs
@@ -14,7 +14,7 @@ namespace Plotly.Blazor;
 /// </summary>
 public class PlotlyJsInterop
 {
-    private const string InteropPath = "./_content/Plotly.Blazor/plotly-interop-5.1.1.js";
+    private const string InteropPath = "./_content/Plotly.Blazor/plotly-interop-5.1.2.js";
     private const string PlotlyPath = "./_content/Plotly.Blazor/plotly-2.33.0.min.js";
     private const string PlotlyBasicPath = "./_content/Plotly.Blazor/plotly-basic-1.58.5.min.js";
 

diff --git a/...rator/src/wwwroot/plotly-interop-5.1.1.js → ...rator/src/wwwroot/plotly-interop-5.1.2.js b/...rator/src/wwwroot/plotly-interop-5.1.1.js → ...rator/src/wwwroot/plotly-interop-5.1.2.js
@@ -2,12 +2,26 @@
 let plotlyReady = false;
 const plotlyReadyCallbacks = [];
 
+function checkPlotlyReady(resolve) {
+    if (window.Plotly) {
+        plotlyReadyCallbacks.forEach(callback => callback());
+        plotlyReadyCallbacks.length = 0;
+        resolve();
+    } else {
+        setTimeout(() => checkPlotlyReady(resolve), 10);
+    }
+}
+
 export async function importScript(id, scriptUrl) {
     return new Promise((resolve, reject) => {
         var existingElement = document.getElementById(id);
         if (existingElement) {
             if (existingElement.dataset.originalSrc === scriptUrl) {
-                resolve();
+                if (window.Plotly) {
+                    resolve();
+                } else {
+                    checkPlotlyReady(resolve);
+                }
                 return;
             } else {
                 existingElement.remove();
@@ -19,20 +33,16 @@ export async function importScript(id, scriptUrl) {
         script.src = scriptUrl;
         script.dataset.originalSrc = scriptUrl;
         script.type = 'text/javascript';
-        script.async = true;
         script.onload = () => {
-            scriptCache.set(id, scriptUrl);
-            plotlyReady = true;
-            plotlyReadyCallbacks.forEach(callback => callback());
-            resolve();
+            checkPlotlyReady(resolve);
         };
         script.onerror = (error) => reject(new Error(`Failed to load script ${scriptUrl}: ${error.message}`));
         document.head.appendChild(script);
     });
 }
 
 function onPlotlyReady(callback) {
-    if (plotlyReady) {
+    if (window.Plotly) {
         callback();
     } else {
         plotlyReadyCallbacks.push(callback);

diff --git a/Plotly.Blazor/PlotlyJsInterop.cs b/Plotly.Blazor/PlotlyJsInterop.cs
@@ -14,7 +14,7 @@ namespace Plotly.Blazor;
 /// </summary>
 public class PlotlyJsInterop
 {
-    private const string InteropPath = "./_content/Plotly.Blazor/plotly-interop-5.1.1.js";
+    private const string InteropPath = "./_content/Plotly.Blazor/plotly-interop-5.1.2.js";
     private const string PlotlyPath = "./_content/Plotly.Blazor/plotly-2.33.0.min.js";
     private const string PlotlyBasicPath = "./_content/Plotly.Blazor/plotly-basic-1.58.5.min.js";
 

diff --git a/...ly.Blazor/wwwroot/plotly-interop-5.1.1.js → ...ly.Blazor/wwwroot/plotly-interop-5.1.2.js b/...ly.Blazor/wwwroot/plotly-interop-5.1.1.js → ...ly.Blazor/wwwroot/plotly-interop-5.1.2.js
@@ -2,12 +2,26 @@
 let plotlyReady = false;
 const plotlyReadyCallbacks = [];
 
+function checkPlotlyReady(resolve) {
+    if (window.Plotly) {
+        plotlyReadyCallbacks.forEach(callback => callback());
+        plotlyReadyCallbacks.length = 0;
+        resolve();
+    } else {
+        setTimeout(() => checkPlotlyReady(resolve), 10);
+    }
+}
+
 export async function importScript(id, scriptUrl) {
     return new Promise((resolve, reject) => {
         var existingElement = document.getElementById(id);
         if (existingElement) {
             if (existingElement.dataset.originalSrc === scriptUrl) {
-                resolve();
+                if (window.Plotly) {
+                    resolve();
+                } else {
+                    checkPlotlyReady(resolve);
+                }
                 return;
             } else {
                 existingElement.remove();
@@ -19,20 +33,16 @@ export async function importScript(id, scriptUrl) {
         script.src = scriptUrl;
         script.dataset.originalSrc = scriptUrl;
         script.type = 'text/javascript';
-        script.async = true;
         script.onload = () => {
-            scriptCache.set(id, scriptUrl);
-            plotlyReady = true;
-            plotlyReadyCallbacks.forEach(callback => callback());
-            resolve();
+            checkPlotlyReady(resolve);
         };
         script.onerror = (error) => reject(new Error(`Failed to load script ${scriptUrl}: ${error.message}`));
         document.head.appendChild(script);
     });
 }
 
 function onPlotlyReady(callback) {
-    if (plotlyReady) {
+    if (window.Plotly) {
         callback();
     } else {
         plotlyReadyCallbacks.push(callback);