Refactor internal frame tracking & time handling (#29)

* rework FrameTracker to consistently trigger on next frame

* use new FrameTracker implementation

* remove unnecessary difference between server & client side frame tracking

* listbox in dialog test

* prettier

* ci & cd (install .net 6 & 7)

* try CI on windows

* disable prettier check on windows CI

* fix prettier check on windows CI

* switch CI back to ubuntu-latest & stop using Task.Delay to wait on state/component changes in tests

* use TimeProvider instead of Task.Delay for transitions

* use TimeProvider instead of Task.Delay

* code format

* update tests to use TestTimeProvider

* fixes

* introduce ITimer interface

* code format

* TestTimer implementation

* fix tests

.gitattributes

@@ -1 +1 @@
-* text=auto
+* text=auto eol=lf

.github/workflows/ci.yml

@@ -17,7 +17,9 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-dotnet@v3
         with:
-          dotnet-version: 7.0.x
+          dotnet-version: |
+            6.0.x
+            7.0.x
       - uses: actions/setup-node@v3
         with:
           node-version: 18.x

.github/workflows/nuget-cd.yml

@@ -19,7 +19,9 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-dotnet@v3
         with:
-          dotnet-version: 7.0.x
+          dotnet-version: |
+            6.0.x
+            7.0.x
       - uses: actions/setup-node@v3
         with:
           node-version: 18.x

.prettierignore

@@ -8,3 +8,4 @@ website/Ignis.Website.Server/wwwroot/_docs
 website/Ignis.Website.WebAssembly/wwwroot/_docs
 website/Ignis.Website/wwwroot/js/website.min.js
 website/Ignis.Website/wwwroot/css/tailwind.min.css
+tests/e2e/Ignis.Tests.E2E.Website/wwwroot/css/app.min.css

packages/Ignis.Components/FrameTracker.cs

@@ -2,38 +2,36 @@
 
 internal class FrameTracker
 {
-    private readonly IHostContext _hostContext;
-
+    private long _currentFrame;
+    private long? _frameToExecuteOn;
+    private IgnisComponentBase? _target;
     private Action? _action;
 
     public bool IsPending => _action != null;
 
-    public FrameTracker(IHostContext hostContext)
-    {
-        _hostContext = hostContext ?? throw new ArgumentNullException(nameof(hostContext));
-    }
-
-    public void ExecuteOnNextFrame(Action action, Action<bool> update)
+    public void ExecuteOnNextFrame(IgnisComponentBase target, Action action)
     {
-        if (action == null) throw new ArgumentNullException(nameof(action));
-
-        // If we're server-side, we can just execute the action on the next render, otherwise we need to wait for the second render. (WebAssembly)
-        _action = _hostContext.IsServerSide
-            ? action
-            : () =>
-            {
-                _action = action;
+        _target = target ?? throw new ArgumentNullException(nameof(target));
+        _action = action ?? throw new ArgumentNullException(nameof(action));
 
-                update(obj: false);
-            };
+        _frameToExecuteOn = _currentFrame + 1;
     }
 
     public void OnAfterRender()
     {
-        var action = _action;
+        if (_currentFrame >= _frameToExecuteOn)
+        {
+            _frameToExecuteOn = null;
+
+            _action?.Invoke();
 
-        _action = null;
+            _action = null;
+        }
+        else if (_frameToExecuteOn.HasValue)
+        {
+            _target?.Update();
+        }
 
-        action?.Invoke();
+        ++_currentFrame;
     }
 }

packages/Ignis.Components/ITimer.cs

@@ -0,0 +1,7 @@
+namespace Ignis.Components;
+
+//TODO switch to System.Threading.ITimer when it's available
+// https://learn.microsoft.com/en-us/dotnet/api/system.threading.itimer?view=net-8.0
+internal interface ITimer : IDisposable
+{
+}

packages/Ignis.Components/Ignis.Components.csproj

@@ -23,6 +23,7 @@
     <InternalsVisibleTo Include="Ignis.Components.HeadlessUI"/>
     <InternalsVisibleTo Include="Ignis.Components.Reactivity"/>
     <InternalsVisibleTo Include="Ignis.Components.Web"/>
+    <InternalsVisibleTo Include="Ignis.Tests.Common"/>
   </ItemGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net6.0'">

packages/Ignis.Components/IgnisComponentExtensions.cs

@@ -15,6 +15,8 @@ public static IServiceCollection AddIgnis(this IServiceCollection serviceCollect
 
         serviceCollection.TryAddScoped<IContentRegistry, ContentRegistry>();
 
+        serviceCollection.TryAddSingleton<TimeProvider, TimeProviderImplementation>();
+
         return serviceCollection;
     }
 

packages/Ignis.Components/TimeProvider.cs

@@ -0,0 +1,11 @@
+namespace Ignis.Components;
+
+//TODO switch to System.TimeProvider when it's available
+// https://learn.microsoft.com/en-us/dotnet/api/system.timeprovider?view=net-8.0
+internal abstract class TimeProvider
+{
+    public virtual ITimer CreateTimer(TimerCallback callback, object? state, TimeSpan dueTime, TimeSpan period)
+    {
+        return new TimerImplementation(callback, state, dueTime, period);
+    }
+}

packages/Ignis.Components/TimeProviderImplementation.cs

@@ -0,0 +1,5 @@
+namespace Ignis.Components;
+
+internal class TimeProviderImplementation : TimeProvider
+{
+}

packages/Ignis.Components/TimerImplementation.cs

@@ -0,0 +1,16 @@
+namespace Ignis.Components;
+
+internal class TimerImplementation : ITimer
+{
+    private readonly Timer _timer;
+
+    public TimerImplementation(TimerCallback callback, object? state, TimeSpan dueTime, TimeSpan period)
+    {
+        _timer = new Timer(callback, state, dueTime, period);
+    }
+
+    public void Dispose()
+    {
+        _timer.Dispose();
+    }
+}

packages/Tailwind/Ignis.Components.HeadlessUI/Dialog.cs

@@ -179,7 +179,7 @@ public void Open(Action? continueWith = null)
 
         var __ = IsOpenChanged.InvokeAsync(_isOpen = true);
 
-        if (continueWith != null) FrameTracker.ExecuteOnNextFrame(continueWith, Update);
+        if (continueWith != null) FrameTracker.ExecuteOnNextFrame(this, continueWith);
 
         Update();
     }
@@ -206,7 +206,7 @@ private void CloseCore(Action? continueWith, bool async = false)
     {
         var __ = IsOpenChanged.InvokeAsync(_isOpen = false);
 
-        if (continueWith != null) FrameTracker.ExecuteOnNextFrame(continueWith, Update);
+        if (continueWith != null) FrameTracker.ExecuteOnNextFrame(this, continueWith);
 
         Update(async);
     }
@@ -226,7 +226,7 @@ public void SetDescription(IDialogDescription description)
     /// <inheritdoc />
     public void CloseFromTransition(Action? continueWith = null)
     {
-        CloseCore(continueWith, true);
+        CloseCore(continueWith, async: true);
     }
 
     /// <inheritdoc />

packages/Tailwind/Ignis.Components.HeadlessUI/OpenCloseWithTransitionComponentBase.cs

@@ -38,8 +38,8 @@ public void Open(Action? continueWith = null)
         _ = IsOpenChanged.InvokeAsync(_isOpen = true);
 
         if (_transition != null)
-            FrameTracker.ExecuteOnNextFrame(() => _transition.Show(() => OnAfterOpen(continueWith)), Update);
-        else if (continueWith != null) FrameTracker.ExecuteOnNextFrame(() => OnAfterOpen(continueWith), Update);
+            FrameTracker.ExecuteOnNextFrame(this, () => _transition.Show(() => OnAfterOpen(continueWith)));
+        else if (continueWith != null) FrameTracker.ExecuteOnNextFrame(this, () => OnAfterOpen(continueWith));
 
         Update();
     }
@@ -73,7 +73,7 @@ private void CloseCore(Action? continueWith, bool async = false)
     {
         _ = IsOpenChanged.InvokeAsync(_isOpen = false);
 
-        if (continueWith != null) FrameTracker.ExecuteOnNextFrame(continueWith, Update);
+        if (continueWith != null) FrameTracker.ExecuteOnNextFrame(this, continueWith);
 
         Update(async);
     }

packages/Tailwind/Ignis.Components.HeadlessUI/Transition.cs

@@ -58,7 +58,6 @@ public bool Show
 
     [Parameter] public bool Appear { get; set; }
 
-    /// <inheritdoc />
     [CascadingParameter] public IContentHost? Outlet { get; set; }
 
     [CascadingParameter] public IMenu? Menu { get; set; }
@@ -174,7 +173,7 @@ protected override void LeaveTransition(Action? continueWith = null)
     {
         _transitioningTo = false;
 
-        WatchTransition(false, () =>
+        WatchTransition(isEnter: false, () =>
         {
             _show = false;
 
@@ -221,7 +220,7 @@ private void WatchTransition(bool isEnter, Action? continueWith)
         var startedTransitions = new List<ITransitionChild>();
         var finishedTransitions = 0;
 
-        if (isEnter) base.EnterTransition(() => AggregateDialogs(true, ContinueWith));
+        if (isEnter) base.EnterTransition(() => AggregateDialogs(open: true, ContinueWith));
         else ContinueWith();
         return;
 
@@ -243,7 +242,7 @@ void ContinueWith()
             if (finishedTransitions == startedTransitions.Count + 1)
             {
                 if (isEnter) continueWith?.Invoke();
-                else AggregateDialogs(false, () => base.LeaveTransition(continueWith));
+                else AggregateDialogs(open: false, () => base.LeaveTransition(continueWith));
             }
         }
     }

packages/Tailwind/Ignis.Components.HeadlessUI/TransitionBase.cs

@@ -33,7 +33,8 @@ public string? CssClass
     {
         get
         {
-            var originalClassString = AdditionalAttributes?.FirstOrDefault(a => string.Equals(a.Key, "class", StringComparison.OrdinalIgnoreCase));
+            var originalClassString = AdditionalAttributes?.FirstOrDefault(a =>
+                string.Equals(a.Key, "class", StringComparison.OrdinalIgnoreCase));
             return _state switch
             {
                 TransitionState.Entering => $"{originalClassString?.Value} {Enter} {EnterFrom}".Trim(),
@@ -68,6 +69,8 @@ public string? CssClass
 
     [Inject] internal FrameTracker FrameTracker { get; set; } = null!;
 
+    [Inject] internal TimeProvider TimeProvider { get; set; } = null!;
+
     protected virtual void EnterTransition(Action? continueWith = null)
     {
         if (_state != TransitionState.Default && _state != TransitionState.CanEnter) return;
@@ -76,17 +79,22 @@ protected virtual void EnterTransition(Action? continueWith = null)
 
         UpdateState(TransitionState.Entering, () =>
         {
+            ITimer timer = null!;
             var (graceDuration, transitionDuration) = ParseDuration(Enter);
-            _ = Task.Delay(graceDuration).ContinueWith(__ =>
+            timer = TimeProvider.CreateTimer(_ =>
             {
+                // ReSharper disable once AccessToModifiedClosure
+                timer.Dispose();
                 UpdateState(TransitionState.Entered, () =>
                 {
-                    _ = Task.Delay(transitionDuration).ContinueWith(_ =>
+                    timer = TimeProvider.CreateTimer(_ =>
                     {
+                        // ReSharper disable once AccessToModifiedClosure
+                        timer.Dispose();
                         UpdateState(TransitionState.CanLeave, continueWith);
-                    });
+                    }, state: null, transitionDuration, Timeout.InfiniteTimeSpan);
                 });
-            });
+            }, state: null, graceDuration, Timeout.InfiniteTimeSpan);
         });
     }
 
@@ -98,19 +106,25 @@ protected virtual void LeaveTransition(Action? continueWith = null)
 
         UpdateState(TransitionState.Leaving, () =>
         {
+            ITimer timer = null!;
             var (graceDuration, transitionDuration) = ParseDuration(Leave);
-            _ = Task.Delay(graceDuration).ContinueWith(__ =>
+            timer = TimeProvider.CreateTimer(_ =>
             {
+                // ReSharper disable once AccessToModifiedClosure
+                timer.Dispose();
                 UpdateState(TransitionState.Left, () =>
                 {
-                    _ = Task.Delay(transitionDuration).ContinueWith(_ =>
+                    timer = TimeProvider.CreateTimer(_ =>
                     {
+                        // ReSharper disable once AccessToModifiedClosure
+                        timer.Dispose();
+
                         RenderContent = false;
 
                         UpdateState(TransitionState.CanEnter, continueWith);
-                    });
+                    }, state: null, transitionDuration, Timeout.InfiniteTimeSpan);
                 });
-            });
+            }, state: null, graceDuration, Timeout.InfiniteTimeSpan);
         });
     }
 
@@ -120,9 +134,9 @@ private void UpdateState(TransitionState state, Action? continueWith)
 
         _state = state;
 
-        if (continueWith != null) FrameTracker.ExecuteOnNextFrame(continueWith, Update);
+        if (continueWith != null) FrameTracker.ExecuteOnNextFrame(this, continueWith);
 
-        Update(true);
+        Update(async: true);
     }
 
     /// <inheritdoc />
@@ -133,12 +147,12 @@ public virtual Task OnAfterRenderAsync()
         return Task.CompletedTask;
     }
 
-    private static (int, int) ParseDuration(string? classString)
+    private static (TimeSpan, TimeSpan) ParseDuration(string? classString)
     {
         var durationClass = classString?.Split(' ')
             .Select(v => v.Trim().Split(':')[v.Trim().Split(':').Length - 1])
             .FirstOrDefault(v => v.StartsWith("duration-", StringComparison.Ordinal));
-        if (durationClass == null) return (0, 0);
+        if (durationClass == null) return (TimeSpan.Zero, TimeSpan.Zero);
 
         var factor = 1;
 
@@ -156,15 +170,16 @@ private static (int, int) ParseDuration(string? classString)
                 durationString = durationString[..^1];
                 factor = 1000;
             }
-            else return (0, 0);
+            else return (TimeSpan.Zero, TimeSpan.Zero);
         }
 
         var duration = int.Parse(durationString, CultureInfo.InvariantCulture) * factor;
-        if (duration <= 0) return (0, 0);
+        if (duration <= 0) return (TimeSpan.Zero, TimeSpan.Zero);
 
         return duration < TransitionGraceDuration
-            ? (0, duration)
-            : (TransitionGraceDuration, duration - TransitionGraceDuration);
+            ? (TimeSpan.Zero, TimeSpan.FromMilliseconds(duration))
+            : (TimeSpan.FromMilliseconds(TransitionGraceDuration),
+                TimeSpan.FromMilliseconds(duration - TransitionGraceDuration));
     }
 
     private enum TransitionState

tests/Ignis.Tests.Common/IgnisTestExtensions.cs

@@ -0,0 +1,18 @@
+using Ignis.Components;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace Ignis.Tests.Common;
+
+public static class IgnisTestExtensions
+{
+    public static IServiceCollection AddIgnisTestServices(this IServiceCollection serviceCollection)
+    {
+        if (serviceCollection == null) throw new ArgumentNullException(nameof(serviceCollection));
+
+        serviceCollection.AddIgnis();
+        serviceCollection.AddSingleton<IHostContext, TestHostContext>();
+        serviceCollection.AddSingleton<TimeProvider, TestTimeProvider>();
+
+        return serviceCollection;
+    }
+}

tests/Ignis.Tests.Common/TestHostContext.cs

@@ -2,7 +2,7 @@
 
 namespace Ignis.Tests.Common;
 
-public class TestHostContext : IHostContext
+internal class TestHostContext : IHostContext
 {
     public bool IsPrerendering => false;
 

tests/Ignis.Tests.Common/TestTimeProvider.cs

@@ -0,0 +1,11 @@
+using Ignis.Components;
+
+namespace Ignis.Tests.Common;
+
+internal class TestTimeProvider : TimeProvider
+{
+    public override ITimer CreateTimer(TimerCallback callback, object? state, TimeSpan dueTime, TimeSpan period)
+    {
+        return new TestTimer(callback);
+    }
+}