@hubspot/cli 4.2.1-beta.0 → 4.2.1-beta.2

package/lib/DevServerManager.js

@@ -1,31 +1,41 @@
 const express = require('express');
 const bodyParser = require('body-parser');
 const cors = require('cors');
-const { walk } = require('@hubspot/cli-lib/lib/walk');
+const httpClient = require('@hubspot/cli-lib/http');
+const { logger } = require('@hubspot/cli-lib/logger');
 const { getProjectDetailUrl } = require('./projects');
+const { COMPONENT_TYPES } = require('./projectStructure');
 const { i18n } = require('./lang');
 const { EXIT_CODES } = require('./enums/exitCodes');
-const { logger } = require('@hubspot/cli-lib/logger');
+const { promptUser } = require('./prompts/promptUtils');
 
 const i18nKey = 'cli.lib.DevServerManager';
 
 const DEFAULT_PORT = 8080;
+const SERVER_KEYS = {
+  app: 'app',
+};
 
 class DevServerManager {
   constructor() {
     this.initialized = false;
+    this.started = false;
+    this.componentsByType = {};
     this.server = null;
     this.path = null;
     this.devServers = {};
+    this.debug = false;
   }
 
-  setServer(key, serverInterfacePath) {
+  safeLoadServer() {
     try {
-      this.devServers[key] = require(serverInterfacePath);
+      const { DevModeInterface } = require('@hubspot/ui-extensions-dev-server');
+      this.devServers[SERVER_KEYS.app] = {
+        componentType: COMPONENT_TYPES.app,
+        serverInterface: DevModeInterface,
+      };
     } catch (e) {
-      logger.debug(
-        `Failed to load dev server interface at ${serverInterfacePath}`
-      );
+      logger.debug('Failed to load dev server interface: ', e);
     }
   }
 
@@ -34,8 +44,16 @@ class DevServerManager {
 
     for (let i = 0; i < serverKeys.length; i++) {
       const serverKey = serverKeys[i];
-      const serverInterface = this.devServers[serverKey];
-      await callback(serverInterface, serverKey);
+      const devServer = this.devServers[serverKey];
+
+      const compatibleComponents =
+        this.componentsByType[devServer.componentType] || {};
+
+      if (Object.keys(compatibleComponents).length) {
+        await callback(devServer.serverInterface, compatibleComponents);
+      } else {
+        logger.debug(i18n(`${i18nKey}.noCompatibleComponents`, { serverKey }));
+      }
     }
   }
 
@@ -43,82 +61,104 @@ class DevServerManager {
     return this.path ? `${this.path}/${path}` : null;
   }
 
-  makeLogger(spinniesLogger, serverKey) {
-    return {
-      debug: (...args) => spinniesLogger(serverKey, '[DEBUG] ', ...args),
-      error: (...args) => spinniesLogger(serverKey, '[ERROR] ', ...args),
-      info: (...args) => spinniesLogger(serverKey, '[INFO] ', ...args),
-      log: (...args) => spinniesLogger(serverKey, '[INFO] ', ...args),
-      warn: (...args) => spinniesLogger(serverKey, '[WARN] ', ...args),
-    };
+  arrangeComponentsByType(components) {
+    return components.reduce((acc, component) => {
+      if (!acc[component.type]) {
+        acc[component.type] = {};
+      }
+
+      acc[component.type][component.config.name] = component;
+
+      return acc;
+    }, {});
   }
 
-  async start({
-    accountId,
-    debug,
-    extension,
-    projectConfig,
-    projectSourceDir,
-    spinniesLogger,
-  }) {
-    const app = express();
-
-    // Install Middleware
-    app.use(bodyParser.json({ limit: '50mb' }));
-    app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
-    app.use(cors());
-
-    // Configure
-    app.set('trust proxy', true);
-
-    // Initialize a base route
-    app.get('/', (req, res) => {
-      res.send('HubSpot local dev server');
-    });
-
-    // Initialize URL redirects
-    app.get('/hs/project', (req, res) => {
-      res.redirect(getProjectDetailUrl(projectConfig.name, accountId));
-    });
-
-    // Start server
-    this.server = await app.listen(DEFAULT_PORT).on('error', err => {
-      if (err.code === 'EADDRINUSE') {
-        logger.error(i18n(`${i18nKey}.portConflict`, { port: DEFAULT_PORT }));
-        logger.log();
-        process.exit(EXIT_CODES.ERROR);
-      }
-    });
-
-    const projectFiles = await walk(projectSourceDir);
-
-    // Initialize component servers
-    await this.iterateDevServers(async (serverInterface, serverKey) => {
-      if (serverInterface.start) {
-        await serverInterface.start({
-          debug,
-          extension,
-          logger: this.makeLogger(spinniesLogger, serverKey),
-          projectConfig,
-          projectFiles,
-        });
-      }
-    });
+  async setup({ alpha, components, debug, onUploadRequired }) {
+    this.debug = debug;
+
+    this.componentsByType = this.arrangeComponentsByType(components);
+
+    this.safeLoadServer();
 
-    this.path = this.server.address()
-      ? `http://localhost:${this.server.address().port}`
-      : null;
+    await this.iterateDevServers(
+      async (serverInterface, compatibleComponents) => {
+        if (serverInterface.setup) {
+          await serverInterface.setup({
+            alpha,
+            components: compatibleComponents,
+            debug,
+            onUploadRequired,
+            promptUser,
+          });
+        }
+      }
+    );
 
     this.initialized = true;
   }
 
-  async cleanup() {
+  async start({ alpha, accountId, projectConfig }) {
     if (this.initialized) {
+      const app = express();
+
+      // Install Middleware
+      app.use(bodyParser.json({ limit: '50mb' }));
+      app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
+      app.use(cors());
+
+      // Configure
+      app.set('trust proxy', true);
+
+      // Initialize a base route
+      app.get('/', (req, res) => {
+        res.send('HubSpot local dev server');
+      });
+
+      // Initialize URL redirects
+      app.get('/hs/project', (req, res) => {
+        res.redirect(getProjectDetailUrl(projectConfig.name, accountId));
+      });
+
+      // Start server
+      this.server = await app.listen(DEFAULT_PORT).on('error', err => {
+        if (err.code === 'EADDRINUSE') {
+          logger.error(i18n(`${i18nKey}.portConflict`, { port: DEFAULT_PORT }));
+          logger.log();
+          process.exit(EXIT_CODES.ERROR);
+        }
+      });
+
+      // Initialize component servers
+      await this.iterateDevServers(async serverInterface => {
+        if (serverInterface.start) {
+          await serverInterface.start({
+            alpha,
+            accountId,
+            debug: this.debug,
+            httpClient,
+            projectConfig,
+          });
+        }
+      });
+
+      this.path = this.server.address()
+        ? `http://localhost:${this.server.address().port}`
+        : null;
+    } else {
+      throw new Error(i18n(`${i18nKey}.notInitialized`));
+    }
+
+    this.started = true;
+  }
+
+  async cleanup() {
+    if (this.started) {
       await this.iterateDevServers(async serverInterface => {
         if (serverInterface.cleanup) {
           await serverInterface.cleanup();
         }
       });
+
       if (this.server) {
         await this.server.close();
       }

package/lib/LocalDevManager.js

@@ -54,8 +54,6 @@ class LocalDevManager {
     this.targetAccountId = options.targetAccountId;
     this.projectConfig = options.projectConfig;
     this.projectDir = options.projectDir;
-    this.extension = options.extension;
-    this.devServerPath = options.devServerPath;
     this.uploadPermission =
       options.uploadPermission || UPLOAD_PERMISSIONS.always;
     this.debug = options.debug || false;
@@ -102,12 +100,8 @@ class LocalDevManager {
 
     await this.devServerStart();
 
-    if (!this.devServerPath) {
-      this.uploadQueue.start();
-      await this.startWatching();
-    } else {
-      this.uploadPermission = UPLOAD_PERMISSIONS.never;
-    }
+    this.uploadQueue.start();
+    await this.startWatching();
 
     this.updateKeypressListeners();
 
@@ -309,7 +303,8 @@ class LocalDevManager {
     try {
       const { buildId } = await provisionBuild(
         this.targetAccountId,
-        this.projectConfig.name
+        this.projectConfig.name,
+        this.projectConfig.platformVersion
       );
       this.currentStagedBuildId = buildId;
     } catch (err) {
@@ -485,10 +480,12 @@ class LocalDevManager {
           }),
           status: 'non-spinnable',
         });
+        const path =
+          event === WATCH_EVENTS.unlinkDir ? `${remotePath}/` : remotePath;
         await deleteFileFromBuild(
           this.targetAccountId,
           this.projectConfig.name,
-          remotePath
+          path
         );
         SpinniesManager.update(spinnerName, {
           text: i18n(`${i18nKey}.upload.uploadedRemoveChange`, {
@@ -540,7 +537,11 @@ class LocalDevManager {
     let queueBuildError;
 
     try {
-      await queueBuild(this.targetAccountId, this.projectConfig.name);
+      await queueBuild(
+        this.targetAccountId,
+        this.projectConfig.name,
+        this.projectConfig.platformVersion
+      );
     } catch (err) {
       queueBuildError = err;
     }
@@ -667,13 +668,12 @@ class LocalDevManager {
 
   async devServerStart() {
     try {
-      if (this.devServerPath) {
-        DevServerManager.setServer('uie', this.devServerPath);
-      }
+      // Set this to true manually for now
+      DevServerManager.initialized = true;
+
       await DevServerManager.start({
         accountId: this.targetAccountId,
         debug: this.debug,
-        extension: this.extension,
         spinniesLogger: this.handleServerLog,
         projectConfig: this.projectConfig,
         projectSourceDir: this.projectSourceDir,

package/lib/LocalDevManagerV2.js

@@ -0,0 +1,239 @@
+const path = require('path');
+const chalk = require('chalk');
+const { i18n } = require('./lang');
+const { logger } = require('@hubspot/cli-lib/logger');
+const { handleKeypress } = require('@hubspot/cli-lib/lib/process');
+const {
+  getAccountId,
+  getConfigDefaultAccount,
+} = require('@hubspot/cli-lib/lib/config');
+const SpinniesManager = require('./SpinniesManager');
+const DevServerManager = require('./DevServerManager');
+const { EXIT_CODES } = require('./enums/exitCodes');
+const { getProjectDetailUrl } = require('./projects');
+const {
+  COMPONENT_TYPES,
+  findProjectComponents,
+  getAppCardConfigs,
+} = require('./projectStructure');
+const {
+  UI_COLORS,
+  uiAccountDescription,
+  uiBetaMessage,
+  uiLink,
+  uiLine,
+} = require('./ui');
+
+const i18nKey = 'cli.lib.LocalDevManagerV2';
+
+class LocalDevManagerV2 {
+  constructor(options) {
+    this.targetAccountId = options.targetAccountId;
+    this.projectConfig = options.projectConfig;
+    this.projectDir = options.projectDir;
+    this.debug = options.debug || false;
+    this.alpha = options.alpha;
+    this.deployedBuild = options.deployedBuild;
+
+    this.projectSourceDir = path.join(
+      this.projectDir,
+      this.projectConfig.srcDir
+    );
+
+    if (!this.targetAccountId || !this.projectConfig || !this.projectDir) {
+      logger.log(i18n(`${i18nKey}.failedToInitialize`));
+      process.exit(EXIT_CODES.ERROR);
+    }
+  }
+
+  async start() {
+    SpinniesManager.removeAll();
+    SpinniesManager.init();
+
+    const components = await findProjectComponents(this.projectSourceDir);
+
+    if (!components.length) {
+      logger.log();
+      logger.error(i18n(`${i18nKey}.noComponents`));
+      process.exit(EXIT_CODES.SUCCESS);
+    }
+
+    const runnableComponents = components.filter(
+      component => component.runnable
+    );
+
+    if (!runnableComponents.length) {
+      logger.log();
+      logger.error(i18n(`${i18nKey}.noRunnableComponents`));
+      process.exit(EXIT_CODES.SUCCESS);
+    }
+
+    logger.log();
+    const setupSucceeded = await this.devServerSetup(runnableComponents);
+
+    if (setupSucceeded || !this.debug) {
+      console.clear();
+    }
+
+    uiBetaMessage(i18n(`${i18nKey}.betaMessage`));
+    logger.log();
+    logger.log(
+      chalk.hex(UI_COLORS.orange)(
+        i18n(`${i18nKey}.running`, {
+          accountIdentifier: uiAccountDescription(this.targetAccountId),
+          projectName: this.projectConfig.name,
+        })
+      )
+    );
+    logger.log(
+      uiLink(
+        i18n(`${i18nKey}.viewInHubSpotLink`),
+        getProjectDetailUrl(this.projectConfig.name, this.targetAccountId)
+      )
+    );
+    logger.log();
+    logger.log(i18n(`${i18nKey}.quitHelper`));
+    uiLine();
+    logger.log();
+
+    await this.devServerStart();
+
+    this.updateKeypressListeners();
+
+    this.compareLocalProjectToDeployed(runnableComponents);
+  }
+
+  async stop() {
+    SpinniesManager.add('cleanupMessage', {
+      text: i18n(`${i18nKey}.exitingStart`),
+    });
+
+    const cleanupSucceeded = await this.devServerCleanup();
+
+    if (!cleanupSucceeded) {
+      SpinniesManager.fail('cleanupMessage', {
+        text: i18n(`${i18nKey}.exitingFail`),
+      });
+      process.exit(EXIT_CODES.ERROR);
+    }
+
+    SpinniesManager.succeed('cleanupMessage', {
+      text: i18n(`${i18nKey}.exitingSucceed`),
+    });
+    process.exit(EXIT_CODES.SUCCESS);
+  }
+
+  updateKeypressListeners() {
+    handleKeypress(async key => {
+      if ((key.ctrl && key.name === 'c') || key.name === 'q') {
+        this.stop();
+      }
+    });
+  }
+
+  logUploadWarning(reason) {
+    const currentDefaultAccount = getConfigDefaultAccount();
+    const defaultAccountId = getAccountId(currentDefaultAccount);
+
+    logger.log();
+    logger.warn(i18n(`${i18nKey}.uploadWarning.header`, { reason }));
+    logger.log(i18n(`${i18nKey}.uploadWarning.stopDev`));
+    if (this.targetAccountId !== defaultAccountId) {
+      logger.log(
+        i18n(`${i18nKey}.uploadWarning.runUploadWithAccount`, {
+          accountId: this.targetAccountId,
+        })
+      );
+    } else {
+      logger.log(i18n(`${i18nKey}.uploadWarning.runUpload`));
+    }
+    logger.log(i18n(`${i18nKey}.uploadWarning.restartDev`));
+  }
+
+  compareLocalProjectToDeployed(runnableComponents) {
+    const deployedComponentNames = this.deployedBuild.subbuildStatuses.map(
+      subbuildStatus => subbuildStatus.buildName
+    );
+
+    let missingComponents = [];
+
+    runnableComponents.forEach(({ type, config, path }) => {
+      if (type === COMPONENT_TYPES.app) {
+        const cardConfigs = getAppCardConfigs(config, path);
+
+        cardConfigs.forEach(cardConfig => {
+          if (
+            cardConfig.data &&
+            cardConfig.data.title &&
+            !deployedComponentNames.includes(cardConfig.data.title)
+          ) {
+            missingComponents.push(cardConfig.data.title);
+          }
+        });
+      }
+    });
+
+    if (missingComponents.length) {
+      this.logUploadWarning(
+        i18n(`${i18nKey}.uploadWarning.missingComponents`, {
+          missingComponents: missingComponents.join(','),
+        })
+      );
+    }
+  }
+
+  async devServerSetup(components) {
+    try {
+      await DevServerManager.setup({
+        alpha: this.alpha,
+        components,
+        debug: this.debug,
+        onUploadRequired: this.logUploadWarning.bind(this),
+      });
+      return true;
+    } catch (e) {
+      if (this.debug) {
+        logger.error(e);
+      }
+      logger.error(
+        i18n(`${i18nKey}.devServer.setupError`, { message: e.message })
+      );
+      return false;
+    }
+  }
+
+  async devServerStart() {
+    try {
+      await DevServerManager.start({
+        alpha: this.alpha,
+        accountId: this.targetAccountId,
+        projectConfig: this.projectConfig,
+      });
+    } catch (e) {
+      if (this.debug) {
+        logger.error(e);
+      }
+      logger.error(
+        i18n(`${i18nKey}.devServer.startError`, { message: e.message })
+      );
+      process.exit(EXIT_CODES.ERROR);
+    }
+  }
+
+  async devServerCleanup() {
+    try {
+      await DevServerManager.cleanup();
+      return true;
+    } catch (e) {
+      if (this.debug) {
+        logger.error(e);
+      }
+      logger.error(
+        i18n(`${i18nKey}.devServer.cleanupError`, { message: e.message })
+      );
+      return false;
+    }
+  }
+}
+
+module.exports = LocalDevManagerV2;

package/lib/SpinniesManager.js

@@ -53,6 +53,9 @@ class SpinniesManager {
     // Default Spinnies fields
     this.spinners = {};
     this.isCursorHidden = false;
+    if (this.currentInterval) {
+      clearInterval(this.currentInterval);
+    }
     this.currentInterval = null;
     this.stream = process.stderr;
     this.lineCount = 0;

package/lib/projectStructure.js

@@ -0,0 +1,106 @@
+const fs = require('fs');
+const path = require('path');
+const { walk } = require('@hubspot/cli-lib/lib/walk');
+const { logger } = require('@hubspot/cli-lib/logger');
+
+const COMPONENT_TYPES = Object.freeze({
+  app: 'app',
+});
+
+const APP_COMPONENT_CONFIG = 'app.json';
+
+function loadConfigFile(configPath) {
+  if (configPath) {
+    try {
+      const source = fs.readFileSync(configPath);
+      const parsedConfig = JSON.parse(source);
+      return parsedConfig;
+    } catch (e) {
+      logger.debug(e);
+    }
+  }
+  return null;
+}
+
+function getAppCardConfigs(appConfig, appPath) {
+  let cardConfigs = [];
+  let cards;
+
+  if (appConfig && appConfig.extensions && appConfig.extensions.crm) {
+    cards = appConfig.extensions.crm.cards;
+  }
+
+  if (cards) {
+    cards.forEach(({ file }) => {
+      const cardConfigPath = path.join(appPath, file);
+      const cardConfig = loadConfigFile(cardConfigPath);
+
+      if (cardConfig) {
+        cardConfigs.push(cardConfig);
+      }
+    });
+  }
+
+  return cardConfigs;
+}
+
+function getIsLegacyApp(appConfig, appPath) {
+  const cardConfigs = getAppCardConfigs(appConfig, appPath);
+
+  if (!cardConfigs.length) {
+    // Assume any app that does not have any cards is not legacy
+    return false;
+  }
+
+  let hasAnyReactExtensions = false;
+
+  cardConfigs.forEach(cardConfig => {
+    if (!hasAnyReactExtensions) {
+      const isReactExtension =
+        cardConfig &&
+        !!cardConfig.data &&
+        !!cardConfig.data.module &&
+        !!cardConfig.data.module.file;
+
+      hasAnyReactExtensions = isReactExtension;
+    }
+  });
+
+  return !hasAnyReactExtensions;
+}
+
+async function findProjectComponents(projectSourceDir) {
+  const components = [];
+
+  const projectFiles = await walk(projectSourceDir);
+
+  projectFiles.forEach(projectFile => {
+    // Find app components
+    if (projectFile.endsWith(APP_COMPONENT_CONFIG)) {
+      const parsedAppConfig = loadConfigFile(projectFile);
+
+      if (parsedAppConfig && parsedAppConfig.name) {
+        const appPath = projectFile.substring(
+          0,
+          projectFile.indexOf(APP_COMPONENT_CONFIG)
+        );
+        const isLegacy = getIsLegacyApp(parsedAppConfig, appPath);
+
+        components.push({
+          type: COMPONENT_TYPES.app,
+          config: parsedAppConfig,
+          runnable: !isLegacy,
+          path: appPath,
+        });
+      }
+    }
+  });
+
+  return components;
+}
+
+module.exports = {
+  COMPONENT_TYPES,
+  findProjectComponents,
+  getAppCardConfigs,
+};