@hubspot/ui-extensions-dev-server 0.4.0 → 0.6.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/logger.js

@@ -1,19 +1,19 @@
 const { cyan, red, yellow, magenta } = require('console-log-colors');
 
-function info(message) {
-  console.log(cyan(message));
+function info(message, ...data) {
+  console.log(cyan(message), ...data);
 }
 
-function error(message) {
-  console.error(red(message));
+function error(message, ...data) {
+  console.error(red(message), ...data);
 }
 
-function warn(message) {
-  console.info(yellow(message));
+function warn(message, ...data) {
+  console.info(yellow(message), ...data);
 }
 
-function debug(message) {
-  console.debug(magenta(message));
+function debug(message, ...data) {
+  console.debug(magenta(message), ...data);
 }
 
 module.exports = { info, error, warn, debug };

package/cli/run.js

@@ -7,26 +7,43 @@ 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 () => {
-  const { DEV_MODE, BUILD_MODE, extension, help } = parseArgs();
+  const { DEV_MODE, BUILD_MODE, extension, help, alpha } = parseArgs();
 
   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({
+      alpha,
+      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/cli/utils.js

@@ -14,6 +14,7 @@ function parseArgs() {
   const optionDefinitions = [
     { name: 'port', alias: 'p', type: Number },
     { name: 'extension', alias: 'e', type: String },
+    { name: 'alpha', type: Boolean },
     { name: 'help', alias: 'h', type: Boolean },
   ];
 
@@ -48,6 +49,10 @@ function showHelp(OUTPUT_DIR) {
           description:
             'The extension entrypoint file to build or start local development for',
         },
+        {
+          name: 'alpha',
+          description: 'Run app functions locally.',
+        },
         {
           name: 'help',
           alias: 'h',

package/lib/DevModeInterface.js

@@ -1,66 +1,130 @@
 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({
+    // This flag is used for whether to enable local serverless on the dev server pre-INBOUND.
+    // If the user runs `hs project dev --local-all`, the flag is set to true.
+    // By INBOUND, we will remove the flag and make the dev server handle both extensions
+    // and app functions locally.
+    alpha = false,
+    debug = false,
+    accountId,
+    httpClient,
+    promptUser,
+    components,
+    extensionConfig,
+    logger,
+  }) {
+    this.alpha = alpha;
+    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,
+      enabled: !!this.alpha,
+    };
 
     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/build.js

@@ -4,6 +4,7 @@ const manifestPlugin = require('./plugins/manifestPlugin');
 const path = require('path');
 const { getUrlSafeFileName } = require('./utils');
 const { loadConfig } = require('../cli/config');
+const codeInjectionPlugin = require('./plugins/codeInjectionPlugin');
 
 const allowedExtensions = ['.js', '.ts', '.tsx', '.jsx'];
 const extensionErrorBaseMessage = `Supported file extensions are [${allowedExtensions.join(
@@ -20,14 +21,7 @@ async function buildAllExtensions({ outputDir, logger = console }) {
       file: data.module.file,
       outputDir,
       emptyOutDir: i === 0,
-      plugins: {
-        rollup: [
-          manifestPlugin({
-            output: getUrlSafeFileName(data.module.file),
-            logger,
-          }),
-        ],
-      },
+      logger,
     });
   }
 }
@@ -57,7 +51,10 @@ async function buildSingleExtension({
       },
       rollupOptions: {
         ...ROLLUP_OPTIONS,
-        plugins: [manifestPlugin({ output, logger })],
+        plugins: [
+          manifestPlugin({ output, logger }),
+          codeInjectionPlugin({ file }),
+        ],
       },
       outDir: outputDir,
       emptyOutDir,

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,16 +72,19 @@ async function startDevMode({
     extensionConfig,
     webSocketPort,
     baseMessage,
-    logger
+    logger,
+    root
   );
-  return startDevServer(
+
+  return startDevServer({
     outputDir,
     expressPort,
     webSocketPort,
     baseMessage,
     viteDevServer,
-    logger
-  );
+    functionsConfig,
+    logger,
+  });
 }
 
 module.exports = {

package/lib/extensionsService.js

@@ -7,15 +7,25 @@ class ExtensionsService {
     this.endpoint = '/extensions';
   }
 
-  add(server, webSocketPort, outputDir, baseMessage) {
+  add(server, webSocketPort, outputDir, baseMessage, capabilities) {
     server.get(
       this.endpoint,
-      this.generateExtensionsHandler(baseMessage, webSocketPort, outputDir)
+      this.generateExtensionsHandler(
+        baseMessage,
+        webSocketPort,
+        outputDir,
+        capabilities
+      )
     );
     return [this.endpoint];
   }
 
-  generateExtensionsHandler(baseMessage, webSocketPort, outputDir) {
+  generateExtensionsHandler(
+    baseMessage,
+    webSocketPort,
+    outputDir,
+    capabilities = []
+  ) {
     return function extensionsHandler(_req, res) {
       try {
         const output = path.parse(baseMessage.callback).name;
@@ -23,6 +33,7 @@ class ExtensionsService {
         const response = {
           websocket: `ws://localhost:${webSocketPort}`,
           version: EXTENSIONS_MESSAGE_VERSION,
+          capabilities,
           extensions: [
             {
               ...baseMessage,

package/lib/plugins/codeInjectionPlugin.js

@@ -0,0 +1,30 @@
+const path = require('path');
+
+function codeInjectionPlugin(options = {}) {
+  const { file, root = process.cwd() } = options;
+  return {
+    name: 'ui-extensions-code-injection-plugin',
+    enforce: 'post', // run after default rollup plugins
+    transform(code, fileBeingTransformed) {
+      const absoluteFilePath = path.isAbsolute(file)
+        ? file
+        : path.join(root, file);
+
+      if (fileBeingTransformed !== absoluteFilePath) {
+        return { code, map: null }; // Not the file we care about, return the same code
+      }
+
+      // Update the code to import the self script which houses our overrides
+      // This needs to be the first line in the source file so that the overrides get hoisted
+      // to the top of the generated source file
+      const updatedCode = `import "@hubspot/ui-extensions-dev-server/self"; ${code}`;
+
+      // Return the updated source code.  We don't need to include the new code in the
+      // sourcemap because we don't want it to show up in the users code when they
+      // view the source mapped code in the browser
+      return { code: updatedCode, map: null };
+    },
+  };
+}
+
+module.exports = codeInjectionPlugin;

package/lib/plugins/devBuildPlugin.js

@@ -2,6 +2,7 @@ const { ROLLUP_OPTIONS, WEBSOCKET_MESSAGE_VERSION } = require('../constants');
 const { build } = require('vite');
 const manifestPlugin = require('./manifestPlugin');
 const { stripAnsiColorCodes } = require('../utils');
+const codeInjectionPlugin = require('./codeInjectionPlugin');
 
 function devBuildPlugin(options = {}) {
   const { extensionConfig, outputDir, baseMessage, logger } = options;
@@ -36,6 +37,7 @@ function devBuildPlugin(options = {}) {
   const devBuild = async server => {
     try {
       await build({
+        logLevel: 'warn',
         mode: 'development',
         define: {
           'process.env.NODE_ENV': JSON.stringify(
@@ -57,6 +59,7 @@ function devBuildPlugin(options = {}) {
                 output: extensionConfig.output,
                 logger,
               }),
+              codeInjectionPlugin({ file: extensionConfig.data.module.file }),
             ],
             output: {
               ...ROLLUP_OPTIONS.output,
@@ -71,6 +74,7 @@ function devBuildPlugin(options = {}) {
       });
       return true;
     } catch (error) {
+      logger.error(error);
       handleBuildError(error, server);
       return false;
     }
@@ -111,7 +115,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/self.js

@@ -0,0 +1,4 @@
+/* eslint-disable hubspot-dev/no-confusing-browser-globals */
+
+// Set methods on the self object to undefined so they are not available within the worker code
+self.importScripts = undefined;

package/lib/server.js

@@ -1,36 +1,53 @@
 const express = require('express');
 const cors = require('cors');
+const { SERVER_CAPABILITIES } = require('./constants');
 const extensionsService = require('./extensionsService');
+const {
+  AppFunctionExecutionService,
+} = require('@hubspot/app-functions-dev-server');
 
-function startDevServer(
+function startDevServer({
   outputDir,
   expressPort,
   webSocketPort,
   baseMessage,
   viteDevServer,
-  logger
-) {
+  functionsConfig,
+  logger,
+}) {
   const app = express();
 
   // Setup middleware
   app.use(cors());
   app.use(express.static(outputDir));
+
+  const capabilities = functionsConfig.enabled ? SERVER_CAPABILITIES : [];
+
+  if (functionsConfig.enabled) {
+    app.use(
+      '/api/crm-extensibility/execution/internal/v3',
+      AppFunctionExecutionService({ ...functionsConfig, logger })
+    );
+    logger.info('Serving app functions locally');
+  }
+
   const endpointsAdded = extensionsService.add(
     app,
     webSocketPort,
     outputDir,
-    baseMessage
+    baseMessage,
+    capabilities
   );
 
   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 +55,6 @@ function startDevServer(
     // Stop new connections to express server
     server.close(() => {});
     logger.info('Clean up done, exiting.');
-    process.exit(0);
   };
 }
 

package/lib/utils.js

@@ -8,8 +8,11 @@ function getUrlSafeFileName(filePath) {
 }
 
 // Strips ANSI color codes out of strings because we don't want to pass them to the browser
-function stripAnsiColorCodes(string) {
-  return string.replace(
+function stripAnsiColorCodes(stringWithColorCodes) {
+  if (!stringWithColorCodes) {
+    return null;
+  }
+  return stringWithColorCodes.replace(
     // eslint-disable-next-line no-control-regex
     /[\u001b][[]*([0-9]{1,4};?)*[m]/g,
     ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -10,12 +10,14 @@
   "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    ".": "./index.js",
+    "./self": "./lib/self.js"
+  },
   "files": [
     "cli/config.js",
-    "cli/extensions.js",
     "cli/logger.js",
     "cli/run.js",
-    "cli/userInput.js",
     "cli/utils.js",
     "lib/plugins/*",
     "lib/build.js",
@@ -23,6 +25,7 @@
     "lib/dev.js",
     "lib/extensionsService.js",
     "lib/DevModeInterface.js",
+    "lib/self.js",
     "lib/server.js",
     "lib/utils.js",
     "index.js",
@@ -30,12 +33,13 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@hubspot/app-functions-dev-server": "^0.6.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 +67,5 @@
       "optional": true
     }
   },
-  "gitHead": "1269fb86282dd5f6b9686d064b6c652f00cb863f"
+  "gitHead": "1979c2dce0a920c10e4f8b5ec3bc16a1080120cb"
 }

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,
-};