From 926c3014deb1b3ae92d9ef166f4de9134d5430e2 Mon Sep 17 00:00:00 2001
From: Krzysztof Jeske <krzysztof.jeske@gmail.com>
Date: Mon, 20 Nov 2023 21:56:46 +0100
Subject: [PATCH] Introduce operation-id. Add hydro-link, make hydro-boost
 obsolete.

---
 docs/content/features/navigation.md      |   6 +-
 docs/content/features/ui-utils.md        |   2 +-
 src/HydroComponent.cs                    | 164 ++++++++++++++---------
 src/HydroComponentEvent.cs               |   1 +
 src/HydroConsts.cs                       |   2 +
 src/Scripts/hydro.js                     | 151 ++++++++++++---------
 src/TagHelpers/HydroBoostTagHelper.cs    |   7 +-
 src/TagHelpers/HydroDispatchTagHelper.cs |   3 +-
 src/TagHelpers/HydroLinkTagHelper.cs     |  31 +++++
 src/Utils/Int32Converter.cs              |   2 +-
 10 files changed, 233 insertions(+), 136 deletions(-)
 create mode 100644 src/TagHelpers/HydroLinkTagHelper.cs

diff --git a/docs/content/features/navigation.md b/docs/content/features/navigation.md
index 79bb162..b5b39fb 100644
--- a/docs/content/features/navigation.md
+++ b/docs/content/features/navigation.md
@@ -11,18 +11,18 @@ There are 3 kinds of managed navigation in applications using Hydro:
 
 ## Navigation via links
 
-With `hydro-boost` attribute relative links in your application can be loaded in the background and applied to the current document instead of doing the full page reload.
+With `hydro-link` attribute relative links in your application can be loaded in the background and applied to the current document instead of doing the full page reload.
 
 Examples:
 
 Attribute applied directly on a link:
 ```html
-<a href="/page" hydro-boost>My page</a>
+<a href="/page" hydro-link>My page</a>
 ```
 
 Attribute applied directly on a parent of the links:
 ```html
-<ul hydro-boost>
+<ul hydro-link>
   <li><a href="/page1">My page 1</a></li>
   <li><a href="/page2">My page 2</a></li>
 </ul>
diff --git a/docs/content/features/ui-utils.md b/docs/content/features/ui-utils.md
index 8229a11..80a5d6c 100644
--- a/docs/content/features/ui-utils.md
+++ b/docs/content/features/ui-utils.md
@@ -10,7 +10,7 @@ outline: deep
 CSS class added to elements that triggered a Hydro operation and is currently being processed
 
 ### `.hydro-loading`
-CSS class added to `body` element when a page is loading using boost functionality
+CSS class added to `body` element when a page is loading using hydro-link functionality
 
 ### `disabled`
 Attribute added to elements that triggered a Hydro operation and is currently being processed
diff --git a/src/HydroComponent.cs b/src/HydroComponent.cs
index 0a3ac23..07b64b4 100644
--- a/src/HydroComponent.cs
+++ b/src/HydroComponent.cs
@@ -20,7 +20,7 @@ namespace Hydro;
 /// </summary>
 public abstract class HydroComponent : ViewComponent
 {
-    private string _id;
+    private string _componentId;
 
     private readonly ConcurrentDictionary<CacheKey, object> _requestCache = new();
     private static readonly ConcurrentDictionary<CacheKey, object> PersistentCache = new();
@@ -31,7 +31,7 @@ public abstract class HydroComponent : ViewComponent
     private static readonly MethodInfo InvokeActionMethod = typeof(HydroComponent).GetMethod(nameof(InvokeAction), BindingFlags.Static | BindingFlags.NonPublic);
     private static readonly MethodInfo InvokeActionAsyncMethod = typeof(HydroComponent).GetMethod(nameof(InvokeActionAsync), BindingFlags.Static | BindingFlags.NonPublic);
 
-    private static readonly JsonSerializerSettings JsonSerializerSettings = new JsonSerializerSettings
+    private static readonly JsonSerializerSettings JsonSerializerSettings = new()
     {
         Converters = new JsonConverter[] { new Int32Converter() }.ToList()
     };
@@ -123,9 +123,10 @@ public void Subscribe<TEvent>(Func<TEvent, Task> action) =>
     /// </summary>
     /// <param name="data">Data to pass</param>
     /// <param name="scope">Scope of the event</param>
+    /// <param name="asynchronous">Do not chain the execution of handlers and run them separately</param>
     /// <typeparam name="TEvent">Event type</typeparam>
-    public void Dispatch<TEvent>(TEvent data, Scope scope = Scope.Parent) =>
-        Dispatch(GetFullTypeName(typeof(TEvent)), data, scope);
+    public void Dispatch<TEvent>(TEvent data, Scope scope = Scope.Parent, bool asynchronous = false) =>
+        Dispatch(GetFullTypeName(typeof(TEvent)), data, scope, asynchronous);
 
     /// <summary>
     /// Triggers a Hydro event
@@ -133,14 +134,22 @@ public void Dispatch<TEvent>(TEvent data, Scope scope = Scope.Parent) =>
     /// <param name="name">Name of the event</param>
     /// <param name="data">Data to pass</param>
     /// <param name="scope">Scope of the event</param>
+    /// <param name="asynchronous">Do not chain the execution of handlers and run them separately</param>
     /// <typeparam name="TEvent">Event type</typeparam>
-    public void Dispatch<TEvent>(string name, TEvent data, Scope scope = Scope.Parent) =>
+    public void Dispatch<TEvent>(string name, TEvent data, Scope scope = Scope.Parent, bool asynchronous = false)
+    {
+        var operationId = !asynchronous && HttpContext.Request.Headers.TryGetValue(HydroConsts.RequestHeaders.OperationId, out var incomingOperationId)
+            ? incomingOperationId.First()
+            : Guid.NewGuid().ToString("N");
+        
         _dispatchEvents.Add(new HydroComponentEvent
         {
             Name = name,
             Data = data,
-            Scope = scope.ToString().ToLower()
+            Scope = scope.ToString().ToLower(),
+            OperationId = operationId
         });
+    }
 
     /// <summary>
     /// Triggered once the component is mounted
@@ -200,7 +209,7 @@ protected Cache<T> Cache<T>(Func<T> func, CacheLifetime lifetime = CacheLifetime
     {
         var cache = lifetime == CacheLifetime.Request ? _requestCache : PersistentCache;
 
-        var cacheKey = new CacheKey(_id, func);
+        var cacheKey = new CacheKey(_componentId, func);
         if (cache.TryGetValue(cacheKey, out var dic))
         {
             var value = (Cache<T>)dic;
@@ -239,7 +248,7 @@ private bool DetermineRootComponent()
     private async Task<string> RenderOnlineRootComponent(IPersistentState persistentState)
     {
         var componentId = GetRootComponentId();
-        _id = componentId;
+        _componentId = componentId;
 
         PopulateBaseModel(persistentState);
         PopulateRequestModel();
@@ -259,7 +268,7 @@ private async Task<string> RenderOnlineRootComponent(IPersistentState persistent
     private async Task<string> RenderOnlineNestedComponent(IPersistentState persistentState)
     {
         var componentId = GenerateComponentId(Key);
-        _id = componentId;
+        _componentId = componentId;
 
         if (IsComponentIdRendered(componentId))
         {
@@ -282,7 +291,7 @@ private static string GetComponentPlaceholderTemplate(string componentId) =>
     private async Task<string> RenderStaticComponent(IPersistentState persistentState)
     {
         var componentId = GenerateComponentId(Key);
-        _id = componentId;
+        _componentId = componentId;
 
         if (!await AuthorizeAsync())
         {
@@ -406,7 +415,7 @@ private void PopulateDispatchers()
         }
 
         var data = _dispatchEvents
-            .Select(e => new { name = e.Name, data = e.Data, scope = e.Scope })
+            .Select(e => new { name = e.Name, data = e.Data, scope = e.Scope, operationId = e.OperationId })
             .ToList();
 
         HttpContext.Response.Headers.TryAdd(HydroConsts.ResponseHeaders.Trigger, JsonConvert.SerializeObject(data));
@@ -420,41 +429,53 @@ private bool IsComponentIdRendered(string componentId)
 
     private async Task TriggerMethod()
     {
-        if (HttpContext.Items.TryGetValue(HydroConsts.ContextItems.MethodName, out var method) && method is string methodValue && !string.IsNullOrWhiteSpace(methodValue))
+        if (!HttpContext.Items.TryGetValue(HydroConsts.ContextItems.MethodName, out var method)
+            || method is not string methodValue || string.IsNullOrWhiteSpace(methodValue))
         {
-            var methodInfo = GetType()
-                .GetMethod(methodValue, BindingFlags.Public | BindingFlags.Instance | BindingFlags.IgnoreCase);
+            return;
+        }
 
-            if (methodInfo != null)
-            {
-                var requestParameters = GetParameters();
-                var methodParameters = methodInfo.GetParameters();
+        var methodInfo = GetType()
+            .GetMethod(methodValue, BindingFlags.Public | BindingFlags.Instance | BindingFlags.IgnoreCase);
 
-                if (requestParameters.Count != methodParameters.Length || requestParameters.Any(rp => !methodParameters.Any(mp => rp.Key == mp.Name)))
-                {
-                    throw new InvalidOperationException("Wrong action parameters");
-                }
+        if (methodInfo == null)
+        {
+            return;
+        }
 
-                var orderedParameters = methodParameters
-                    .Select(p =>
-                    {
-                        var sourceType = requestParameters[p.Name].GetType();
+        var requestParameters = GetParameters();
+        var methodParameters = methodInfo.GetParameters();
 
-                        return sourceType == p.ParameterType
-                            ? requestParameters[p.Name]
-                            : TypeDescriptor.GetConverter(p.ParameterType).ConvertFrom(requestParameters[p.Name]);
-                    })
-                    .ToArray();
+        if (requestParameters.Count != methodParameters.Length
+            || requestParameters.Any(rp => !methodParameters.Any(mp => rp.Key == mp.Name)))
+        {
+            throw new InvalidOperationException("Wrong action parameters");
+        }
+        
+        var operationId = HttpContext.Request.Headers.TryGetValue(HydroConsts.RequestHeaders.OperationId, out var incomingOperationId)
+            ? incomingOperationId.First()
+            : Guid.NewGuid().ToString("N");
 
-                if (typeof(Task).IsAssignableFrom(methodInfo.ReturnType))
-                {
-                    await (Task)methodInfo.Invoke(this, orderedParameters)!;
-                }
-                else
-                {
-                    methodInfo.Invoke(this, orderedParameters);
-                }
-            }
+        HttpContext.Response.Headers.TryAdd(HydroConsts.ResponseHeaders.OperationId, operationId);
+
+        var orderedParameters = methodParameters
+            .Select(p =>
+            {
+                var sourceType = requestParameters[p.Name!].GetType();
+
+                return sourceType == p.ParameterType
+                    ? requestParameters[p.Name]
+                    : TypeDescriptor.GetConverter(p.ParameterType).ConvertFrom(requestParameters[p.Name]);
+            })
+            .ToArray();
+
+        if (typeof(Task).IsAssignableFrom(methodInfo.ReturnType))
+        {
+            await (Task)methodInfo.Invoke(this, orderedParameters)!;
+        }
+        else
+        {
+            methodInfo.Invoke(this, orderedParameters);
         }
     }
 
@@ -475,30 +496,43 @@ public T GetPayload<T>() =>
 
     private async Task TriggerEvent()
     {
-        if (HttpContext.Items.TryGetValue(HydroConsts.ContextItems.EventName, out var eventName) && eventName is string eventNameValue && !string.IsNullOrWhiteSpace(eventNameValue))
+        if (!HttpContext.Items.TryGetValue(HydroConsts.ContextItems.EventName, out var eventName)
+            || eventName is not string eventNameValue || string.IsNullOrWhiteSpace(eventNameValue))
         {
-            var subscription = _subscriptions.FirstOrDefault(s => s.EventName == eventNameValue);
+            return;
+        }
 
-            if (subscription != null)
-            {
-                var methodInfo = subscription.Action.Method;
-                var parameters = methodInfo.GetParameters();
-                var parameterType = parameters.First().ParameterType;
-                var model = HttpContext.Items.TryGetValue(HydroConsts.ContextItems.EventData, out var eventModel) ? JsonConvert.DeserializeObject((string)eventModel, parameterType) : null;
+        var subscription = _subscriptions.FirstOrDefault(s => s.EventName == eventNameValue);
 
-                var isAsync = typeof(Task).IsAssignableFrom(methodInfo.ReturnType);
+        if (subscription == null)
+        {
+            return;
+        }
 
-                if (isAsync)
-                {
-                    var method = InvokeActionAsyncMethod.MakeGenericMethod(parameterType);
-                    await (Task)method.Invoke(null, new[] { subscription.Action, model })!;
-                }
-                else
-                {
-                    var method = InvokeActionMethod.MakeGenericMethod(parameterType);
-                    method.Invoke(null, new[] { subscription.Action, model });
-                }
-            }
+        var methodInfo = subscription.Action.Method;
+        var parameters = methodInfo.GetParameters();
+        var parameterType = parameters.First().ParameterType;
+        var model = HttpContext.Items.TryGetValue(HydroConsts.ContextItems.EventData, out var eventModel)
+            ? JsonConvert.DeserializeObject((string)eventModel!, parameterType)
+            : null;
+
+        var operationId = HttpContext.Request.Headers.TryGetValue(HydroConsts.RequestHeaders.OperationId, out var incomingOperationId)
+            ? incomingOperationId.First()
+            : Guid.NewGuid().ToString("N");
+        
+        HttpContext.Response.Headers.TryAdd(HydroConsts.ResponseHeaders.OperationId, operationId);
+
+        var isAsync = typeof(Task).IsAssignableFrom(methodInfo.ReturnType);
+
+        if (isAsync)
+        {
+            var method = InvokeActionAsyncMethod.MakeGenericMethod(parameterType);
+            await (Task)method.Invoke(null, new[] { subscription.Action, model })!;
+        }
+        else
+        {
+            var method = InvokeActionMethod.MakeGenericMethod(parameterType);
+            method.Invoke(null, new[] { subscription.Action, model });
         }
     }
 
@@ -538,7 +572,7 @@ private string GetViewPath()
     {
         var type = GetType();
         var assemblyName = type.Assembly.GetName().Name;
-        return $"{type.FullName.Replace(assemblyName, "~").Replace(".", "/")}.cshtml";
+        return $"{type.FullName!.Replace(assemblyName!, "~").Replace(".", "/")}.cshtml";
     }
 
     private async Task<string> GetComponentHtml()
@@ -659,7 +693,7 @@ private void ValidateModel()
             {
                 if (IsModelTouched || TouchedProperties.Contains(memberName))
                 {
-                    ModelState.AddModelError(memberName, validationResult.ErrorMessage);
+                    ModelState.AddModelError(memberName, validationResult.ErrorMessage!);
                 }
             }
         }
@@ -686,7 +720,7 @@ private static IEnumerable<ValidationResult> ExtractValidationResults(IEnumerabl
     private async Task<bool> AuthorizeAsync()
     {
         var type = GetType();
-        
+
         if (!ComponentAuthorizationAttributes.ContainsKey(type))
         {
             ComponentAuthorizationAttributes.TryAdd(type, type.GetCustomAttributes(true)
@@ -694,7 +728,7 @@ private async Task<bool> AuthorizeAsync()
                 .Cast<IHydroAuthorizationFilter>()
                 .ToArray());
         }
-        
+
         foreach (var authorizationFilter in ComponentAuthorizationAttributes[type])
         {
             if (!await authorizationFilter.AuthorizeAsync(HttpContext, this))
@@ -703,7 +737,7 @@ private async Task<bool> AuthorizeAsync()
                 {
                     HttpContext.Response.StatusCode = StatusCodes.Status403Forbidden;
                 }
-                
+
                 return false;
             }
         }
diff --git a/src/HydroComponentEvent.cs b/src/HydroComponentEvent.cs
index 5cd5693..92f9eba 100644
--- a/src/HydroComponentEvent.cs
+++ b/src/HydroComponentEvent.cs
@@ -5,4 +5,5 @@ internal class HydroComponentEvent
     public string Name { get; init; }
     public object Data { get; init; }
     public string Scope { get; set; }
+    public string OperationId { get; set; }
 }
\ No newline at end of file
diff --git a/src/HydroConsts.cs b/src/HydroConsts.cs
index 70def78..5c616e0 100644
--- a/src/HydroConsts.cs
+++ b/src/HydroConsts.cs
@@ -9,6 +9,7 @@ public static class RequestHeaders
         public const string Boosted = "Hydro-Boosted";
         public const string Hydro = "Hydro-Request";
         public const string Parameters = "Hydro-Parameters";
+        public const string OperationId = "Hydro-Operation-Id";
         public const string Payload = "Hydro-Payload";
         public const string RenderedComponentIds = "hydro-all-ids";
     }
@@ -16,6 +17,7 @@ public static class RequestHeaders
     public static class ResponseHeaders
     {
         public const string Trigger = "Hydro-Trigger";
+        public const string OperationId = "Hydro-Operation-Id";
     }
 
     public static class ContextItems
diff --git a/src/Scripts/hydro.js b/src/Scripts/hydro.js
index db43fda..abbd8f7 100644
--- a/src/Scripts/hydro.js
+++ b/src/Scripts/hydro.js
@@ -70,7 +70,14 @@
           // throw error;
         })
     );
-    return lastPromise;
+    return promiseChain[key];
+  }
+
+  function generateGuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+      return v.toString(16);
+    });
   }
 
   function findComponent(el) {
@@ -90,11 +97,11 @@
   let binding = {};
 
   async function hydroEvent(el, url, eventData) {
-    const dispatchId = eventData.dispatchId;
+    const operationId = eventData.operationId;
     const body = JSON.stringify(eventData.data);
     const hydroEvent = el.getAttribute("x-on-hydro-event");
     const wireEventData = JSON.parse(hydroEvent);
-    await hydroRequest(el, url, 'application/json', body, null, wireEventData, dispatchId);
+    await hydroRequest(el, url, 'application/json', body, null, wireEventData, operationId);
   }
 
   async function hydroBind(el) {
@@ -143,10 +150,15 @@
       ? new FormData(el.closest("form"))
       : null;
 
-    await hydroRequest(el, url, null, formData);
+    const operationId = generateGuid();
+    el.setAttribute("hydro-operation-id", operationId);
+
+    await hydroRequest(el, url, null, formData, null, null, operationId);
   }
 
-  async function hydroRequest(el, url, contentType, body, type, eventData, dispatchId) {
+  let operationStatus = {};
+
+  async function hydroRequest(el, url, contentType, body, type, eventData, operationId) {
     if (!document.contains(el)) {
       return;
     }
@@ -159,38 +171,26 @@
     }
 
     const parentComponent = findComponent(component.parentElement);
-    const dispatchingElement = dispatchId && document.querySelector(`[hydro-dispatch-id="${dispatchId}"]`);
-
-    const classTimeout = setTimeout(() => {
-      el.classList.add('hydro-request');
-      if (dispatchingElement) {
-        dispatchingElement.classList.add('hydro-request');
-      }
-    }, 200);
-
-    let elementsToDisable = [];
 
-    let disableTimer = null;
+    let disableTimer;
+    let classTimeout;
 
-    if ((!eventData || dispatchId) && type !== 'bind') {
-      elementsToDisable = dispatchId ? [dispatchingElement] : [el];
+    if (operationId) {
+      if (!operationStatus[operationId]) {
+        operationStatus[operationId] = 0;
 
-      if (el.tagName === "FORM") {
-        const submit = el.querySelector('[type="submit"]');
+        const operationTrigger = document.querySelector(`[hydro-operation-id="${operationId}"]`);
 
-        if (submit) {
-          elementsToDisable.push(submit);
+        if (operationTrigger) {
+          classTimeout = setTimeout(() => operationTrigger.classList.add('hydro-request'), 200);
+          disableTimer = setTimeout(() => operationTrigger.disabled = true, 200);
         }
       }
 
-      disableTimer = setTimeout(() => {
-        elementsToDisable.forEach((elementToDisable) => {
-          elementToDisable.disabled = true;
-        });
-      }, 200);
+      operationStatus[operationId]++;
     }
 
-    await enqueueHydroPromise('', async () => {
+    await enqueueHydroPromise(componentId, async () => {
       try {
         let headers = {
           'Hydro-Request': 'true'
@@ -221,6 +221,10 @@
           headers['Hydro-Parameters'] = parameters;
         }
 
+        if (operationId) {
+          headers['Hydro-Operation-Id'] = operationId;
+        }
+
         const response = await fetch(url, {
           method: 'POST',
           body: body,
@@ -243,9 +247,7 @@
             // ignore
           }
 
-          setTimeout(() => {
-            document.dispatchEvent(new CustomEvent(`global:UnhandledHydroError`, {detail: {data: eventDetail}}));
-          }, 0);
+          document.dispatchEvent(new CustomEvent(`global:UnhandledHydroError`, {detail: {data: eventDetail}}));
           throw new Error(`HTTP error! status: ${response.status}`);
         } else {
           const responseData = await response.text();
@@ -259,6 +261,14 @@
                 }
               }
 
+              if (from.getAttribute && from.getAttribute("hydro-operation-id")) {
+                to.setAttribute("hydro-operation-id", from.getAttribute("hydro-operation-id"));
+                to.disabled = from.disabled;
+                if (from.classList.contains('hydro-request')) {
+                  to.classList.add('hydro-request');
+                }
+              }
+
               if (from.tagName === "INPUT" && from.type === 'checkbox') {
                 from.checked = to.checked;
               }
@@ -287,35 +297,45 @@
             window.location.href = redirectHeader;
           }
 
-          const triggerHeader = response.headers.get('Hydro-Trigger');
-          if (triggerHeader) {
-            const triggers = JSON.parse(triggerHeader);
-            triggers.forEach(trigger => {
-              if (trigger.scope === 'parent' && !parentComponent) {
-                return;
-              }
 
-              const scope = trigger.scope === 'parent' ? parentComponent.id : 'global';
-              const event = new CustomEvent(`${scope}:${trigger.name}`, {detail: {data: trigger.data}});
+          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;
+                }
 
-              setTimeout(() => {
-                document.dispatchEvent(event);
-              }, 0)
-            });
-          }
+                const eventScope = trigger.scope === 'parent' ? parentComponent.id : 'global';
+                const eventName = `${eventScope}:${trigger.name}`;
+                const eventData = {
+                  detail: {
+                    data: trigger.data,
+                    operationId: trigger.operationId
+                  }
+                };
+
+                document.dispatchEvent(new CustomEvent(eventName, eventData));
+              });
+            }
+          });
         }
       } finally {
-        clearTimeout(classTimeout);
-        el.classList.remove('hydro-request');
-        if (dispatchingElement) {
-          dispatchingElement.classList.remove('hydro-request');
-        }
+        setTimeout(() => {
+          clearTimeout(classTimeout);
+          clearTimeout(disableTimer);
 
-        clearTimeout(disableTimer);
+          if (operationId) {
+            const operationTrigger = document.querySelector(`[hydro-operation-id="${operationId}"]`);
+            operationStatus[operationId]--;
 
-        elementsToDisable.forEach((elementToDisable) => {
-          elementToDisable.disabled = false;
-        });
+            if (operationTrigger && operationStatus[operationId] <= 0) {
+              operationTrigger.disabled = false;
+              operationTrigger.classList.remove('hydro-request');
+            }
+          }
+        }, 20); // make sure it's delayed more than 0 and less than 50
       }
     });
   }
@@ -349,6 +369,7 @@
     hydroAction,
     loadPageContent,
     findComponent,
+    generateGuid,
     config
   };
 }
@@ -371,6 +392,7 @@ document.addEventListener('alpine:init', () => {
           if (el.disabled) {
             return;
           }
+
           setTimeout(() => window.Hydro.hydroAction(el, eventName), delay || 0)
         };
         el.addEventListener(eventName, eventHandler);
@@ -413,14 +435,21 @@ document.addEventListener('alpine:init', () => {
         if (el.disabled) {
           return;
         }
-        
+
         event.preventDefault();
-        const eventObj = new CustomEvent(`${scope}:${trigger.name}`, {detail: {data: trigger.data, dispatchId: trigger.dispatchId}});
-        el.setAttribute("hydro-dispatch-id", trigger.dispatchId);
 
-        setTimeout(() => {
-          document.dispatchEvent(eventObj);
-        }, 0)
+        const operationId = window.Hydro.generateGuid();
+        el.setAttribute("hydro-operation-id", operationId);
+
+        const eventName = `${scope}:${trigger.name}`;
+        const eventData = {
+          detail: {
+            data: trigger.data,
+            operationId
+          }
+        };
+
+        document.dispatchEvent(new CustomEvent(eventName, eventData));
       };
       el.addEventListener(eventName, eventHandler);
       cleanup(() => {
@@ -498,7 +527,7 @@ document.addEventListener('alpine:init', () => {
 
   let currentBoostUrl;
 
-  Alpine.directive('boost', (el, {expression}, {effect, cleanup}) => {
+  Alpine.directive('hydro-link', (el, {expression}, {effect, cleanup}) => {
     effect(() => {
       const handleClick = async (event) => {
         event.preventDefault();
diff --git a/src/TagHelpers/HydroBoostTagHelper.cs b/src/TagHelpers/HydroBoostTagHelper.cs
index 669a565..92cba01 100644
--- a/src/TagHelpers/HydroBoostTagHelper.cs
+++ b/src/TagHelpers/HydroBoostTagHelper.cs
@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Razor.TagHelpers;
+using Microsoft.AspNetCore.Razor.TagHelpers;
 
 namespace Hydro.TagHelpers;
 
@@ -24,7 +24,8 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
         ArgumentNullException.ThrowIfNull(context);
         ArgumentNullException.ThrowIfNull(output);
 
+        output.Attributes.RemoveAll("hydro-boost");
         output.Attributes.Add("x-data", "");
-        output.Attributes.Add("x-boost", "");
+        output.Attributes.Add("x-hydro-link", "");
     }
-}
+}
\ No newline at end of file
diff --git a/src/TagHelpers/HydroDispatchTagHelper.cs b/src/TagHelpers/HydroDispatchTagHelper.cs
index 7aca183..66cf197 100644
--- a/src/TagHelpers/HydroDispatchTagHelper.cs
+++ b/src/TagHelpers/HydroDispatchTagHelper.cs
@@ -63,8 +63,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
         {
             name = GetFullTypeName(Data.GetType()),
             data = Data,
-            scope = Scope,
-            dispatchId = Guid.NewGuid().ToString("N")
+            scope = Scope
         };
         
         output.Attributes.Add(new(
diff --git a/src/TagHelpers/HydroLinkTagHelper.cs b/src/TagHelpers/HydroLinkTagHelper.cs
new file mode 100644
index 0000000..4c0b760
--- /dev/null
+++ b/src/TagHelpers/HydroLinkTagHelper.cs
@@ -0,0 +1,31 @@
+using Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Hydro.TagHelpers;
+
+/// <summary>
+/// Provides a mechanism to load the target url in the background and witch the body content when ready
+/// </summary>
+[HtmlTargetElement("*", Attributes = TagAttribute)]
+public sealed class HydroLinkTagHelper : TagHelper
+{
+    private const string TagAttribute = "hydro-link";
+
+    /// <summary>
+    /// Attribute that triggers the boost behavior
+    /// </summary>
+    [HtmlAttributeName(TagAttribute)]
+    public bool Link { get; set; } = true;
+    
+    /// <summary>
+    /// Processes the tag helper
+    /// </summary>
+    public override void Process(TagHelperContext context, TagHelperOutput output)
+    {
+        ArgumentNullException.ThrowIfNull(context);
+        ArgumentNullException.ThrowIfNull(output);
+
+        output.Attributes.RemoveAll("hydro-link");
+        output.Attributes.Add(new("x-data"));
+        output.Attributes.Add(new("x-hydro-link"));
+    }
+}
\ No newline at end of file
diff --git a/src/Utils/Int32Converter.cs b/src/Utils/Int32Converter.cs
index 1095767..44c6a31 100644
--- a/src/Utils/Int32Converter.cs
+++ b/src/Utils/Int32Converter.cs
@@ -13,7 +13,7 @@ public override object ReadJson(JsonReader reader, Type objectType, object exist
             : serializer.Deserialize(reader);
 
     public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer) =>
-        throw new NotImplementedException();
+        throw new InvalidOperationException();
     
     public override bool CanWrite => false;
 }
\ No newline at end of file