@hubspot/ui-extensions-dev-server 0.1.0 → 0.2.0

package/build.js

@@ -1,5 +1,6 @@
 const { build } = require('vite');
 const { ROLLUP_OPTIONS } = require('./constants');
+const manifestPlugin = require('./plugins/manifestPlugin');
 
 async function buildAllExtensions(config, outputDir) {
   const extensionKeys = Object.keys(config);
@@ -11,6 +12,9 @@ async function buildAllExtensions(config, outputDir) {
       outputFileName: data?.output,
       outputDir,
       emptyOutDir: i === 0,
+      plugins: {
+        rollup: [manifestPlugin({ output: data?.output })],
+      },
     });
   }
 }

package/constants.js

@@ -1,7 +1,9 @@
 const VITE_DEFAULT_PORT = 5173;
+const WEBSOCKET_PORT = 5174;
 const MAIN_APP_CONFIG = 'app.json';
 const PROJECT_CONFIG = 'hsproject.json';
 const OUTPUT_DIR = 'dist';
+const MANIFEST_FILE = 'manifest.json';
 
 const ROLLUP_OPTIONS = {
   // Deps to exclude from the bundle
@@ -25,6 +27,8 @@ module.exports = {
   MAIN_APP_CONFIG,
   PROJECT_CONFIG,
   OUTPUT_DIR,
+  MANIFEST_FILE,
+  WEBSOCKET_PORT,
   EXTENSIONS_MESSAGE_VERSION,
   WEBSOCKET_MESSAGE_VERSION,
 };

package/dev.js

@@ -1,50 +1,62 @@
-const { build } = require('vite');
+const { createServer } = require('vite');
 const { getExtensionConfig } = require('./config');
-const { ROLLUP_OPTIONS } = require('./constants');
 const startDevServer = require('./server');
-const manifestPlugin = require('./plugins/manifestPlugin');
+const devBuildPlugin = require('./plugins/devBuildPlugin');
 
-async function _buildDevBundle(outputDir, extensionConfig) {
-  await build({
-    define: {
-      'process.env.NODE_ENV': JSON.stringify(
-        process.env.NODE_ENV || 'development'
-      ),
-    },
-    build: {
-      watch: {
-        clearScreen: false,
-        exclude: [
-          'node_modules',
-          'package.json',
-          'package-lock.json',
-          'app.json',
-        ],
+async function _createViteDevServer(
+  outputDir,
+  extensionConfig,
+  websocketPort,
+  baseMessage
+) {
+  return await createServer({
+    appType: 'custom',
+    mode: 'development',
+    server: {
+      middlewareMode: true,
+      hmr: {
+        port: websocketPort,
       },
-      lib: {
-        entry: extensionConfig?.file,
-        name: extensionConfig?.output,
-        formats: ['iife'],
-        fileName: () => extensionConfig?.output,
+      watch: {
+        ignored: ['**/src/app/extensions/dist/**/*'],
       },
+    },
+    build: {
       rollupOptions: {
-        ...ROLLUP_OPTIONS,
-        plugins: [
-          ...(ROLLUP_OPTIONS.plugins || []),
-          manifestPlugin({ minify: false, extensionConfig }),
-        ],
+        input: extensionConfig?.file,
+        output: extensionConfig.output,
       },
-      outDir: outputDir,
-      emptyOutDir: true,
-      minify: false,
     },
+    plugins: [devBuildPlugin({ extensionConfig, outputDir, baseMessage })],
   });
 }
 
-async function startDevMode(config, outputDir, port, extension) {
+async function startDevMode(
+  config,
+  outputDir,
+  expressPort,
+  webSocketPort,
+  extension
+) {
   const extensionConfig = await getExtensionConfig(config, extension);
-  await _buildDevBundle(outputDir, extensionConfig);
-  startDevServer(outputDir, port, extensionConfig);
+  const baseMessage = Object.freeze({
+    appName: extensionConfig?.appName,
+    title: extensionConfig?.name,
+    callback: `http://hslocal.net:${expressPort}/${extensionConfig?.output}`,
+  });
+  const viteDevServer = await _createViteDevServer(
+    outputDir,
+    extensionConfig,
+    webSocketPort,
+    baseMessage
+  );
+  startDevServer(
+    outputDir,
+    expressPort,
+    webSocketPort,
+    baseMessage,
+    viteDevServer
+  );
 }
 
 module.exports = {

package/index.js

@@ -16,12 +16,13 @@ async function remoteBuild(root, entryPoint, outputDir) {
     );
   }
 
+  const output = getUrlSafeFileName(entryPoint);
   await buildSingleExtension({
     file: entryPoint,
     outputFileName: getUrlSafeFileName(entryPoint),
     outputDir: outputDir || OUTPUT_DIR,
     plugins: {
-      rollup: [manifestPlugin({ minify: true })],
+      rollup: [manifestPlugin({ minify: true, output })],
     },
     minify: true,
     root,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -22,13 +22,14 @@
     "tests/runTests.js",
     "tests/testBuild.js",
     "tests/testDevServer.js",
-    "plugins/manifestPlugin.js",
+    "tests/utils.js",
+    "plugins/*",
     "index.js",
     "server.js"
   ],
   "license": "MIT",
   "dependencies": {
-    "chokidar": "^3.5.3",
+    "axios": "^1.4.0",
     "command-line-args": "^5.2.1",
     "command-line-usage": "^7.0.1",
     "console-log-colors": "^0.4.0",
@@ -58,5 +59,5 @@
       "optional": true
     }
   },
-  "gitHead": "abac5960e6277af827714dcd4150ad7606e6a481"
+  "gitHead": "ab7ad192e9d98163d2613d77f68677e3b48898aa"
 }

package/plugins/devBuildPlugin.js

@@ -0,0 +1,98 @@
+const { ROLLUP_OPTIONS, WEBSOCKET_MESSAGE_VERSION } = require('../constants');
+const { build } = require('vite');
+const manifestPlugin = require('./manifestPlugin');
+const logger = require('../logger');
+
+function devBuildPlugin(options = {}) {
+  const { extensionConfig, outputDir, baseMessage } = options;
+  const versionedBaseMessage = {
+    ...baseMessage,
+    version: WEBSOCKET_MESSAGE_VERSION,
+  };
+
+  const devBuild = async () => {
+    try {
+      await build({
+        mode: 'development',
+        define: {
+          'process.env.NODE_ENV': JSON.stringify(
+            process.env.NODE_ENV || 'development'
+          ),
+        },
+        build: {
+          lib: {
+            entry: extensionConfig?.file,
+            name: extensionConfig?.output,
+            formats: ['iife'],
+            fileName: () => extensionConfig?.output,
+          },
+          rollupOptions: {
+            ...ROLLUP_OPTIONS,
+            plugins: [
+              ...(ROLLUP_OPTIONS.plugins || []),
+              manifestPlugin({
+                minify: false,
+                output: extensionConfig?.output,
+              }),
+            ],
+            output: {
+              ...ROLLUP_OPTIONS.output,
+              sourcemap: 'inline',
+            },
+          },
+          outDir: outputDir,
+          emptyOutDir: true,
+          minify: false,
+        },
+      });
+    } catch (e) {
+      logger.error(e.message);
+    }
+  };
+
+  let localServer;
+  return {
+    name: 'ui-extensibility-dev-build-plugin',
+    enforce: 'pre',
+    configureServer: async server => {
+      // Store a reference to the server to be used in hooks that don't get the server injected
+      // See https://vitejs.dev/guide/api-plugin.html#configureserver for information on this pattern
+      localServer = server;
+      localServer.ws.on('connection', () => {
+        logger.info('Browser connected and listening for bundle updates');
+        localServer.ws.send({
+          ...versionedBaseMessage,
+          event: 'start',
+        });
+      });
+      await devBuild();
+    },
+    handleHotUpdate: async ({ server }) => {
+      await devBuild();
+      if (server.ws.clients.size) {
+        logger.info('Bundle updated, notifying connected browsers');
+      } else {
+        logger.warn('Bundle updated, no browsers connected to notify');
+      }
+      server.ws.send({
+        ...versionedBaseMessage,
+        event: 'update',
+      });
+      return [];
+    },
+    buildEnd(error) {
+      if (error) {
+        logger.error(error);
+      }
+      logger.warn('Sending shutdown message to connected browsers');
+      if (localServer && localServer.ws) {
+        localServer.ws.send({
+          ...versionedBaseMessage,
+          event: 'shutdown',
+        });
+      }
+    },
+  };
+}
+
+module.exports = devBuildPlugin;

package/plugins/manifestPlugin.js

@@ -1,8 +1,9 @@
 const { readFileSync } = require('fs');
 const { normalize } = require('path');
+const { MANIFEST_FILE } = require('../constants');
 const logger = require('../logger');
+const path = require('path');
 
-const DEFAULT_MANIFEST_NAME = 'manifest.json';
 const PACKAGE_LOCK_FILE = 'package-lock.json';
 const PACKAGE_FILE = 'package.json';
 const EXTENSIONS_PATH = 'src/app/extensions/';
@@ -12,19 +13,16 @@ function plugin(options = {}) {
     name: 'ui-extensions-manifest-generation-plugin',
     enforce: 'post', // run after default rollup plugins
     generateBundle(_rollupOptions, bundle) {
-      const {
-        output = DEFAULT_MANIFEST_NAME,
-        minify = false,
-        extensionConfig,
-      } = options;
+      const { output, minify = false } = options;
       try {
-        const manifest = _generateManifestContents(bundle, extensionConfig);
+        const filename = path.parse(output).name;
+        const manifest = _generateManifestContents(bundle);
         this.emitFile({
           type: 'asset',
           source: minify
             ? JSON.stringify(manifest)
             : JSON.stringify(manifest, null, 2),
-          fileName: normalize(output),
+          fileName: normalize(`${filename}-${MANIFEST_FILE}`),
         });
       } catch (e) {
         logger.warn(`\nUnable to write manifest file in ${output}, ${e}`);
@@ -33,14 +31,13 @@ function plugin(options = {}) {
   };
 }
 
-function _generateManifestContents(bundle, extension) {
+function _generateManifestContents(bundle) {
   const baseManifest = {
     package: _loadPackageFile(),
-    extension,
   };
 
   // The keys to bundle are the filename without any path information
-  const bundles = Object.keys(bundle);
+  const bundles = Object.keys(bundle).filter(cur => cur.endsWith('.js'));
 
   if (bundles.length === 1) {
     return {
@@ -86,7 +83,7 @@ function _loadPackageFile() {
 }
 
 function _stripPathPriorToExtDir(filepath) {
-  return filepath.split(EXTENSIONS_PATH).pop();
+  return filepath?.split(EXTENSIONS_PATH).pop();
 }
 
 function _buildModulesInfo(moduleIds, modules) {

package/run.js

@@ -3,27 +3,37 @@
 const { startDevMode } = require('./dev');
 const { loadConfig } = require('./config');
 const { buildAllExtensions, buildSingleExtension } = require('./build');
-const { VITE_DEFAULT_PORT, OUTPUT_DIR } = require('./constants');
+const {
+  VITE_DEFAULT_PORT,
+  OUTPUT_DIR,
+  WEBSOCKET_PORT,
+} = require('./constants');
 const { parseArgs, showHelp } = require('./cli');
 const { getUrlSafeFileName } = require('./utils');
 const manifestPlugin = require('./plugins/manifestPlugin');
 
-const { DEV_MODE, BUILD_MODE, port, extension, help } = parseArgs();
-const PORT = port || VITE_DEFAULT_PORT;
+const { DEV_MODE, BUILD_MODE, extension, help } = parseArgs();
 
 if (help || !(DEV_MODE || BUILD_MODE)) {
   showHelp(OUTPUT_DIR);
 }
 
 if (DEV_MODE) {
-  startDevMode(loadConfig(), OUTPUT_DIR, PORT, extension);
+  startDevMode(
+    loadConfig(),
+    OUTPUT_DIR,
+    VITE_DEFAULT_PORT,
+    WEBSOCKET_PORT,
+    extension
+  );
 } else if (BUILD_MODE) {
   if (extension) {
+    const output = getUrlSafeFileName(extension);
     buildSingleExtension({
       file: extension,
-      outputFileName: getUrlSafeFileName(extension),
+      outputFileName: output,
       outputDir: OUTPUT_DIR,
-      plugins: { rollup: [manifestPlugin()] },
+      plugins: { rollup: [manifestPlugin({ output })] },
     });
   } else {
     buildAllExtensions(loadConfig(), OUTPUT_DIR);

package/server.js

@@ -1,120 +1,64 @@
 const express = require('express');
-const chokidar = require('chokidar');
-const { WebSocketServer } = require('ws');
-const http = require('http');
 const logger = require('./logger');
 const path = require('path');
 const cors = require('cors');
-const {
-  EXTENSIONS_MESSAGE_VERSION,
-  WEBSOCKET_MESSAGE_VERSION,
-} = require('./constants');
-
-function startDevServer(outputDir, port, extensionConfig) {
-  const callback = `http://hslocal.net:${port}/${extensionConfig?.output}`;
-
+const fs = require('fs');
+const { EXTENSIONS_MESSAGE_VERSION, MANIFEST_FILE } = require('./constants');
+
+function startDevServer(
+  outputDir,
+  expressPort,
+  webSocketPort,
+  baseMessage,
+  viteDevServer
+) {
   const app = express();
 
-  // Using http.createServer so WebSocket server can be attached before initializing express.
-  const server = http.createServer(app);
-
   // Setup middleware
   app.use(cors());
   app.use(express.static(outputDir));
-
-  _addExtensionsEndpoint(app, port);
-
-  const { broadcast, wss } = _setupWebSocketServer(
-    server,
-    extensionConfig,
-    callback
+  _addExtensionsEndpoint(
+    app,
+    expressPort,
+    webSocketPort,
+    outputDir,
+    baseMessage
   );
-  _setupChokidarWatcher(broadcast, outputDir);
-
-  server.listen({ port }, () => {
-    logger.warn(`Listening at ${callback}`);
-  });
-
-  _configureShutDownHandlers(server, wss, broadcast);
-}
 
-function _setupWebSocketServer(server, extensionConfig, callback) {
-  const wss = new WebSocketServer({ server });
+  // Vite middlewares needs to go last because it's greedy and will block other middleware
+  app.use(viteDevServer.middlewares);
 
-  const baseMessage = {
-    appName: extensionConfig?.appName,
-    title: extensionConfig?.name,
-    callback,
-    version: WEBSOCKET_MESSAGE_VERSION,
-  };
-
-  wss.on('connection', client => {
-    logger.info('Browser connected and listening for bundle updates');
-    client.send(
-      JSON.stringify({
-        event: 'start',
-        ...baseMessage,
-      })
-    );
+  const server = app.listen({ port: expressPort }, () => {
+    logger.warn(`Listening at ${baseMessage.callback}`);
   });
 
-  return {
-    wss,
-    broadcast: message => {
-      if (wss.clients.size === 0) {
-        logger.warn('No browsers connected to notify');
-        return;
-      }
-      wss.clients.forEach(client => {
-        client.send(
-          JSON.stringify({
-            ...message,
-            ...baseMessage,
-          })
-        );
-      });
-    },
-  };
-}
-
-// Setup a watcher on the dist directory and update broadcast
-//to all clients when an event is observed
-function _setupChokidarWatcher(broadcast, outputDir) {
-  chokidar.watch(outputDir).on('all', (event, file) => {
-    if (event !== 'change' || event !== 'add' || file === 'manifest.json') {
-      // We need to listen to 'change' and 'add' because sometimes chokidar
-      // sees it as an 'unlink' and 'add' instead of just a 'change'
-      // Since we are adding the manifest.json to the build, we want to ignore changes to that so we don't double send messages
-      return;
-    }
-    logger.info('Bundle updated notifying browser');
-    broadcast({
-      event: 'update',
-    });
-  });
+  _configureShutDownHandlers(server, viteDevServer);
 }
 
-function _addExtensionsEndpoint(server, port) {
+function _addExtensionsEndpoint(
+  server,
+  expressPort,
+  webSocketPort,
+  outputDir,
+  baseMessage
+) {
   const endpoint = '/extensions';
   server.get(endpoint, (_req, res) => {
     try {
-      const manifest = require(path.join(process.cwd(), 'dist/manifest.json'));
-      const {
-        extension: { appName, name, output },
-      } = manifest;
+      const output = path.parse(baseMessage.callback).name;
+      const manifest = JSON.parse(
+        fs.readFileSync(
+          path.join(process.cwd(), `${outputDir}/${output}-${MANIFEST_FILE}`)
+        )
+      );
 
       const response = {
-        websocket: `ws://localhost:${port}`,
+        websocket: `ws://localhost:${webSocketPort}`,
         version: EXTENSIONS_MESSAGE_VERSION,
         extensions: [
           {
-            appName,
-            title: name,
-            callback: `http://hslocal.net:${port}/${output}`,
-            manifest: {
-              ...manifest,
-              extension: undefined,
-            },
+            ...baseMessage,
+            manifest,
           },
         ],
       };
@@ -125,19 +69,16 @@ function _addExtensionsEndpoint(server, port) {
       });
     }
   });
-  logger.warn(`Listening at http://hslocal.net:${port}${endpoint}`);
+  logger.warn(`Listening at http://hslocal.net:${expressPort}${endpoint}`);
 }
 
-function _configureShutDownHandlers(server, wss, broadcast) {
-  function shutdown() {
+function _configureShutDownHandlers(server, viteDevServer) {
+  async function shutdown() {
     logger.warn('\nCleaning up after ourselves...');
+    await viteDevServer.pluginContainer.close();
     // Stop new connections to express server
-    broadcast({
-      event: 'shutdown',
-    });
-    wss.close(() => {});
     server.close(() => {});
-    logger.warn('Clean up done');
+    logger.info('Clean up done, exiting.');
     process.exit(0);
   }
 

package/tests/runTests.js

@@ -3,30 +3,48 @@
 const { testBuild } = require('./testBuild');
 const { testDevServer } = require('./testDevServer');
 const logger = require('../logger');
+const { generateSpec } = require('./utils');
 
 let devServerProcess;
 
+// Overwrite console.debug to only log when in DEBUG mode
+console.debug = (...args) => {
+  if (process.env.DEBUG) {
+    console.log(...args);
+  }
+};
+
 function handleFailure() {
   if (devServerProcess) {
     devServerProcess.kill();
   }
 }
 
-process.on('SIGINT', () => {
-  handleFailure();
-});
+process.on('SIGINT', handleFailure);
+process.on('SIGTERM', handleFailure);
 
 process.on('uncaughtException', e => {
   console.error(e);
   handleFailure();
 });
 
-try {
-  testBuild(logger);
-  testDevServer(logger, devServerProcess);
-} catch (e) {
-  console.error(e.message);
-  logger.error('Tests failed 😭');
-  handleFailure();
-  process.exit(1);
-}
+// eslint-disable-next-line no-floating-promise/no-floating-promise
+(async () => {
+  try {
+    const spec = generateSpec();
+
+    logger.warn(
+      `Running tests for the following entrypoints: [\n\t${spec.build.entrypoints.join(
+        ',\n\t'
+      )}\n]`
+    );
+
+    await testBuild(logger, spec.build);
+    testDevServer(logger, devServerProcess, spec.dev);
+  } catch (e) {
+    console.error(e.message);
+    logger.error('Tests failed 😭');
+    handleFailure();
+    process.exit(1);
+  }
+})();

package/tests/testBuild.js

@@ -2,6 +2,7 @@ const { execSync } = require('child_process');
 const fs = require('fs');
 const path = require('path');
 const assert = require('assert');
+const { generateManifestOutputPair, verifyFileContents } = require('./utils');
 
 function _testHelper(command, outputDirFiles) {
   if (command) {
@@ -16,76 +17,64 @@ function _testHelper(command, outputDirFiles) {
   // Spot check the file contents to make sure they seem ok
   filesInOutputDir.forEach(file => {
     const fileContents = fs.readFileSync(path.join(distDir, file)).toString();
-    if (file === 'manifest.json') {
-      const manifest = JSON.parse(fileContents);
-      assert(manifest.entry);
-      assert(manifest.modules);
-      assert(manifest.modules.internal);
-      manifest.modules.internal.forEach(mod => {
-        assert(mod.module);
-        assert(mod.renderedExports);
-      });
-      assert(manifest.modules.external);
-      manifest.modules.external.forEach(mod => {
-        assert(mod.module);
-        assert(mod.renderedExports);
-      });
-      assert(manifest.package);
-      assert(manifest.package.packages);
-    } else {
-      const stringsToSpotCheck = [
-        '.createRemoteReactComponent',
-        '.createElement',
-        'hubspot.extend',
-        'React',
-        'RemoteUI',
-      ];
-      stringsToSpotCheck.forEach(stringToCheck => {
-        assert(
-          fileContents.includes(stringToCheck),
-          `File ${file} contents should contain: "${stringToCheck}"`
-        );
-      });
-    }
+    verifyFileContents(file, fileContents);
   });
 }
 
-function testDefaultBuildPath(logger) {
-  logger.warn('- Test default build path started 🤞');
-  _testHelper('hs-ui-extensions-dev-server build', [
-    'PhoneLines.js',
-    'ProgressBarApp.js',
-  ]);
-  logger.info('- Test default build path passed 🚀');
+function testBuildAll(logger, entrypoints) {
+  const expected = entrypoints
+    .reduce((acc, cur) => {
+      return acc.concat(generateManifestOutputPair(cur));
+    }, [])
+    .sort();
+  logger.warn('- Test build all extensions started 🤞');
+  _testHelper('hs-ui-extensions-dev-server build', expected);
+  logger.info('- Test build all extensions passed 🚀');
 }
 
-function testBuildWithExtensionFlag(logger) {
-  logger.warn('- Test build with flags started 🤞');
-  _testHelper(
-    'hs-ui-extensions-dev-server build --extension ProgressBarApp.tsx',
-    ['ProgressBarApp.js', 'manifest.json']
-  );
-  logger.info('- Test build with flags passed 🚀');
+function testBuildSingle(logger, entrypoints) {
+  entrypoints.forEach(entrypoint => {
+    logger.warn(
+      `- Test build single extension started for entrypoint ${entrypoint} 🤞`
+    );
+    _testHelper(
+      `hs-ui-extensions-dev-server build --extension ${entrypoint}`,
+      generateManifestOutputPair(entrypoint)
+    );
+    logger.info(
+      `- Test build single extension passed for entrypoint ${entrypoint} 🚀`
+    );
+  });
 }
 
-function testDefInfraBuildFileName(logger) {
+async function testBuildRemote(logger, entrypoints) {
   const { remoteBuild } = require('../index');
-  logger.warn('- Test remoteBuild function 🤞');
+  for (let i = 0; i < entrypoints.length; ++i) {
+    const entrypoint = entrypoints[i];
+    logger.warn(
+      `- Test remoteBuild function started for entrypoint ${entrypoint} 🤞`
+    );
+
+    await remoteBuild(process.cwd(), entrypoint, 'dist');
+    _testHelper(null, generateManifestOutputPair(entrypoint));
 
-  remoteBuild(process.cwd(), 'ProgressBarApp.tsx', 'dist');
-  _testHelper(null, ['ProgressBarApp.js', 'manifest.json']);
-  logger.info('- Test build with entrypoint as arg 🚀');
+    logger.info(
+      `- Test remoteBuild function passed for entrypoint ${entrypoint} 🚀`
+    );
+  }
 }
 
-function testBuild(logger) {
+async function testBuild(logger, buildSpec) {
+  const { entrypoints } = buildSpec;
+
   logger.warn('\nBuild Tests started - External Devs 🤞');
-  testDefaultBuildPath(logger);
-  testBuildWithExtensionFlag(logger);
+  testBuildAll(logger, entrypoints);
+  testBuildSingle(logger, entrypoints);
   logger.info('Build Tests passed - External Devs🚀');
 
-  logger.warn('\nBuild Tests started - Dev Infra 🤞');
-  testDefInfraBuildFileName(logger);
-  logger.info('Build Tests passed - Dev Infra 🚀');
+  logger.warn('\nBuild Tests started - Remote 🤞');
+  await testBuildRemote(logger, entrypoints);
+  logger.info('Build Tests passed - Remote 🚀');
 }
 
 module.exports = {

package/tests/testDevServer.js

@@ -2,49 +2,92 @@ const { spawn } = require('child_process');
 const fs = require('fs');
 const path = require('path');
 const assert = require('assert');
-const http = require('http');
+const axios = require('axios');
 const WebSocket = require('ws');
 const {
+  VITE_DEFAULT_PORT,
+  WEBSOCKET_PORT,
   WEBSOCKET_MESSAGE_VERSION,
   EXTENSIONS_MESSAGE_VERSION,
 } = require('../constants');
+const { verifyFileContents, generateManifestOutputPair } = require('./utils');
+const { getUrlSafeFileName } = require('../utils');
 
-const testResults = {
+const preShutdownResults = {
   buildTestPassed: false,
   expressStaticTestPassed: false,
   extensionsEndpointPassed: false,
   webSocketTestPassed: false,
 };
 
-const port = 5172;
-const host = 'hslocal.net';
+const postShutdownResults = {
+  websocketShutdownReceived: false,
+  expressServerShutdown: false,
+};
+
+const host = 'http://hslocal.net';
+
+let running = false;
 
-function testDevServer(logger, devServerProcess) {
-  logger.warn('\nDev Server Tests started 🤞');
+function resetResults() {
+  Object.keys(preShutdownResults).forEach(result => {
+    preShutdownResults[result] = false;
+  });
+  Object.keys(postShutdownResults).forEach(result => {
+    postShutdownResults[result] = false;
+  });
+}
 
+function testDevServer(logger, devServerProcess, specs) {
+  const devServerInterval = setInterval(runDevServer, 1000);
+  let runCount = 0;
+
+  function runDevServer() {
+    if (running === false && !devServerProcess) {
+      resetResults();
+      _testDevServer(logger, devServerProcess, specs[runCount]);
+      runCount += 1;
+    }
+    if (runCount === specs.length) {
+      clearInterval(devServerInterval);
+    }
+  }
+}
+
+function _testDevServer(logger, devServerProcess, spec) {
+  running = true;
+  const { entrypoint, expected } = spec;
+
+  const filename = getUrlSafeFileName(entrypoint);
+  const localExpectations = {
+    callback: `${host}:${VITE_DEFAULT_PORT}/${filename}`,
+    websocketUrl: `ws://localhost:${WEBSOCKET_PORT}`,
+    ...expected,
+  };
+
+  logger.warn(`\nDev Server Tests started - ${entrypoint} 🤞`);
   // We need to use spawn here because it will put the process into the background,
   // which is required because dev mode is a blocking process and we want to test that
   // the express server and websocket server are starting properly
   devServerProcess = spawn('hs-ui-extensions-dev-server', [
     'dev',
     '--extension',
-    'PhoneLines.tsx',
-    '--port',
-    `${port}`,
+    entrypoint,
   ]);
 
   devServerProcess.stdout.on('data', buffer => {
     const data = buffer.toString().toLowerCase();
+    console.debug('[Dev Server]:', data);
     if (data.includes('built in')) {
-      testBuild(testResults, logger);
+      testBuild(logger, entrypoint);
     }
     if (
       data.includes('listening') &&
-      data.includes(`${host}:${port}/extensions`)
+      data.includes(`${host}:${VITE_DEFAULT_PORT}/extensions`)
     ) {
       setTimeout(() => {
-        testExpressServer(testResults, logger);
-        testWebSocketServer(testResults, logger);
+        testExpressServer(logger, localExpectations, filename);
+        testWebSocketServer(logger, localExpectations);
       }, 1000);
     }
   });
@@ -58,32 +101,33 @@ function testDevServer(logger, devServerProcess) {
 
   // When the process closes make sure we met all the success conditions
   devServerProcess.on('close', () => {
-    if (metConditions()) {
-      logger.info('Dev Server Tests passed 🚀');
+    if (metPreShutdownConditions()) {
+      logger.info(`- Dev Server pre-shutdown tests passed - ${entrypoint} 🚀`);
+      testPostShutdown(logger, filename);
     } else {
-      console.log(testResults);
+      console.log(preShutdownResults);
       logger.error('Tests failed 😭');
     }
   });
 
-  const interval = setInterval(callback, 1000);
-  let count = 0;
-  function callback() {
-    count += 1;
-    if (metConditions() || count === 5) {
+  const preShutdownInterval = setInterval(preShutdownCallback, 1000);
+  let preShutdownCheckCount = 0;
+  function preShutdownCallback() {
+    preShutdownCheckCount += 1;
+    if (metPreShutdownConditions() || preShutdownCheckCount === 5) {
+      clearInterval(preShutdownInterval);
       devServerProcess.kill();
-      clearInterval(interval);
     }
   }
 }
 
-function metConditions() {
+function metPreShutdownConditions() {
   const {
     buildTestPassed,
     expressStaticTestPassed,
     extensionsEndpointPassed,
     webSocketTestPassed,
-  } = testResults;
+  } = preShutdownResults;
   return (
     buildTestPassed &&
     expressStaticTestPassed &&
@@ -92,99 +136,152 @@ function metConditions() {
   );
 }
 
+function metPostShutdownConditions() {
+  const {
+    websocketShutdownReceived,
+    expressServerShutdown,
+  } = postShutdownResults;
+
+  return websocketShutdownReceived && expressServerShutdown;
+}
+
 // Test that the files were built in the proper location and spot
 // check the contents of the files.
-function testBuild(results, logger) {
+function testBuild(logger, entryPoint) {
   // // Make sure the files are getting generated in the dist dir
   const distDir = path.join(process.cwd(), 'dist');
   const filesInOutputDir = fs.readdirSync(distDir);
-  assert.deepStrictEqual(filesInOutputDir, ['PhoneLines.js', 'manifest.json']);
+  const filename = path.parse(entryPoint).name;
+  assert.deepStrictEqual(
+    filesInOutputDir,
+    generateManifestOutputPair(entryPoint)
+  );
   const fileContents = fs
-    .readFileSync(path.join(distDir, filesInOutputDir[0]))
+    .readFileSync(path.join(distDir, `${filename}.js`))
     .toString();
-  const stringsToSpotCheck = [
-    '.createRemoteReactComponent',
-    '.createElement',
-    'hubspot.extend',
-    'React',
-    'RemoteUI',
-  ];
-  stringsToSpotCheck.forEach(stringToCheck => {
-    assert(
-      fileContents.includes(stringToCheck),
-      `File ${filesInOutputDir[0]} contents should contain: "${stringToCheck}"`
-    );
-  });
+  verifyFileContents(`${filename}.js`, fileContents);
+
+  // Check for the inlined source map
+  assert(
+    fileContents.includes(
+      '//# sourceMappingURL=data:application/json;charset=utf-8;base64,'
+    )
+  );
   logger.info('- Build succeeded 🚀');
-  results.buildTestPassed = true;
+  preShutdownResults.buildTestPassed = true;
 }
 
 // Test that the express server is running on the expected port
 // and that it is serving the files as expected.
-function testExpressServer(results, logger) {
-  http.get(
-    {
-      host,
-      port,
-      path: '/PhoneLines.js',
-    },
-    response => {
-      if (response.statusCode !== 200) {
-        throw Error('Error with express server');
-      }
+function testExpressServer(logger, expected, filename) {
+  axios
+    .get(`${host}:${VITE_DEFAULT_PORT}/${filename}`)
+    .then(response => {
+      assert.strictEqual(response.status, 200, 'Bundle status code');
       logger.info('- Express server connected and serving files 🚀');
-      results.expressStaticTestPassed = true;
-    }
-  );
-  http.get(
-    {
-      host,
-      port,
-      path: '/extensions',
-    },
-    response => {
-      let body = '';
-      response.on('data', chunk => {
-        body += chunk.toString();
-      });
-      response.on('end', () => {
-        assert(response.statusCode === 200);
-        body = JSON.parse(body);
-        assert(body.extensions);
-        assert.equal(body.extensions.length, 1);
-        const extension = body.extensions.pop();
-        assert(extension.manifest);
-        assert.equal(extension.appName, 'Example App React UI');
-        assert.equal(extension.title, 'Phone Lines');
-        assert.equal(
-          extension.callback,
-          `http://${host}:${port}/PhoneLines.js`
-        );
-        assert.equal(body.websocket, `ws://localhost:${port}`);
-        assert.strictEquals(body.version, EXTENSIONS_MESSAGE_VERSION);
-        logger.info('- Express serving extension data 🚀');
-        results.extensionsEndpointPassed = true;
-      });
-    }
-  );
+      preShutdownResults.expressStaticTestPassed = true;
+    })
+    .catch(logger.error);
+  axios
+    .get(`${host}:${VITE_DEFAULT_PORT}/extensions`)
+    .then(response => {
+      const { data, status } = response;
+      assert.strictEqual(status, 200, '/extensions status code');
+
+      // Top level response assertions
+      assert.strictEqual(data.websocket, expected.websocketUrl);
+      assert.strictEqual(data.version, EXTENSIONS_MESSAGE_VERSION);
+      assert(data.extensions);
+
+      // Extension level response assertions
+      assert.equal(data.extensions.length, 1, '/extensions body length');
+      const extension = data.extensions.pop();
+      assert(extension.manifest);
+      assert.strictEqual(
+        extension.appName,
+        expected.appName,
+        '/extensions appName'
+      );
+      assert.strictEqual(extension.title, expected.title, '/extensions title');
+      assert.strictEqual(
+        extension.callback,
+        expected.callback,
+        '/extensions callback'
+      );
+      logger.info('- Express serving extension data 🚀');
+      preShutdownResults.extensionsEndpointPassed = true;
+    })
+    .catch(logger.error);
 }
 
 // Test the the web socket server is running on the expected port and
 // that we are able to receive messages from it.
-function testWebSocketServer(results, logger) {
-  const ws = new WebSocket(`ws://localhost:${port}`);
+function testWebSocketServer(logger, expected) {
+  const ws = new WebSocket(expected.websocketUrl);
   ws.on('message', messageBuffer => {
     const message = JSON.parse(messageBuffer.toString());
-    assert(message.event === 'start');
-    assert.strictEqual(message.appName, 'Example App React UI');
-    assert.strictEqual(message.title, 'Phone Lines');
+    console.debug('[WebSocket Message]:', message);
+    // Vite sends { type: 'connected'} as a greeting on connect
+    if (message.type === 'connected') {
+      return;
+    }
+
+    assert(['start', 'shutdown'].includes(message.event), 'Message Event');
+    assert.strictEqual(message.appName, expected.appName, 'Message appName');
+    assert.strictEqual(message.title, expected.title, 'Message title');
     assert.strictEqual(message.version, WEBSOCKET_MESSAGE_VERSION);
-    logger.info('- WebSocket server connected and sending messages 🚀');
-    results.webSocketTestPassed = true;
-    ws.close(); // The test passed, close the connection
+    logger.info(
+      `- WebSocket server connected and sending '${message.event}' messages 🚀`
+    );
+    if (message.event === 'start') {
+      preShutdownResults.webSocketTestPassed = true;
+    } else if (message.event === 'shutdown') {
+      postShutdownResults.websocketShutdownReceived = true;
+    }
   });
 }
 
+function testPostShutdown(logger, filename) {
+  testExpressHasShutdown(filename);
+
+  const shutdownInterval = setInterval(shutdownCallback, 1000);
+  let shutdownCheckCount = 0;
+  function shutdownCallback() {
+    shutdownCheckCount += 1;
+    if (metPostShutdownConditions()) {
+      clearInterval(shutdownInterval);
+      logger.info('- Dev Server post-shutdown tests passed 🚀');
+      logger.info('Dev Server tests passed 🚀');
+      running = false;
+    } else if (shutdownCheckCount === 5) {
+      clearInterval(shutdownInterval);
+      console.log(postShutdownResults);
+      logger.error('Tests failed 😭');
+    }
+  }
+}
+
+function testExpressHasShutdown(filename) {
+  axios
+    .get(`${host}:${VITE_DEFAULT_PORT}/${filename}`)
+    .then(response => {
+      console.debug(response);
+    })
+    .catch(err => {
+      assert.strictEqual(
+        err.syscall,
+        'connect',
+        'The connect call should fail'
+      );
+      assert.strictEqual(
+        err.code,
+        'ECONNREFUSED',
+        'Express should refuse connection post shutdown'
+      );
+      postShutdownResults.expressServerShutdown = true;
+    });
+}
+
 module.exports = {
   testDevServer,
 };

package/tests/utils.js

@@ -0,0 +1,76 @@
+const path = require('path');
+const { MANIFEST_FILE } = require('../constants');
+const { getUrlSafeFileName } = require('../utils');
+const assert = require('assert');
+const { loadConfig } = require('../config');
+
+function generateManifestOutputPair(entrypoint) {
+  const fileName = path.parse(entrypoint).name;
+  return [`${fileName}-${MANIFEST_FILE}`, getUrlSafeFileName(entrypoint)];
+}
+
+function verifyFileContents(file, contents) {
+  if (file.endsWith(MANIFEST_FILE)) {
+    const manifest = JSON.parse(contents);
+    assert(manifest.entry);
+    assert(manifest.modules);
+    assert(manifest.modules.internal);
+    manifest.modules.internal.forEach(mod => {
+      assert(mod.module);
+      assert(mod.renderedExports);
+    });
+    assert(manifest.modules.external);
+    manifest.modules.external.forEach(mod => {
+      assert(mod.module);
+      assert(mod.renderedExports);
+    });
+    assert(manifest.package);
+    assert(manifest.package.packages);
+  } else {
+    const stringsToSpotCheck = [
+      '.createRemoteReactComponent',
+      '.createElement',
+      'hubspot.extend',
+      'React',
+      'RemoteUI',
+    ];
+    stringsToSpotCheck.forEach(stringToCheck => {
+      assert(
+        contents.includes(stringToCheck),
+        `File ${file} contents should contain: "${stringToCheck}"`
+      );
+    });
+  }
+}
+
+function generateSpec() {
+  const config = loadConfig();
+  const entrypoints = Object.keys(config);
+  if (entrypoints.length === 0) {
+    throw new Error(
+      'Unable to determine testable entrypoints from config files'
+    );
+  }
+
+  const dev = entrypoints.map(entrypoint => {
+    const { data } = config[entrypoint];
+    return {
+      entrypoint,
+      expected: {
+        ...data,
+      },
+    };
+  });
+  return {
+    build: {
+      entrypoints,
+    },
+    dev,
+  };
+}
+
+module.exports = {
+  generateManifestOutputPair,
+  verifyFileContents,
+  generateSpec,
+};