feat: add helpful error messages to IntersectionObserve component (#34)

* feat: add helpful error messages to `IntersectionObserve` component

* fix: remove test for checking error messages

Co-authored-by: Louie Colgan <[email protected]>

Author: ljbc1994

Directory.Build.props

@@ -33,7 +33,7 @@
 
   <!-- Versioning properties -->
   <PropertyGroup>
-    <VersionPrefix Condition=" '$(VersionPrefix)'=='' ">3.0.0</VersionPrefix>
+    <VersionPrefix Condition=" '$(VersionPrefix)'=='' ">3.0.1</VersionPrefix>
     <VersionSuffix Condition=" '$(VersionSuffix)'=='' ">dev</VersionSuffix>
   </PropertyGroup>
 

README.md

@@ -291,6 +291,14 @@ public class IntersectionObserverEntry
 }
 ```
 
+## Additional Information
+
+### Upgrading to `2.0.1`+
+
+In versions prior to `2.0.1`, the `IntersectionObserve` component didn't require a reference to the node as it was wrapped in an element that was automatically observed. This was changed to ensure the consumer provides the reference to prevent any potential layout issues and make it explicit what element should be observed.
+
+Therefore, before `2.0.1`, if the consumer had an element with `display: none;` within the `IntersectionObserve` component, this would have worked. However, as we're now observing the element provided as opposed to a wrapped element, this will no longer work. To resolve this, you can wrap the observed element in a div and observe the container div instead of the observed element.
+
 ## Feature Requests
 There's so much that `IntersectionObserver` can do, so if you have any requests or you want better documentation and examples, feel free to make a pull request or create an issue!
 

src/Ljbc1994.Blazor.IntersectionObserver/IntersectionObserve.cs

@@ -10,6 +10,8 @@ namespace Ljbc1994.Blazor.IntersectionObserver.Components
 {
     public class IntersectionObserve : ComponentBase, IAsyncDisposable
     {
+        private const string NO_ELEMENT_MESSAGE = "The element reference to observe is required, for example: @ref=\"Context.Ref.Current\" must be provided on the element";
+
         [Inject] private IIntersectionObserverService ObserverService { get; set; }
 
         [Parameter] public RenderFragment<IntersectionObserverContext> ChildContent { get; set; }
@@ -40,12 +42,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         private async Task InitialiseObserver()
         {
-            if (this.IntersectionObserverContext?.Ref?.Current == null)
+            var elementReference = this.IntersectionObserverContext?.Ref?.Current;
+
+            if (elementReference == null || Equals(elementReference, default(ElementReference)))
             {
-                throw new Exception("You need to provide the element to observe, for example: @ref=\"Context.Ref.Current\"");
+                throw new Exception(NO_ELEMENT_MESSAGE);
             }
 
-            this.Observer = await this.ObserverService.Observe(this.IntersectionObserverContext.Ref.Current, this.OnIntersectUpdate, this.Options);
+            this.Observer = await this.ObserverService.Observe(elementReference.Value, this.OnIntersectUpdate, this.Options);
         }
 
         private async void OnIntersectUpdate(IList<IntersectionObserverEntry> entries)
@@ -80,6 +84,10 @@ public async ValueTask DisposeAsync()
 
         protected override void BuildRenderTree(RenderTreeBuilder builder)
         {
+            if (this.ChildContent == null)
+            {
+                throw new Exception($"No element found to observe. {NO_ELEMENT_MESSAGE}");
+            }
             this.ChildContent(this.IntersectionObserverContext)(builder);
         }
     }

src/Ljbc1994.Blazor.IntersectionObserver/Ljbc1994.Blazor.IntersectionObserver.csproj

@@ -16,10 +16,14 @@
     <Title>Blazor Intersection Observer</Title>
     <Description>Intersection Observer API for Blazor applications</Description>
     <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
-    <Version>3.0.0</Version>
+    <Version>3.0.1</Version>
     <Product>BlazorIntersectionObserver</Product>
     <PackageReadmeFile>README.md</PackageReadmeFile>
     <PackageReleaseNotes>
+3.0.1
+- Add helpful error messages if the consumer fails to provide an element to observe or does not provide
+any child content.
+
 3.0.0
 - *BREAKING CHANGE* Namespace has been changed to `Ljbc1994.Blazor.IntersectionObserver` to avoid
 namespace conflicts with Blazor libraries.