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

package/cli/config.js

@@ -3,21 +3,9 @@ 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;
+  const source = fs.readFileSync(configPath);
+  return JSON.parse(source);
 }
 
 function loadExtensionConfig(appConfig, appPath) {
@@ -32,23 +20,28 @@ function loadExtensionConfig(appConfig, appPath) {
       const cardConfig = loadConfigByPath(cardConfigPath);
 
       if (cardConfig && cardConfig.data) {
-        const extensionsDir = path.join(appPath, 'extensions');
+        const cardConfigDir = path.parse(cardConfigPath).dir;
 
         const entryPointPath = path.join(
-          extensionsDir,
+          cardConfigDir,
           cardConfig.data?.module?.file
         );
 
         cardConfig.data.module.file = entryPointPath;
 
-        outputConfig[entryPointPath] = cardConfig;
-        outputConfig[entryPointPath].output = getUrlSafeFileName(
-          entryPointPath
-        );
-        outputConfig[entryPointPath].data.appName = appConfig.name;
+        outputConfig[entryPointPath] = {
+          ...cardConfig,
+          output: getUrlSafeFileName(entryPointPath),
+          path: appPath,
+          extensionPath: path.parse(entryPointPath).dir,
+          data: {
+            ...cardConfig.data,
+            appName: appConfig.name,
+          },
+        };
       }
     } catch (e) {
-      console.log(e);
+      throw new Error(`Unable to load ${cardConfigPath}`);
     }
   });
 
@@ -78,7 +71,7 @@ function loadConfig() {
   crmCardsSubConfigFiles.forEach(card => {
     const cardConfigPath = path.join(process.cwd(), '..', card.file);
     try {
-      const cardConfig = require(cardConfigPath);
+      const cardConfig = loadConfigByPath(cardConfigPath);
       if (!cardConfig.data) {
         throw new Error(
           `Invalid config file at path ${cardConfigPath}, data is a required config property`
@@ -112,7 +105,6 @@ function loadConfig() {
 }
 
 module.exports = {
-  getAppConfigPath,
   loadConfigByPath,
   loadExtensionConfig,
   loadConfig,

package/cli/run.js

@@ -7,11 +7,11 @@ const {
   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');
+const { MAIN_APP_CONFIG, OUTPUT_DIR } = require('../lib/constants');
+const inquirer = require('inquirer');
+const { loadConfigByPath, loadExtensionConfig } = require('./config');
 
 // eslint-disable-next-line no-floating-promise/no-floating-promise
 (async () => {
@@ -20,13 +20,29 @@ const { MAIN_APP_CONFIG } = require('../lib/constants');
   if (help || !(DEV_MODE || BUILD_MODE)) {
     showHelp(OUTPUT_DIR);
   } else if (DEV_MODE) {
-    DevModeInterface.start({
-      extension: extension
-        ? path.parse(extension).name
-        : await promptForExtensionToRun(),
+    const extensionPath = process.cwd(); // Assumed to be /path/to/src/app/extensions
+    const appPath = path.join(extensionPath, '..');
+    const appConfig = loadConfigByPath(path.join(appPath, MAIN_APP_CONFIG));
+
+    let extensionConfig;
+    if (extension) {
+      const allExtensionsConfig = loadExtensionConfig(appConfig, appPath);
+      extensionConfig =
+        allExtensionsConfig[path.join(extensionPath, extension)];
+    }
+    await DevModeInterface.setup({
+      promptUser: inquirer.createPromptModule(),
+      components: {
+        [appConfig.name]: {
+          config: appConfig,
+          path: path.join(extensionPath, '..'),
+        },
+      },
+      extensionConfig,
       logger,
-      projectFiles: [path.join(process.cwd(), '..', MAIN_APP_CONFIG)],
     });
+
+    await DevModeInterface.start({});
   } else if (BUILD_MODE) {
     if (extension) {
       buildSingleExtension({

package/lib/DevModeInterface.js

@@ -1,66 +1,123 @@
 const { startDevMode } = require('./dev');
 const path = require('path');
 const { OUTPUT_DIR } = require('./constants');
-const {
-  getAppConfigPath,
-  loadConfigByPath,
-  loadExtensionConfig,
-} = require('../cli/config');
+const { loadExtensionConfig } = require('../cli/config');
 
 class DevModeInterface {
   constructor() {
-    this.shutdown = null;
+    this._setupLogger(console);
   }
 
-  async start({ extension, logger = console, projectFiles }) {
-    this.logger = logger;
-    this.logger.info('UIE Dev server initializing...');
+  _setupLogger(_logger) {
+    this.logger = {
+      ..._logger,
+      debug: (...args) => {
+        if (this.debug) {
+          _logger.debug(...args);
+        }
+      },
+    };
+  }
 
-    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);
-    }
+  _setDataFromExtensionConfig(extensionConfig) {
+    this.config = extensionConfig;
+    this.appName = extensionConfig.data.appName;
+    this.title = extensionConfig.data.title;
+  }
 
-    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);
-    }
+  _generateAppExtensionMappings(components) {
+    // Loop over all of the app configs that are passed in
+    const allComponentNames = Object.keys(components);
 
-    const extensionsConfigs = loadExtensionConfig(appConfig, appPath);
+    return allComponentNames.reduce((appExtensionMappings, componentName) => {
+      const component = components[componentName];
+      if (!component.config.extensions?.crm?.cards) {
+        return appExtensionMappings; // It's not an app
+      }
+      // Load all of the extension configs for a particular app.json file
+      const extensionsConfigForApp = loadExtensionConfig(
+        component.config,
+        component.path
+      );
 
-    if (!extension || !extensionsConfigs) {
-      const message =
-        'Unable to load the extension config, was an extension specified?';
-      this.logger.error(message);
-      throw new Error(message);
+      const extensionFilePaths = Object.keys(extensionsConfigForApp);
+      // Loop over the loaded extension configs and generate the list of choices to use to prompt the user for input
+      extensionFilePaths.forEach(extensionPath => {
+        const extensionConfig = extensionsConfigForApp[extensionPath];
+        appExtensionMappings.push({
+          name: `${componentName}/${extensionConfig.data.title}`,
+          value: extensionConfig,
+        });
+      });
+
+      return appExtensionMappings;
+    }, []);
+  }
+
+  async setup({
+    debug = false,
+    accountId,
+    httpClient,
+    promptUser,
+    components,
+    extensionConfig,
+    logger,
+  }) {
+    this.debug = debug;
+    this.accountId = accountId;
+    this.httpClient = httpClient;
+    if (logger) {
+      this._setupLogger(logger);
+    }
+    if (extensionConfig) {
+      this._setDataFromExtensionConfig(extensionConfig);
+      return;
     }
 
-    const extensionConfigKey = Object.keys(extensionsConfigs).find(
-      extensionPath => {
-        return (
-          extensionPath.endsWith(`${extension}.jsx`) ||
-          extensionPath.endsWith(`${extension}.tsx`)
-        );
-      }
-    );
+    const choices = this._generateAppExtensionMappings(components);
+
+    if (choices.length === 0) {
+      throw new Error('No extensions to run');
+    } else if (choices.length === 1) {
+      this._setDataFromExtensionConfig(choices[0].value);
+    } else {
+      const answers = await promptUser({
+        type: 'list',
+        name: 'extension',
+        message: 'Which extension would you like to run?',
+        choices,
+      });
+      this._setDataFromExtensionConfig(answers.extension);
+    }
+  }
 
-    if (!extensionConfigKey) {
-      const message = `Unable to find config for extension: ${extension}`;
-      this.logger.error(message);
-      throw new Error(message);
+  async start({ debug }) {
+    this.debug = debug;
+    if (!this.config || !this.config.path) {
+      throw new Error(
+        'Unable to load the required extension configuration files'
+      );
     }
+    const appPath = this.config.path;
+
+    // Pass options from the CLI for running app functions locally
+    const functionsConfig = {
+      app: { path: appPath },
+      accountId: this.accountId,
+      httpClient: this.httpClient,
+    };
 
     this.shutdown = await startDevMode({
-      extensionConfig: extensionsConfigs[extensionConfigKey],
-      outputDir: path.join(appPath, 'extensions', OUTPUT_DIR),
+      extensionConfig: this.config,
+      outputDir: path.join(this.config.extensionPath, OUTPUT_DIR),
+      functionsConfig,
       logger: this.logger,
+      root: appPath,
     });
-    this.logger.info('UIE Dev server done initializing...');
+
+    this.logger.info(
+      `Running extension '${this.title}' from app '${this.appName}'`
+    );
   }
 
   async cleanup() {

package/lib/constants.js

@@ -18,9 +18,14 @@ const ROLLUP_OPTIONS = {
   },
 };
 
-const EXTENSIONS_MESSAGE_VERSION = 0;
+const EXTENSIONS_MESSAGE_VERSION = 1;
 const WEBSOCKET_MESSAGE_VERSION = 0;
 
+const SERVER_CAPABILITIES = [
+  // Supports running app functions locally
+  'app-functions-local-dev',
+];
+
 module.exports = {
   ROLLUP_OPTIONS,
   OUTPUT_DIR,
@@ -30,4 +35,5 @@ module.exports = {
   VITE_DEFAULT_PORT,
   WEBSOCKET_MESSAGE_VERSION,
   WEBSOCKET_PORT,
+  SERVER_CAPABILITIES,
 };

package/lib/dev.js

@@ -14,9 +14,11 @@ async function _createViteDevServer(
   extensionConfig,
   websocketPort,
   baseMessage,
-  logger
+  logger,
+  root
 ) {
   return await createServer({
+    root,
     appType: 'custom',
     mode: 'development',
     server: {
@@ -48,10 +50,12 @@ async function _createViteDevServer(
 
 async function startDevMode({
   extensionConfig,
+  functionsConfig,
   logger,
   outputDir = OUTPUT_DIR,
   expressPort = VITE_DEFAULT_PORT,
   webSocketPort = WEBSOCKET_PORT,
+  root = process.cwd(),
 }) {
   if (!extensionConfig) {
     throw new Error('Unable to determine which extension to run');
@@ -68,7 +72,8 @@ async function startDevMode({
     extensionConfig,
     webSocketPort,
     baseMessage,
-    logger
+    logger,
+    root
   );
   return startDevServer(
     outputDir,
@@ -76,6 +81,7 @@ async function startDevMode({
     webSocketPort,
     baseMessage,
     viteDevServer,
+    functionsConfig,
     logger
   );
 }

package/lib/extensionsService.js

@@ -1,5 +1,8 @@
 const path = require('path');
-const { EXTENSIONS_MESSAGE_VERSION } = require('./constants');
+const {
+  EXTENSIONS_MESSAGE_VERSION,
+  SERVER_CAPABILITIES,
+} = require('./constants');
 const { loadManifest } = require('./utils');
 
 class ExtensionsService {
@@ -23,6 +26,7 @@ class ExtensionsService {
         const response = {
           websocket: `ws://localhost:${webSocketPort}`,
           version: EXTENSIONS_MESSAGE_VERSION,
+          capabilities: SERVER_CAPABILITIES,
           extensions: [
             {
               ...baseMessage,

package/lib/plugins/devBuildPlugin.js

@@ -36,6 +36,7 @@ function devBuildPlugin(options = {}) {
   const devBuild = async server => {
     try {
       await build({
+        logLevel: 'warn',
         mode: 'development',
         define: {
           'process.env.NODE_ENV': JSON.stringify(
@@ -111,7 +112,7 @@ function devBuildPlugin(options = {}) {
       }
 
       if (server.ws.clients.size === 0) {
-        logger.info('Bundle updated, no browsers connected to notify');
+        logger.warn('Bundle updated, no browsers connected to notify');
         return [];
       }
 

package/lib/server.js

@@ -1,6 +1,9 @@
 const express = require('express');
 const cors = require('cors');
 const extensionsService = require('./extensionsService');
+const {
+  AppFunctionExecutionService,
+} = require('@hubspot/app-functions-dev-server');
 
 function startDevServer(
   outputDir,
@@ -8,6 +11,7 @@ function startDevServer(
   webSocketPort,
   baseMessage,
   viteDevServer,
+  functionsConfig,
   logger
 ) {
   const app = express();
@@ -15,6 +19,13 @@ function startDevServer(
   // Setup middleware
   app.use(cors());
   app.use(express.static(outputDir));
+
+  app.use(
+    '/api/crm-extensibility/execution/internal/v3',
+    AppFunctionExecutionService(functionsConfig)
+  );
+  logger.info('Serving app functions locally');
+
   const endpointsAdded = extensionsService.add(
     app,
     webSocketPort,
@@ -23,14 +34,14 @@ function startDevServer(
   );
 
   endpointsAdded.forEach(endpoint => {
-    logger.info(`Listening at http://hslocal.net:${expressPort}${endpoint}`);
+    logger.debug(`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.info(`Listening at ${baseMessage.callback}`);
+    logger.debug(`Listening at ${baseMessage.callback}`);
   });
 
   return async function shutdown() {
@@ -38,7 +49,6 @@ function startDevServer(
     // Stop new connections to express server
     server.close(() => {});
     logger.info('Clean up done, exiting.');
-    process.exit(0);
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -12,10 +12,8 @@
   },
   "files": [
     "cli/config.js",
-    "cli/extensions.js",
     "cli/logger.js",
     "cli/run.js",
-    "cli/userInput.js",
     "cli/utils.js",
     "lib/plugins/*",
     "lib/build.js",
@@ -30,12 +28,13 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@hubspot/app-functions-dev-server": "^0.5.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",
-    "prompts": "^2.4.2",
+    "inquirer": "8.2.0",
     "vite": "^4.0.4"
   },
   "devDependencies": {
@@ -63,5 +62,5 @@
       "optional": true
     }
   },
-  "gitHead": "1269fb86282dd5f6b9686d064b6c652f00cb863f"
+  "gitHead": "d11a7bb73cf91ed44279b041f17778833948839f"
 }

package/cli/extensions.js

@@ -1,9 +0,0 @@
-const { loadConfig } = require('./config');
-
-function getExtensionsList() {
-  return Object.keys(loadConfig());
-}
-
-module.exports = {
-  getExtensionsList,
-};

package/cli/userInput.js

@@ -1,33 +0,0 @@
-const prompts = require('prompts');
-const path = require('path');
-
-const { getExtensionsList } = require('./extensions');
-
-async function promptForExtensionToRun() {
-  const extensionOptions = getExtensionsList();
-  const response = await prompts(
-    [
-      {
-        type: 'select',
-        name: 'extension',
-        message: 'Which extension would you like to run?',
-        choices: extensionOptions.map(option => {
-          return {
-            title: option,
-            value: option,
-          };
-        }),
-      },
-    ],
-    {
-      onCancel: () => {
-        process.exit(0); // When the user cancels interaction, exit the script
-      },
-    }
-  );
-  return path.parse(response.extension).name;
-}
-
-module.exports = {
-  promptForExtensionToRun,
-};