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

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,
+};

package/package.json

@@ -1,50 +1,53 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo 'test'"
+    "test": "jest",
+    "jest": "jest --watch"
   },
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "README.md",
-    "build.js",
-    "cli.js",
-    "config.js",
-    "constants.js",
-    "dev.js",
-    "logger.js",
-    "run.js",
-    "utils.js",
-    "tests/runTests.js",
-    "tests/testBuild.js",
-    "tests/testDevServer.js",
-    "plugins/manifestPlugin.js",
+    "cli/logger.js",
+    "cli/run.js",
+    "cli/userInput.js",
+    "cli/utils.js",
+    "lib/plugins/*",
+    "lib/build.js",
+    "lib/config.js",
+    "lib/constants.js",
+    "lib/dev.js",
+    "lib/extensions.js",
+    "lib/server.js",
+    "lib/utils.js",
     "index.js",
-    "server.js"
+    "README.md"
   ],
   "license": "MIT",
   "dependencies": {
-    "chokidar": "^3.5.3",
     "command-line-args": "^5.2.1",
     "command-line-usage": "^7.0.1",
     "console-log-colors": "^0.4.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",
-    "process": "^0.11.10",
     "prompts": "^2.4.2",
-    "vite": "^4.0.4",
+    "vite": "^4.0.4"
+  },
+  "devDependencies": {
+    "axios": "^1.4.0",
+    "jest": "^29.5.0",
     "ws": "^8.13.0"
   },
   "bin": {
-    "hs-ui-extensions-dev-server": "run.js"
+    "hs-ui-extensions-dev-server": "./cli/run.js"
   },
   "eslintConfig": {
     "env": {
-      "node": true
+      "node": true,
+      "jest": true
     }
   },
   "engines": {
@@ -58,5 +61,5 @@
       "optional": true
     }
   },
-  "gitHead": "abac5960e6277af827714dcd4150ad7606e6a481"
+  "gitHead": "0b20c005a9564bbde58c22ce21959c713f354607"
 }

package/build.js

@@ -1,56 +0,0 @@
-const { build } = require('vite');
-const { ROLLUP_OPTIONS } = require('./constants');
-
-async function buildAllExtensions(config, outputDir) {
-  const extensionKeys = Object.keys(config);
-  for (let i = 0; i < extensionKeys.length; ++i) {
-    const { data } = config[extensionKeys[i]];
-
-    await buildSingleExtension({
-      file: data?.module.file,
-      outputFileName: data?.output,
-      outputDir,
-      emptyOutDir: i === 0,
-    });
-  }
-}
-
-async function buildSingleExtension({
-  file,
-  outputFileName,
-  outputDir,
-  emptyOutDir = true,
-  plugins = { rollup: [], vite: [] },
-  minify = false,
-  root = process.cwd(), // This is the vite default, so using that as our default
-}) {
-  await build({
-    root,
-    define: {
-      'process.env.NODE_ENV': JSON.stringify(
-        process.env.NODE_ENV || 'production'
-      ),
-    },
-    build: {
-      lib: {
-        entry: file,
-        name: outputFileName,
-        formats: ['iife'],
-        fileName: () => outputFileName,
-      },
-      rollupOptions: {
-        ...ROLLUP_OPTIONS,
-        plugins: [...(ROLLUP_OPTIONS.plugins || []), ...plugins?.rollup],
-      },
-      outDir: outputDir,
-      emptyOutDir,
-      minify,
-      plugins: plugins?.vite,
-    },
-  });
-}
-
-module.exports = {
-  buildAllExtensions,
-  buildSingleExtension,
-};

package/config.js

@@ -1,129 +0,0 @@
-const prompts = require('prompts');
-const logger = require('./logger');
-const path = require('path');
-const { MAIN_APP_CONFIG } = require('./constants');
-const { getUrlSafeFileName } = require('./utils');
-
-async function getExtensionConfig(configuration, extension) {
-  const extensionOptions = Object.keys(configuration);
-
-  if (
-    (extension && configuration[extension]) ||
-    extensionOptions.length === 1
-  ) {
-    const extensionToRun = extension || extensionOptions[0];
-    const { data } = configuration[extensionToRun];
-    return {
-      key: extensionToRun,
-      name: data.title,
-      file: data?.module?.file,
-      output: data?.output,
-      appName: data?.appName,
-    };
-  }
-
-  const response = await prompts(
-    [
-      {
-        type: 'select',
-        name: 'extension',
-        message: 'Which extension would you like to run?',
-        choices: extensionOptions.map(option => {
-          const { data } = configuration[option];
-          return {
-            title: option,
-            value: {
-              key: option,
-              name: data?.title,
-              file: data?.module?.file,
-              output: data?.output,
-              appName: data?.appName,
-            },
-          };
-        }),
-      },
-    ],
-    {
-      onCancel: () => {
-        process.exit(0); // When the user cancels interaction, exit the script
-      },
-    }
-  );
-  return response.extension;
-}
-
-function _loadRequiredConfigFile(filePath) {
-  let config;
-  try {
-    config = require(filePath);
-  } catch (e) {
-    logger.error(
-      `Unable to load ${filePath} file.  Please make sure you are running the command from the src/app/extensions directory and that ${filePath} exists`
-    );
-    process.exit(1);
-  }
-  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) {
-    logger.error(
-      `The "extensions.crm.cards" array in ${configPath} is missing, it is a required configuration property`
-    );
-    process.exit(1);
-  } else if (crmCardsSubConfigFiles.length === 0) {
-    logger.error(
-      `The "extensions.crm.cards" array in ${configPath} is empty, it is a required configuration property.`
-    );
-    process.exit(1);
-  }
-
-  const outputConfig = {};
-
-  crmCardsSubConfigFiles.forEach(card => {
-    const extensionsRemoved = card.file.replace('extensions/', '');
-    const cardConfigPath = path.join(process.cwd(), extensionsRemoved);
-    // Get the path to the config file relative to the extensions directory
-    const configPathRelativeToExtensions = path.parse(extensionsRemoved)?.dir;
-
-    try {
-      const cardConfig = require(cardConfigPath);
-
-      // 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.output = getUrlSafeFileName(
-        entryPointPath
-      );
-      outputConfig[entryPointPath].data.appName = mainAppConfig.name;
-    } catch (e) {
-      let errorMessage = e?.message;
-      if (e?.code === 'MODULE_NOT_FOUND') {
-        errorMessage = `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.`;
-      }
-
-      logger.error(errorMessage);
-      process.exit(1);
-    }
-  });
-
-  return outputConfig;
-}
-
-module.exports = {
-  loadConfig,
-  getExtensionConfig,
-};

package/dev.js

@@ -1,52 +0,0 @@
-const { build } = require('vite');
-const { getExtensionConfig } = require('./config');
-const { ROLLUP_OPTIONS } = require('./constants');
-const startDevServer = require('./server');
-const manifestPlugin = require('./plugins/manifestPlugin');
-
-async function _buildDevBundle(outputDir, extensionConfig) {
-  await build({
-    define: {
-      'process.env.NODE_ENV': JSON.stringify(
-        process.env.NODE_ENV || 'development'
-      ),
-    },
-    build: {
-      watch: {
-        clearScreen: false,
-        exclude: [
-          'node_modules',
-          'package.json',
-          'package-lock.json',
-          'app.json',
-        ],
-      },
-      lib: {
-        entry: extensionConfig?.file,
-        name: extensionConfig?.output,
-        formats: ['iife'],
-        fileName: () => extensionConfig?.output,
-      },
-      rollupOptions: {
-        ...ROLLUP_OPTIONS,
-        plugins: [
-          ...(ROLLUP_OPTIONS.plugins || []),
-          manifestPlugin({ minify: false, extensionConfig }),
-        ],
-      },
-      outDir: outputDir,
-      emptyOutDir: true,
-      minify: false,
-    },
-  });
-}
-
-async function startDevMode(config, outputDir, port, extension) {
-  const extensionConfig = await getExtensionConfig(config, extension);
-  await _buildDevBundle(outputDir, extensionConfig);
-  startDevServer(outputDir, port, extensionConfig);
-}
-
-module.exports = {
-  startDevMode,
-};

package/run.js

@@ -1,31 +0,0 @@
-#!/usr/bin/env node
-
-const { startDevMode } = require('./dev');
-const { loadConfig } = require('./config');
-const { buildAllExtensions, buildSingleExtension } = require('./build');
-const { VITE_DEFAULT_PORT, OUTPUT_DIR } = require('./constants');
-const { parseArgs, showHelp } = require('./cli');
-const { getUrlSafeFileName } = require('./utils');
-const manifestPlugin = require('./plugins/manifestPlugin');
-
-const { DEV_MODE, BUILD_MODE, port, extension, help } = parseArgs();
-const PORT = port || VITE_DEFAULT_PORT;
-
-if (help || !(DEV_MODE || BUILD_MODE)) {
-  showHelp(OUTPUT_DIR);
-}
-
-if (DEV_MODE) {
-  startDevMode(loadConfig(), OUTPUT_DIR, PORT, extension);
-} else if (BUILD_MODE) {
-  if (extension) {
-    buildSingleExtension({
-      file: extension,
-      outputFileName: getUrlSafeFileName(extension),
-      outputDir: OUTPUT_DIR,
-      plugins: { rollup: [manifestPlugin()] },
-    });
-  } else {
-    buildAllExtensions(loadConfig(), OUTPUT_DIR);
-  }
-}

package/server.js

@@ -1,148 +0,0 @@
-const express = require('express');
-const chokidar = require('chokidar');
-const { WebSocketServer } = require('ws');
-const http = require('http');
-const logger = require('./logger');
-const path = require('path');
-const cors = require('cors');
-const {
-  EXTENSIONS_MESSAGE_VERSION,
-  WEBSOCKET_MESSAGE_VERSION,
-} = require('./constants');
-
-function startDevServer(outputDir, port, extensionConfig) {
-  const callback = `http://hslocal.net:${port}/${extensionConfig?.output}`;
-
-  const app = express();
-
-  // Using http.createServer so WebSocket server can be attached before initializing express.
-  const server = http.createServer(app);
-
-  // Setup middleware
-  app.use(cors());
-  app.use(express.static(outputDir));
-
-  _addExtensionsEndpoint(app, port);
-
-  const { broadcast, wss } = _setupWebSocketServer(
-    server,
-    extensionConfig,
-    callback
-  );
-  _setupChokidarWatcher(broadcast, outputDir);
-
-  server.listen({ port }, () => {
-    logger.warn(`Listening at ${callback}`);
-  });
-
-  _configureShutDownHandlers(server, wss, broadcast);
-}
-
-function _setupWebSocketServer(server, extensionConfig, callback) {
-  const wss = new WebSocketServer({ server });
-
-  const baseMessage = {
-    appName: extensionConfig?.appName,
-    title: extensionConfig?.name,
-    callback,
-    version: WEBSOCKET_MESSAGE_VERSION,
-  };
-
-  wss.on('connection', client => {
-    logger.info('Browser connected and listening for bundle updates');
-    client.send(
-      JSON.stringify({
-        event: 'start',
-        ...baseMessage,
-      })
-    );
-  });
-
-  return {
-    wss,
-    broadcast: message => {
-      if (wss.clients.size === 0) {
-        logger.warn('No browsers connected to notify');
-        return;
-      }
-      wss.clients.forEach(client => {
-        client.send(
-          JSON.stringify({
-            ...message,
-            ...baseMessage,
-          })
-        );
-      });
-    },
-  };
-}
-
-// Setup a watcher on the dist directory and update broadcast
-//to all clients when an event is observed
-function _setupChokidarWatcher(broadcast, outputDir) {
-  chokidar.watch(outputDir).on('all', (event, file) => {
-    if (event !== 'change' || event !== 'add' || file === 'manifest.json') {
-      // We need to listen to 'change' and 'add' because sometimes chokidar
-      // sees it as an 'unlink' and 'add' instead of just a 'change'
-      // Since we are adding the manifest.json to the build, we want to ignore changes to that so we don't double send messages
-      return;
-    }
-    logger.info('Bundle updated notifying browser');
-    broadcast({
-      event: 'update',
-    });
-  });
-}
-
-function _addExtensionsEndpoint(server, port) {
-  const endpoint = '/extensions';
-  server.get(endpoint, (_req, res) => {
-    try {
-      const manifest = require(path.join(process.cwd(), 'dist/manifest.json'));
-      const {
-        extension: { appName, name, output },
-      } = manifest;
-
-      const response = {
-        websocket: `ws://localhost:${port}`,
-        version: EXTENSIONS_MESSAGE_VERSION,
-        extensions: [
-          {
-            appName,
-            title: name,
-            callback: `http://hslocal.net:${port}/${output}`,
-            manifest: {
-              ...manifest,
-              extension: undefined,
-            },
-          },
-        ],
-      };
-      res.status(200).json(response);
-    } catch (e) {
-      res.status(500).json({
-        message: 'Unable to load manifest file',
-      });
-    }
-  });
-  logger.warn(`Listening at http://hslocal.net:${port}${endpoint}`);
-}
-
-function _configureShutDownHandlers(server, wss, broadcast) {
-  function shutdown() {
-    logger.warn('\nCleaning up after ourselves...');
-    // Stop new connections to express server
-    broadcast({
-      event: 'shutdown',
-    });
-    wss.close(() => {});
-    server.close(() => {});
-    logger.warn('Clean up done');
-    process.exit(0);
-  }
-
-  process.on('SIGINT', shutdown);
-  process.on('SIGTERM', shutdown);
-}
-
-module.exports = startDevServer;

package/tests/runTests.js

@@ -1,32 +0,0 @@
-#!/usr/bin/env node
-
-const { testBuild } = require('./testBuild');
-const { testDevServer } = require('./testDevServer');
-const logger = require('../logger');
-
-let devServerProcess;
-
-function handleFailure() {
-  if (devServerProcess) {
-    devServerProcess.kill();
-  }
-}
-
-process.on('SIGINT', () => {
-  handleFailure();
-});
-
-process.on('uncaughtException', e => {
-  console.error(e);
-  handleFailure();
-});
-
-try {
-  testBuild(logger);
-  testDevServer(logger, devServerProcess);
-} catch (e) {
-  console.error(e.message);
-  logger.error('Tests failed 😭');
-  handleFailure();
-  process.exit(1);
-}

package/tests/testBuild.js

@@ -1,93 +0,0 @@
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-const assert = require('assert');
-
-function _testHelper(command, outputDirFiles) {
-  if (command) {
-    execSync(command);
-  }
-
-  // Make sure the files are getting generated in the dist dir
-  const distDir = path.join(process.cwd(), 'dist');
-  const filesInOutputDir = fs.readdirSync(distDir);
-  assert.deepStrictEqual(filesInOutputDir, outputDirFiles);
-
-  // Spot check the file contents to make sure they seem ok
-  filesInOutputDir.forEach(file => {
-    const fileContents = fs.readFileSync(path.join(distDir, file)).toString();
-    if (file === 'manifest.json') {
-      const manifest = JSON.parse(fileContents);
-      assert(manifest.entry);
-      assert(manifest.modules);
-      assert(manifest.modules.internal);
-      manifest.modules.internal.forEach(mod => {
-        assert(mod.module);
-        assert(mod.renderedExports);
-      });
-      assert(manifest.modules.external);
-      manifest.modules.external.forEach(mod => {
-        assert(mod.module);
-        assert(mod.renderedExports);
-      });
-      assert(manifest.package);
-      assert(manifest.package.packages);
-    } else {
-      const stringsToSpotCheck = [
-        '.createRemoteReactComponent',
-        '.createElement',
-        'hubspot.extend',
-        'React',
-        'RemoteUI',
-      ];
-      stringsToSpotCheck.forEach(stringToCheck => {
-        assert(
-          fileContents.includes(stringToCheck),
-          `File ${file} contents should contain: "${stringToCheck}"`
-        );
-      });
-    }
-  });
-}
-
-function testDefaultBuildPath(logger) {
-  logger.warn('- Test default build path started 🤞');
-  _testHelper('hs-ui-extensions-dev-server build', [
-    'PhoneLines.js',
-    'ProgressBarApp.js',
-  ]);
-  logger.info('- Test default build path passed 🚀');
-}
-
-function testBuildWithExtensionFlag(logger) {
-  logger.warn('- Test build with flags started 🤞');
-  _testHelper(
-    'hs-ui-extensions-dev-server build --extension ProgressBarApp.tsx',
-    ['ProgressBarApp.js', 'manifest.json']
-  );
-  logger.info('- Test build with flags passed 🚀');
-}
-
-function testDefInfraBuildFileName(logger) {
-  const { remoteBuild } = require('../index');
-  logger.warn('- Test remoteBuild function 🤞');
-
-  remoteBuild(process.cwd(), 'ProgressBarApp.tsx', 'dist');
-  _testHelper(null, ['ProgressBarApp.js', 'manifest.json']);
-  logger.info('- Test build with entrypoint as arg 🚀');
-}
-
-function testBuild(logger) {
-  logger.warn('\nBuild Tests started - External Devs 🤞');
-  testDefaultBuildPath(logger);
-  testBuildWithExtensionFlag(logger);
-  logger.info('Build Tests passed - External Devs🚀');
-
-  logger.warn('\nBuild Tests started - Dev Infra 🤞');
-  testDefInfraBuildFileName(logger);
-  logger.info('Build Tests passed - Dev Infra 🚀');
-}
-
-module.exports = {
-  testBuild,
-};