@hubspot/ui-extensions-dev-server 0.6.1-next.9 → 0.7.1

package/cli/run.js

@@ -7,7 +7,6 @@ const {
   DevModeInterface,
 } = require('../index');
 
-const logger = require('./logger');
 const path = require('path');
 const { MAIN_APP_CONFIG, OUTPUT_DIR } = require('../lib/constants');
 const inquirer = require('inquirer');
@@ -15,7 +14,7 @@ const { loadConfigByPath, loadExtensionConfig } = require('./config');
 
 // eslint-disable-next-line no-floating-promise/no-floating-promise
 (async () => {
-  const { DEV_MODE, BUILD_MODE, extension, help, alpha } = parseArgs();
+  const { DEV_MODE, BUILD_MODE, extension, help } = parseArgs();
 
   if (help || !(DEV_MODE || BUILD_MODE)) {
     showHelp(OUTPUT_DIR);
@@ -31,7 +30,6 @@ const { loadConfigByPath, loadExtensionConfig } = require('./config');
         allExtensionsConfig[path.join(extensionPath, extension)];
     }
     await DevModeInterface.setup({
-      alpha,
       promptUser: inquirer.createPromptModule(),
       components: {
         [appConfig.name]: {
@@ -40,7 +38,6 @@ const { loadConfigByPath, loadExtensionConfig } = require('./config');
         },
       },
       extensionConfig,
-      logger,
     });
 
     await DevModeInterface.start({});

package/cli/utils.js

@@ -1,4 +1,4 @@
-const logger = require('./logger');
+const { logger } = require('@hubspot/cli-lib/logger');
 const commandLineArgs = require('command-line-args');
 const commandLineUsage = require('command-line-usage');
 
@@ -14,7 +14,6 @@ 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 },
   ];
 
@@ -49,10 +48,6 @@ 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

@@ -2,23 +2,9 @@ const { startDevMode } = require('./dev');
 const path = require('path');
 const { OUTPUT_DIR } = require('./constants');
 const { loadExtensionConfig } = require('../cli/config');
+const { logger, setLogLevel, LOG_LEVEL } = require('@hubspot/cli-lib/logger');
 
 class DevModeInterface {
-  constructor() {
-    this._setupLogger(console);
-  }
-
-  _setupLogger(_logger) {
-    this.logger = {
-      ..._logger,
-      debug: (...args) => {
-        if (this.debug) {
-          _logger.debug(...args);
-        }
-      },
-    };
-  }
-
   _setDataFromExtensionConfig(extensionConfig) {
     this.config = extensionConfig;
     this.appName = extensionConfig.data.appName;
@@ -55,26 +41,16 @@ class DevModeInterface {
   }
 
   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;
+    setLogLevel(debug ? LOG_LEVEL.DEBUG : LOG_LEVEL.LOG);
     this.accountId = accountId;
     this.httpClient = httpClient;
-    if (logger) {
-      this._setupLogger(logger);
-    }
     if (extensionConfig) {
       this._setDataFromExtensionConfig(extensionConfig);
       return;
@@ -97,8 +73,10 @@ class DevModeInterface {
     }
   }
 
-  async start({ debug }) {
-    this.debug = debug;
+  async start({ debug = null }) {
+    if (debug !== null) {
+      setLogLevel(debug ? LOG_LEVEL.DEBUG : LOG_LEVEL.LOG);
+    }
     if (!this.config || !this.config.path) {
       throw new Error(
         'Unable to load the required extension configuration files'
@@ -111,20 +89,16 @@ class DevModeInterface {
       app: { path: appPath },
       accountId: this.accountId,
       httpClient: this.httpClient,
-      enabled: !!this.alpha,
     };
 
     this.shutdown = await startDevMode({
       extensionConfig: this.config,
       outputDir: path.join(this.config.extensionPath, OUTPUT_DIR),
       functionsConfig,
-      logger: this.logger,
       root: appPath,
     });
 
-    this.logger.info(
-      `Running extension '${this.title}' from app '${this.appName}'`
-    );
+    logger.info(`Running extension '${this.title}' from app '${this.appName}'`);
   }
 
   async cleanup() {

package/lib/build.js

@@ -11,7 +11,7 @@ const extensionErrorBaseMessage = `Supported file extensions are [${allowedExten
   ', '
 )}], received:`;
 
-async function buildAllExtensions({ outputDir, logger = console }) {
+async function buildAllExtensions({ outputDir }) {
   const config = loadConfig();
   const extensionKeys = Object.keys(config);
   for (let i = 0; i < extensionKeys.length; ++i) {
@@ -21,7 +21,6 @@ async function buildAllExtensions({ outputDir, logger = console }) {
       file: data.module.file,
       outputDir,
       emptyOutDir: i === 0,
-      logger,
     });
   }
 }
@@ -32,7 +31,6 @@ 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({
@@ -51,10 +49,7 @@ async function buildSingleExtension({
       },
       rollupOptions: {
         ...ROLLUP_OPTIONS,
-        plugins: [
-          manifestPlugin({ minify, output, logger }),
-          codeInjectionPlugin({ file }),
-        ],
+        plugins: [manifestPlugin({ output }), codeInjectionPlugin({ file })],
       },
       outDir: outputDir,
       emptyOutDir,
@@ -63,24 +58,23 @@ async function buildSingleExtension({
   });
 }
 
-async function remoteBuild(
-  root,
-  entryPoint,
-  outputDir = OUTPUT_DIR,
-  logger = console
-) {
+async function remoteBuild(root, entryPoint, outputDir = OUTPUT_DIR) {
   const fileInfo = path.parse(entryPoint);
 
   if (!allowedExtensions.includes(fileInfo.ext)) {
     throw new Error(`${extensionErrorBaseMessage} ${fileInfo.ext}`);
   }
 
+  const output = getUrlSafeFileName(entryPoint);
   await buildSingleExtension({
     file: entryPoint,
+    outputFileName: output,
     outputDir,
+    plugins: {
+      rollup: [manifestPlugin({ minify: true, output })],
+    },
     minify: true,
     root,
-    logger
   });
 }
 

package/lib/dev.js

@@ -14,7 +14,6 @@ async function _createViteDevServer(
   extensionConfig,
   websocketPort,
   baseMessage,
-  logger,
   root
 ) {
   return await createServer({
@@ -27,7 +26,10 @@ async function _createViteDevServer(
         port: websocketPort,
       },
       watch: {
-        ignored: [path.join(outputDir, '/**/*')],
+        ignored: [
+          path.join(outputDir, '/**/*'),
+          '**/src/app/app.functions/**/*',
+        ],
       },
     },
     build: {
@@ -41,7 +43,6 @@ async function _createViteDevServer(
         extensionConfig,
         outputDir,
         baseMessage,
-        logger,
       }),
     ],
     clearScreen: false,
@@ -51,7 +52,6 @@ async function _createViteDevServer(
 async function startDevMode({
   extensionConfig,
   functionsConfig,
-  logger,
   outputDir = OUTPUT_DIR,
   expressPort = VITE_DEFAULT_PORT,
   webSocketPort = WEBSOCKET_PORT,
@@ -72,7 +72,6 @@ async function startDevMode({
     extensionConfig,
     webSocketPort,
     baseMessage,
-    logger,
     root
   );
 
@@ -83,7 +82,6 @@ async function startDevMode({
     baseMessage,
     viteDevServer,
     functionsConfig,
-    logger,
   });
 }
 

package/lib/plugins/codeInjectionPlugin.js

@@ -1,13 +1,16 @@
 const path = require('path');
 
-function codeInjectionPlugin() {
+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, file) {
-      const { dir } = path.parse(file);
+    transform(code, fileBeingTransformed) {
+      const absoluteFilePath = path.isAbsolute(file)
+        ? file
+        : path.join(root, file);
 
-      if (dir.includes('node_modules')) {
+      if (fileBeingTransformed !== absoluteFilePath) {
         return { code, map: null }; // Not the file we care about, return the same code
       }
 

package/lib/plugins/devBuildPlugin.js

@@ -2,10 +2,10 @@ const { ROLLUP_OPTIONS, WEBSOCKET_MESSAGE_VERSION } = require('../constants');
 const { build } = require('vite');
 const manifestPlugin = require('./manifestPlugin');
 const { stripAnsiColorCodes } = require('../utils');
-const codeInjectionPlugin = require('./codeInjectionPlugin');
+const { logger } = require('@hubspot/cli-lib/logger');
 
 function devBuildPlugin(options = {}) {
-  const { extensionConfig, outputDir, baseMessage, logger } = options;
+  const { extensionConfig, outputDir, baseMessage } = options;
   const versionedBaseMessage = {
     ...baseMessage,
     version: WEBSOCKET_MESSAGE_VERSION,
@@ -64,9 +64,7 @@ function devBuildPlugin(options = {}) {
               manifestPlugin({
                 minify: false,
                 output: extensionConfig.output,
-                logger,
               }),
-              codeInjectionPlugin({ file: extensionConfig.data.module.file }),
             ],
             output: {
               ...ROLLUP_OPTIONS.output,
@@ -81,7 +79,7 @@ function devBuildPlugin(options = {}) {
       });
       return true;
     } catch (error) {
-      logger.error(error);
+      logger.debug(error);
       handleBuildError(error, server);
       return false;
     }
@@ -103,7 +101,7 @@ function devBuildPlugin(options = {}) {
         });
       });
       localServer.ws.on('build', async () => {
-        logger.info('Browser has requested a build, rebuilding');
+        logger.debug('Browser has requested a build, rebuilding');
         const successful = await devBuild(localServer);
         if (successful) {
           server.ws.send({
@@ -121,12 +119,14 @@ function devBuildPlugin(options = {}) {
         return [];
       }
 
+      logger.info(`Extension ${extensionConfig.data.title} updated, compiled`);
+
       if (server.ws.clients.size === 0) {
-        logger.warn('Bundle updated, no browsers connected to notify');
+        logger.debug('Bundle updated, no browsers connected to notify');
         return [];
       }
 
-      logger.info('Bundle updated, notifying connected browsers');
+      logger.debug('Bundle updated, notifying connected browsers');
       server.ws.send({
         ...versionedBaseMessage,
         event: 'update',
@@ -137,7 +137,7 @@ function devBuildPlugin(options = {}) {
       if (error) {
         logger.error(error);
       }
-      logger.info('Sending shutdown message to connected browsers');
+      logger.debug('Sending shutdown message to connected browsers');
       if (localServer && localServer.ws) {
         localServer.ws.send({
           ...versionedBaseMessage,

package/lib/plugins/manifestPlugin.js

@@ -2,6 +2,7 @@ const { readFileSync } = require('fs');
 const { normalize } = require('path');
 const { MANIFEST_FILE } = require('../constants');
 const path = require('path');
+const { logger } = require('@hubspot/cli-lib/logger');
 
 const PACKAGE_LOCK_FILE = 'package-lock.json';
 const PACKAGE_FILE = 'package.json';
@@ -12,7 +13,7 @@ function manifestPlugin(options = {}) {
     name: 'ui-extensions-manifest-generation-plugin',
     enforce: 'post', // run after default rollup plugins
     generateBundle(_rollupOptions, bundle) {
-      const { output, minify = false, logger } = options;
+      const { output, minify = false } = options;
       try {
         const filename = path.parse(output).name;
         const manifest = _generateManifestContents(bundle);

package/lib/server.js

@@ -5,6 +5,7 @@ const extensionsService = require('./extensionsService');
 const {
   AppFunctionExecutionService,
 } = require('@hubspot/app-functions-dev-server');
+const { logger } = require('@hubspot/cli-lib/logger');
 
 function startDevServer({
   outputDir,
@@ -13,7 +14,6 @@ function startDevServer({
   baseMessage,
   viteDevServer,
   functionsConfig,
-  logger,
 }) {
   const app = express();
 
@@ -21,22 +21,18 @@ function startDevServer({
   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');
-  }
+  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,
-    capabilities
+    SERVER_CAPABILITIES
   );
 
   endpointsAdded.forEach(endpoint => {
@@ -54,7 +50,7 @@ function startDevServer({
     await viteDevServer.pluginContainer.close();
     // Stop new connections to express server
     server.close(() => {});
-    logger.info('Clean up done, exiting.');
+    logger.info('Extension dev server done cleaning up');
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.6.1-next.9+85660802",
+  "version": "0.7.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,6 @@
   },
   "files": [
     "cli/config.js",
-    "cli/logger.js",
     "cli/run.js",
     "cli/utils.js",
     "lib/plugins/*",
@@ -33,7 +32,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@hubspot/app-functions-dev-server": "^0.6.0",
+    "@hubspot/app-functions-dev-server": "^0.7.0",
+    "@hubspot/cli-lib": "^4.1.6",
     "command-line-args": "^5.2.1",
     "command-line-usage": "^7.0.1",
     "console-log-colors": "^0.4.0",
@@ -67,5 +67,5 @@
       "optional": true
     }
   },
-  "gitHead": "85660802fede329b3da761adabb509cb9f376d3e"
+  "gitHead": "f3c6bfa9f758bdb23179e953a1826d1f0c3bd90f"
 }

package/cli/logger.js

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