[WIP] Diff build folder

Author: domoscargin

.github/workflows/build-diff.yaml

@@ -0,0 +1,75 @@
+name: Build Diff
+
+on:
+  pull_request:
+  workflow_dispatch:
+    inputs:
+      base_ref:
+        description: Base ref to compare from
+        required: false
+        default: origin/main
+        type: string
+      head_ref:
+        description: Head ref to compare to
+        required: false
+        default: HEAD
+        type: string
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  generate-diff:
+    name: Build diff
+    runs-on: ubuntu-22.04
+    if: ${{ github.event_name == 'workflow_dispatch' || (github.event.pull_request && !github.event.pull_request.head.repo.fork) }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6.0.2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4.4.0
+        with:
+          cache: npm
+          check-latest: true
+          node-version-file: .nvmrc
+
+      - name: Generate diff
+        run: |
+          BASE_REF="${{ github.event_name == 'workflow_dispatch' && inputs.base_ref || github.event.pull_request.base.sha }}"
+          HEAD_REF="${{ github.event_name == 'workflow_dispatch' && inputs.head_ref || github.event.pull_request.head.sha }}"
+
+          bash scripts/build-diff-ci.sh \
+            "$BASE_REF" \
+            "$HEAD_REF" \
+            build.diff
+
+      - name: Upload diff artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: compiled-build-diff
+          path: build.diff
+          if-no-files-found: ignore
+
+      - name: Comment on PR
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: actions/github-script@v9.0.0
+        with:
+          script: |
+            const path = require('path')
+            const { addBuildDiffComment } = require(path.join(
+              process.env.GITHUB_WORKSPACE,
+              'scripts/build-diff-pr-comment.js'
+            ))
+
+            await addBuildDiffComment({
+              github,
+              context,
+              htmlDiffPath: 'build-html.diff',
+              cssDiffPath: 'build-css.diff',
+              jsDiffPath: 'build-js.diff'
+            })

scripts/build-diff-ci.sh

@@ -0,0 +1,79 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+repo_root="$(git rev-parse --show-toplevel)"
+cd "$repo_root"
+
+base_ref="${1:-origin/main}"
+head_ref="${2:-HEAD}"
+output_file="${3:-build.diff}"
+output_dir="$(dirname "$output_file")"
+html_diff_file="$output_dir/build-html.diff"
+css_diff_file="$output_dir/build-css.diff"
+js_diff_file="$output_dir/build-js.diff"
+
+tmp_dir="$(mktemp -d "${TMPDIR:-/tmp}/build-diff-ci.XXXXXX")"
+base_build_dir="$tmp_dir/base-build"
+head_build_dir="$tmp_dir/head-build"
+original_ref="$(git rev-parse --verify HEAD)"
+
+cleanup() {
+  set +e
+  git checkout --force "$original_ref" >/dev/null 2>&1
+  rm -rf "$tmp_dir"
+}
+trap cleanup EXIT
+
+echo "Checking out base ref: $base_ref"
+git checkout --force "$base_ref"
+
+echo "Building base ref"
+npm ci
+npm run build
+cp -R build "$base_build_dir"
+
+echo "Checking out head ref: $head_ref"
+git checkout --force "$head_ref"
+
+echo "Building head ref"
+npm ci
+npm run build
+cp -R build "$head_build_dir"
+
+echo "Diffing build folders"
+mkdir -p "$output_dir"
+diff -ruN "$base_build_dir" "$head_build_dir" > "$output_file" || true
+
+echo "Splitting diff by file type"
+: > "$html_diff_file"
+: > "$css_diff_file"
+: > "$js_diff_file"
+
+awk \
+  -v html_out="$html_diff_file" \
+  -v css_out="$css_diff_file" \
+  -v js_out="$js_diff_file" '
+  function target(path) {
+    if (path ~ /\.html$/) return html_out
+    if (path ~ /\.css$/) return css_out
+    if (path ~ /\.(js|mjs|cjs)$/) return js_out
+    return ""
+  }
+
+  /^diff -ruN / {
+    current_file = ""
+    path = $NF
+    sub(/^.*\/base-build\//, "", path)
+    sub(/^.*\/head-build\//, "", path)
+    current_file = target(path)
+  }
+
+  {
+    if (current_file != "") print >> current_file
+  }
+' "$output_file"
+
+echo "Saved diff to $output_file"
+echo "Saved HTML diff to $html_diff_file"
+echo "Saved CSS diff to $css_diff_file"
+echo "Saved JavaScript diff to $js_diff_file"

scripts/build-diff-pr-comment.js

@@ -0,0 +1,98 @@
+const fs = require('fs')
+
+const DIFF_TYPES = [
+  { key: 'html', label: 'HTML', marker: '<!-- build-diff-html -->' },
+  { key: 'css', label: 'CSS', marker: '<!-- build-diff-css -->' },
+  { key: 'js', label: 'JavaScript', marker: '<!-- build-diff-js -->' }
+]
+
+function readText(filePath) {
+  if (!fs.existsSync(filePath)) return ''
+  return fs.readFileSync(filePath, 'utf8').trim()
+}
+
+function buildCommentBody({ marker, label, raw, maxChars }) {
+  const content = (raw || '').trim()
+
+  if (!content) {
+    return [marker, `## ${label} build diff`, '', 'No changes detected.'].join(
+      '\n'
+    )
+  }
+
+  const text =
+    content.length > maxChars
+      ? `${content.slice(0, maxChars)}\n\n... output truncated`
+      : content
+
+  return [
+    marker,
+    `## ${label} build diff`,
+    '',
+    '<details>',
+    '<summary>Show diff</summary>',
+    '',
+    '```diff',
+    text,
+    '```',
+    '</details>'
+  ].join('\n')
+}
+
+async function addBuildDiffComment({
+  github,
+  context,
+  htmlDiffPath = 'build-html.diff',
+  cssDiffPath = 'build-css.diff',
+  jsDiffPath = 'build-js.diff',
+  maxChars = 20000
+}) {
+  const split = {
+    html: readText(htmlDiffPath),
+    css: readText(cssDiffPath),
+    js: readText(jsDiffPath)
+  }
+  const { owner, repo } = context.repo
+  const issueNumber = context.issue.number
+
+  const comments = await github.paginate(github.rest.issues.listComments, {
+    owner,
+    repo,
+    issue_number: issueNumber,
+    per_page: 100
+  })
+
+  for (const type of DIFF_TYPES) {
+    const body = buildCommentBody({
+      marker: type.marker,
+      label: type.label,
+      raw: split[type.key],
+      maxChars
+    })
+
+    const existing = comments.find(
+      (comment) => comment.body && comment.body.includes(type.marker)
+    )
+
+    if (existing) {
+      await github.rest.issues.updateComment({
+        owner,
+        repo,
+        comment_id: existing.id,
+        body
+      })
+      continue
+    }
+
+    await github.rest.issues.createComment({
+      owner,
+      repo,
+      issue_number: issueNumber,
+      body
+    })
+  }
+}
+
+module.exports = {
+  addBuildDiffComment
+}