@hubspot/ui-extensions-dev-server 0.3.0 → 0.4.0

package/cli/config.js

@@ -0,0 +1,119 @@
+const fs = require('fs');
+const path = require('path');
+const { getUrlSafeFileName } = require('../lib/utils');
+const { MAIN_APP_CONFIG } = require('../lib/constants');
+
+function getAppConfigPath(projectFiles) {
+  return projectFiles.find(filePath => filePath.endsWith(MAIN_APP_CONFIG));
+}
+
+function loadConfigByPath(configPath) {
+  if (configPath) {
+    try {
+      const source = fs.readFileSync(configPath);
+      const parsedConfig = JSON.parse(source);
+      return parsedConfig;
+    } catch (e) {
+      console.log(e);
+    }
+  }
+  return null;
+}
+
+function loadExtensionConfig(appConfig, appPath) {
+  const crmCardsSubConfigFiles = appConfig?.extensions?.crm?.cards;
+
+  const outputConfig = {};
+
+  crmCardsSubConfigFiles.forEach(card => {
+    const cardConfigPath = path.join(appPath, card.file);
+
+    try {
+      const cardConfig = loadConfigByPath(cardConfigPath);
+
+      if (cardConfig && cardConfig.data) {
+        const extensionsDir = path.join(appPath, 'extensions');
+
+        const entryPointPath = path.join(
+          extensionsDir,
+          cardConfig.data?.module?.file
+        );
+
+        cardConfig.data.module.file = entryPointPath;
+
+        outputConfig[entryPointPath] = cardConfig;
+        outputConfig[entryPointPath].output = getUrlSafeFileName(
+          entryPointPath
+        );
+        outputConfig[entryPointPath].data.appName = appConfig.name;
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  });
+
+  return outputConfig;
+}
+
+/**
+ * @deprecated Will be removed after integration with hubspot-cli is complete
+ * This version of load config makes assumptions about the location it is being ran from where the others do not
+ */
+function loadConfig() {
+  // app.json is one level up from the extensions directory, which is where these commands
+  // will need to be ran from, the extensions directory
+  const configPath = path.join(process.cwd(), '..', MAIN_APP_CONFIG);
+
+  const mainAppConfig = loadConfigByPath(configPath);
+
+  const crmCardsSubConfigFiles = mainAppConfig?.extensions?.crm?.cards;
+  if (!crmCardsSubConfigFiles || crmCardsSubConfigFiles.length === 0) {
+    throw new Error(
+      `The "extensions.crm.cards" array in ${configPath} is missing or empty, it is a required configuration property`
+    );
+  }
+
+  const outputConfig = {};
+
+  crmCardsSubConfigFiles.forEach(card => {
+    const cardConfigPath = path.join(process.cwd(), '..', card.file);
+    try {
+      const cardConfig = require(cardConfigPath);
+      if (!cardConfig.data) {
+        throw new Error(
+          `Invalid config file at path ${cardConfigPath}, data is a required config property`
+        );
+      }
+
+      if (!cardConfig.data.module) {
+        throw new Error(
+          `Invalid config file at path ${cardConfigPath}, data.module is a require property`
+        );
+      }
+
+      // Path.join with a single argument will strip off any relative prefixing such as './'
+      const entryPointPath = path.join(cardConfig.data.module.file);
+
+      cardConfig.data.module.file = entryPointPath;
+
+      outputConfig[entryPointPath] = cardConfig;
+      outputConfig[entryPointPath].data.appName = mainAppConfig.name;
+    } catch (e) {
+      if (e?.code === 'MODULE_NOT_FOUND') {
+        throw new Error(
+          `Unable to load "${cardConfigPath}" file. \nPlease make sure you are running the command from the src/app/extensions directory and that your card JSON config exists within it.`
+        );
+      }
+      throw e;
+    }
+  });
+
+  return outputConfig;
+}
+
+module.exports = {
+  getAppConfigPath,
+  loadConfigByPath,
+  loadExtensionConfig,
+  loadConfig,
+};

package/cli/run.js

@@ -4,12 +4,14 @@ const { parseArgs, showHelp } = require('../cli/utils');
 const {
   buildAllExtensions,
   buildSingleExtension,
-  startDevMode,
+  DevModeInterface,
 } = require('../index');
 
 const { promptForExtensionToRun } = require('./userInput');
 const OUTPUT_DIR = 'dist';
 const logger = require('./logger');
+const path = require('path');
+const { MAIN_APP_CONFIG } = require('../lib/constants');
 
 // eslint-disable-next-line no-floating-promise/no-floating-promise
 (async () => {
@@ -18,10 +20,12 @@ const logger = require('./logger');
   if (help || !(DEV_MODE || BUILD_MODE)) {
     showHelp(OUTPUT_DIR);
   } else if (DEV_MODE) {
-    startDevMode({
-      extension: extension || (await promptForExtensionToRun()),
-      outputDir: OUTPUT_DIR,
+    DevModeInterface.start({
+      extension: extension
+        ? path.parse(extension).name
+        : await promptForExtensionToRun(),
       logger,
+      projectFiles: [path.join(process.cwd(), '..', MAIN_APP_CONFIG)],
     });
   } else if (BUILD_MODE) {
     if (extension) {
@@ -34,3 +38,11 @@ const logger = require('./logger');
     }
   }
 })();
+
+async function shutdown() {
+  await DevModeInterface.cleanup();
+  process.exit(0);
+}
+
+process.on('SIGINT', shutdown);
+process.on('SIGTERM', shutdown);

package/cli/userInput.js

@@ -1,6 +1,7 @@
 const prompts = require('prompts');
+const path = require('path');
 
-const { getExtensionsList } = require('../lib/extensions');
+const { getExtensionsList } = require('./extensions');
 
 async function promptForExtensionToRun() {
   const extensionOptions = getExtensionsList();
@@ -24,7 +25,7 @@ async function promptForExtensionToRun() {
       },
     }
   );
-  return response.extension;
+  return path.parse(response.extension).name;
 }
 
 module.exports = {

package/index.js

@@ -4,11 +4,11 @@ const {
   buildSingleExtension,
 } = require('./lib/build');
 
-const { startDevMode } = require('./lib/dev');
+const DevModeInterface = require('./lib/DevModeInterface');
 
 module.exports = {
   remoteBuild,
   buildAllExtensions,
   buildSingleExtension,
-  startDevMode,
+  DevModeInterface,
 };

package/lib/DevModeInterface.js

@@ -0,0 +1,73 @@
+const { startDevMode } = require('./dev');
+const path = require('path');
+const { OUTPUT_DIR } = require('./constants');
+const {
+  getAppConfigPath,
+  loadConfigByPath,
+  loadExtensionConfig,
+} = require('../cli/config');
+
+class DevModeInterface {
+  constructor() {
+    this.shutdown = null;
+  }
+
+  async start({ extension, logger = console, projectFiles }) {
+    this.logger = logger;
+    this.logger.info('UIE Dev server initializing...');
+
+    const appConfigPath = getAppConfigPath(projectFiles);
+    if (!appConfigPath) {
+      const message = 'Unable to determine the location of the app.json file';
+      this.logger.error(message);
+      throw new Error(message);
+    }
+
+    const appPath = path.dirname(appConfigPath);
+    const appConfig = loadConfigByPath(appConfigPath);
+    if (!appConfig) {
+      const message = 'Unable to load app.json';
+      this.logger.error(message);
+      throw new Error(message);
+    }
+
+    const extensionsConfigs = loadExtensionConfig(appConfig, appPath);
+
+    if (!extension || !extensionsConfigs) {
+      const message =
+        'Unable to load the extension config, was an extension specified?';
+      this.logger.error(message);
+      throw new Error(message);
+    }
+
+    const extensionConfigKey = Object.keys(extensionsConfigs).find(
+      extensionPath => {
+        return (
+          extensionPath.endsWith(`${extension}.jsx`) ||
+          extensionPath.endsWith(`${extension}.tsx`)
+        );
+      }
+    );
+
+    if (!extensionConfigKey) {
+      const message = `Unable to find config for extension: ${extension}`;
+      this.logger.error(message);
+      throw new Error(message);
+    }
+
+    this.shutdown = await startDevMode({
+      extensionConfig: extensionsConfigs[extensionConfigKey],
+      outputDir: path.join(appPath, 'extensions', OUTPUT_DIR),
+      logger: this.logger,
+    });
+    this.logger.info('UIE Dev server done initializing...');
+  }
+
+  async cleanup() {
+    if (this.shutdown) {
+      await this.shutdown();
+    }
+  }
+}
+
+module.exports = new DevModeInterface();

package/lib/build.js

@@ -3,14 +3,14 @@ const { ROLLUP_OPTIONS, OUTPUT_DIR } = require('./constants');
 const manifestPlugin = require('./plugins/manifestPlugin');
 const path = require('path');
 const { getUrlSafeFileName } = require('./utils');
-const { loadConfig } = require('./config');
+const { loadConfig } = require('../cli/config');
 
 const allowedExtensions = ['.js', '.ts', '.tsx', '.jsx'];
 const extensionErrorBaseMessage = `Supported file extensions are [${allowedExtensions.join(
   ', '
 )}], received:`;
 
-async function buildAllExtensions({ outputDir }) {
+async function buildAllExtensions({ outputDir, logger = console }) {
   const config = loadConfig();
   const extensionKeys = Object.keys(config);
   for (let i = 0; i < extensionKeys.length; ++i) {
@@ -22,7 +22,10 @@ async function buildAllExtensions({ outputDir }) {
       emptyOutDir: i === 0,
       plugins: {
         rollup: [
-          manifestPlugin({ output: getUrlSafeFileName(data.module.file) }),
+          manifestPlugin({
+            output: getUrlSafeFileName(data.module.file),
+            logger,
+          }),
         ],
       },
     });
@@ -35,6 +38,7 @@ async function buildSingleExtension({
   emptyOutDir = true,
   minify = false,
   root = process.cwd(), // This is the vite default, so using that as our default
+  logger = console,
 }) {
   const output = getUrlSafeFileName(file);
   await build({
@@ -53,7 +57,7 @@ async function buildSingleExtension({
       },
       rollupOptions: {
         ...ROLLUP_OPTIONS,
-        plugins: [manifestPlugin({ output })],
+        plugins: [manifestPlugin({ output, logger })],
       },
       outDir: outputDir,
       emptyOutDir,
@@ -62,7 +66,12 @@ async function buildSingleExtension({
   });
 }
 
-async function remoteBuild(root, entryPoint, outputDir = OUTPUT_DIR) {
+async function remoteBuild(
+  root,
+  entryPoint,
+  outputDir = OUTPUT_DIR,
+  logger = console
+) {
   const fileInfo = path.parse(entryPoint);
 
   if (!allowedExtensions.includes(fileInfo.ext)) {
@@ -75,7 +84,7 @@ async function remoteBuild(root, entryPoint, outputDir = OUTPUT_DIR) {
     outputFileName: output,
     outputDir,
     plugins: {
-      rollup: [manifestPlugin({ minify: true, output })],
+      rollup: [manifestPlugin({ minify: true, output, logger })],
     },
     minify: true,
     root,

package/lib/dev.js

@@ -1,4 +1,5 @@
 const { createServer } = require('vite');
+const path = require('path');
 const startDevServer = require('./server');
 const devBuildPlugin = require('./plugins/devBuildPlugin');
 const { getUrlSafeFileName } = require('./utils');
@@ -7,7 +8,6 @@ const {
   WEBSOCKET_PORT,
   OUTPUT_DIR,
 } = require('./constants');
-const { loadConfig } = require('./config');
 
 async function _createViteDevServer(
   outputDir,
@@ -25,7 +25,7 @@ async function _createViteDevServer(
         port: websocketPort,
       },
       watch: {
-        ignored: [`${process.cwd()}/${outputDir}/**/*`],
+        ignored: [path.join(outputDir, '/**/*')],
       },
     },
     build: {
@@ -35,32 +35,28 @@ async function _createViteDevServer(
       },
     },
     plugins: [
-      devBuildPlugin({ extensionConfig, outputDir, baseMessage, logger }),
+      devBuildPlugin({
+        extensionConfig,
+        outputDir,
+        baseMessage,
+        logger,
+      }),
     ],
+    clearScreen: false,
   });
 }
 
 async function startDevMode({
-  extension,
+  extensionConfig,
   logger,
   outputDir = OUTPUT_DIR,
   expressPort = VITE_DEFAULT_PORT,
   webSocketPort = WEBSOCKET_PORT,
 }) {
-  if (!extension) {
-    throw new Error('Unable to determine which extension to run');
-  }
-
-  const config = loadConfig();
-  const extensionConfig = config[extension];
   if (!extensionConfig) {
-    throw new Error(
-      `Unable to locate a configuration file for the specified extension ${extension}`
-    );
+    throw new Error('Unable to determine which extension to run');
   }
 
-  extensionConfig.output = getUrlSafeFileName(extensionConfig.data.module.file);
-
   const baseMessage = Object.freeze({
     appName: extensionConfig.data.appName,
     title: extensionConfig.data.title,
@@ -74,7 +70,7 @@ async function startDevMode({
     baseMessage,
     logger
   );
-  startDevServer(
+  return startDevServer(
     outputDir,
     expressPort,
     webSocketPort,

package/lib/extensionsService.js

@@ -0,0 +1,43 @@
+const path = require('path');
+const { EXTENSIONS_MESSAGE_VERSION } = require('./constants');
+const { loadManifest } = require('./utils');
+
+class ExtensionsService {
+  constructor() {
+    this.endpoint = '/extensions';
+  }
+
+  add(server, webSocketPort, outputDir, baseMessage) {
+    server.get(
+      this.endpoint,
+      this.generateExtensionsHandler(baseMessage, webSocketPort, outputDir)
+    );
+    return [this.endpoint];
+  }
+
+  generateExtensionsHandler(baseMessage, webSocketPort, outputDir) {
+    return function extensionsHandler(_req, res) {
+      try {
+        const output = path.parse(baseMessage.callback).name;
+
+        const response = {
+          websocket: `ws://localhost:${webSocketPort}`,
+          version: EXTENSIONS_MESSAGE_VERSION,
+          extensions: [
+            {
+              ...baseMessage,
+              manifest: loadManifest(outputDir, output),
+            },
+          ],
+        };
+        res.status(200).json(response);
+      } catch (e) {
+        res.status(500).json({
+          message: 'Unable to determine which extensions are running',
+        });
+      }
+    };
+  }
+}
+
+module.exports = new ExtensionsService();

package/lib/plugins/devBuildPlugin.js

@@ -52,10 +52,10 @@ function devBuildPlugin(options = {}) {
           rollupOptions: {
             ...ROLLUP_OPTIONS,
             plugins: [
-              ...(ROLLUP_OPTIONS.plugins || []),
               manifestPlugin({
                 minify: false,
                 output: extensionConfig.output,
+                logger,
               }),
             ],
             output: {
@@ -67,6 +67,7 @@ function devBuildPlugin(options = {}) {
           emptyOutDir: true,
           minify: false,
         },
+        clearScreen: false,
       });
       return true;
     } catch (error) {
@@ -110,7 +111,7 @@ function devBuildPlugin(options = {}) {
       }
 
       if (server.ws.clients.size === 0) {
-        logger.warn('Bundle updated, no browsers connected to notify');
+        logger.info('Bundle updated, no browsers connected to notify');
         return [];
       }
 
@@ -125,7 +126,7 @@ function devBuildPlugin(options = {}) {
       if (error) {
         logger.error(error);
       }
-      logger.warn('Sending shutdown message to connected browsers');
+      logger.info('Sending shutdown message to connected browsers');
       if (localServer && localServer.ws) {
         localServer.ws.send({
           ...versionedBaseMessage,

package/lib/plugins/manifestPlugin.js

@@ -7,7 +7,7 @@ const PACKAGE_LOCK_FILE = 'package-lock.json';
 const PACKAGE_FILE = 'package.json';
 const EXTENSIONS_PATH = 'src/app/extensions/';
 
-function plugin(options = {}) {
+function manifestPlugin(options = {}) {
   return {
     name: 'ui-extensions-manifest-generation-plugin',
     enforce: 'post', // run after default rollup plugins
@@ -37,7 +37,6 @@ function _generateManifestContents(bundle) {
 
   // The keys to bundle are the filename without any path information
   const bundles = Object.keys(bundle).filter(cur => cur.endsWith('.js'));
-
   if (bundles.length === 1) {
     return {
       ..._generateManifestEntry(bundle[bundles[0]]),
@@ -106,4 +105,4 @@ function _buildModulesInfo(moduleIds, modules) {
   );
 }
 
-module.exports = plugin;
+module.exports = manifestPlugin;

package/lib/server.js

@@ -1,8 +1,6 @@
 const express = require('express');
-const path = require('path');
 const cors = require('cors');
-const fs = require('fs');
-const { EXTENSIONS_MESSAGE_VERSION, MANIFEST_FILE } = require('./constants');
+const extensionsService = require('./extensionsService');
 
 function startDevServer(
   outputDir,
@@ -17,75 +15,31 @@ function startDevServer(
   // Setup middleware
   app.use(cors());
   app.use(express.static(outputDir));
-  _addExtensionsEndpoint(
+  const endpointsAdded = extensionsService.add(
     app,
-    expressPort,
     webSocketPort,
     outputDir,
-    baseMessage,
-    logger
+    baseMessage
   );
 
+  endpointsAdded.forEach(endpoint => {
+    logger.info(`Listening at http://hslocal.net:${expressPort}${endpoint}`);
+  });
+
   // 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}`);
+    logger.info(`Listening at ${baseMessage.callback}`);
   });
 
-  _configureShutDownHandlers(server, viteDevServer, logger);
-}
-
-function _addExtensionsEndpoint(
-  server,
-  expressPort,
-  webSocketPort,
-  outputDir,
-  baseMessage,
-  logger
-) {
-  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, logger) {
-  async function shutdown() {
-    logger.warn('\nCleaning up after ourselves...');
+  return async function shutdown() {
     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/lib/utils.js

@@ -1,4 +1,6 @@
 const path = require('path');
+const fs = require('fs');
+const { MANIFEST_FILE } = require('./constants');
 
 function getUrlSafeFileName(filePath) {
   const { name } = path.parse(filePath);
@@ -14,7 +16,18 @@ function stripAnsiColorCodes(string) {
   );
 }
 
+function loadManifest(outputDir, output) {
+  try {
+    return JSON.parse(
+      fs.readFileSync(path.join(outputDir, `${output}-${MANIFEST_FILE}`))
+    );
+  } catch (e) {
+    return {};
+  }
+}
+
 module.exports = {
   getUrlSafeFileName,
   stripAnsiColorCodes,
+  loadManifest,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,16 +11,18 @@
     "access": "public"
   },
   "files": [
+    "cli/config.js",
+    "cli/extensions.js",
     "cli/logger.js",
     "cli/run.js",
     "cli/userInput.js",
     "cli/utils.js",
     "lib/plugins/*",
     "lib/build.js",
-    "lib/config.js",
     "lib/constants.js",
     "lib/dev.js",
-    "lib/extensions.js",
+    "lib/extensionsService.js",
+    "lib/DevModeInterface.js",
     "lib/server.js",
     "lib/utils.js",
     "index.js",
@@ -61,5 +63,5 @@
       "optional": true
     }
   },
-  "gitHead": "0b20c005a9564bbde58c22ce21959c713f354607"
+  "gitHead": "1269fb86282dd5f6b9686d064b6c652f00cb863f"
 }

package/lib/config.js

@@ -1,81 +0,0 @@
-const path = require('path');
-const { MAIN_APP_CONFIG } = require('./constants');
-
-function _loadRequiredConfigFile(filePath) {
-  let config;
-  try {
-    config = require(filePath);
-  } catch (e) {
-    throw new Error(
-      `Unable to load ${filePath} file.  Please make sure you are running the command from the src/app/extensions directory and that ${filePath} exists`
-    );
-  }
-  return config;
-}
-
-function loadConfig() {
-  // app.json is one level up from the extensions directory, which is where these commands
-  // will need to be ran from, the extensions directory
-  const configPath = path.join(process.cwd(), '..', MAIN_APP_CONFIG);
-
-  const mainAppConfig = _loadRequiredConfigFile(configPath);
-
-  const crmCardsSubConfigFiles = mainAppConfig?.extensions?.crm?.cards;
-  if (!crmCardsSubConfigFiles || crmCardsSubConfigFiles.length === 0) {
-    throw new Error(
-      `The "extensions.crm.cards" array in ${configPath} is missing or empty, it is a required configuration property`
-    );
-  }
-
-  const outputConfig = {};
-
-  crmCardsSubConfigFiles.forEach(card => {
-    const parsedFile = path.parse(card.file);
-    if (parsedFile.dir.startsWith('./extensions')) {
-      parsedFile.dir = parsedFile.dir.replace('./extensions', './'); // go up one level
-    }
-    // Get the path to the config file relative to the extensions directory
-    const configPathRelativeToExtensions = parsedFile.dir;
-    const extensionsPrefixRemoved = path.format(parsedFile);
-    const cardConfigPath = path.join(process.cwd(), extensionsPrefixRemoved);
-
-    try {
-      const cardConfig = require(cardConfigPath);
-      if (!cardConfig.data) {
-        throw new Error(
-          `Invalid config file at path ${cardConfigPath}, data is a required config property`
-        );
-      }
-
-      if (!cardConfig.data.module) {
-        throw new Error(
-          `Invalid config file at path ${cardConfigPath}, data.module is a require property`
-        );
-      }
-
-      // Join the two relative paths
-      const entryPointPath = path.join(
-        configPathRelativeToExtensions,
-        cardConfig.data.module.file
-      );
-
-      cardConfig.data.module.file = entryPointPath;
-
-      outputConfig[entryPointPath] = cardConfig;
-      outputConfig[entryPointPath].data.appName = mainAppConfig.name;
-    } catch (e) {
-      if (e?.code === 'MODULE_NOT_FOUND') {
-        throw new Error(
-          `Unable to load "${cardConfigPath}" file. \nPlease make sure you are running the command from the src/app/extensions directory and that your card JSON config exists within it.`
-        );
-      }
-      throw e;
-    }
-  });
-
-  return outputConfig;
-}
-
-module.exports = {
-  loadConfig,
-};