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

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

@@ -15,7 +15,7 @@ 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);
@@ -31,6 +31,7 @@ const { loadConfigByPath, loadExtensionConfig } = require('./config');
         allExtensionsConfig[path.join(extensionPath, extension)];
     }
     await DevModeInterface.setup({
+      alpha,
       promptUser: inquirer.createPromptModule(),
       components: {
         [appConfig.name]: {

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

@@ -55,6 +55,11 @@ 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,
@@ -63,6 +68,7 @@ class DevModeInterface {
     extensionConfig,
     logger,
   }) {
+    this.alpha = alpha;
     this.debug = debug;
     this.accountId = accountId;
     this.httpClient = httpClient;
@@ -105,6 +111,7 @@ class DevModeInterface {
       app: { path: appPath },
       accountId: this.accountId,
       httpClient: this.httpClient,
+      enabled: !!this.alpha,
     };
 
     this.shutdown = await startDevMode({

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({ minify, output, logger }),
+          codeInjectionPlugin({ file }),
+        ],
       },
       outDir: outputDir,
       emptyOutDir,
@@ -78,16 +75,12 @@ async function remoteBuild(
     throw new Error(`${extensionErrorBaseMessage} ${fileInfo.ext}`);
   }
 
-  const output = getUrlSafeFileName(entryPoint);
   await buildSingleExtension({
     file: entryPoint,
-    outputFileName: output,
     outputDir,
-    plugins: {
-      rollup: [manifestPlugin({ minify: true, output, logger })],
-    },
     minify: true,
     root,
+    logger
   });
 }
 

package/lib/dev.js

@@ -75,15 +75,16 @@ async function startDevMode({
     logger,
     root
   );
-  return startDevServer(
+
+  return startDevServer({
     outputDir,
     expressPort,
     webSocketPort,
     baseMessage,
     viteDevServer,
     functionsConfig,
-    logger
-  );
+    logger,
+  });
 }
 
 module.exports = {

package/lib/extensionsService.js

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

package/lib/plugins/codeInjectionPlugin.js

@@ -0,0 +1,27 @@
+const path = require('path');
+
+function codeInjectionPlugin() {
+  return {
+    name: 'ui-extensions-code-injection-plugin',
+    enforce: 'post', // run after default rollup plugins
+    transform(code, file) {
+      const { dir } = path.parse(file);
+
+      if (dir.includes('node_modules')) {
+        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;
@@ -43,6 +44,13 @@ function devBuildPlugin(options = {}) {
             process.env.NODE_ENV || 'development'
           ),
         },
+        esbuild: {
+          tsconfigRaw: {
+            compilerOptions: {
+              preserveValueImports: true,
+            },
+          },
+        },
         build: {
           lib: {
             entry: extensionConfig.data.module.file,
@@ -58,6 +66,7 @@ function devBuildPlugin(options = {}) {
                 output: extensionConfig.output,
                 logger,
               }),
+              codeInjectionPlugin({ file: extensionConfig.data.module.file }),
             ],
             output: {
               ...ROLLUP_OPTIONS.output,
@@ -72,6 +81,7 @@ function devBuildPlugin(options = {}) {
       });
       return true;
     } catch (error) {
+      logger.error(error);
       handleBuildError(error, server);
       return false;
     }

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,42 @@
 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,
   functionsConfig,
-  logger
-) {
+  logger,
+}) {
   const app = express();
 
   // 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 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 => {

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.5.0",
+  "version": "0.6.1-next.9+85660802",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -10,6 +10,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "exports": {
+    ".": "./index.js",
+    "./self": "./lib/self.js"
+  },
   "files": [
     "cli/config.js",
     "cli/logger.js",
@@ -21,6 +25,7 @@
     "lib/dev.js",
     "lib/extensionsService.js",
     "lib/DevModeInterface.js",
+    "lib/self.js",
     "lib/server.js",
     "lib/utils.js",
     "index.js",
@@ -28,7 +33,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@hubspot/app-functions-dev-server": "^0.5.0",
+    "@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",
@@ -62,5 +67,5 @@
       "optional": true
     }
   },
-  "gitHead": "d11a7bb73cf91ed44279b041f17778833948839f"
+  "gitHead": "85660802fede329b3da761adabb509cb9f376d3e"
 }