Support dispatching on mount

hydrostack · Nov 8, 2024 · f96f4a2 · f96f4a2
1 parent 7fd581d
commit f96f4a2
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 37 deletions.
diff --git a/src/ComponentResult.cs b/src/ComponentResult.cs
@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Http;
+using Microsoft.Net.Http.Headers;
 
 namespace Hydro;
 
@@ -27,17 +28,26 @@ internal ComponentResult(IResult result, ComponentResultType type)
     public async Task ExecuteAsync(HttpContext httpContext, HydroComponent component)
     {
         var response = httpContext.Response;
-        
+
         response.Headers.TryAdd(HydroConsts.ResponseHeaders.SkipOutput, "True");
 
         if (_type == ComponentResultType.File)
         {
-            response.Headers.Append("Content-Disposition", "inline");
+
+            response.Headers.Append(HeaderNames.ContentDisposition, "inline");
+        }
+
+        try
+        {
+            await _result.ExecuteAsync(httpContext);
         }
-
-        await _result.ExecuteAsync(httpContext);
-
-        if (response.Headers.Remove("Location", out var location))
+        catch
+        {
+            response.Headers.Remove(HeaderNames.ContentDisposition);
+            throw;
+        }
+
+        if (response.Headers.Remove(HeaderNames.Location, out var location))
         {
             response.StatusCode = StatusCodes.Status200OK;
             component.Redirect(location);

diff --git a/src/HydroComponent.cs b/src/HydroComponent.cs
@@ -576,7 +576,6 @@ private async Task<string> RenderOnlineNestedComponent(IPersistentState persiste
         IsMount = true;
         await MountAsync();
         await RenderAsync();
-        PopulateDispatchers();
         return await GenerateComponentHtml(componentId, persistentState, includeScripts: true);
     }
 
@@ -596,7 +595,6 @@ private async Task<string> RenderStaticComponent(IPersistentState persistentStat
         IsMount = true;
         await MountAsync();
         await RenderAsync();
-        PopulateDispatchers();
         return await GenerateComponentHtml(componentId, persistentState, includeScripts: true);
     }
 
@@ -654,6 +652,11 @@ private async Task<string> GenerateComponentHtml(string componentId, IPersistent
 
         if (includeScripts)
         {
+            if (_dispatchEvents.Any())
+            {
+                AddClientScript($"Hydro.dispatchEvents('{GetSerializedEventDispatchers()}', this);");
+            }
+
             foreach (var script in _clientScripts)
             {
                 rootElement.AppendChild(GetClientScript(componentHtmlDocument, script));
@@ -823,6 +826,11 @@ private void PopulateDispatchers()
             return;
         }
 
+        HttpContext.Response.Headers.TryAdd(HydroConsts.ResponseHeaders.Trigger, GetSerializedEventDispatchers());
+    }
+
+    private string GetSerializedEventDispatchers()
+    {
         var data = _dispatchEvents
             .Select(e => new
             {
@@ -834,7 +842,7 @@ private void PopulateDispatchers()
             })
             .ToList();
 
-        HttpContext.Response.Headers.TryAdd(HydroConsts.ResponseHeaders.Trigger, JsonConvert.SerializeObject(data, JsonSerializerSettings));
+        return JsonConvert.SerializeObject(data, JsonSerializerSettings);
     }
 
     private void PopulateClientScripts()

diff --git a/src/Scripts/hydro.js b/src/Scripts/hydro.js
@@ -524,34 +524,7 @@
             }
           }
 
-          setTimeout(() => { // make sure the event handlers got registered
-            const triggerHeader = response.headers.get('Hydro-Trigger');
-            if (triggerHeader) {
-              const triggers = JSON.parse(triggerHeader);
-              triggers.forEach(trigger => {
-                if (trigger.scope === 'parent' && !parentComponent) {
-                  return;
-                }
-
-                const eventScope = trigger.scope === 'parent' ? parentComponent.id : 'global';
-                const eventName = `${eventScope}:${trigger.name}`;
-                const eventData = {
-                  detail: {
-                    data: trigger.data,
-                    subject: trigger.subject,
-                    operationId: trigger.operationId
-                  }
-                };
-
-                document.dispatchEvent(new CustomEvent(eventName, eventData));
-
-                if (trigger.subject) {
-                  const subjectEventName = `${eventScope}:${trigger.name}:${trigger.subject}`;
-                  document.dispatchEvent(new CustomEvent(subjectEventName, eventData));
-                }
-              });
-            }
-          });
+          dispatchEvents(response.headers.get('Hydro-Trigger'), component);
         }
       } catch (error) {
         document.dispatchEvent(new CustomEvent(`unhandled-hydro-error`, { detail: { name: error.name, message: error.message } }));
@@ -577,6 +550,40 @@
     });
   }
 
+  function dispatchEvents(serializedEvents, componentElement) {
+    if (!serializedEvents) {
+      return;
+    }
+
+    const parentComponent = componentElement ? findComponent(componentElement.parentElement) : null;
+
+    const events = JSON.parse(serializedEvents);
+    events.forEach(trigger => {
+      if (trigger.scope === 'parent' && !parentComponent) {
+        return;
+      }
+
+      const eventScope = trigger.scope === 'parent' ? parentComponent.id : 'global';
+      const eventName = `${eventScope}:${trigger.name}`;
+      const eventData = {
+        detail: {
+          data: trigger.data,
+          subject: trigger.subject,
+          operationId: trigger.operationId
+        }
+      };
+
+      setTimeout(() => {
+        document.dispatchEvent(new CustomEvent(eventName, eventData));
+
+        if (trigger.subject) {
+          const subjectEventName = `${eventScope}:${trigger.name}:${trigger.subject}`;
+          document.dispatchEvent(new CustomEvent(subjectEventName, eventData));
+        }
+      });
+    });
+  }
+
   function isElementDirty(element) {
     const type = element.type;
     if (['checkbox', 'radio'].includes(type)) {
@@ -669,6 +676,7 @@
     generateGuid,
     waitFor,
     executeComponentJs,
+    dispatchEvents,
     config
   };
 }