Merge pull request #85 from hydrostack/84-executejs-scripts-wont-load-on-page-load

Make sure that ExecuteJs scripts are loaded as text/javascript

Author: kjeske

src/HydroClientActions.cs

@@ -1,3 +1,5 @@
+using JetBrains.Annotations;
+
 namespace Hydro;
 
 /// <summary>
@@ -14,14 +16,14 @@ internal HydroClientActions(HydroComponent hydroComponent) =>
     /// Execute JavaScript expression on client side
     /// </summary>
     /// <param name="jsExpression">JavaScript expression</param>
-    public void ExecuteJs(string jsExpression) =>
+    public void ExecuteJs([LanguageInjection(InjectedLanguage.JAVASCRIPT)] string jsExpression) =>
         _hydroComponent.AddClientScript(jsExpression);
-    
+
     /// <summary>
     /// Invoke JavaScript expression on client side
     /// </summary>
     /// <param name="jsExpression">JavaScript expression</param>
     [Obsolete("Use ExecuteJs instead.")]
-    public void Invoke(string jsExpression) =>
+    public void Invoke([LanguageInjection(InjectedLanguage.JAVASCRIPT)] string jsExpression) =>
         ExecuteJs(jsExpression);
 }

src/HydroComponent.cs

@@ -660,7 +660,7 @@ private HtmlNode GetClientScript(HtmlDocument document, string script)
         var scriptNode = document.CreateElement("script");
         scriptNode.SetAttributeValue("hydro-js", "true");
         scriptNode.SetAttributeValue("hydro-id", _componentId);
-        scriptNode.SetAttributeValue("type", "text/hydro");
+        scriptNode.SetAttributeValue("type", "text/javascript");
         scriptNode.InnerHtml = $"Hydro.executeComponentJs('{_componentId}', function() {{ {script} }});";
         return scriptNode;
     }

src/Scripts/hydro.js

@@ -40,15 +40,21 @@
   }
 
   function enablePlainScripts(element) {
-    enableScripts(element, 'script[type="text/javascript"]:not([hydro-loaded])');
+    enableScripts(element, 'script[type="text/javascript"]:not([hydro-loaded]):not([hydro-js])');
   }
 
   function enableHydroScripts(componentElement) {
     enableScripts(componentElement, `script[hydro-js][hydro-id="${componentElement.id}"]:not([hydro-loaded])`);
   }
 
   function executeComponentJs(componentId, func) {
-    func.call(document.getElementById(componentId));
+    const callback = () => func.call(document.getElementById(componentId))
+
+    if (document.readyState === "complete") {
+      setTimeout(callback);
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
+    }
   }
 
   async function loadPageContent(url, push, condition, payload) {