Write import map to html files #46233

maraf · 2025-01-23T09:57:39Z

Rewrites html files to include import map and put fingerprint into referenced assets

Placeholder for import map is <script type="importmap"></script>
Placeholder for referenced assets is "main#[{.fingerprint}].js". Unfortunately root scripts event with type=module are not affected by import map and inline script with import has other disadvantages. So we need a syntax for the rewrite. This syntax is the same as can be used in server process razor files.

Enabled by WriteImportMapToHtml=true. At the moment the feature is opt-in, but I believe we should make it opt-out, possibly later in the cycle if we gather any feedback.

For Blazor scenarios it solves two issues

Staleness of dotnet.js by writing the import map into the index.html file. This issue more pressing as runtime scripts has fixed interface between them
Staleness of blazor.webassembly.js by adding the fingerprint to the referenced script.

Open questions

Should we produce a warning/error when no HTML files was overriden?
Should the feature be opt-out for Blazor? If so, we need to modify the blazorwasm template

Sample input & output for wasmbrowser based index.html

Input

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="main.css">
  <script type="importmap"></script>
  <script type="module" src="main#[{.fingerprint}].js"></script>
</head>

<body>
</body>

</html>

Output

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="main.css">
  <script type='importmap'>{
  "imports": {
    "./_framework/dotnet.native.js": "./_framework/dotnet.native.hmanx9razn.js",
    "./_framework/dotnet.js": "./_framework/dotnet.nseotsck93.js",
    "./_framework/dotnet.runtime.js": "./_framework/dotnet.runtime.o8gq1i8bk6.js",
    "./main.js": "./main.mfy8p4tgv8.js"
  },
  "integrity": {
    "./_framework/dotnet.js": "sha256-GbKWK+esqeL1E24rCVsCvsQCzaJM65aknWOT1UhUYa4=",
    "./_framework/dotnet.native.hmanx9razn.js": "sha256-d7UNSArplVrX3arY2Kmhxp1wN79ng8hLqIBrkiQ9Gbo=",
    "./_framework/dotnet.native.js": "sha256-d7UNSArplVrX3arY2Kmhxp1wN79ng8hLqIBrkiQ9Gbo=",
    "./_framework/dotnet.nseotsck93.js": "sha256-GbKWK+esqeL1E24rCVsCvsQCzaJM65aknWOT1UhUYa4=",
    "./_framework/dotnet.runtime.js": "sha256-uD1t4tsPtmIHsx30SC4OztehGGaHVDksFD38rL2e3P4=",
    "./_framework/dotnet.runtime.o8gq1i8bk6.js": "sha256-uD1t4tsPtmIHsx30SC4OztehGGaHVDksFD38rL2e3P4=",
    "./main.js": "sha256-robmb5E/1hOMs8P+gA+pFJTEGIgj3Sdhzhdv3UAzV8Y=",
    "./main.mfy8p4tgv8.js": "sha256-robmb5E/1hOMs8P+gA+pFJTEGIgj3Sdhzhdv3UAzV8Y="
  }
}</script>
  <script type="module" src="main.mfy8p4tgv8.js"></script>
</head>

<body>
</body>

</html>

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets

src/StaticWebAssetsSdk/Tasks/GenerateImportMap.AspNetCore.cs

javiercn · 2025-01-23T10:57:35Z

I would settle on one syntax. Rather than using the HTML comment, I would detect <script type="importmap"></script> or <script type="importmap" /> (the second one is invalid syntax, which might be good to detect errors when the file hasn't been processed.

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets

src/StaticWebAssetsSdk/Tasks/GenerateImportMap.AspNetCore.cs

javiercn · 2025-01-23T11:05:43Z

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets

+    <PropertyGroup>
+    <ResolveBuildRelatedStaticWebAssetsDependsOn>
+      $(ResolveStaticWebAssetsInputsDependsOn);
+      _UpdateHtmlFiles;


Note: This needs to happen also before the service-worker-manifest gets generated.

Why is that? The html documents are not part of service worker assets manifest, aren't they?

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets

src/StaticWebAssetsSdk/Tasks/GenerateStaticWebAssetEndpointsManifest.cs

src/StaticWebAssetsSdk/Tasks/WriteImportMapToHtml.cs

javiercn

Overall the direction looks good. The main pieces of feedback are:

Settle on a single syntax. I would avoid using @Assets as it might set the wrong expectations.
- Maybe just adding #[.{fingerprint}] which is something we can interpret and recognize.
I would avoid blanket fingerprinting all the JS assets, and only limit things to stuff we know about we'll get right.
I would avoid all the copy/paste from the runtime and work directly with the list of endpoints to generate the importmap.

The main missing piece here is also the publish bit, which needs to be accounted for. It'll be good if we follow the same template as https://github.com/dotnet/sdk/blob/main/src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.JSModules.targets where there is

Resolve(Feature)(Build|Publish)Configuration:
- Figures out what assets/files we need to consider
Generate(Feature)(Build|Publish)StaticWebAssets:
- Does the work of generating any outputs.
Resolve(Feature(Build|Publish)StaticWebAssets.
- Defines the assets and endpoints for the outputs.

maraf · 2025-02-03T14:00:13Z

About the syntax

Using invalid <script type="importmap" /> results in broken syntax highlighting in VS/code.

Currently using empty import map <script type="importmap"></script>
Asset path replacement needs to be something that has a clean start and end boundaries. Using just main#[.{fingerprint}]!.js would be impossible to match

javiercn · 2025-02-03T14:16:26Z

Asset path replacement needs to be something that has a clean start and end boundaries. Using just main#[.{fingerprint}]!.js would be impossible to match

I was thinking in something like `="(.#[.].*)" would be enough, wouldn't it? Then look at $1.

maraf · 2025-02-03T17:04:08Z

I had the same idea later, originally thought it might be limiting to just html attribute, but maybe that's actually good. I'll update the PR to that pattern

maraf · 2025-02-05T13:51:13Z

Publish test will fail until the runtime PR is resolved

src/BlazorWasmSdk/Targets/Microsoft.NET.Sdk.BlazorWebAssembly.6_0.targets

test/TestAssets/TestProjects/VanillaWasm/VanillaWasm.csproj

pavelsavara · 2025-02-11T12:43:35Z

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets

+
+  <PropertyGroup>
+
+    <!--


This comment is explaining the execution order ? Maybe you can clarify that

pavelsavara · 2025-02-11T12:44:56Z

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets

+    <MakeDir Directories="$(_BuildImportMapHtmlPath)"/>
+
+    <ItemGroup>
+      <_HtmlStaticWebAssets Include="@(StaticWebAsset)" Condition="'%(AssetKind)' != 'Publish' and '%(Extension)' == '.html'" />


Should we also do older .htm ?

pavelsavara · 2025-02-11T12:45:52Z

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets

+      OutputPath="$(_BuildImportMapHtmlPath)">
+      <Output TaskParameter="HtmlCandidates" ItemName="_HtmlCandidates" />
+      <Output TaskParameter="HtmlFilesToRemove" ItemName="_HtmlFilesToRemove" />
+      <Output TaskParameter="FileWrites" ItemName="FileWrites" />


Is this friendly to incremental build ?

pavelsavara · 2025-02-11T12:51:30Z

src/StaticWebAssetsSdk/Tasks/WriteImportMapToHtml.cs

+            if (asset.Label != null)
+            {
+                imports ??= [];
+                imports[$"./{asset.Label}"] = $"./{asset.Url}";


Can asset label contain some interesting characters ? Does the URL need URL encoding ?

javiercn · 2025-02-11T13:42:42Z

test/Microsoft.NET.Sdk.Razor.Tests/StaticWebAssetsFingerprintingTest.cs

@@ -44,4 +45,53 @@ public void Build_FingerprintsContent_WhenEnabled()
        AssertManifest(manifest1, expectedManifest);
        AssertBuildAssets(manifest1, outputPath, intermediateOutputPath);
    }
+


Can we add a test that covers Blazor too? (Hosted and Standalone) or is that covered elsewhere?

javiercn · 2025-02-11T13:48:46Z

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets

+    <ResolveBuildRelatedStaticWebAssetsDependsOn>
+      $(ResolveBuildRelatedStaticWebAssetsDependsOn);
+      ResolveHtmlImportMapBuildStaticWebAssets;
+    </ResolveBuildRelatedStaticWebAssetsDependsOn>
+    <ResolveCompressedFilesDependsOn>
+      $(ResolveCompressedFilesDependsOn);
+      ResolveHtmlImportMapBuildStaticWebAssets
+    </ResolveCompressedFilesDependsOn>
+    <ResolveHtmlImportMapBuildStaticWebAssetsDependsOn>
+      GenerateHtmlImportMapBuildStaticWebAssets;
+      $(ResolveHtmlImportMapBuildStaticWebAssetsDependsOn)
+    </ResolveHtmlImportMapBuildStaticWebAssetsDependsOn>
+    <GenerateHtmlImportMapBuildStaticWebAssetsDependsOn>
+      ResolveHtmlImportMapBuildConfiguration;
+      $(GenerateHtmlImportMapBuildStaticWebAssetsDependsOn)
+    </GenerateHtmlImportMapBuildStaticWebAssetsDependsOn>
+
+    <!--
+        ResolvePublishRelatedStaticWebAssets
+          ResolveHtmlImportMapPublishStaticWebAssets
+            GenerateHtmlImportMapPublishStaticWebAssets
+              ResolveHtmlImportMapPublishConfiguration
+     -->
+    <ResolvePublishRelatedStaticWebAssetsDependsOn>
+      $(ResolvePublishRelatedStaticWebAssetsDependsOn);
+      ResolveHtmlImportMapPublishStaticWebAssets
+    </ResolvePublishRelatedStaticWebAssetsDependsOn>
+    <ResolveHtmlImportMapPublishStaticWebAssetsDependsOn>
+      GenerateHtmlImportMapPublishStaticWebAssets;
+      $(ResolveHtmlImportMapPublishStaticWebAssetsDependsOn)
+    </ResolveHtmlImportMapPublishStaticWebAssetsDependsOn>
+    <GenerateHtmlImportMapPublishStaticWebAssetsDependsOn>
+      ResolveHtmlImportMapPublishConfiguration;
+      $(GenerateHtmlImportMapPublishStaticWebAssetsDependsOn)
+    </GenerateHtmlImportMapPublishStaticWebAssetsDependsOn>


We need to ensure that this runs before the service worker is generated.

Also needs to run before compression happens

javiercn · 2025-02-11T13:50:56Z

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets

+    <ItemGroup>
+      <StaticWebAsset Remove="@(_HtmlFilesToRemove)" />
+      <StaticWebAsset Include="@(_UpdatedHtmlStaticWebAssets)" />
+      <StaticWebAssetEndpoint Include="@(_UpdatedHtmlStaticWebAssetsEndpoint)" />


Shouldn't we remove the old endpoints too?

javiercn

Looks good, but I think there are a few additional things we should solve before getting it merged.

javiercn · 2025-02-11T13:58:22Z

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets

+
+  <Target Name="ResolveHtmlImportMapBuildConfiguration">
+    <PropertyGroup>
+      <_BuildImportMapHtmlPath>$([MSBuild]::NormalizeDirectory($(IntermediateOutputPath), 'importmaphtml', 'build'))</_BuildImportMapHtmlPath>


use https://github.com/dotnet/sdk/blob/main/src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.targets#L447C8-L447C46

javiercn · 2025-02-11T14:00:53Z

src/StaticWebAssetsSdk/Tasks/WriteImportMapToHtml.cs

+
+                if (content != outputContent)
+                {
+                    string outputPath = Path.Combine(OutputPath, Path.GetRandomFileName() + item.GetMetadata("Extension"));


Don't do this. Use a hash of the content if anything, but don't use Random as this makes things non-deterministic

Also use https://github.com/dotnet/sdk/blob/main/src/StaticWebAssetsSdk/Tasks/Utils/ArtifactWriter.cs

maraf added 3 commits January 22, 2025 15:17

Copy code from prototype

e882406

Don't generate the manifest to temp file, compute it on the fly

ef4843e

Build logic

3550dc0

maraf added the Area-WasmSdk label Jan 23, 2025

maraf self-assigned this Jan 23, 2025

dotnet-issue-labeler bot added the untriaged Request triage from a team member label Jan 23, 2025

maraf commented Jan 23, 2025

View reviewed changes

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets Outdated Show resolved Hide resolved

maraf commented Jan 23, 2025

View reviewed changes

src/StaticWebAssetsSdk/Tasks/GenerateImportMap.AspNetCore.cs Outdated Show resolved Hide resolved

javiercn reviewed Jan 23, 2025

View reviewed changes

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets Outdated Show resolved Hide resolved

javiercn reviewed Jan 23, 2025

View reviewed changes

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets Outdated Show resolved Hide resolved

javiercn reviewed Jan 23, 2025

View reviewed changes

src/StaticWebAssetsSdk/Tasks/GenerateImportMap.AspNetCore.cs Outdated Show resolved Hide resolved

javiercn reviewed Jan 23, 2025

View reviewed changes

src/StaticWebAssetsSdk/Targets/Microsoft.NET.Sdk.StaticWebAssets.HtmlImportMap.targets Outdated Show resolved Hide resolved

javiercn reviewed Jan 23, 2025

View reviewed changes

src/StaticWebAssetsSdk/Tasks/GenerateStaticWebAssetEndpointsManifest.cs Outdated Show resolved Hide resolved

javiercn reviewed Jan 23, 2025

View reviewed changes

src/StaticWebAssetsSdk/Tasks/WriteImportMapToHtml.cs Outdated Show resolved Hide resolved

This was referenced Jan 23, 2025

slow macOS - "##[error]The job running on agent Azure Pipelines 9 ran longer than the maximum time of 60 minutes." dotnet/dnceng#1883

Open

The Operation will be canceled. The next steps may not contain expected logs. dotnet/dnceng#3008

Open

maraf added 2 commits January 23, 2025 14:38

Remove CSS fingerprinting

fcf527f

Remove wasm from msbuild property name

a4582e2

javiercn reviewed Jan 23, 2025

View reviewed changes

maraf added 4 commits January 31, 2025 14:05

Remove JS fingerprinting

ca1578d

Use empty script type=importmap as a placeholder

ea7f7fd

Operate directly on endpoints

1d8d137

Operate directly on endpoints

fab6429

maraf added 2 commits February 4, 2025 09:48

Use fingerprint pattern

9709397

Publish integration

45bf5d7

Fix getting publish HTML files

b212724

maraf mentioned this pull request Feb 5, 2025

[browser] Leave the fingerprint pattern in relative path dotnet/runtime#112186

Merged

maraf added 2 commits February 5, 2025 14:45

Publish test

79e5fb7

Build test

ebd6e55

Enable dotnet.js fingerprinting when targeting .NET 10 or newer

c31496e

This was referenced Feb 5, 2025

The active test run was aborted. Reason: Test host process crashed dotnet/dnceng#451

Open

dotnet-watch tests failing #40006

Open

[dotnet watch] Cannot open project Lib.fsproj because extension fsproj is not associated with a language #46378

Open

maraf added 2 commits February 6, 2025 10:10

Refactor targets based on JSModule pattern

25a271f

Swap order of dependencies

961c36e

maraf requested a review from javiercn February 6, 2025 09:44

Revert changes to GenerateStaticWebAssetEndpointsManifest

f0d4ea4

build-analysis bot mentioned this pull request Feb 6, 2025

Template engine tests hitting known parallelism issue in GetVisualStudioInstances #44878

Open

Merge branch 'main' into maraf/HtmlImportMap

1221414

maraf marked this pull request as ready for review February 9, 2025 11:42

maraf requested review from a team as code owners February 9, 2025 11:42

javiercn reviewed Feb 10, 2025

View reviewed changes

src/BlazorWasmSdk/Targets/Microsoft.NET.Sdk.BlazorWebAssembly.6_0.targets Outdated Show resolved Hide resolved

pavelsavara reviewed Feb 10, 2025

View reviewed changes

test/TestAssets/TestProjects/VanillaWasm/VanillaWasm.csproj Show resolved Hide resolved

Don't set WasmFingerprintDotnetJs for .NET 10+

b5ee5a5

maraf mentioned this pull request Feb 11, 2025

[browser] Fingerprint dotnet.js if writing import map to html is enabled dotnet/runtime#112407

Merged

pavelsavara approved these changes Feb 11, 2025

View reviewed changes

javiercn reviewed Feb 11, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Write import map to html files #46233

Write import map to html files #46233

maraf commented Jan 23, 2025 •

edited

Loading

javiercn commented Jan 23, 2025

javiercn Jan 23, 2025

maraf Feb 6, 2025

javiercn left a comment

maraf commented Feb 3, 2025

javiercn commented Feb 3, 2025

maraf commented Feb 3, 2025

maraf commented Feb 5, 2025

pavelsavara Feb 11, 2025

pavelsavara Feb 11, 2025

pavelsavara Feb 11, 2025

pavelsavara Feb 11, 2025

javiercn Feb 11, 2025 •

edited

Loading

javiercn Feb 11, 2025

javiercn Feb 11, 2025

javiercn Feb 11, 2025

javiercn left a comment

javiercn Feb 11, 2025

javiercn Feb 11, 2025

javiercn Feb 11, 2025

Write import map to html files #46233

Are you sure you want to change the base?

Write import map to html files #46233

Conversation

maraf commented Jan 23, 2025 • edited Loading

Input

Output

javiercn commented Jan 23, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

javiercn left a comment

Choose a reason for hiding this comment

maraf commented Feb 3, 2025

javiercn commented Feb 3, 2025

maraf commented Feb 3, 2025

maraf commented Feb 5, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

javiercn Feb 11, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

javiercn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maraf commented Jan 23, 2025 •

edited

Loading

javiercn Feb 11, 2025 •

edited

Loading