@hubspot/ui-extensions-dev-server 0.2.0 → 0.3.0

package/cli/run.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+const { parseArgs, showHelp } = require('../cli/utils');
+const {
+  buildAllExtensions,
+  buildSingleExtension,
+  startDevMode,
+} = require('../index');
+
+const { promptForExtensionToRun } = require('./userInput');
+const OUTPUT_DIR = 'dist';
+const logger = require('./logger');
+
+// eslint-disable-next-line no-floating-promise/no-floating-promise
+(async () => {
+  const { DEV_MODE, BUILD_MODE, extension, help } = parseArgs();
+
+  if (help || !(DEV_MODE || BUILD_MODE)) {
+    showHelp(OUTPUT_DIR);
+  } else if (DEV_MODE) {
+    startDevMode({
+      extension: extension || (await promptForExtensionToRun()),
+      outputDir: OUTPUT_DIR,
+      logger,
+    });
+  } else if (BUILD_MODE) {
+    if (extension) {
+      buildSingleExtension({
+        file: extension,
+        outputDir: OUTPUT_DIR,
+      });
+    } else {
+      buildAllExtensions({ outputDir: OUTPUT_DIR });
+    }
+  }
+})();

package/cli/userInput.js

@@ -0,0 +1,32 @@
+const prompts = require('prompts');
+
+const { getExtensionsList } = require('../lib/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 response.extension;
+}
+
+module.exports = {
+  promptForExtensionToRun,
+};

package/index.js

@@ -1,34 +1,14 @@
-const { OUTPUT_DIR } = require('./constants');
-const { getUrlSafeFileName } = require('./utils');
-const { buildSingleExtension } = require('./build');
-const path = require('path');
-const manifestPlugin = require('./plugins/manifestPlugin');
-
-async function remoteBuild(root, entryPoint, outputDir) {
-  const allowedExtensions = ['.js', '.ts', '.tsx', '.jsx'];
-  const fileInfo = path.parse(entryPoint);
-
-  if (!allowedExtensions.includes(fileInfo.ext)) {
-    throw new Error(
-      `The last argument should be the filename you wish to build.  Supported file extensions are [${allowedExtensions.join(
-        ', '
-      )}]`
-    );
-  }
+const {
+  remoteBuild,
+  buildAllExtensions,
+  buildSingleExtension,
+} = require('./lib/build');
 
-  const output = getUrlSafeFileName(entryPoint);
-  await buildSingleExtension({
-    file: entryPoint,
-    outputFileName: getUrlSafeFileName(entryPoint),
-    outputDir: outputDir || OUTPUT_DIR,
-    plugins: {
-      rollup: [manifestPlugin({ minify: true, output })],
-    },
-    minify: true,
-    root,
-  });
-}
+const { startDevMode } = require('./lib/dev');
 
 module.exports = {
   remoteBuild,
+  buildAllExtensions,
+  buildSingleExtension,
+  startDevMode,
 };

package/lib/build.js

@@ -0,0 +1,90 @@
+const { build } = require('vite');
+const { ROLLUP_OPTIONS, OUTPUT_DIR } = require('./constants');
+const manifestPlugin = require('./plugins/manifestPlugin');
+const path = require('path');
+const { getUrlSafeFileName } = require('./utils');
+const { loadConfig } = require('./config');
+
+const allowedExtensions = ['.js', '.ts', '.tsx', '.jsx'];
+const extensionErrorBaseMessage = `Supported file extensions are [${allowedExtensions.join(
+  ', '
+)}], received:`;
+
+async function buildAllExtensions({ outputDir }) {
+  const config = loadConfig();
+  const extensionKeys = Object.keys(config);
+  for (let i = 0; i < extensionKeys.length; ++i) {
+    const { data } = config[extensionKeys[i]];
+
+    await buildSingleExtension({
+      file: data.module.file,
+      outputDir,
+      emptyOutDir: i === 0,
+      plugins: {
+        rollup: [
+          manifestPlugin({ output: getUrlSafeFileName(data.module.file) }),
+        ],
+      },
+    });
+  }
+}
+
+async function buildSingleExtension({
+  file,
+  outputDir = OUTPUT_DIR,
+  emptyOutDir = true,
+  minify = false,
+  root = process.cwd(), // This is the vite default, so using that as our default
+}) {
+  const output = getUrlSafeFileName(file);
+  await build({
+    root,
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(
+        process.env.NODE_ENV || 'production'
+      ),
+    },
+    build: {
+      lib: {
+        entry: file,
+        name: output,
+        formats: ['iife'],
+        fileName: () => output,
+      },
+      rollupOptions: {
+        ...ROLLUP_OPTIONS,
+        plugins: [manifestPlugin({ output })],
+      },
+      outDir: outputDir,
+      emptyOutDir,
+      minify,
+    },
+  });
+}
+
+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,
+  });
+}
+
+module.exports = {
+  buildAllExtensions,
+  buildSingleExtension,
+  remoteBuild,
+  extensionErrorBaseMessage,
+};

package/lib/config.js

@@ -0,0 +1,81 @@
+const path = require('path');
+const { MAIN_APP_CONFIG } = require('./constants');
+
+function _loadRequiredConfigFile(filePath) {
+  let config;
+  try {
+    config = require(filePath);
+  } catch (e) {
+    throw new Error(
+      `Unable to load ${filePath} file.  Please make sure you are running the command from the src/app/extensions directory and that ${filePath} exists`
+    );
+  }
+  return config;
+}
+
+function loadConfig() {
+  // app.json is one level up from the extensions directory, which is where these commands
+  // will need to be ran from, the extensions directory
+  const configPath = path.join(process.cwd(), '..', MAIN_APP_CONFIG);
+
+  const mainAppConfig = _loadRequiredConfigFile(configPath);
+
+  const crmCardsSubConfigFiles = mainAppConfig?.extensions?.crm?.cards;
+  if (!crmCardsSubConfigFiles || crmCardsSubConfigFiles.length === 0) {
+    throw new Error(
+      `The "extensions.crm.cards" array in ${configPath} is missing or empty, it is a required configuration property`
+    );
+  }
+
+  const outputConfig = {};
+
+  crmCardsSubConfigFiles.forEach(card => {
+    const parsedFile = path.parse(card.file);
+    if (parsedFile.dir.startsWith('./extensions')) {
+      parsedFile.dir = parsedFile.dir.replace('./extensions', './'); // go up one level
+    }
+    // Get the path to the config file relative to the extensions directory
+    const configPathRelativeToExtensions = parsedFile.dir;
+    const extensionsPrefixRemoved = path.format(parsedFile);
+    const cardConfigPath = path.join(process.cwd(), extensionsPrefixRemoved);
+
+    try {
+      const cardConfig = require(cardConfigPath);
+      if (!cardConfig.data) {
+        throw new Error(
+          `Invalid config file at path ${cardConfigPath}, data is a required config property`
+        );
+      }
+
+      if (!cardConfig.data.module) {
+        throw new Error(
+          `Invalid config file at path ${cardConfigPath}, data.module is a require property`
+        );
+      }
+
+      // Join the two relative paths
+      const entryPointPath = path.join(
+        configPathRelativeToExtensions,
+        cardConfig.data.module.file
+      );
+
+      cardConfig.data.module.file = entryPointPath;
+
+      outputConfig[entryPointPath] = cardConfig;
+      outputConfig[entryPointPath].data.appName = mainAppConfig.name;
+    } catch (e) {
+      if (e?.code === 'MODULE_NOT_FOUND') {
+        throw new Error(
+          `Unable to load "${cardConfigPath}" file. \nPlease make sure you are running the command from the src/app/extensions directory and that your card JSON config exists within it.`
+        );
+      }
+      throw e;
+    }
+  });
+
+  return outputConfig;
+}
+
+module.exports = {
+  loadConfig,
+};

package/{constants.js → lib/constants.js}

@@ -1,10 +1,10 @@
-const VITE_DEFAULT_PORT = 5173;
-const WEBSOCKET_PORT = 5174;
-const MAIN_APP_CONFIG = 'app.json';
-const PROJECT_CONFIG = 'hsproject.json';
 const OUTPUT_DIR = 'dist';
+const MAIN_APP_CONFIG = 'app.json';
 const MANIFEST_FILE = 'manifest.json';
 
+const VITE_DEFAULT_PORT = 5173;
+const WEBSOCKET_PORT = 5174;
+
 const ROLLUP_OPTIONS = {
   // Deps to exclude from the bundle
   external: ['react', 'react-dom', '@remote-ui/react'],
@@ -22,13 +22,12 @@ const EXTENSIONS_MESSAGE_VERSION = 0;
 const WEBSOCKET_MESSAGE_VERSION = 0;
 
 module.exports = {
-  VITE_DEFAULT_PORT,
   ROLLUP_OPTIONS,
-  MAIN_APP_CONFIG,
-  PROJECT_CONFIG,
   OUTPUT_DIR,
+  MAIN_APP_CONFIG,
   MANIFEST_FILE,
-  WEBSOCKET_PORT,
   EXTENSIONS_MESSAGE_VERSION,
+  VITE_DEFAULT_PORT,
   WEBSOCKET_MESSAGE_VERSION,
+  WEBSOCKET_PORT,
 };

package/lib/dev.js

@@ -0,0 +1,89 @@
+const { createServer } = require('vite');
+const startDevServer = require('./server');
+const devBuildPlugin = require('./plugins/devBuildPlugin');
+const { getUrlSafeFileName } = require('./utils');
+const {
+  VITE_DEFAULT_PORT,
+  WEBSOCKET_PORT,
+  OUTPUT_DIR,
+} = require('./constants');
+const { loadConfig } = require('./config');
+
+async function _createViteDevServer(
+  outputDir,
+  extensionConfig,
+  websocketPort,
+  baseMessage,
+  logger
+) {
+  return await createServer({
+    appType: 'custom',
+    mode: 'development',
+    server: {
+      middlewareMode: true,
+      hmr: {
+        port: websocketPort,
+      },
+      watch: {
+        ignored: [`${process.cwd()}/${outputDir}/**/*`],
+      },
+    },
+    build: {
+      rollupOptions: {
+        input: extensionConfig.data.module.file,
+        output: getUrlSafeFileName(extensionConfig.data.module.file),
+      },
+    },
+    plugins: [
+      devBuildPlugin({ extensionConfig, outputDir, baseMessage, logger }),
+    ],
+  });
+}
+
+async function startDevMode({
+  extension,
+  logger,
+  outputDir = OUTPUT_DIR,
+  expressPort = VITE_DEFAULT_PORT,
+  webSocketPort = WEBSOCKET_PORT,
+}) {
+  if (!extension) {
+    throw new Error('Unable to determine which extension to run');
+  }
+
+  const config = loadConfig();
+  const extensionConfig = config[extension];
+  if (!extensionConfig) {
+    throw new Error(
+      `Unable to locate a configuration file for the specified extension ${extension}`
+    );
+  }
+
+  extensionConfig.output = getUrlSafeFileName(extensionConfig.data.module.file);
+
+  const baseMessage = Object.freeze({
+    appName: extensionConfig.data.appName,
+    title: extensionConfig.data.title,
+    callback: `http://hslocal.net:${expressPort}/${extensionConfig.output}`,
+  });
+
+  const viteDevServer = await _createViteDevServer(
+    outputDir,
+    extensionConfig,
+    webSocketPort,
+    baseMessage,
+    logger
+  );
+  startDevServer(
+    outputDir,
+    expressPort,
+    webSocketPort,
+    baseMessage,
+    viteDevServer,
+    logger
+  );
+}
+
+module.exports = {
+  startDevMode,
+};

package/lib/extensions.js

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

package/{plugins → lib/plugins}/devBuildPlugin.js

@@ -1,16 +1,39 @@
 const { ROLLUP_OPTIONS, WEBSOCKET_MESSAGE_VERSION } = require('../constants');
 const { build } = require('vite');
 const manifestPlugin = require('./manifestPlugin');
-const logger = require('../logger');
+const { stripAnsiColorCodes } = require('../utils');
 
 function devBuildPlugin(options = {}) {
-  const { extensionConfig, outputDir, baseMessage } = options;
+  const { extensionConfig, outputDir, baseMessage, logger } = options;
   const versionedBaseMessage = {
     ...baseMessage,
     version: WEBSOCKET_MESSAGE_VERSION,
   };
 
-  const devBuild = async () => {
+  const handleBuildError = (error, server) => {
+    const { plugin, hook, code, errors, frame, loc, id } = error;
+    if (
+      plugin === 'vite:esbuild' &&
+      hook === 'transform' &&
+      code === 'PLUGIN_ERROR'
+    ) {
+      server.ws.send({
+        ...versionedBaseMessage,
+        event: 'error',
+        error: {
+          type: 'transformation',
+          details: {
+            errors,
+            formattedError: stripAnsiColorCodes(frame),
+            location: loc,
+            file: id,
+          },
+        },
+      });
+    }
+  };
+
+  const devBuild = async server => {
     try {
       await build({
         mode: 'development',
@@ -21,10 +44,10 @@ function devBuildPlugin(options = {}) {
         },
         build: {
           lib: {
-            entry: extensionConfig?.file,
-            name: extensionConfig?.output,
+            entry: extensionConfig.data.module.file,
+            name: extensionConfig.output,
             formats: ['iife'],
-            fileName: () => extensionConfig?.output,
+            fileName: () => extensionConfig.output,
           },
           rollupOptions: {
             ...ROLLUP_OPTIONS,
@@ -32,7 +55,7 @@ function devBuildPlugin(options = {}) {
               ...(ROLLUP_OPTIONS.plugins || []),
               manifestPlugin({
                 minify: false,
-                output: extensionConfig?.output,
+                output: extensionConfig.output,
               }),
             ],
             output: {
@@ -45,8 +68,10 @@ function devBuildPlugin(options = {}) {
           minify: false,
         },
       });
-    } catch (e) {
-      logger.error(e.message);
+      return true;
+    } catch (error) {
+      handleBuildError(error, server);
+      return false;
     }
   };
 
@@ -65,15 +90,31 @@ function devBuildPlugin(options = {}) {
           event: 'start',
         });
       });
-      await devBuild();
+      localServer.ws.on('build', async () => {
+        logger.info('Browser has requested a build, rebuilding');
+        const successful = await devBuild(localServer);
+        if (successful) {
+          server.ws.send({
+            ...versionedBaseMessage,
+            event: 'update',
+          });
+        }
+      });
+      await devBuild(localServer);
     },
     handleHotUpdate: async ({ server }) => {
-      await devBuild();
-      if (server.ws.clients.size) {
-        logger.info('Bundle updated, notifying connected browsers');
-      } else {
+      const successful = await devBuild(server);
+
+      if (!successful) {
+        return [];
+      }
+
+      if (server.ws.clients.size === 0) {
         logger.warn('Bundle updated, no browsers connected to notify');
+        return [];
       }
+
+      logger.info('Bundle updated, notifying connected browsers');
       server.ws.send({
         ...versionedBaseMessage,
         event: 'update',

package/{plugins → lib/plugins}/manifestPlugin.js

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

package/{server.js → lib/server.js}

@@ -1,5 +1,4 @@
 const express = require('express');
-const logger = require('./logger');
 const path = require('path');
 const cors = require('cors');
 const fs = require('fs');
@@ -10,7 +9,8 @@ function startDevServer(
   expressPort,
   webSocketPort,
   baseMessage,
-  viteDevServer
+  viteDevServer,
+  logger
 ) {
   const app = express();
 
@@ -22,7 +22,8 @@ function startDevServer(
     expressPort,
     webSocketPort,
     outputDir,
-    baseMessage
+    baseMessage,
+    logger
   );
 
   // Vite middlewares needs to go last because it's greedy and will block other middleware
@@ -32,7 +33,7 @@ function startDevServer(
     logger.warn(`Listening at ${baseMessage.callback}`);
   });
 
-  _configureShutDownHandlers(server, viteDevServer);
+  _configureShutDownHandlers(server, viteDevServer, logger);
 }
 
 function _addExtensionsEndpoint(
@@ -40,7 +41,8 @@ function _addExtensionsEndpoint(
   expressPort,
   webSocketPort,
   outputDir,
-  baseMessage
+  baseMessage,
+  logger
 ) {
   const endpoint = '/extensions';
   server.get(endpoint, (_req, res) => {
@@ -72,7 +74,7 @@ function _addExtensionsEndpoint(
   logger.warn(`Listening at http://hslocal.net:${expressPort}${endpoint}`);
 }
 
-function _configureShutDownHandlers(server, viteDevServer) {
+function _configureShutDownHandlers(server, viteDevServer, logger) {
   async function shutdown() {
     logger.warn('\nCleaning up after ourselves...');
     await viteDevServer.pluginContainer.close();

package/lib/utils.js

@@ -0,0 +1,20 @@
+const path = require('path');
+
+function getUrlSafeFileName(filePath) {
+  const { name } = path.parse(filePath);
+  return encodeURIComponent(`${name}.js`);
+}
+
+// Strips ANSI color codes out of strings because we don't want to pass them to the browser
+function stripAnsiColorCodes(string) {
+  return string.replace(
+    // eslint-disable-next-line no-control-regex
+    /[\u001b][[]*([0-9]{1,4};?)*[m]/g,
+    ''
+  );
+}
+
+module.exports = {
+  getUrlSafeFileName,
+  stripAnsiColorCodes,
+};