@hubspot/ui-extensions-dev-server 0.1.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,33 +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');
 
-  await buildSingleExtension({
-    file: entryPoint,
-    outputFileName: getUrlSafeFileName(entryPoint),
-    outputDir: outputDir || OUTPUT_DIR,
-    plugins: {
-      rollup: [manifestPlugin({ minify: true })],
-    },
-    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,7 +1,9 @@
-const VITE_DEFAULT_PORT = 5173;
-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
@@ -20,11 +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,
   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/lib/plugins/devBuildPlugin.js

@@ -0,0 +1,139 @@
+const { ROLLUP_OPTIONS, WEBSOCKET_MESSAGE_VERSION } = require('../constants');
+const { build } = require('vite');
+const manifestPlugin = require('./manifestPlugin');
+const { stripAnsiColorCodes } = require('../utils');
+
+function devBuildPlugin(options = {}) {
+  const { extensionConfig, outputDir, baseMessage, logger } = options;
+  const versionedBaseMessage = {
+    ...baseMessage,
+    version: WEBSOCKET_MESSAGE_VERSION,
+  };
+
+  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',
+        define: {
+          'process.env.NODE_ENV': JSON.stringify(
+            process.env.NODE_ENV || 'development'
+          ),
+        },
+        build: {
+          lib: {
+            entry: extensionConfig.data.module.file,
+            name: extensionConfig.output,
+            formats: ['iife'],
+            fileName: () => extensionConfig.output,
+          },
+          rollupOptions: {
+            ...ROLLUP_OPTIONS,
+            plugins: [
+              ...(ROLLUP_OPTIONS.plugins || []),
+              manifestPlugin({
+                minify: false,
+                output: extensionConfig.output,
+              }),
+            ],
+            output: {
+              ...ROLLUP_OPTIONS.output,
+              sourcemap: 'inline',
+            },
+          },
+          outDir: outputDir,
+          emptyOutDir: true,
+          minify: false,
+        },
+      });
+      return true;
+    } catch (error) {
+      handleBuildError(error, server);
+      return false;
+    }
+  };
+
+  let localServer;
+  return {
+    name: 'ui-extensibility-dev-build-plugin',
+    enforce: 'pre',
+    configureServer: async server => {
+      // Store a reference to the server to be used in hooks that don't get the server injected
+      // See https://vitejs.dev/guide/api-plugin.html#configureserver for information on this pattern
+      localServer = server;
+      localServer.ws.on('connection', () => {
+        logger.info('Browser connected and listening for bundle updates');
+        localServer.ws.send({
+          ...versionedBaseMessage,
+          event: 'start',
+        });
+      });
+      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 }) => {
+      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',
+      });
+      return [];
+    },
+    buildEnd(error) {
+      if (error) {
+        logger.error(error);
+      }
+      logger.warn('Sending shutdown message to connected browsers');
+      if (localServer && localServer.ws) {
+        localServer.ws.send({
+          ...versionedBaseMessage,
+          event: 'shutdown',
+        });
+      }
+    },
+  };
+}
+
+module.exports = devBuildPlugin;

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

@@ -1,8 +1,8 @@
 const { readFileSync } = require('fs');
 const { normalize } = require('path');
-const logger = require('../logger');
+const { MANIFEST_FILE } = require('../constants');
+const path = require('path');
 
-const DEFAULT_MANIFEST_NAME = 'manifest.json';
 const PACKAGE_LOCK_FILE = 'package-lock.json';
 const PACKAGE_FILE = 'package.json';
 const EXTENSIONS_PATH = 'src/app/extensions/';
@@ -12,19 +12,16 @@ function plugin(options = {}) {
     name: 'ui-extensions-manifest-generation-plugin',
     enforce: 'post', // run after default rollup plugins
     generateBundle(_rollupOptions, bundle) {
-      const {
-        output = DEFAULT_MANIFEST_NAME,
-        minify = false,
-        extensionConfig,
-      } = options;
+      const { output, minify = false, logger } = options;
       try {
-        const manifest = _generateManifestContents(bundle, extensionConfig);
+        const filename = path.parse(output).name;
+        const manifest = _generateManifestContents(bundle);
         this.emitFile({
           type: 'asset',
           source: minify
             ? JSON.stringify(manifest)
             : JSON.stringify(manifest, null, 2),
-          fileName: normalize(output),
+          fileName: normalize(`${filename}-${MANIFEST_FILE}`),
         });
       } catch (e) {
         logger.warn(`\nUnable to write manifest file in ${output}, ${e}`);
@@ -33,14 +30,13 @@ function plugin(options = {}) {
   };
 }
 
-function _generateManifestContents(bundle, extension) {
+function _generateManifestContents(bundle) {
   const baseManifest = {
     package: _loadPackageFile(),
-    extension,
   };
 
   // The keys to bundle are the filename without any path information
-  const bundles = Object.keys(bundle);
+  const bundles = Object.keys(bundle).filter(cur => cur.endsWith('.js'));
 
   if (bundles.length === 1) {
     return {
@@ -86,7 +82,7 @@ function _loadPackageFile() {
 }
 
 function _stripPathPriorToExtDir(filepath) {
-  return filepath.split(EXTENSIONS_PATH).pop();
+  return filepath?.split(EXTENSIONS_PATH).pop();
 }
 
 function _buildModulesInfo(moduleIds, modules) {

package/lib/server.js

@@ -0,0 +1,91 @@
+const express = require('express');
+const path = require('path');
+const cors = require('cors');
+const fs = require('fs');
+const { EXTENSIONS_MESSAGE_VERSION, MANIFEST_FILE } = require('./constants');
+
+function startDevServer(
+  outputDir,
+  expressPort,
+  webSocketPort,
+  baseMessage,
+  viteDevServer,
+  logger
+) {
+  const app = express();
+
+  // Setup middleware
+  app.use(cors());
+  app.use(express.static(outputDir));
+  _addExtensionsEndpoint(
+    app,
+    expressPort,
+    webSocketPort,
+    outputDir,
+    baseMessage,
+    logger
+  );
+
+  // 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.warn(`Listening at ${baseMessage.callback}`);
+  });
+
+  _configureShutDownHandlers(server, viteDevServer, logger);
+}
+
+function _addExtensionsEndpoint(
+  server,
+  expressPort,
+  webSocketPort,
+  outputDir,
+  baseMessage,
+  logger
+) {
+  const endpoint = '/extensions';
+  server.get(endpoint, (_req, res) => {
+    try {
+      const output = path.parse(baseMessage.callback).name;
+      const manifest = JSON.parse(
+        fs.readFileSync(
+          path.join(process.cwd(), `${outputDir}/${output}-${MANIFEST_FILE}`)
+        )
+      );
+
+      const response = {
+        websocket: `ws://localhost:${webSocketPort}`,
+        version: EXTENSIONS_MESSAGE_VERSION,
+        extensions: [
+          {
+            ...baseMessage,
+            manifest,
+          },
+        ],
+      };
+      res.status(200).json(response);
+    } catch (e) {
+      res.status(500).json({
+        message: 'Unable to load manifest file',
+      });
+    }
+  });
+  logger.warn(`Listening at http://hslocal.net:${expressPort}${endpoint}`);
+}
+
+function _configureShutDownHandlers(server, viteDevServer, logger) {
+  async function shutdown() {
+    logger.warn('\nCleaning up after ourselves...');
+    await viteDevServer.pluginContainer.close();
+    // Stop new connections to express server
+    server.close(() => {});
+    logger.info('Clean up done, exiting.');
+    process.exit(0);
+  }
+
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+}
+
+module.exports = startDevServer;