fix(scripts/watch): ensure missing sw scripts

package.json

@@ -20,7 +20,7 @@
     "build": "concurrently \"npm run build:bundle\" \"npm run build:server\" -n build:bundle,build:server --kill-others-on-fail && npm run build:service-workers",
     "build:prod-sample": "concurrently \"npm run build:sample-modules\" \"node scripts/build-one-app-docker-setup.js\" -n build-modules,build-app",
     "build:sample-modules": "node scripts/build-sample-modules.js",
-    "start:watch": "nodemon --signal SIGTERM --watch src --ext js,jsx --exec babel-node src/server/index.js",
+    "start:watch": "node scripts/watch-server.js",
     "prestart:prod-sample": "npm run build:prod-sample",
     "start:prod-sample": "docker-compose -f ./prod-sample/docker-compose.yml up --abort-on-container-exit",
     "test:lockfile": "lockfile-lint -p package-lock.json -t npm -a npm -o https: -c -i",

scripts/build-service-workers.js

@@ -21,7 +21,7 @@ const rollup = require('rollup');
 const resolve = require('@rollup/plugin-node-resolve').default;
 const babel = require('rollup-plugin-babel');
 
-async function buildServiceWorkerScripts({ dev = false, minify = true } = {}) {
+async function buildServiceWorkerScripts({ dev = false, watch = false, minify = true } = {}) {
   const inputDirectory = path.resolve(__dirname, '../src/client/service-worker');
   const buildFolderDirectory = path.resolve(__dirname, '../lib/server/middleware/pwa', 'scripts');
 
@@ -36,26 +36,44 @@ async function buildServiceWorkerScripts({ dev = false, minify = true } = {}) {
     plugins.push(terser());
   }
 
-  const build = await rollup.rollup({
+  const { input, output } = {
     input: {
       sw: path.join(inputDirectory, 'worker.js'),
       'sw.noop': path.join(inputDirectory, 'worker.noop.js'),
     },
-    plugins,
-  });
-
-  return build.write({
     output: {
       format: 'esm',
       dir: buildFolderDirectory,
       sourcemap: dev ? 'inline' : false,
     },
+  };
+
+  if (watch) {
+    // https://rollupjs.org/guide/en/#rollupwatch
+    const watchOptions = { chokidar: true, clearScreen: false };
+    return {
+      input,
+      output,
+      watcher: await rollup.watch({
+        input, output, plugins, watch: watchOptions,
+      }),
+    };
+  }
+
+  const build = await rollup.rollup({
+    input,
+    plugins,
   });
+
+  return build.write({ output });
 }
 
-(async function buildWorkers({ dev }) {
-  await buildServiceWorkerScripts({ dev });
-}({
-  // for environment variables
-  dev: process.env.NODE_ENV === 'development',
-}));
+if (require.main === module) {
+  (async function buildWorkers({ dev }) {
+    await buildServiceWorkerScripts({ dev });
+  }({
+    dev: process.env.NODE_ENV === 'development',
+  }));
+} else {
+  module.exports = buildServiceWorkerScripts;
+}

scripts/watch-server.js

@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+/*
+ * Copyright 2020 American Express Travel Related Services Company, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+const { spawn } = require('child_process');
+const buildServiceWorkerScripts = require('./build-service-workers');
+
+(async function dev() {
+  const { watcher } = await buildServiceWorkerScripts({ dev: true, watch: true, minify: false });
+  watcher.on('event', (event) => {
+    switch (event.code) {
+      case 'ERROR':
+        console.error(event.error);
+        break;
+      case 'START':
+        console.log('Service Workers have %sed building', event.code.toLowerCase());
+        break;
+      case 'BUNDLE_END':
+        console.log('Service Workers built in %d seconds', event.duration / 1000);
+        break;
+      default:
+        break;
+    }
+  });
+
+  const babelWatch = spawn('npm', ['run', 'build:server', '--', '--watch'], {
+    stdio: 'inherit',
+    killSignal: 'SIGINT',
+  });
+
+  const flags = process.argv.filter((arg) => [
+    '--root-module-name',
+    '--module-map-url',
+    '--use-middleware',
+    '--use-host',
+  ].find((argName) => arg.startsWith(argName)));
+
+  const nodemon = spawn('nodemon', [
+    '--signal', 'SIGTERM', '--watch', 'src', '--ext', 'js,jsx', 'lib/server/index.js',
+  ].concat(flags.length > 0 ? ['--', ...flags] : []), {
+    stdio: 'inherit',
+    killSignal: 'SIGINT',
+  });
+
+  process.on('exit', (code) => {
+    watcher.close();
+    babelWatch.kill(code);
+    nodemon.kill(code);
+  });
+}());