@hubspot/ui-extensions-dev-server 0.7.3 → 0.8.0

package/dist/lib/types.d.ts

@@ -0,0 +1,48 @@
+export interface ObjectTypes {
+    name: string;
+}
+export interface ExtensionConfig {
+    type: string;
+    output: string;
+    path: string;
+    extensionPath: string;
+    data: {
+        appName: string;
+        title: string;
+        location: string;
+        module: {
+            file: string;
+        };
+        objectTypes: ObjectTypes[];
+    };
+}
+export interface ExtensionConfigMap {
+    [key: string]: ExtensionConfig;
+}
+interface CardConfig {
+    file: string;
+}
+export interface AppConfig {
+    name: string;
+    description: string;
+    scopes: string[];
+    public: boolean;
+    extensions: {
+        crm: {
+            cards: CardConfig[];
+        };
+    };
+}
+export interface ProjectComponent {
+    config: AppConfig;
+    path: string;
+}
+export interface ProjectComponentMap {
+    [key: string]: ProjectComponent;
+}
+export interface BaseMessage {
+    appName: string;
+    title: string;
+    callback: string;
+}
+export {};

package/dist/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/lib/utils.d.ts

@@ -0,0 +1,4 @@
+declare function getUrlSafeFileName(filePath: string): string;
+declare function stripAnsiColorCodes(stringWithColorCodes: string | undefined): string | null;
+declare function loadManifest(outputDir: string, output: string): any;
+export { getUrlSafeFileName, stripAnsiColorCodes, loadManifest };

package/dist/lib/utils.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadManifest = exports.stripAnsiColorCodes = exports.getUrlSafeFileName = void 0;
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const constants_1 = require("./constants");
+function getUrlSafeFileName(filePath) {
+    const { name } = path_1.default.parse(filePath);
+    return encodeURIComponent(`${name}.js`);
+}
+exports.getUrlSafeFileName = getUrlSafeFileName;
+// Strips ANSI color codes out of strings because we don't want to pass them to the browser
+function stripAnsiColorCodes(stringWithColorCodes) {
+    if (!stringWithColorCodes) {
+        return null;
+    }
+    return stringWithColorCodes.replace(
+    // eslint-disable-next-line no-control-regex
+    /[\u001b][[]*([0-9]{1,4};?)*[m]/g, '');
+}
+exports.stripAnsiColorCodes = stripAnsiColorCodes;
+function loadManifest(outputDir, output) {
+    try {
+        return JSON.parse(fs_1.default
+            .readFileSync(path_1.default.join(outputDir, `${output}-${constants_1.MANIFEST_FILE}`))
+            .toString());
+    }
+    catch (e) {
+        return {};
+    }
+}
+exports.loadManifest = loadManifest;

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "",
-  "main": "index.js",
   "scripts": {
     "test": "jest",
-    "build": "echo 'no build step for @hubspot/ui-extensions-dev-server'",
+    "clean": "rm -rf dist/",
+    "build": "npm run clean && tsc",
+    "watch": "npm run clean && tsc --watch",
+    "prepare": "npm run build",
     "lint": "echo 'no lint step for @hubspot/ui-extensions-dev-server'",
     "jest": "jest --watch"
   },
@@ -13,44 +15,38 @@
     "access": "public"
   },
   "exports": {
-    ".": "./index.js",
-    "./self": "./lib/self.js"
+    ".": "./dist/index.js",
+    "./self": "./dist/lib/self.js"
   },
   "files": [
-    "cli/config.js",
-    "cli/run.js",
-    "cli/utils.js",
-    "lib/plugins/*",
-    "lib/build.js",
-    "lib/constants.js",
-    "lib/dev.js",
-    "lib/extensionsService.js",
-    "lib/DevModeInterface.js",
-    "lib/self.js",
-    "lib/server.js",
-    "lib/utils.js",
-    "index.js",
+    "dist",
     "README.md"
   ],
   "license": "MIT",
   "dependencies": {
-    "@hubspot/app-functions-dev-server": "^0.7.3",
+    "@hubspot/app-functions-dev-server": "^0.8.0",
     "@hubspot/cli-lib": "^4.1.6",
     "command-line-args": "^5.2.1",
     "command-line-usage": "^7.0.1",
     "console-log-colors": "^0.4.0",
     "cors": "^2.8.5",
+    "detect-port": "1.5.1",
     "express": "^4.18.2",
     "inquirer": "8.2.0",
-    "vite": "^4.0.4"
+    "vite": "^4.4.9"
   },
   "devDependencies": {
+    "@types/express": "types/express",
+    "@types/inquirer": "^9.0.3",
+    "@types/jest": "^29.5.4",
     "axios": "^1.4.0",
     "jest": "^29.5.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6",
     "ws": "^8.13.0"
   },
   "bin": {
-    "hs-ui-extensions-dev-server": "./cli/run.js"
+    "hs-ui-extensions-dev-server": "./dist/cli/run.js"
   },
   "eslintConfig": {
     "env": {
@@ -62,12 +58,13 @@
     "node": ">=16"
   },
   "peerDependencies": {
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
     }
   },
-  "gitHead": "663cfa5f4b81bb923da5e8679e5be5437d1ddd00"
+  "gitHead": "80535f127c717f76d07fca05c9f676ec29ad5d18"
 }

package/cli/config.js

@@ -1,111 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { getUrlSafeFileName } = require('../lib/utils');
-const { MAIN_APP_CONFIG } = require('../lib/constants');
-
-function loadConfigByPath(configPath) {
-  const source = fs.readFileSync(configPath);
-  return JSON.parse(source);
-}
-
-function loadExtensionConfig(appConfig, appPath) {
-  const crmCardsSubConfigFiles = appConfig?.extensions?.crm?.cards;
-
-  const outputConfig = {};
-
-  crmCardsSubConfigFiles.forEach(card => {
-    const cardConfigPath = path.join(appPath, card.file);
-
-    try {
-      const cardConfig = loadConfigByPath(cardConfigPath);
-
-      if (cardConfig && cardConfig.data) {
-        const cardConfigDir = path.parse(cardConfigPath).dir;
-
-        const entryPointPath = path.join(
-          cardConfigDir,
-          cardConfig.data?.module?.file
-        );
-
-        cardConfig.data.module.file = entryPointPath;
-
-        outputConfig[entryPointPath] = {
-          ...cardConfig,
-          output: getUrlSafeFileName(entryPointPath),
-          path: appPath,
-          extensionPath: path.parse(entryPointPath).dir,
-          data: {
-            ...cardConfig.data,
-            appName: appConfig.name,
-          },
-        };
-      }
-    } catch (e) {
-      throw new Error(`Unable to load ${cardConfigPath}`);
-    }
-  });
-
-  return outputConfig;
-}
-
-/**
- * @deprecated Will be removed after integration with hubspot-cli is complete
- * This version of load config makes assumptions about the location it is being ran from where the others do not
- */
-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 = loadConfigByPath(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 cardConfigPath = path.join(process.cwd(), '..', card.file);
-    try {
-      const cardConfig = loadConfigByPath(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`
-        );
-      }
-
-      // Path.join with a single argument will strip off any relative prefixing such as './'
-      const entryPointPath = path.join(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 = {
-  loadConfigByPath,
-  loadExtensionConfig,
-  loadConfig,
-};

package/cli/run.js

@@ -1,62 +0,0 @@
-#!/usr/bin/env node
-
-const { parseArgs, showHelp } = require('../cli/utils');
-const {
-  buildAllExtensions,
-  buildSingleExtension,
-  DevModeInterface,
-} = require('../index');
-
-const path = require('path');
-const { MAIN_APP_CONFIG, OUTPUT_DIR } = require('../lib/constants');
-const inquirer = require('inquirer');
-const { loadConfigByPath, loadExtensionConfig } = require('./config');
-
-// 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) {
-    const extensionPath = process.cwd(); // Assumed to be /path/to/src/app/extensions
-    const appPath = path.join(extensionPath, '..');
-    const appConfig = loadConfigByPath(path.join(appPath, MAIN_APP_CONFIG));
-
-    let extensionConfig;
-    if (extension) {
-      const allExtensionsConfig = loadExtensionConfig(appConfig, appPath);
-      extensionConfig =
-        allExtensionsConfig[path.join(extensionPath, extension)];
-    }
-    await DevModeInterface.setup({
-      promptUser: inquirer.createPromptModule(),
-      components: {
-        [appConfig.name]: {
-          config: appConfig,
-          path: path.join(extensionPath, '..'),
-        },
-      },
-      extensionConfig,
-    });
-
-    await DevModeInterface.start({});
-  } else if (BUILD_MODE) {
-    if (extension) {
-      buildSingleExtension({
-        file: extension,
-        outputDir: OUTPUT_DIR,
-      });
-    } else {
-      buildAllExtensions({ outputDir: OUTPUT_DIR });
-    }
-  }
-})();
-
-async function shutdown() {
-  await DevModeInterface.cleanup();
-  process.exit(0);
-}
-
-process.on('SIGINT', shutdown);
-process.on('SIGTERM', shutdown);

package/cli/utils.js

@@ -1,67 +0,0 @@
-const { logger } = require('@hubspot/cli-lib/logger');
-const commandLineArgs = require('command-line-args');
-const commandLineUsage = require('command-line-usage');
-
-function parseArgs() {
-  const mainDefinitions = [{ name: 'command', defaultOption: true }];
-  const mainOptions = commandLineArgs(mainDefinitions, {
-    stopAtFirstUnknown: true,
-  });
-  const argv = mainOptions._unknown || [];
-  const DEV_MODE = mainOptions.command === 'dev';
-  const BUILD_MODE = mainOptions.command === 'build';
-
-  const optionDefinitions = [
-    { name: 'port', alias: 'p', type: Number },
-    { name: 'extension', alias: 'e', type: String },
-    { name: 'help', alias: 'h', type: Boolean },
-  ];
-
-  const options = commandLineArgs(
-    optionDefinitions,
-    DEV_MODE || BUILD_MODE ? { argv } : {}
-  );
-
-  return { DEV_MODE, BUILD_MODE, ...options };
-}
-
-function showHelp(OUTPUT_DIR) {
-  const sections = [
-    {
-      header: 'HubSpot UI Extensions Local Dev Server',
-      content: `Used for local development of HubSpot extensions.  Built assets can be found in the ${OUTPUT_DIR} directory`,
-    },
-    {
-      header: 'Available Commands',
-      content: [
-        { name: 'dev', summary: 'starts the local development server' },
-        { name: 'build', summary: 'runs a build of your extensions' },
-      ],
-    },
-    {
-      header: 'Options',
-      optionList: [
-        {
-          name: 'extension',
-          alias: 'e',
-          typeLabel: '{underline file}',
-          description:
-            'The extension entrypoint file to build or start local development for',
-        },
-        {
-          name: 'help',
-          alias: 'h',
-          description: 'Print this usage guide.',
-        },
-      ],
-    },
-  ];
-  const usage = commandLineUsage(sections);
-  logger.info(usage);
-  process.exit(0);
-}
-
-module.exports = {
-  parseArgs,
-  showHelp,
-};

package/index.js

@@ -1,14 +0,0 @@
-const {
-  remoteBuild,
-  buildAllExtensions,
-  buildSingleExtension,
-} = require('./lib/build');
-
-const DevModeInterface = require('./lib/DevModeInterface');
-
-module.exports = {
-  remoteBuild,
-  buildAllExtensions,
-  buildSingleExtension,
-  DevModeInterface,
-};

package/lib/DevModeInterface.js

@@ -1,131 +0,0 @@
-const { startDevMode } = require('./dev');
-const path = require('path');
-const { OUTPUT_DIR } = require('./constants');
-const { loadExtensionConfig } = require('../cli/config');
-const { logger, setLogLevel, LOG_LEVEL } = require('@hubspot/cli-lib/logger');
-
-class DevModeInterface {
-  _setDataFromExtensionConfig(extensionConfig) {
-    this.config = extensionConfig;
-    this.appName = extensionConfig.data.appName;
-    this.title = extensionConfig.data.title;
-  }
-
-  _generateAppExtensionMappings(components) {
-    // Loop over all of the app configs that are passed in
-    const allComponentNames = Object.keys(components);
-
-    return allComponentNames.reduce((appExtensionMappings, componentName) => {
-      const component = components[componentName];
-      if (!component.config.extensions?.crm?.cards) {
-        return appExtensionMappings; // It's not an app
-      }
-
-      this.cardConfigs = component.config.extensions.crm.cards.map(card =>
-        path.join(component.path, card.file)
-      );
-
-      // Load all of the extension configs for a particular app.json file
-      const extensionsConfigForApp = loadExtensionConfig(
-        component.config,
-        component.path
-      );
-
-      const extensionFilePaths = Object.keys(extensionsConfigForApp);
-      // Loop over the loaded extension configs and generate the list of choices to use to prompt the user for input
-      extensionFilePaths.forEach(extensionPath => {
-        const extensionConfig = extensionsConfigForApp[extensionPath];
-        appExtensionMappings.push({
-          name: `${componentName}/${extensionConfig.data.title}`,
-          value: extensionConfig,
-        });
-      });
-
-      return appExtensionMappings;
-    }, []);
-  }
-
-  async setup({
-    debug = false,
-    accountId,
-    httpClient,
-    promptUser,
-    components,
-    extensionConfig,
-    onUploadRequired,
-  }) {
-    setLogLevel(debug ? LOG_LEVEL.DEBUG : LOG_LEVEL.LOG);
-    this.accountId = accountId;
-    this.httpClient = httpClient;
-    this.onUploadRequired = onUploadRequired;
-    if (extensionConfig) {
-      this._setDataFromExtensionConfig(extensionConfig);
-      return;
-    }
-
-    const choices = this._generateAppExtensionMappings(components);
-
-    if (choices.length === 0) {
-      throw new Error('No extensions to run');
-    } else if (choices.length === 1) {
-      this._setDataFromExtensionConfig(choices[0].value);
-    } else {
-      const answers = await promptUser({
-        type: 'list',
-        name: 'extension',
-        message: 'Which extension would you like to run?',
-        choices,
-      });
-      this._setDataFromExtensionConfig(answers.extension);
-    }
-  }
-
-  // The contract is for this to be async, so eslint can chill
-  // eslint-disable-next-line require-await
-  async fileChange(filePath, __event) {
-    if (
-      this.cardConfigs &&
-      this.cardConfigs.includes(filePath) &&
-      this.onUploadRequired
-    ) {
-      this.onUploadRequired();
-    }
-  }
-
-  async start({ debug = null }) {
-    if (debug !== null) {
-      setLogLevel(debug ? LOG_LEVEL.DEBUG : LOG_LEVEL.LOG);
-    }
-    if (!this.config || !this.config.path) {
-      throw new Error(
-        'Unable to load the required extension configuration files'
-      );
-    }
-    const appPath = this.config.path;
-
-    // Pass options from the CLI for running app functions locally
-    const functionsConfig = {
-      app: { path: appPath },
-      accountId: this.accountId,
-      httpClient: this.httpClient,
-    };
-
-    this.shutdown = await startDevMode({
-      extensionConfig: this.config,
-      outputDir: path.join(this.config.extensionPath, OUTPUT_DIR),
-      functionsConfig,
-      root: appPath,
-      cardConfigs: this.cardConfigs || [],
-    });
-
-    logger.info(`Running extension '${this.title}' from app '${this.appName}'`);
-  }
-
-  async cleanup() {
-    if (this.shutdown) {
-      await this.shutdown();
-    }
-  }
-}
-
-module.exports = new DevModeInterface();

package/lib/build.js

@@ -1,86 +0,0 @@
-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('../cli/config');
-const codeInjectionPlugin = require('./plugins/codeInjectionPlugin');
-
-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,
-    });
-  }
-}
-
-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 }), codeInjectionPlugin({ file })],
-      },
-      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/constants.js

@@ -1,39 +0,0 @@
-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'],
-  output: {
-    // Maps libs to the variables to be injected via the window
-    globals: {
-      react: 'React',
-      '@remote-ui/react': 'RemoteUI',
-    },
-    extend: true,
-  },
-};
-
-const EXTENSIONS_MESSAGE_VERSION = 1;
-const WEBSOCKET_MESSAGE_VERSION = 0;
-
-const SERVER_CAPABILITIES = [
-  // Supports running app functions locally
-  'app-functions-local-dev',
-];
-
-module.exports = {
-  ROLLUP_OPTIONS,
-  OUTPUT_DIR,
-  MAIN_APP_CONFIG,
-  MANIFEST_FILE,
-  EXTENSIONS_MESSAGE_VERSION,
-  VITE_DEFAULT_PORT,
-  WEBSOCKET_MESSAGE_VERSION,
-  WEBSOCKET_PORT,
-  SERVER_CAPABILITIES,
-};