From b743d2484bac0e077ff18e2eb1acff55af510187 Mon Sep 17 00:00:00 2001
From: Eric Joanis <eric.joanis@nrc-cnrc.gc.ca>
Date: Wed, 25 Sep 2024 09:56:19 -0400
Subject: [PATCH] build: make bundle compatible with Windows and test it in CI
 (#344)

In CI, let's this npx nx bundle web-component on both Windows and Linux, and on
Linux let's display the diff in a way that we can see the bits that changed
even though it's minified.

To make bundle compatible with Windows, I turned the one liner in `package.json`
into a script that is much easier to read and maintain.
---
 .github/workflows/end-to-end-tests.yml |  6 ++++++
 .github/workflows/windows-tests.yml    |  6 +-----
 packages/web-component/bundle.sh       | 15 +++++++++++++++
 packages/web-component/package.json    |  2 +-
 4 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100755 packages/web-component/bundle.sh

diff --git a/.github/workflows/end-to-end-tests.yml b/.github/workflows/end-to-end-tests.yml
index 6c9cdfd7..5875ea91 100644
--- a/.github/workflows/end-to-end-tests.yml
+++ b/.github/workflows/end-to-end-tests.yml
@@ -42,3 +42,9 @@ jobs:
             echo The zipped WordPress plugin packages/web-component/wordpress-plugin/read-along-web-app-loader.zip is out of date.; \
             false; \
           fi
+      - name: make sure bundling works
+        shell: bash
+        run: |
+          npx nx bundle web-component
+          git status
+          git diff --word-diff=porcelain --word-diff-regex=... --color | perl -ple 's/^(\x1b[^ -+]{0,6})? (.{81,})$/$1 . " " . substr($2, 0, 40) . " [... " . (length($2)-80) . " bytes ...] " . substr($2, -40)/ex'
diff --git a/.github/workflows/windows-tests.yml b/.github/workflows/windows-tests.yml
index 388dccb8..6060de73 100644
--- a/.github/workflows/windows-tests.yml
+++ b/.github/workflows/windows-tests.yml
@@ -32,8 +32,4 @@ jobs:
       - run: npx nx check-l10n studio-web
       - run: npx nx build ngx-web-component
       - run: npx nx build studio-web
-
-      # bundle only works in Git Bash on Windows, so don't exercise it here, we know it'll fail.
-      #- run: npx nx bundle web-component
-      #  shell: bash
-      #  continue-on-error: true
+      - run: npx nx bundle web-component
diff --git a/packages/web-component/bundle.sh b/packages/web-component/bundle.sh
new file mode 100755
index 00000000..fc574e13
--- /dev/null
+++ b/packages/web-component/bundle.sh
@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# This script is used to bundle the web component for including in Offline HTML files
+# created by studio-web
+
+set -o errexit
+set -o verbose
+
+node b64Fonts.js
+npx webpack --config webpack.config.js
+packageVersion=$(npm view ../../node_modules/@readalongs/web-component version)
+timestamp=$(date "+%Y-%m-%d+%H-%M-%S")
+cd ../studio-web
+npm pkg set singleFileBundleVersion="${packageVersion}"
+npm pkg set singleFileBundleTimestamp="${timestamp}"
diff --git a/packages/web-component/package.json b/packages/web-component/package.json
index a4d7af3b..1e3825ab 100644
--- a/packages/web-component/package.json
+++ b/packages/web-component/package.json
@@ -15,7 +15,7 @@
     "dist/"
   ],
   "scripts": {
-    "bundle": "node b64Fonts.js && webpack --config webpack.config.js; packageVersion=$(npm view ../../node_modules/@readalongs/web-component version); timestamp=$(date \"+%Y-%m-%d+%H-%M-%S\") && cd ../studio-web && npm pkg set singleFileBundleVersion=\"${packageVersion}\" && npm pkg set singleFileBundleTimestamp=\"${timestamp}\"",
+    "bundle": "bash bundle.sh",
     "cy:run": "cypress run",
     "test:full-pipeline": "npm run serve-test-data & nx run serve & npm run wait-for-test-server && npm run test:once",
     "test:once": "cypress run",