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

@@ -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'

.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

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}"

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",