Merge pull request #6 from hydrostack/5-polling

5 polling

Author: kjeske

docs/content/.vitepress/config.js

@@ -32,6 +32,7 @@ export default defineConfig({
           { text: 'Navigation', link: '/features/navigation' },
           { text: 'Authorization', link: '/features/authorization' },
           { text: 'Form validation', link: '/features/form-validation' },
+          { text: 'Long polling', link: '/features/long-polling' },
           { text: 'Errors handling', link: '/features/errors-handling' },
           { text: 'Anti-forgery token', link: '/features/xsrf-token' },
           { text: 'User interface utilities', link: '/features/ui-utils' },

docs/content/features/long-polling.md

@@ -0,0 +1,36 @@
+---
+outline: deep
+---
+
+# Long polling
+
+Hydro provides a feature to poll the component's action at regular intervals. It is useful when you want to make sure that in one of the places on the page you're displaying the most recent data.
+
+To enable long polling on an action, decorate it with `[Poll]` attribute. Default interval is set to 3 seconds (`3_000` milliseconds). To customize it, change the `Interval` property to the desired value in milliseconds. Actions decorated with `[Poll]` attribute have to be parameterless.
+
+In the example below the `Refresh` action will be called every 60 seconds:
+
+```csharp
+public class NotificationsIndicator(INotifications notifications) : HydroComponent
+{
+    public int NotificationsCount { get; set; }
+    
+    [Poll(Interval = 60_000)]
+    public async Task Refresh()
+    {
+        NotificationsCount = await notifications.GetCount();
+    }
+}
+```
+
+```razor
+@model NotificationsIndicator
+
+<div>
+  Notifications: <strong>@Model.NotificationsCount</strong>
+</div>
+```
+
+## Polling pauses
+
+When a page with a polling component is hidden (not in the currently open tab), polling will stop and restart once the tab becomes visible again.

src/HydroComponent.cs

@@ -28,6 +28,8 @@ public abstract class HydroComponent : ViewComponent
     private readonly ConcurrentDictionary<CacheKey, object> _requestCache = new();
     private static readonly ConcurrentDictionary<CacheKey, object> PersistentCache = new();
 
+    private static readonly ConcurrentDictionary<Type, List<HydroPoll>> Polls = new();
+
     private readonly List<HydroComponentEvent> _dispatchEvents = new();
     private readonly HashSet<HydroEventSubscription> _subscriptions = new();
 
@@ -72,6 +74,47 @@ public abstract class HydroComponent : ViewComponent
     public HydroComponent()
     {
         Subscribe<HydroBind>(data => SetPropertyValue(data.Name, data.Value));
+
+        ConfigurePolls();
+    }
+
+    private void ConfigurePolls()
+    {
+        var componentType = GetType();
+        
+        if (Polls.ContainsKey(componentType))
+        {
+            return;
+        }
+        
+        var methods = componentType
+            .GetMethods(BindingFlags.Public | BindingFlags.Instance)
+            .Where(m => m.DeclaringType != typeof(HydroComponent))
+            .Select(m => (Method: m, Attribute: m.GetCustomAttribute<PollAttribute>()))
+            .Where(m => m.Attribute != null)
+            .Select(m => (m.Method, m.Attribute, ParametersCount: m.Method.GetParameters().Length))
+            .ToList();
+
+        if (methods.Any(p => p.Method.GetBaseDefinition() != p.Method))
+        {
+            throw new InvalidOperationException("Poll can be defined only on custom actions");
+        }
+        
+        if (methods.Any(p => p.ParametersCount != 0))
+        {
+            throw new InvalidOperationException("Poll can be defined only on actions without parameters");
+        }
+            
+        if (methods.Any(p => p.Attribute.Interval <= 0))
+        {
+            throw new InvalidOperationException("Polling's interval is invalid");
+        }
+
+        var polls = methods
+            .Select(p => new HydroPoll(p.Method.Name, TimeSpan.FromMilliseconds(p.Attribute.Interval)))
+            .ToList();
+        
+        Polls.TryAdd(componentType, polls);
     }
 
     /// <summary>
@@ -193,7 +236,7 @@ public virtual Task RenderAsync()
         Render();
         return Task.CompletedTask;
     }
-
+    
     /// <summary>
     /// Triggered before each render
     /// </summary>
@@ -368,6 +411,14 @@ private async Task<string> GenerateComponentHtml(string componentId, IPersistent
         var hydroAttribute = rootElement.SetAttributeValue("hydro", null);
         hydroAttribute.QuoteType = AttributeValueQuote.WithoutValue;
 
+        if (Polls.TryGetValue(GetType(), out var polls))
+        {
+            for (var i = 0; i < polls.Count; i++)
+            {
+                rootElement.AppendChild(GetPollScript(componentHtmlDocument, polls[i], i));
+            }
+        }
+        
         rootElement.AppendChild(GetModelScript(componentHtmlDocument, componentId, persistentState));
 
         foreach (var subscription in _subscriptions)
@@ -475,6 +526,14 @@ private HtmlNode GetEventSubscriptionScript(HtmlDocument document, HydroEventSub
         scriptNode.SetAttributeValue("x-on-hydro-event", JsonConvert.SerializeObject(eventData));
         return scriptNode;
     }
+    
+    private HtmlNode GetPollScript(HtmlDocument document, HydroPoll poll, int index)
+    {
+        var scriptNode = document.CreateElement("script");
+        scriptNode.SetAttributeValue($"x-hydro-polling.{poll.Interval.TotalMilliseconds}ms._{index}", poll.Action);
+        scriptNode.SetAttributeValue("type", "text/hydro");
+        return scriptNode;
+    }
 
     private void PopulateDispatchers()
     {

src/HydroPoll.cs

@@ -0,0 +1,3 @@
+namespace Hydro;
+
+internal record HydroPoll(string Action, TimeSpan Interval);

src/PollAttribute.cs

@@ -0,0 +1,13 @@
+namespace Hydro;
+
+/// <summary>
+/// Enable long polling for action decorated with this attribute
+/// </summary>
+[AttributeUsage(AttributeTargets.Method)]
+public class PollAttribute : Attribute
+{
+    /// <summary>
+    /// How often action will be called. In milliseconds.
+    /// </summary>
+    public int Interval { get; set; } = 3_000;
+}

src/Scripts/hydro.js

@@ -428,50 +428,6 @@
 window.Hydro = new HydroCore();
 
 document.addEventListener('alpine:init', () => {
-  Alpine.directive('hydro-action', (el, { expression }, { effect, cleanup }) => {
-    effect(() => {
-      const customEvent = el.getAttribute('hydro-event');
-      const eventName = customEvent || (el.tagName === 'FORM' ? 'submit' : 'click');
-      const delay = el.getAttribute('hydro-delay');
-      const autorun = el.getAttribute('hydro-autorun');
-
-      if (autorun) {
-        setTimeout(() => window.Hydro.hydroAction(el), delay || 0)
-      } else {
-        const eventHandler = async (event) => {
-          event.preventDefault();
-          if (el.disabled) {
-            return;
-          }
-
-          setTimeout(() => window.Hydro.hydroAction(el, eventName), delay || 0)
-        };
-        el.addEventListener(eventName, eventHandler);
-        cleanup(() => {
-          el.removeEventListener(eventName, eventHandler);
-        });
-      }
-    });
-  });
-
-  Alpine.directive('hydro-on', (el, { value, expression }, { effect, cleanup }) => {
-    effect(() => {
-      const eventHandler = async (event) => {
-        event.preventDefault();
-        if (el.disabled) {
-          return;
-        }
-
-        setTimeout(() => window.Hydro.hydroAction(el, value, expression), 200)
-      };
-
-      el.addEventListener(value, eventHandler);
-      cleanup(() => {
-        el.removeEventListener(value, eventHandler);
-      });
-    });
-  });
-
   Alpine.directive('hydro-dispatch', (el, { expression }, { effect, cleanup }) => {
     effect(() => {
       if (!document.contains(el)) {
@@ -553,6 +509,42 @@ document.addEventListener('alpine:init', () => {
       });
     });
   }).before('on');
+  
+  Alpine.directive('hydro-polling', Alpine.skipDuringClone((el, { value, expression, modifiers }, { effect, cleanup }) => {
+    let isQueued = false;
+    let interval;
+    const component = window.Hydro.findComponent(el);
+    const time = parseInt(modifiers[0].replace('ms', ''));
+
+    const setupInterval = () => {
+      interval = setInterval(async () => {
+        if (document.hidden) {
+          isQueued = true;
+          clearInterval(interval);
+          return;
+        }
+
+        await window.Hydro.hydroAction(el, component, { name: expression }, null);
+      }, time);
+    }
+
+    const handleVisibilityChange = async () => {
+      if (!document.hidden && isQueued) {
+        isQueued = false;
+        await window.Hydro.hydroAction(el, component, { name: expression });
+        setupInterval();
+      }
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    setupInterval();
+
+    cleanup(() => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      clearInterval(interval);
+    });
+
+  }));
 
   Alpine.directive('on-hydro-event', (el, { expression }, { effect, cleanup }) => {
     effect(() => {
@@ -581,7 +573,6 @@ document.addEventListener('alpine:init', () => {
     });
   });
 
-
   let currentBoostUrl;
 
   Alpine.directive('hydro-link', (el, { expression }, { effect, cleanup }) => {

src/TagHelpers/HydroActionTagHelper.cs

@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Html;
+using Microsoft.AspNetCore.Html;
 using Microsoft.AspNetCore.Mvc.Rendering;
 using Microsoft.AspNetCore.Mvc.ViewFeatures;
 using Microsoft.AspNetCore.Razor.TagHelpers;