@hubspot/ui-extensions-dev-server 0.0.1-prealpha.0

package/README.md

@@ -0,0 +1,15 @@
+# ui-extensions-dev-server
+This package contains the build script for bundling and serving remote extensions locally.  It checks for a config file named `extension-config.json` in directory the dev server command is ran from.  This config file is optional, and the below example contains what the default values are.
+
+Example config file:
+
+```json
+{
+  "version": "1.0",
+  "extensions": {
+    "example-app": {
+      "file": "App.tsx"
+    }
+  }
+}
+```

package/build.js

@@ -0,0 +1,32 @@
+/* eslint-disable hubspot-dev/no-async-await */
+/*global module*/
+'use es6';
+
+const { build } = require('vite');
+const { ROLLUP_OPTIONS } = require('./constants');
+
+async function buildExtensions(config, outputDir) {
+  const extensionKeys = Object.keys(config);
+
+  for (let i = 0; i < extensionKeys.length; ++i) {
+    const { data } = config[extensionKeys[i]];
+    await build({
+      build: {
+        lib: {
+          entry: data?.module?.file,
+          name: data.output,
+          formats: ['iife'],
+          fileName: () => data.output,
+        },
+        rollupOptions: ROLLUP_OPTIONS,
+        outDir: outputDir,
+        emptyOutDir: i === 0,
+        minify: false,
+      },
+    });
+  }
+}
+
+module.exports = {
+  buildExtensions,
+};

package/config.js

@@ -0,0 +1,107 @@
+/* eslint-disable hubspot-dev/no-async-await */
+/*global process, module */
+'use es6';
+const prompts = require('prompts');
+const logger = require('./logger');
+const path = require('path');
+const { MAIN_APP_CONFIG, PROJECT_CONFIG } = require('./constants');
+const { getUrlSafeFileName } = require('./utils');
+
+async function getExtensionConfig(configuration) {
+  if (process.env.EXTENSION && configuration[process.env.EXTENSION]) {
+    const { data } = configuration[process.env.EXTENSION];
+    return {
+      key: process.env.EXTENSION,
+      name: data.title,
+      file: data?.module?.file,
+      output: data?.output,
+      appName: data?.appName,
+    };
+  }
+
+  const extensionOptions = Object.keys(configuration);
+  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 projectConfig = _loadRequiredConfigFile(
+    path.join(process.cwd(), `../../../${PROJECT_CONFIG}`)
+  );
+
+  const mainAppConfig = _loadRequiredConfigFile(configPath);
+
+  if (!mainAppConfig?.extensions?.crm?.cards) {
+    logger.error(
+      `"extensions.crm.cards" is missing in ${configPath}, it is a required configuration property`
+    );
+    process.exit(1);
+  }
+
+  const outputConfig = {};
+  try {
+    mainAppConfig.extensions.crm.cards.forEach(card => {
+      const extensionsRemoved = card.file.replace('extensions/', '');
+      const cardConfig = require(path.join(process.cwd(), extensionsRemoved));
+      const extensionFileName = cardConfig.data?.module?.file;
+      outputConfig[extensionFileName] = cardConfig;
+      outputConfig[extensionFileName].data.output = getUrlSafeFileName(
+        cardConfig.data?.module?.file
+      );
+      outputConfig[extensionFileName].data.appName = projectConfig.name;
+    });
+  } catch (e) {
+    logger.error(e.message);
+    process.exit(1);
+  }
+
+  return outputConfig;
+}
+
+module.exports = {
+  loadConfig,
+  getExtensionConfig,
+};

package/constants.js

@@ -0,0 +1,26 @@
+/*global module */
+'use es6';
+
+const VITE_DEFAULT_PORT = 5173;
+const MAIN_APP_CONFIG = 'app.json';
+const PROJECT_CONFIG = 'hsproject.json';
+
+const ROLLUP_OPTIONS = {
+  // Deps to exclude from the bundle
+  external: ['react', 'react-dom', '@remote-ui/react'],
+  output: {
+    // Maps libs to the variables to be injected via the window
+    globals: {
+      react: 'React',
+      '@remote-ui/react': 'RemoteUI',
+    },
+    extend: true,
+  },
+};
+
+module.exports = {
+  VITE_DEFAULT_PORT,
+  ROLLUP_OPTIONS,
+  MAIN_APP_CONFIG,
+  PROJECT_CONFIG,
+};

package/dev.js

@@ -0,0 +1,131 @@
+/* eslint-disable hubspot-dev/no-async-await */
+/*global module, process*/
+'use es6';
+const express = require('express');
+const chokidar = require('chokidar');
+const { WebSocketServer } = require('ws');
+const http = require('http');
+const logger = require('./logger');
+const { build } = require('vite');
+const { getExtensionConfig } = require('./config');
+const fs = require('fs');
+const path = require('path');
+const { ROLLUP_OPTIONS } = require('./constants');
+
+async function _devBuild(config, outputDir) {
+  const extensionConfig = await getExtensionConfig(config);
+  build({
+    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,
+      outDir: outputDir,
+      emptyOutDir: true,
+      minify: false,
+    },
+  });
+  return extensionConfig;
+}
+
+function _startDevServer(outputDir, port, extensionConfig) {
+  const app = express();
+  const server = http.createServer(app);
+
+  // Host the OUTPUT_DIR
+  app.use(express.static(outputDir));
+
+  // Setup websocket server to send messages to browser on bundle update
+  const wss = new WebSocketServer({ server });
+
+  const callback = `http://localhost:${port}/${extensionConfig?.output}`;
+
+  function broadcast(message) {
+    if (wss.clients.size === 0) {
+      logger.warn('No browsers connected to update');
+      return;
+    }
+    wss.clients.forEach(client => {
+      client.send(JSON.stringify(message));
+    });
+  }
+
+  wss.on('connection', client => {
+    let base64Callback;
+    try {
+      base64Callback = fs
+        .readFileSync(
+          path.join(process.cwd(), outputDir, extensionConfig?.output)
+        )
+        .toString('base64');
+    } catch (e) {
+      logger.warn(
+        'File not found:',
+        path.join(process.cwd(), outputDir, extensionConfig?.output)
+      );
+    }
+
+    logger.info('Browser connected and listening for bundle updates');
+    client.send(
+      JSON.stringify({
+        event: 'start',
+        appName: extensionConfig?.appName,
+        extension: extensionConfig?.name,
+        callback: base64Callback
+          ? `data:text/javascript;base64,${base64Callback}`
+          : undefined,
+      })
+    );
+  });
+
+  // Start the express and websocket servers
+  server.listen({ port }, () => {
+    logger.warn(`Listening at ${callback}`);
+  });
+
+  // Setup a watcher on the dist directory and update broadcast
+  //to all clients when an event is observed
+  chokidar.watch(outputDir).on('change', file => {
+    const base64Callback = fs
+      .readFileSync(path.join(process.cwd(), file))
+      .toString('base64');
+    logger.debug(`${file} updated, reloading extension`);
+    broadcast({
+      event: 'update',
+      appName: extensionConfig?.appName,
+      extension: extensionConfig?.name,
+      callback: `data:text/javascript;base64,${base64Callback}`,
+    });
+  });
+
+  process.on('SIGINT', () => {
+    logger.warn('\nSending shutdown signal to connected browser');
+    broadcast({
+      event: 'shutdown',
+      appName: extensionConfig?.appName,
+      extension: extensionConfig?.name,
+    });
+    process.exit(0);
+  });
+}
+
+async function startDevMode(config, outputDir, port) {
+  const extensionConfig = await _devBuild(config, outputDir);
+  _startDevServer(outputDir, port, extensionConfig);
+}
+
+module.exports = {
+  startDevMode,
+};

package/logger.js

@@ -0,0 +1,22 @@
+/*global module*/
+'use es6';
+
+const { cyan, red, yellow, magenta } = require('console-log-colors');
+
+function info(message) {
+  console.log(cyan(message));
+}
+
+function error(message) {
+  console.error(red(message));
+}
+
+function warn(message) {
+  console.info(yellow(message));
+}
+
+function debug(message) {
+  console.debug(magenta(message));
+}
+
+module.exports = { info, error, warn, debug };

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@hubspot/ui-extensions-dev-server",
+  "version": "0.0.1-prealpha.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo 'test'"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "chokidar": "^3.5.3",
+    "console-log-colors": "^0.4.0",
+    "express": "^4.18.2",
+    "process": "^0.11.10",
+    "prompts": "^2.4.2",
+    "vite": "^4.0.4",
+    "ws": "^8.12.1"
+  },
+  "bin": {
+    "hs-ui-extensions-dev-server": "run.js"
+  },
+  "gitHead": "eb6b25c4f33ce83c1727cdddb7024267f0b63a70"
+}

package/run.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+/* eslint-disable hubspot-dev/no-async-await */
+/*global process*/
+'use es6';
+
+const { startDevMode } = require('./dev');
+const { loadConfig } = require('./config');
+const { buildExtensions } = require('./build');
+const { VITE_DEFAULT_PORT } = require('./constants');
+
+const DEV_MODE = process.env.DEV_MODE || false;
+const OUTPUT_DIR = 'dist';
+const PORT = process.env.PORT || VITE_DEFAULT_PORT;
+
+const config = loadConfig();
+
+if (DEV_MODE) {
+  startDevMode(config, OUTPUT_DIR, PORT);
+} else {
+  buildExtensions(config, OUTPUT_DIR);
+}

package/tests/runTests.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+/*global process */
+'use es6';
+
+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', () => {
+  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

@@ -0,0 +1,44 @@
+/*global module, process */
+'use es6';
+
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const assert = require('assert');
+
+function testBuild(logger) {
+  logger.info('Build Tests started 🤞');
+  execSync('hs-ui-extensions-dev-server');
+
+  // 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, [
+    'PhoneLines.js',
+    'ProgressBarApp.js',
+  ]);
+
+  // Spot check the file contents to make sure they seem ok
+  filesInOutputDir.forEach(file => {
+    const fileContents = fs.readFileSync(path.join(distDir, file)).toString();
+    const stringsToSpotCheck = [
+      '.createRemoteReactComponent',
+      '.createElement',
+      'hubspot.extend',
+      'React',
+      'RemoteUI',
+    ];
+    stringsToSpotCheck.forEach(stringToCheck => {
+      assert(
+        fileContents.includes(stringToCheck),
+        `File ${file} contents should contain: "${stringToCheck}"`
+      );
+    });
+  });
+
+  logger.info('Build Tests passed 🚀');
+}
+
+module.exports = {
+  testBuild,
+};

package/tests/testDevServer.js

@@ -0,0 +1,139 @@
+/*global module, process */
+'use es6';
+
+const { spawn } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const assert = require('assert');
+const http = require('http');
+const WebSocket = require('ws');
+
+const testResults = {
+  buildTestPassed: false,
+  expressTestPassed: false,
+  webSocketTestPassed: false,
+};
+
+function testDevServer(logger, devServerProcess) {
+  logger.info('Dev Server Tests started 🤞');
+
+  // We need to use spawn here because it will put the process into the background,
+  // which is required because dev mode is a blocking process and we want to test that
+  // the express server and websocket server are starting properly
+  devServerProcess = spawn('hs-ui-extensions-dev-server', {
+    env: { ...process.env, DEV_MODE: 'true', EXTENSION: 'PhoneLines.tsx' },
+  });
+
+  devServerProcess.stdout.on('data', buffer => {
+    const data = buffer.toString().toLowerCase();
+    if (data.includes('built in')) {
+      testBuild(testResults);
+    }
+    if (data.includes('listening') && data.includes('localhost:5173')) {
+      testExpressServer(testResults);
+      testWebSocketServer(testResults);
+    }
+  });
+
+  // If the dev server writes to stderr, log the error and throw a new error
+  devServerProcess.stderr.on('data', buffer => {
+    const data = buffer.toString();
+    logger.error(data.toString());
+    throw new Error(data);
+  });
+
+  // When the process closes make sure we met all the success conditions
+  devServerProcess.on('close', () => {
+    if (metConditions()) {
+      logger.info('Dev Server Tests passed 🚀');
+    } else {
+      console.log(testResults);
+      logger.error('Tests failed 😭');
+    }
+  });
+
+  const interval = setInterval(callback, 1000);
+  let count = 0;
+  function callback() {
+    count += 1;
+    if (metConditions() || count === 5) {
+      devServerProcess.kill();
+      clearInterval(interval);
+    }
+  }
+}
+
+function metConditions() {
+  const {
+    buildTestPassed,
+    expressTestPassed,
+    webSocketTestPassed,
+  } = testResults;
+  return buildTestPassed && expressTestPassed && webSocketTestPassed;
+}
+
+// Test that the files were built in the proper location and spot
+// check the contents of the files.
+function testBuild(results) {
+  // // 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, ['PhoneLines.js']);
+  const fileContents = fs
+    .readFileSync(path.join(distDir, filesInOutputDir[0]))
+    .toString();
+  const stringsToSpotCheck = [
+    '.createRemoteReactComponent',
+    '.createElement',
+    'hubspot.extend',
+    'React',
+    'RemoteUI',
+  ];
+  stringsToSpotCheck.forEach(stringToCheck => {
+    assert(
+      fileContents.includes(stringToCheck),
+      `File ${filesInOutputDir[0]} contents should contain: "${stringToCheck}"`
+    );
+  });
+  results.buildTestPassed = true;
+}
+
+// Test that the express server is running on the expected port
+// and that it is serving the files as expected.
+function testExpressServer(results) {
+  http.get(
+    {
+      host: 'localhost',
+      port: 5173,
+      path: '/PhoneLines.js',
+    },
+    response => {
+      if (response.statusCode !== 200) {
+        throw Error('Error with express server');
+      }
+      results.expressTestPassed = true;
+    }
+  );
+}
+
+// Test the the web socket server is running on the expected port and
+// that we are able to recieve messages from it.
+function testWebSocketServer(results) {
+  const fileContents = fs
+    .readFileSync(path.join('dist', 'PhoneLines.js'))
+    .toString('base64');
+
+  const ws = new WebSocket('ws://localhost:5173');
+  ws.on('message', messageBuffer => {
+    const message = JSON.parse(messageBuffer.toString());
+    assert(message.event === 'start' || message.event === 'update');
+    assert(message.appName === 'example-app');
+    assert.strictEqual(message.extension, 'Phone Lines');
+    assert(message.callback, `data:text/javascript;base64,${fileContents}`);
+    results.webSocketTestPassed = true;
+  });
+}
+
+module.exports = {
+  testDevServer,
+};

package/utils.js

@@ -0,0 +1,12 @@
+/*global module*/
+'use es6';
+
+function getUrlSafeFileName(filePath) {
+  const fileName = filePath.split('/').pop();
+  const fileNameWithJsExtension = fileName.replace(/\.ts[x]?$|\.jsx$/g, '.js');
+  return encodeURIComponent(fileNameWithJsExtension);
+}
+
+module.exports = {
+  getUrlSafeFileName,
+};