@hubspot/ui-extensions-dev-server 0.0.1-beta.0 → 0.0.1-beta.1

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

@@ -1,17 +1,11 @@
-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 { getExtensionConfig } = require('./config');
-const fs = require('fs');
-const path = require('path');
 const { ROLLUP_OPTIONS } = require('./constants');
+const startDevServer = require('./server');
+const manifestPlugin = require('./plugins/manifestPlugin');
 
-async function _devBuild(config, outputDir, extension) {
-  const extensionConfig = await getExtensionConfig(config, extension);
-  build({
+async function _buildDevBundle(outputDir, extensionConfig) {
+  await build({
     define: {
       'process.env.NODE_ENV': JSON.stringify(
         process.env.NODE_ENV || 'development'
@@ -33,131 +27,24 @@ async function _devBuild(config, outputDir, extension) {
         formats: ['iife'],
         fileName: () => extensionConfig?.output,
       },
-      rollupOptions: ROLLUP_OPTIONS,
+      rollupOptions: {
+        ...ROLLUP_OPTIONS,
+        plugins: [
+          ...(ROLLUP_OPTIONS.plugins || []),
+          manifestPlugin({ minify: false, extensionConfig }),
+        ],
+      },
       outDir: outputDir,
       emptyOutDir: true,
       minify: false,
     },
   });
-  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}`,
-    });
-  });
-
-  _configureShutDownHandlers(wss, broadcast, extensionConfig, server);
-}
-
-function _configureShutDownHandlers(wss, broadcast, extensionConfig, server) {
-  function shutdown() {
-    logger.warn('\nSending shutdown signal to connected browser');
-    broadcast({
-      event: 'shutdown',
-      appName: extensionConfig?.appName,
-      extension: extensionConfig?.name,
-    });
-    logger.warn('\nCleaning up after ourselves...\n');
-
-    // Terminate all active connections, close seems to hang otherwise
-    wss.clients.forEach(client => {
-      client.terminate();
-    });
-
-    // Shut down the WebSocket server first since it is connected to the express server
-    wss.close(webSocketError => {
-      if (webSocketError) {
-        logger.error(
-          `WebSocket Server unable to shutdown correctly, ${webSocketError}`
-        );
-      } else {
-        logger.warn('WebSocket Server stopped');
-      }
-      // Shutdown the express server
-      server.close(error => {
-        if (error) {
-          logger.error(`Express server unable to shutdown correctly, ${error}`);
-        } else {
-          logger.warn('Express server stopped');
-        }
-        process.exit(webSocketError || error ? 1 : 0);
-      });
-    });
-  }
-
-  process.on('SIGINT', shutdown);
-  process.on('SIGTERM', shutdown);
 }
 
 async function startDevMode(config, outputDir, port, extension) {
-  const extensionConfig = await _devBuild(config, outputDir, extension);
-  _startDevServer(outputDir, port, extensionConfig);
+  const extensionConfig = await getExtensionConfig(config, extension);
+  await _buildDevBundle(outputDir, extensionConfig);
+  startDevServer(outputDir, port, extensionConfig);
 }
 
 module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.0.1-beta.0",
+  "version": "0.0.1-beta.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -23,7 +23,8 @@
     "tests/testBuild.js",
     "tests/testDevServer.js",
     "plugins/manifestPlugin.js",
-    "index.js"
+    "index.js",
+    "server.js"
   ],
   "license": "MIT",
   "dependencies": {
@@ -31,11 +32,12 @@
     "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 +58,5 @@
       "optional": true
     }
   },
-  "gitHead": "0bfb66cacc456a73f05a40841938e6b42f87aaba"
+  "gitHead": "3b1fd0b35b8aa6c88847d27cc3c6b94e635f0452"
 }

package/plugins/manifestPlugin.js

@@ -12,9 +12,13 @@ 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 = DEFAULT_MANIFEST_NAME,
+        minify = false,
+        extensionConfig,
+      } = options;
       try {
-        const manifest = _generateManifestContents(bundle);
+        const manifest = _generateManifestContents(bundle, extensionConfig);
         this.emitFile({
           type: 'asset',
           source: minify
@@ -29,9 +33,10 @@ function plugin(options = {}) {
   };
 }
 
-function _generateManifestContents(bundle) {
+function _generateManifestContents(bundle, extension) {
   const baseManifest = {
     package: _loadPackageFile(),
+    extension,
   };
 
   // The keys to bundle are the filename without any path information

package/server.js

@@ -0,0 +1,142 @@
+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');
+
+function startDevServer(outputDir, port, extensionConfig) {
+  const callback = `http://hslocal.net:${port}/${extensionConfig?.output}`;
+
+  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
+  );
+  _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 });
+
+  const baseMessage = {
+    appName: extensionConfig?.appName,
+    title: extensionConfig?.name,
+    callback,
+  };
+
+  wss.on('connection', client => {
+    logger.info('Browser connected and listening for bundle updates');
+    client.send(
+      JSON.stringify({
+        event: 'start',
+        ...baseMessage,
+      })
+    );
+  });
+
+  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',
+    });
+  });
+}
+
+function _addExtensionsEndpoint(server, port) {
+  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 response = {
+        extensions: [
+          {
+            appName,
+            title: name,
+            callback: `http://hslocal.net:${port}/${output}`,
+            websocket: `ws://localhost:${port}`,
+            manifest: {
+              ...manifest,
+              extension: undefined,
+            },
+          },
+        ],
+      };
+      res.status(200).json(response);
+    } catch (e) {
+      res.status(500).json({
+        message: 'Unable to load manifest file',
+      });
+    }
+  });
+  logger.warn(`Listening at http://hslocal.net:${port}${endpoint}`);
+}
+
+function _configureShutDownHandlers(server, wss, broadcast) {
+  function shutdown() {
+    logger.warn('\nCleaning up after ourselves...');
+    // Stop new connections to express server
+    broadcast({
+      event: 'shutdown',
+    });
+    wss.close(() => {});
+    server.close(() => {});
+    logger.warn('Clean up done');
+    process.exit(0);
+  }
+
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+}
+
+module.exports = startDevServer;

package/tests/runTests.js

@@ -16,7 +16,8 @@ process.on('SIGINT', () => {
   handleFailure();
 });
 
-process.on('uncaughtException', () => {
+process.on('uncaughtException', e => {
+  console.error(e);
   handleFailure();
 });
 

package/tests/testDevServer.js

@@ -7,11 +7,13 @@ const WebSocket = require('ws');
 
 const testResults = {
   buildTestPassed: false,
-  expressTestPassed: false,
+  expressStaticTestPassed: false,
+  extensionsEndpointPassed: false,
   webSocketTestPassed: false,
 };
 
 const port = 5172;
+const host = 'hslocal.net';
 
 function testDevServer(logger, devServerProcess) {
   logger.warn('\nDev Server Tests started 🤞');
@@ -29,11 +31,13 @@ function testDevServer(logger, devServerProcess) {
 
   devServerProcess.stdout.on('data', buffer => {
     const data = buffer.toString().toLowerCase();
-    console.log('[Dev Server Log]:', data);
     if (data.includes('built in')) {
       testBuild(testResults, logger);
     }
-    if (data.includes('listening') && data.includes(`localhost:${port}`)) {
+    if (
+      data.includes('listening') &&
+      data.includes(`${host}:${port}/extensions`)
+    ) {
       setTimeout(() => {
         testExpressServer(testResults, logger);
         testWebSocketServer(testResults, logger);
@@ -72,10 +76,16 @@ function testDevServer(logger, devServerProcess) {
 function metConditions() {
   const {
     buildTestPassed,
-    expressTestPassed,
+    expressStaticTestPassed,
+    extensionsEndpointPassed,
     webSocketTestPassed,
   } = testResults;
-  return buildTestPassed && expressTestPassed && webSocketTestPassed;
+  return (
+    buildTestPassed &&
+    expressStaticTestPassed &&
+    extensionsEndpointPassed &&
+    webSocketTestPassed
+  );
 }
 
 // Test that the files were built in the proper location and spot
@@ -84,7 +94,7 @@ function testBuild(results, logger) {
   // // 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']);
+  assert.deepStrictEqual(filesInOutputDir, ['PhoneLines.js', 'manifest.json']);
   const fileContents = fs
     .readFileSync(path.join(distDir, filesInOutputDir[0]))
     .toString();
@@ -110,7 +120,7 @@ function testBuild(results, logger) {
 function testExpressServer(results, logger) {
   http.get(
     {
-      host: 'localhost',
+      host,
       port,
       path: '/PhoneLines.js',
     },
@@ -119,7 +129,36 @@ function testExpressServer(results, logger) {
         throw Error('Error with express server');
       }
       logger.info('- Express server connected and serving files 🚀');
-      results.expressTestPassed = true;
+      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`
+        );
+        logger.info('- Express serving extension data 🚀');
+        results.extensionsEndpointPassed = true;
+      });
     }
   );
 }
@@ -127,20 +166,15 @@ function testExpressServer(results, logger) {
 // 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}`);
   ws.on('message', messageBuffer => {
     const message = JSON.parse(messageBuffer.toString());
-    console.log('[WebSocket Message]:', message);
-    assert(message.event === 'start' || message.event === 'update');
-    assert(message.appName === 'example-app-remote-ui');
-    assert.strictEqual(message.extension, 'Phone Lines');
-    assert(message.callback, `data:text/javascript;base64,${fileContents}`);
+    assert(message.event === 'start');
+    assert.strictEqual(message.appName, 'Example App React UI');
+    assert.strictEqual(message.title, 'Phone Lines');
     logger.info('- WebSocket server connected and sending messages 🚀');
     results.webSocketTestPassed = true;
+    ws.close(); // The test passed, close the connection
   });
 }