[Blazor] ImportMap fixes (#57282)

* [Blazor] ImportMap fixes
* Support passing additional attributes to the import map Component
  * This allows passing a nonce for Content Security Policies.
* Fix an issue with the paths on the integrity attribute not being valid
  relative links.
  * This caused certain importmap entries to be ignored.
* Fixes the Blazor United Sample.

Author: javiercn

src/Components/Endpoints/src/Assets/ImportMap.cs

@@ -29,6 +29,11 @@ public sealed class ImportMap : IComponent
     [Parameter]
     public ImportMapDefinition? ImportMapDefinition { get; set; }
 
+    /// <summary>
+    /// Gets or sets a collection of additional attributes that will be applied to the created <c>script</c> element.
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
+
     void IComponent.Attach(RenderHandle renderHandle)
     {
         _renderHandle = renderHandle;
@@ -57,7 +62,8 @@ private void RenderImportMap(RenderTreeBuilder builder)
     {
         builder.OpenElement(0, "script");
         builder.AddAttribute(1, "type", "importmap");
-        builder.AddMarkupContent(2, _computedImportMapDefinition!.ToJson());
+        builder.AddMultipleAttributes(2, AdditionalAttributes);
+        builder.AddMarkupContent(3, _computedImportMapDefinition!.ToJson());
         builder.CloseElement();
     }
 }

src/Components/Endpoints/src/Assets/ImportMapDefinition.cs

@@ -69,7 +69,7 @@ public static ImportMapDefinition FromResourceCollection(ResourceAssetCollection
             if (integrity != null)
             {
                 importMap._integrity ??= [];
-                importMap._integrity[asset.Url] = integrity;
+                importMap._integrity[$"./{asset.Url}"] = integrity;
             }
 
             if (label != null)

src/Components/Endpoints/src/PublicAPI.Unshipped.txt

@@ -1,5 +1,7 @@
 #nullable enable
 Microsoft.AspNetCore.Components.ImportMap
+Microsoft.AspNetCore.Components.ImportMap.AdditionalAttributes.get -> System.Collections.Generic.IReadOnlyDictionary<string!, object!>?
+Microsoft.AspNetCore.Components.ImportMap.AdditionalAttributes.set -> void
 Microsoft.AspNetCore.Components.ImportMap.HttpContext.get -> Microsoft.AspNetCore.Http.HttpContext?
 Microsoft.AspNetCore.Components.ImportMap.HttpContext.set -> void
 Microsoft.AspNetCore.Components.ImportMap.ImportMap() -> void

src/Components/Endpoints/test/Assets/ImportMapDefinitionTest.cs

@@ -116,7 +116,7 @@ public void CanBuildImportMap_FromResourceCollection()
                 "./jquery.js": "./jquery.fingerprint.js"
               },
               "integrity": {
-                "jquery.fingerprint.js": "sha384-abc123"
+                "./jquery.fingerprint.js": "sha384-abc123"
               }
             }
             """.Replace("\r\n", "\n");

src/Components/Endpoints/test/ImportMapTest.cs

@@ -30,25 +30,6 @@ public ImportMapTest()
         _importMap = (ImportMap)_renderer.InstantiateComponent<ImportMap>();
     }
 
-    //[Fact]
-    //public async Task CanRunOnNavigateAsync()
-    //{
-    //    // Arrange
-    //    var called = false;
-    //    Action<NavigationContext> OnNavigateAsync = async (NavigationContext args) =>
-    //    {
-    //        await Task.CompletedTask;
-    //        called = true;
-    //    };
-    //    _importMap.OnNavigateAsync = new EventCallback<NavigationContext>(null, OnNavigateAsync);
-
-    //    // Act
-    //    await _renderer.Dispatcher.InvokeAsync(() => _importMap.RunOnNavigateAsync("http://example.com/jan", false));
-
-    //    // Assert
-    //    Assert.True(called);
-    //}
-
     [Fact]
     public async Task CanRenderImportMap()
     {
@@ -75,20 +56,24 @@ public async Task CanRenderImportMap()
             });
 
         importMap.ImportMapDefinition = importMapDefinition;
+        importMap.AdditionalAttributes = new Dictionary<string, object> { ["nonce"] = "random" }.AsReadOnly();
+
         var id = _renderer.AssignRootComponentId(importMap);
         // Act
         await _renderer.Dispatcher.InvokeAsync(() => _renderer.RenderRootComponent(id));
 
         // Assert
         var frames = _renderer.GetCurrentRenderTreeFrames(id);
-        Assert.Equal(3, frames.Count);
+        Assert.Equal(4, frames.Count);
         Assert.Equal(RenderTreeFrameType.Element, frames.Array[0].FrameType);
         Assert.Equal("script", frames.Array[0].ElementName);
         Assert.Equal(RenderTreeFrameType.Attribute, frames.Array[1].FrameType);
         Assert.Equal("type", frames.Array[1].AttributeName);
         Assert.Equal("importmap", frames.Array[1].AttributeValue);
-        Assert.Equal(RenderTreeFrameType.Markup, frames.Array[2].FrameType);
-        Assert.Equal(importMapDefinition.ToJson(), frames.Array[2].TextContent);
+        Assert.Equal("nonce", frames.Array[2].AttributeName);
+        Assert.Equal("random", frames.Array[2].AttributeValue);
+        Assert.Equal(RenderTreeFrameType.Markup, frames.Array[3].FrameType);
+        Assert.Equal(importMapDefinition.ToJson(), frames.Array[3].TextContent);
     }
 
     [Fact]

src/Components/Samples/BlazorUnitedApp/App.razor

@@ -10,11 +10,11 @@
     <link href="@Assets["BlazorUnitedApp.styles.css"]" rel="stylesheet" />
     <link rel="icon" type="image/png" href="favicon.png" />
 
-    <ImportMap />
+    <ImportMap nonce="my-value" />
     <HeadOutlet />
 </head>
 <body>
     <Routes />
-    <script src=""_framework/blazor.web.js"></script>
+    <script src="_framework/blazor.web.js"></script>
 </body>
 </html>

src/Components/Samples/BlazorUnitedApp/appsettings.Development.json

@@ -1,5 +1,6 @@
 {
   "EnableStaticAssetsDevelopmentCaching": true,
+  "EnableStaticAssetsDevelopmentIntegrity": true,
   "DetailedErrors": true,
   "Logging": {
     "LogLevel": {