Added Map demo.

samples/KristofferStrube.Blazor.WebIDL.WasmExample/KristofferStrube.Blazor.WebIDL.WasmExample.csproj

@@ -13,4 +13,10 @@
   <ItemGroup>
     <ProjectReference Include="..\..\src\KristofferStrube.Blazor.WebIDL\KristofferStrube.Blazor.WebIDL.csproj" />
   </ItemGroup>
+
+  <ItemGroup>
+    <Content Update="Pages\MapLike.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
+  </ItemGroup>
 </Project>

samples/KristofferStrube.Blazor.WebIDL.WasmExample/Pages/MapLike.razor

@@ -0,0 +1,86 @@
+@page "/MapLike"
+
+@inject IJSRuntime JSRuntime
+
+<PageTitle>WebIDL - MapLike</PageTitle>
+
+<h1>MapLike</h1>
+
+<p>This page shows a very simple way to implement a wrapper for a JS <code>Map</code> simply by implementing the <code>IReadonlyMapLike</code> interface.</p>
+
+
+<h3>
+    The map currently has size: <code>@size</code>
+</h3>
+@if (size > 0)
+{
+    <h3>
+        The values are: <code>[@string.Join(", ", values)]</code>
+    </h3>
+}
+
+
+@code {
+    Map map = default!;
+    ulong size;
+    List<string> values = new();
+    string inputText = "";
+    double inputNumber = 0;
+    bool inputBoolean = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        map = await Map.CreateAsync<object>(JSRuntime);
+
+        await UpdateMapInformationAsync();
+    }
+
+    async Task UpdateMapInformationAsync()
+    {
+        size = await map.GetSizeAsync();
+        values.Clear();
+    }
+
+    [IJSWrapperConverter]
+    public class Map : IReadonlyMapLike<Map, string, string>, IJSCreatable<Map>
+    {
+        /// <inheritdoc/>
+        public IJSObjectReference JSReference { get; }
+        /// <inheritdoc/>
+        public IJSRuntime JSRuntime { get; }
+        /// <inheritdoc/>
+        public bool DisposesJSReference { get; }
+
+        public static async Task<Map> CreateAsync<T>(IJSRuntime jSRuntime)
+        {
+            var jSInstance = await jSRuntime.InvokeAsync<IJSObjectReference>("constructMap");
+            return new Map(jSRuntime, jSInstance, new() { DisposesJSReference = true });
+        }
+
+        /// <inheritdoc/>
+        public static Task<Map> CreateAsync(IJSRuntime jSRuntime, IJSObjectReference jSReference)
+        {
+            return Task.FromResult(new Map(jSRuntime, jSReference, new()));
+        }
+
+        /// <inheritdoc/>
+        public static Task<Map> CreateAsync(IJSRuntime jSRuntime, IJSObjectReference jSReference, CreationOptions options)
+        {
+            return Task.FromResult(new Map(jSRuntime, jSReference, options));
+        }
+
+        public Map(IJSRuntime jSRuntime, IJSObjectReference jSReference, CreationOptions options)
+        {
+            JSRuntime = jSRuntime;
+            JSReference = jSReference;
+            DisposesJSReference = options.DisposesJSReference;
+        }
+
+        /// <inheritdoc/>
+        public async ValueTask DisposeAsync()
+        {
+            await IJSWrapper.DisposeJSReference(this);
+            GC.SuppressFinalize(this);
+        }
+    }
+}

samples/KristofferStrube.Blazor.WebIDL.WasmExample/Shared/NavMenu.razor

@@ -19,6 +19,13 @@
                 <span class="oi oi-basket" aria-hidden="true"></span> SetLike
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="MapLike">
+                <svg class="bi" viewBox="0 0 16 16">
+                    <polygon stroke="white" stroke-width="2" fill="transparent" points="8,2 2,5 2,14 8,10 8,10 14,14 14,5 8,2 8,10 8,9" stroke-linejoin="round" stroke-linecap="round"></polygon>
+                </svg> MapLike
+            </NavLink>
+        </div>
     </nav>
 </div>
 

samples/KristofferStrube.Blazor.WebIDL.WasmExample/Shared/NavMenu.razor.css

@@ -18,6 +18,16 @@
     top: -2px;
 }
 
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
 .nav-item {
     font-size: 0.9rem;
     padding-bottom: 0.5rem;

samples/KristofferStrube.Blazor.WebIDL.WasmExample/wwwroot/index.html

@@ -49,6 +49,10 @@
         function constructSet(iterable) {
             return new Set(iterable);
         }
+
+        function constructMap() {
+            return new Map();
+        }
     </script>
 </head>
 

src/KristofferStrube.Blazor.WebIDL/Declerations/IReadonlyMapLike.cs

@@ -0,0 +1,18 @@
+using Microsoft.JSInterop;
+
+namespace KristofferStrube.Blazor.WebIDL;
+
+/// <summary>
+/// Objects implementing an interface that is declared to be maplike represent an ordered map of key–value pairs, initially empty, known as that object’s map entries.
+/// </summary>
+/// <remarks><see href="https://webidl.spec.whatwg.org/#idl-maplike">See the API definition here</see>.</remarks>
+public interface IReadonlyMapLike<TMap, TKey, TValue> : IJSWrapper where TMap : IReadonlyMapLike<TMap, TKey, TValue> { }
+
+public static class IReadonlyMapLikeExtensions
+{
+    public static async Task<ulong> GetSizeAsync<TMap, TKey, TValue>(this IReadonlyMapLike<TMap, TKey, TValue> map) where TMap : IReadonlyMapLike<TMap, TKey, TValue>
+    {
+        IJSObjectReference helper = await map.JSRuntime.GetHelperAsync();
+        return await helper.InvokeAsync<ulong>("getAttribute", map.JSReference, "size");
+    }
+}