@hubspot/ui-extensions-dev-server 0.0.1-prealpha.8 → 0.2.0

package/README.md

@@ -1,4 +1,6 @@
-# ui-extensions-dev-server
+# UI Extensions – Dev Server
+
+Development server to run and test your HubSpot UI Extensions.
 
 ## Overview
 This package contains the cli for running HubSpot UI extensions locally, as well as running a production build for debugging purposes.

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/config.js

@@ -1,14 +1,20 @@
 const prompts = require('prompts');
 const logger = require('./logger');
 const path = require('path');
-const { MAIN_APP_CONFIG, PROJECT_CONFIG } = require('./constants');
+const { MAIN_APP_CONFIG } = require('./constants');
 const { getUrlSafeFileName } = require('./utils');
 
 async function getExtensionConfig(configuration, extension) {
-  if (extension && configuration[extension]) {
-    const { data } = configuration[extension];
+  const extensionOptions = Object.keys(configuration);
+
+  if (
+    (extension && configuration[extension]) ||
+    extensionOptions.length === 1
+  ) {
+    const extensionToRun = extension || extensionOptions[0];
+    const { data } = configuration[extensionToRun];
     return {
-      key: extension,
+      key: extensionToRun,
       name: data.title,
       file: data?.module?.file,
       output: data?.output,
@@ -16,7 +22,6 @@ async function getExtensionConfig(configuration, extension) {
     };
   }
 
-  const extensionOptions = Object.keys(configuration);
   const response = await prompts(
     [
       {
@@ -65,10 +70,6 @@ function loadConfig() {
   // will need to be ran from, the extensions directory
   const configPath = path.join(process.cwd(), `../${MAIN_APP_CONFIG}`);
 
-  const projectConfig = _loadRequiredConfigFile(
-    path.join(process.cwd(), `../../../${PROJECT_CONFIG}`)
-  );
-
   const mainAppConfig = _loadRequiredConfigFile(configPath);
 
   const crmCardsSubConfigFiles = mainAppConfig?.extensions?.crm?.cards;
@@ -107,7 +108,7 @@ function loadConfig() {
       outputConfig[entryPointPath].data.output = getUrlSafeFileName(
         entryPointPath
       );
-      outputConfig[entryPointPath].data.appName = projectConfig.name;
+      outputConfig[entryPointPath].data.appName = mainAppConfig.name;
     } catch (e) {
       let errorMessage = e?.message;
       if (e?.code === 'MODULE_NOT_FOUND') {

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
@@ -16,10 +18,17 @@ const ROLLUP_OPTIONS = {
   },
 };
 
+const EXTENSIONS_MESSAGE_VERSION = 0;
+const WEBSOCKET_MESSAGE_VERSION = 0;
+
 module.exports = {
   VITE_DEFAULT_PORT,
   ROLLUP_OPTIONS,
   MAIN_APP_CONFIG,
   PROJECT_CONFIG,
   OUTPUT_DIR,
+  MANIFEST_FILE,
+  WEBSOCKET_PORT,
+  EXTENSIONS_MESSAGE_VERSION,
+  WEBSOCKET_MESSAGE_VERSION,
 };

package/dev.js

@@ -1,131 +1,62 @@
-const express = require('express');
-const chokidar = require('chokidar');
-const { WebSocketServer } = require('ws');
-const http = require('http');
-const logger = require('./logger');
-const { build } = require('vite');
+const { createServer } = require('vite');
 const { getExtensionConfig } = require('./config');
-const fs = require('fs');
-const path = require('path');
-const { ROLLUP_OPTIONS } = require('./constants');
+const startDevServer = require('./server');
+const devBuildPlugin = require('./plugins/devBuildPlugin');
 
-async function _devBuild(config, outputDir, extension) {
-  const extensionConfig = await getExtensionConfig(config, extension);
-  build({
-    define: {
-      'process.env.NODE_ENV': JSON.stringify(
-        process.env.NODE_ENV || 'development'
-      ),
-    },
-    build: {
+async function _createViteDevServer(
+  outputDir,
+  extensionConfig,
+  websocketPort,
+  baseMessage
+) {
+  return await createServer({
+    appType: 'custom',
+    mode: 'development',
+    server: {
+      middlewareMode: true,
+      hmr: {
+        port: websocketPort,
+      },
       watch: {
-        clearScreen: false,
-        exclude: [
-          'node_modules',
-          'package.json',
-          'package-lock.json',
-          'app.json',
-        ],
+        ignored: ['**/src/app/extensions/dist/**/*'],
       },
-      lib: {
-        entry: extensionConfig?.file,
-        name: extensionConfig?.output,
-        formats: ['iife'],
-        fileName: () => extensionConfig?.output,
+    },
+    build: {
+      rollupOptions: {
+        input: extensionConfig?.file,
+        output: extensionConfig.output,
       },
-      rollupOptions: ROLLUP_OPTIONS,
-      outDir: outputDir,
-      emptyOutDir: true,
-      minify: false,
     },
+    plugins: [devBuildPlugin({ extensionConfig, outputDir, baseMessage })],
   });
-  return extensionConfig;
 }
 
-function _startDevServer(outputDir, port, extensionConfig) {
-  const app = express();
-  const server = http.createServer(app);
-
-  // Host the OUTPUT_DIR
-  app.use(express.static(outputDir));
-
-  // Setup websocket server to send messages to browser on bundle update
-  const wss = new WebSocketServer({ server });
-
-  const callback = `http://localhost:${port}/${extensionConfig?.output}`;
-
-  function broadcast(message) {
-    if (wss.clients.size === 0) {
-      logger.warn('No browsers connected to update');
-      return;
-    }
-    wss.clients.forEach(client => {
-      client.send(JSON.stringify(message));
-    });
-  }
-
-  wss.on('connection', client => {
-    let base64Callback;
-    try {
-      base64Callback = fs
-        .readFileSync(
-          path.join(process.cwd(), outputDir, extensionConfig?.output)
-        )
-        .toString('base64');
-    } catch (e) {
-      logger.warn(
-        'File not found:',
-        path.join(process.cwd(), outputDir, extensionConfig?.output)
-      );
-    }
-
-    logger.info('Browser connected and listening for bundle updates');
-    client.send(
-      JSON.stringify({
-        event: 'start',
-        appName: extensionConfig?.appName,
-        extension: extensionConfig?.name,
-        callback: base64Callback
-          ? `data:text/javascript;base64,${base64Callback}`
-          : undefined,
-      })
-    );
-  });
-
-  // Start the express and websocket servers
-  server.listen({ port }, () => {
-    logger.warn(`Listening at ${callback}`);
-  });
-
-  // Setup a watcher on the dist directory and update broadcast
-  //to all clients when an event is observed
-  chokidar.watch(outputDir).on('change', file => {
-    const base64Callback = fs
-      .readFileSync(path.join(process.cwd(), file))
-      .toString('base64');
-    logger.debug(`${file} updated, reloading extension`);
-    broadcast({
-      event: 'update',
-      appName: extensionConfig?.appName,
-      extension: extensionConfig?.name,
-      callback: `data:text/javascript;base64,${base64Callback}`,
-    });
-  });
-
-  process.on('SIGINT', () => {
-    logger.warn('\nSending shutdown signal to connected browser');
-    broadcast({
-      event: 'shutdown',
-      appName: extensionConfig?.appName,
-      extension: extensionConfig?.name,
-    });
-    process.exit(0);
+async function startDevMode(
+  config,
+  outputDir,
+  expressPort,
+  webSocketPort,
+  extension
+) {
+  const extensionConfig = await getExtensionConfig(config, extension);
+  const baseMessage = Object.freeze({
+    appName: extensionConfig?.appName,
+    title: extensionConfig?.name,
+    callback: `http://hslocal.net:${expressPort}/${extensionConfig?.output}`,
   });
-}
-
-async function startDevMode(config, outputDir, port, extension) {
-  const extensionConfig = await _devBuild(config, outputDir, extension);
-  _startDevServer(outputDir, port, extensionConfig);
+  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.0.1-prealpha.8",
+  "version": "0.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -22,20 +22,23 @@
     "tests/runTests.js",
     "tests/testBuild.js",
     "tests/testDevServer.js",
-    "plugins/manifestPlugin.js",
-    "index.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",
+    "cors": "^2.8.5",
     "express": "^4.18.2",
     "process": "^0.11.10",
     "prompts": "^2.4.2",
     "vite": "^4.0.4",
-    "ws": "^8.12.1"
+    "ws": "^8.13.0"
   },
   "bin": {
     "hs-ui-extensions-dev-server": "run.js"
@@ -56,5 +59,5 @@
       "optional": true
     }
   },
-  "gitHead": "b5968f431fe29ee9977e6aacdd9b9ab3aa08af0c"
+  "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,15 +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 } = options;
+      const { output, minify = false } = options;
       try {
+        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}`);
@@ -35,7 +37,7 @@ function _generateManifestContents(bundle) {
   };
 
   // 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 {
@@ -81,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

@@ -0,0 +1,89 @@
+const express = require('express');
+const logger = require('./logger');
+const path = require('path');
+const cors = require('cors');
+const fs = require('fs');
+const { EXTENSIONS_MESSAGE_VERSION, MANIFEST_FILE } = require('./constants');
+
+function startDevServer(
+  outputDir,
+  expressPort,
+  webSocketPort,
+  baseMessage,
+  viteDevServer
+) {
+  const app = express();
+
+  // Setup middleware
+  app.use(cors());
+  app.use(express.static(outputDir));
+  _addExtensionsEndpoint(
+    app,
+    expressPort,
+    webSocketPort,
+    outputDir,
+    baseMessage
+  );
+
+  // Vite middlewares needs to go last because it's greedy and will block other middleware
+  app.use(viteDevServer.middlewares);
+
+  const server = app.listen({ port: expressPort }, () => {
+    logger.warn(`Listening at ${baseMessage.callback}`);
+  });
+
+  _configureShutDownHandlers(server, viteDevServer);
+}
+
+function _addExtensionsEndpoint(
+  server,
+  expressPort,
+  webSocketPort,
+  outputDir,
+  baseMessage
+) {
+  const endpoint = '/extensions';
+  server.get(endpoint, (_req, res) => {
+    try {
+      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:${webSocketPort}`,
+        version: EXTENSIONS_MESSAGE_VERSION,
+        extensions: [
+          {
+            ...baseMessage,
+            manifest,
+          },
+        ],
+      };
+      res.status(200).json(response);
+    } catch (e) {
+      res.status(500).json({
+        message: 'Unable to load manifest file',
+      });
+    }
+  });
+  logger.warn(`Listening at http://hslocal.net:${expressPort}${endpoint}`);
+}
+
+function _configureShutDownHandlers(server, viteDevServer) {
+  async function shutdown() {
+    logger.warn('\nCleaning up after ourselves...');
+    await viteDevServer.pluginContainer.close();
+    // Stop new connections to express server
+    server.close(() => {});
+    logger.info('Clean up done, exiting.');
+    process.exit(0);
+  }
+
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+}
+
+module.exports = startDevServer;

package/tests/runTests.js

@@ -3,29 +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', () => {
+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,9 +2,12 @@ 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) {
-  execSync(command);
+  if (command) {
+    execSync(command);
+  }
 
   // Make sure the files are getting generated in the dist dir
   const distDir = path.join(process.cwd(), 'dist');
@@ -14,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) {
-  logger.warn('- Test build with entrypoint as arg 🤞');
-  _testHelper('hs-ui-extensions-remote-build ProgressBarApp.tsx', [
-    'ProgressBarApp.js',
-    'manifest.json',
-  ]);
-  logger.info('- Test build with entrypoint as arg 🚀');
+async function testBuildRemote(logger, entrypoints) {
+  const { remoteBuild } = require('../index');
+  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));
+
+    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,40 +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,
-  expressTestPassed: false,
+  expressStaticTestPassed: false,
+  extensionsEndpointPassed: false,
   webSocketTestPassed: false,
 };
 
-const port = 5172;
+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(`localhost:${port}`)) {
+    if (
+      data.includes('listening') &&
+      data.includes(`${host}:${VITE_DEFAULT_PORT}/extensions`)
+    ) {
       setTimeout(() => {
-        testExpressServer(testResults, logger);
-        testWebSocketServer(testResults, logger);
+        testExpressServer(logger, localExpectations, filename);
+        testWebSocketServer(logger, localExpectations);
       }, 1000);
     }
   });
@@ -49,99 +101,187 @@ 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,
-    expressTestPassed,
+    expressStaticTestPassed,
+    extensionsEndpointPassed,
     webSocketTestPassed,
-  } = testResults;
-  return buildTestPassed && expressTestPassed && webSocketTestPassed;
+  } = preShutdownResults;
+  return (
+    buildTestPassed &&
+    expressStaticTestPassed &&
+    extensionsEndpointPassed &&
+    webSocketTestPassed
+  );
+}
+
+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']);
+  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: 'localhost',
-      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.expressTestPassed = 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 fileContents = fs
-    .readFileSync(path.join('dist', 'PhoneLines.js'))
-    .toString('base64');
-
-  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' || message.event === 'update');
-    assert(message.appName === 'example-app');
-    assert.strictEqual(message.extension, 'Phone Lines');
-    assert(message.callback, `data:text/javascript;base64,${fileContents}`);
-    logger.info('- WebSocket server connected and sending messages 🚀');
-    results.webSocketTestPassed = true;
+    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 '${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,
+};