Fix frontend assets being outdated (Lombiq Technologies: OCORE-158)

.gitattributes

@@ -1,3 +1,7 @@
 * text=auto
 
-**/wwwroot/Scripts/* linguist-vendored
+**/wwwroot/Scripts/* linguist-vendored
+
+# Keep LF line endings in webroot assets files. Otherwise, building them under Windows would change the line endings to CLRF and cause changes without actually editing the source files.
+**/wwwroot/**/*.js text eol=lf
+**/wwwroot/**/*.css text eol=lf

.github/workflows/assets_validation.yml

@@ -1,23 +1,29 @@
-name: Frontend Assets Build Validation
-on:
-  # Manual trigger.
-  workflow_dispatch:
+name: Validating the Building of Public Assets
+
+on: 
+  push:
+    paths-ignore:
+      - '**/*.md'
+      - 'mkdocs.yml'
+      - 'src/docs/**/*'
+    branches: [ main ]
+  pull_request:
+    branches: [ main, release/** ]
+
+concurrency:
+  group: ${{ github.head_ref || github.run_id }}-assets_validation
+  cancel-in-progress: true
+
 jobs:
   test-npm-build:
     name: Test building assets
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
-    - uses: actions/cache@v4
-      with:
-        path: ~/.npm
-        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-node-
     - name: Rebuild packages
       run: |
         npm install
-        npm run rebuild
+        gulp rebuild
     - name: Check if git has changes
       shell: pwsh
       run: |
@@ -28,9 +34,81 @@ jobs:
             Write-Output 'Please make sure to build the assets properly before pushing, see https://docs.orchardcore.net/en/latest/docs/guides/gulp-pipeline/.'
             Write-Output 'The following files changed:'
             Write-Output $changes
+            Write-Output 'You can also download the attached artifact to see the changes.'
+            Write-Output ''
+            Write-Output '---------------------------------------'
+            Write-Output ''
+        
+            $changeLines = $changes -split '`n'
+            $changedFiles = @()
+            $hasNonCrlfChange = $false
+        
+            foreach ($line in $changeLines)
+            {
+                if ($line -match '^\s?(M|A|\?\?)\s+(.*)$')
+                {
+                    $changeType = $matches[1]
+                    $file = $matches[2]
+        
+                    Write-Output "Diff for: $file"
+        
+                    if ($changeType -eq 'M')
+                    {
+                        # File is modified; use git diff to get the diff of the modified file.
+
+                        # The diff will be sent to stderr so we need to redirect it to stdout to capture it.
+                        git diff -- $file 2>&1 >> tmp.txt
+                        $diffOutput = Get-Content tmp.txt
+                        Remove-Item tmp.txt
+
+                        # Filtering out this pattern is necessary because certain CRLF line endings are not replaced by
+                        # gulp-eol, so the output files can still have some CRLF.
+                        if ($($diffOutput ?? '').Contains('CRLF will be replaced by LF the next time Git touches it'))
+                        {
+                            Write-Output "Warning: CRLF will be replaced by LF in $file. Fix this if you can, but certain CRLF line endings can't be replaced."
+                        }
+                        else
+                        {
+                            Write-Output $diffOutput
+                            $hasNonCrlfChange = $true
+                        }
+                    }
+                    elseif ($changeType -eq '??')
+                    {
+                        # File is (untracked); display the file contents.
+                        Get-Content -Path $file
+                        $hasNonCrlfChange = $true
+                    }
+        
+                    $changedFiles += $file
+        
+                    Write-Output ''
+                    Write-Output '---------------------------------------'
+                    Write-Output ''
+                }
+            }
+        
+            if (-not $hasNonCrlfChange)
+            {
+                Write-Output 'No non-CRLF changes found. Repository is clean.'
+                exit 0
+            }
+        
+            # Convert the array of changed files to a single string with each file on a new line so actions/upload-artifact
+            # can consume it.
+            $changedFilesString = $changedFiles -join "`n"
+            "CHANGED_FILES<<ENDOFSTRING`n$($changedFilesString)`nENDOFSTRING" >> $Env:GITHUB_ENV
+        
             exit -1
         }
         else
         {
             Write-Host "No uncommitted changes found. Repository is clean."
         }
+    - name: Upload changed files as artifact
+      uses: actions/upload-artifact@v4
+      if: failure()
+      with:
+        name: changed-files
+        path: ${{ env.CHANGED_FILES }}
+        retention-days: 30

gulpfile.js

@@ -112,11 +112,19 @@ function getAssetGroups() {
 }
 
 function resolveAssetGroupPaths(assetGroup, assetManifestPath) {
-    assetGroup.manifestPath = assetManifestPath;
-    assetGroup.basePath = path.dirname(assetManifestPath);
-    assetGroup.inputPaths = assetGroup.inputs.map(function (inputPath) {
+    assetGroup.manifestPath = assetManifestPath.replace(/\\/g, '/');
+    assetGroup.basePath = path.dirname(assetGroup.manifestPath);
+    var inputPaths = assetGroup.inputs.map(function (inputPath) {
         return path.resolve(path.join(assetGroup.basePath, inputPath)).replace(/\\/g, '/');
     });
+
+    // For wildcard input paths also sortthem to ensure file concatenation is consistent.
+    if (inputPaths.some(path => path.includes('*'))) {
+        inputPaths = glob.sync(inputPaths, {}).sort();
+    }
+
+    assetGroup.inputPaths = inputPaths;
+
     assetGroup.watchPaths = [];
     if (!!assetGroup.watch) {
         assetGroup.watchPaths = assetGroup.watch.map(function (watchPath) {
@@ -163,7 +171,7 @@ function buildCssPipeline(assetGroup, doConcat, doRebuild) {
         if (ext !== ".scss" && ext !== ".less" && ext !== ".css")
             throw "Input file '" + inputPath + "' is not of a valid type for output file '" + assetGroup.outputPath + "'.";
     });
-    var generateSourceMaps = assetGroup.hasOwnProperty("generateSourceMaps") ? assetGroup.generateSourceMaps : true;
+    var generateSourceMaps = assetGroup.hasOwnProperty("generateSourceMaps") ? assetGroup.generateSourceMaps : false;
     var generateRTL = assetGroup.hasOwnProperty("generateRTL") ? assetGroup.generateRTL : false;
     var containsLessOrScss = assetGroup.inputPaths.some(function (inputPath) {
         var ext = path.extname(inputPath).toLowerCase();
@@ -203,7 +211,7 @@ function buildCssPipeline(assetGroup, doConcat, doRebuild) {
         .pipe(rename({
             suffix: ".min"
         }))
-        .pipe(eol())
+        .pipe(eol('\n'))
         .pipe(gulp.dest(assetGroup.outputDir));
     // Uncomment to copy assets to wwwroot
     //.pipe(gulp.dest(assetGroup.webroot));
@@ -224,7 +232,7 @@ function buildCssPipeline(assetGroup, doConcat, doRebuild) {
         .pipe(gulpif(doConcat, concat(assetGroup.outputFileName)))
         .pipe(gulpif(generateRTL, postcss([rtl()])))
         .pipe(gulpif(generateSourceMaps, sourcemaps.write()))
-        .pipe(eol())
+        .pipe(eol('\n'))
         .pipe(gulp.dest(assetGroup.outputDir));
     // Uncomment to copy assets to wwwroot
     //.pipe(gulp.dest(assetGroup.webroot));
@@ -237,7 +245,7 @@ function buildJsPipeline(assetGroup, doConcat, doRebuild) {
         if (ext !== ".ts" && ext !== ".js")
             throw "Input file '" + inputPath + "' is not of a valid type for output file '" + assetGroup.outputPath + "'.";
     });
-    var generateSourceMaps = assetGroup.hasOwnProperty("generateSourceMaps") ? assetGroup.generateSourceMaps : true;
+    var generateSourceMaps = assetGroup.hasOwnProperty("generateSourceMaps") ? assetGroup.generateSourceMaps : false;
     // Source maps are useless if neither concatenating nor transforming.
     if ((!doConcat || assetGroup.inputPaths.length < 2) && !assetGroup.inputPaths.some(function (inputPath) { return path.extname(inputPath).toLowerCase() === ".ts"; }))
         generateSourceMaps = false;
@@ -292,7 +300,7 @@ function buildJsPipeline(assetGroup, doConcat, doRebuild) {
         .pipe(rename({
             suffix: ".min"
         }))
-        .pipe(eol())
+        .pipe(eol('\n'))
         .pipe(gulp.dest(assetGroup.outputDir))
     // Uncomment to copy assets to wwwroot
     //.pipe(gulp.dest(assetGroup.webroot));