Use minified .js files from submodule in source-build (dotnet#56864)

* Use minified .js files from submodule in source-build

* Fixup

* Fixup again

* Add check for changes to minified .js files

* Fix typo

* Add doc

* Fix md error

* Update Microsoft.AspNetCore.Components.Endpoints.csproj

* Fix script

* Update submodule

* Print it

* Upload the .js files as part of the build

* Update submodule

Author: wtgodbe

.azure/pipelines/ci-public.yml

@@ -556,6 +556,9 @@ stages:
         beforeBuild:
         - powershell: "& ./src/Servers/IIS/tools/UpdateIISExpressCertificate.ps1; & ./src/Servers/IIS/tools/update_schema.ps1"
           displayName: Setup IISExpress test certificates and schema
+        afterBuild:
+        - powershell: ./eng/scripts/CompareMinifiedJsFiles.ps1
+          displayName: Check for changes in generated minified .js files
         artifacts:
         - name: Windows_Test_Logs_Attempt_$(System.JobAttempt)
           path: artifacts/log/
@@ -565,6 +568,10 @@ stages:
           path: artifacts/TestResults/
           publishOnError: true
           includeForks: true
+        - name: Minified_JS_Files
+          path: src/Components/Web.JS/dist/Release/
+          publishOnError: true
+          includeForks: true
 
     - template: jobs/default-build.yml
       parameters:

.gitmodules

@@ -11,3 +11,7 @@
 	url = https://github.com/dotnet/Node-Externals
 	branch = main
 	depth = 1
+[submodule "src/submodules/BlazorMinifiedJs"]
+	path = src/submodules/BlazorMinifiedJs
+	url = https://github.com/dotnet/BlazorMinifiedJs
+	branch = main

docs/UpdatingMinifiedJsFiles.md

@@ -0,0 +1,16 @@
+# Updating minified .js files
+
+Building our `src/Components` projects will produce minified.js files under `src/Components/Web.JS/dist/Release`. In order to avoid constant merge conflicts, and to avoid having to restore NPM components over the network during offline source-build, we keep the latest versions of those files in a submodule repo, https://github.com/dotnet/blazorminifiedjs. If you are prepping a PR that is going to change the contents of those files, please follow the steps in this doc.
+
+1. Build the node components of the repo
+    1. Running `npm run build` from the repo root should be sufficient, assuming you have already installed the prereqs listed in our [Building from source doc](https://github.com/dotnet/aspnetcore/edit/main/docs/BuildFromSource.md).
+2. In a separate folder, clone the [BlazorMinifiedJs repo](https://github.com/dotnet/blazorminifiedjs).
+3. Check out a new branch in your clone, based off of `main`.
+4. Replace the files in `BlazorMinifiedJs/src` with the minified .js files you just generated in aspnetcore (these can be found at `aspnetcore/src/Components/Web.JS/dist/Release`).
+5. Push your `BlazorMinifiedJs` branch and open a PR in that repo.
+6. Once that PR has been merged, return to your aspnetcore PR, navigate to `src/submodules/BlazorMinifiedJs`, and checkout the commit you just pushed.
+7. Push the submodule update to your aspnetcore PR.
+
+Alternatively, you can find the generated .js files in the artifacts of your PR build, under the artifact named "Minified_JS_Files". This may be more reliable than building the node components locally.
+
+Following these steps should remediate any build errors related to `BlazorMinifiedJs` in your PR.

eng/Common.props

@@ -18,6 +18,8 @@
     <BuildNative Condition=" '$(BuildNative)' == '' ">true</BuildNative>
 
     <BuildManaged Condition="'$(BuildManaged)' == ''">true</BuildManaged>
+    <BuildNodeJS>$(BuildNodeJSUnlessSourcebuild)</BuildNodeJS>
+    <BuildNodeJS Condition="'$(DotNetBuildSourceOnly)' == 'true'">false</BuildNodeJS>
     <BuildNodeJS Condition="'$(BuildNodeJS)' == ''">true</BuildNodeJS>
     <BuildJava Condition="'$(BuildJava)' == ''">true</BuildJava>
   </PropertyGroup>

eng/build.ps1

@@ -235,6 +235,7 @@ if ($BuildManaged -or ($All -and (-not $NoBuildManaged))) {
         if ($node) {
             $nodeHome = Split-Path -Parent (Split-Path -Parent $node.Path)
             Write-Host -f Magenta "Building of C# project is enabled and has dependencies on NodeJS projects. Building of NodeJS projects is enabled since node is detected in $nodeHome."
+            Write-Host -f Magenta "Note that if you are running Source Build, building NodeJS projects will be disabled later on."
             $BuildNodeJS = $true
         }
         else {
@@ -310,8 +311,8 @@ if ($NoBuildJava) { $dotnetBuildArguments += "/p:BuildJava=false"; $BuildJava =
 if ($BuildJava) { $dotnetBuildArguments += "/p:BuildJava=true" }
 if ($NoBuildManaged) { $dotnetBuildArguments += "/p:BuildManaged=false"; $BuildManaged = $false }
 if ($BuildManaged) { $dotnetBuildArguments += "/p:BuildManaged=true" }
-if ($NoBuildNodeJS) { $dotnetBuildArguments += "/p:BuildNodeJS=false"; $BuildNodeJS = $false }
-if ($BuildNodeJS) { $dotnetBuildArguments += "/p:BuildNodeJS=true" }
+if ($NoBuildNodeJS) { $dotnetBuildArguments += "/p:BuildNodeJSUnlessSourcebuild=false"; $BuildNodeJS = $false }
+if ($BuildNodeJS) { $dotnetBuildArguments += "/p:BuildNodeJSUnlessSourcebuild=true" }
 
 # Don't bother with two builds if just one will build everything. Ignore super-weird cases like
 # "-Projects ... -NoBuildJava -NoBuildManaged -NoBuildNodeJS". An empty `./build.ps1` command will build both

eng/build.sh

@@ -266,6 +266,7 @@ if [ "$build_managed" = true ] || ([ "$build_all" = true ] && [ "$build_managed"
     if [ -z "$build_nodejs" ]; then
         if [ -x "$(command -v node)" ]; then
             __warn "Building of C# project is enabled and has dependencies on NodeJS projects. Building of NodeJS projects is enabled since node is detected on PATH."
+            __warn "Note that if you are running Source Build, building NodeJS projects will be disabled later on."
             build_nodejs=true
         else
             __warn "Building of NodeJS projects is disabled since node is not detected on Path and no BuildNodeJs or NoBuildNodeJs setting is set explicitly."
@@ -281,7 +282,7 @@ fi
 # Only set these MSBuild properties if they were explicitly set by build parameters.
 [ ! -z "$build_java" ] && msbuild_args[${#msbuild_args[*]}]="-p:BuildJava=$build_java"
 [ ! -z "$build_native" ] && msbuild_args[${#msbuild_args[*]}]="-p:BuildNative=$build_native"
-[ ! -z "$build_nodejs" ] && msbuild_args[${#msbuild_args[*]}]="-p:BuildNodeJS=$build_nodejs"
+[ ! -z "$build_nodejs" ] && msbuild_args[${#msbuild_args[*]}]="-p:BuildNodeJSUnlessSourcebuild=$build_nodejs"
 [ ! -z "$build_managed" ] && msbuild_args[${#msbuild_args[*]}]="-p:BuildManaged=$build_managed"
 [ ! -z "$build_installers" ] && msbuild_args[${#msbuild_args[*]}]="-p:BuildInstallers=$build_installers"
 

eng/scripts/CompareMinifiedJsFiles.ps1

@@ -0,0 +1,26 @@
+[string[]] $errors = @()
+
+function _compareFiles($fileName) {
+    Write-Host "Comparing contents for $fileName"
+    $repoRoot = Resolve-Path "$PSScriptRoot/../.."
+    $localFile = "$repoRoot/src/Components/Web.JS/dist/Release/$fileName"
+    $submoduleFile = "$repoRoot/src/submodules/BlazorMinifiedJs/src/$fileName"
+    $delta = Compare-Object -ReferenceObject ((Get-Content -Path $submoduleFile).trim()) -DifferenceObject ((Get-Content -Path $localFile).trim())
+    if (![string]::IsNullOrEmpty($delta)) {
+        $script:errors += "Diff found in $fileName, please see https://github.com/dotnet/aspnetcore/blob/main/docs/UpdatingMinifiedJsFiles.md for remediation steps"
+    }
+}
+
+$MinifiedJsFiles = "blazor.web.js","blazor.server.js","blazor.webview.js"
+
+foreach ($JsFile in $MinifiedJsFiles) {
+    _compareFiles -fileName $JsFile
+}
+
+foreach ($err in $errors) {
+    Write-Host -f Red $err
+}
+
+if ($errors) {
+    exit 1
+}

src/Components/Endpoints/src/Microsoft.AspNetCore.Components.Endpoints.csproj

@@ -65,6 +65,7 @@
       <BlazorWebJSFilename>blazor.web.js</BlazorWebJSFilename>
       <BlazorWebJSFile Condition=" '$(Configuration)' == 'Debug' ">$(MSBuildThisFileDirectory)..\..\Web.JS\dist\Debug\$(BlazorWebJSFilename)</BlazorWebJSFile>
       <BlazorWebJSFile Condition=" '$(Configuration)' != 'Debug' ">$(MSBuildThisFileDirectory)..\..\Web.JS\dist\Release\$(BlazorWebJSFilename)</BlazorWebJSFile>
+      <BlazorWebJSFile Condition="!Exists('$(BlazorWebJSFile)') and '$(BuildNodeJS)' != 'true' ">$(RepoRoot)src\submodules\BlazorMinifiedJs\src\$(BlazorWebJSFilename)</BlazorWebJSFile>
     </PropertyGroup>
 
     <Warning Condition="!Exists('$(BlazorWebJSFile)')" Text="'$(BlazorWebJSFile)' does not exist. Ensure the JS assets have been build by running 'npm run build' from the repository root." />

src/Components/Server/src/Microsoft.AspNetCore.Components.Server.csproj

@@ -103,6 +103,7 @@
       <BlazorServerJSFilename>blazor.server.js</BlazorServerJSFilename>
       <BlazorServerJSFile Condition=" '$(Configuration)' == 'Debug' ">$(MSBuildThisFileDirectory)..\..\Web.JS\dist\Debug\$(BlazorServerJSFilename)</BlazorServerJSFile>
       <BlazorServerJSFile Condition=" '$(Configuration)' != 'Debug' ">$(MSBuildThisFileDirectory)..\..\Web.JS\dist\Release\$(BlazorServerJSFilename)</BlazorServerJSFile>
+      <BlazorServerJSFile Condition="!Exists('$(BlazorServerJSFile)') and '$(BuildNodeJS)' != 'true' ">$(RepoRoot)src\submodules\BlazorMinifiedJs\src\$(BlazorServerJSFilename)</BlazorServerJSFile>
     </PropertyGroup>
 
     <Warning Condition="!Exists('$(BlazorServerJSFile)')" Text="'$(BlazorServerJSFile)' does not exist. Ensure the JS assets have been build by running 'npm run build' from the repository root." />

src/Components/WebView/WebView/src/Microsoft.AspNetCore.Components.WebView.csproj

@@ -62,6 +62,7 @@
       <BlazorWebViewJSFilename>blazor.webview.js</BlazorWebViewJSFilename>
       <BlazorWebViewJSFile Condition=" '$(Configuration)' == 'Debug' ">$(MSBuildThisFileDirectory)..\..\..\Web.JS\dist\Debug\$(BlazorWebViewJSFilename)</BlazorWebViewJSFile>
       <BlazorWebViewJSFile Condition=" '$(Configuration)' != 'Debug' ">$(MSBuildThisFileDirectory)..\..\..\Web.JS\dist\Release\$(BlazorWebViewJSFilename)</BlazorWebViewJSFile>
+      <BlazorWebViewJSFile Condition="!Exists('$(BlazorWebViewJSFile)') and '$(BuildNodeJS)' != 'true' ">$(RepoRoot)src\submodules\BlazorMinifiedJs\src\$(BlazorWebViewJSFilename)</BlazorWebViewJSFile>
     </PropertyGroup>
 
     <Warning Condition="!Exists('$(BlazorWebViewJSFile)')" Text="'$(BlazorWebViewJSFile)' does not exist. Ensure the JS assets have been build by running 'npm run build' from the repository root." />