@hubspot/ui-extensions-dev-server 0.10.1 → 1.0.0

package/dist/lib/DevModeUnifiedInterface.js

@@ -1,88 +1,70 @@
-"use strict";
-/* hs-eslint ignored failing-rules */
-/* eslint-disable hubspot-dev/no-unsupported-ts-syntax */
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DevModeUnifiedInterfaceNonSingleton = void 0;
-const path_1 = __importDefault(require("path"));
-const constants_1 = require("./constants");
-const types_1 = require("./types");
-const DevModeParentInterface_1 = require("./DevModeParentInterface");
-const utils_1 = require("./utils");
+import path from 'path';
+import { SUPPORTED_EXTENSION_TYPES } from "./constants.js";
+import { UnifiedComponentTypes, } from "./types.js";
+import { DevModeParentInterface } from "./DevModeParentInterface.js";
+import { getUrlSafeFileName } from "./utils.js";
 function getComponentName(componentType) {
-    if (componentType === types_1.UnifiedComponentTypes.SETTINGS) {
+    if (componentType === UnifiedComponentTypes.SETTINGS) {
         return 'Settings';
     }
-    if (componentType === types_1.UnifiedComponentTypes.PAGE) {
+    if (componentType === UnifiedComponentTypes.PAGE) {
         return 'App Home';
     }
 }
-class DevModeUnifiedInterface extends DevModeParentInterface_1.DevModeParentInterface {
+class DevModeUnifiedInterface extends DevModeParentInterface {
     _generateAppExtensionMappings(components, profileData) {
-        var _a, _b, _c, _d;
         const mappings = [];
         // Loop over all of the components that are passed in
         const allComponentUids = Object.keys(components);
         // Find the app component
         const appUid = allComponentUids.find((componentUid) => {
             return (components[componentUid].componentType ===
-                types_1.UnifiedComponentTypes.APPLICATION);
+                UnifiedComponentTypes.APPLICATION);
         });
         // This should fail a lot sooner (on the cli side), but added this just in case.
         if (!appUid) {
-            this.logger.error('Application configuration is missing.');
+            // TODO: Add this once logger is set up on parent class
+            // this.logger.error('Application configuration is missing.');
             return mappings;
         }
         const appData = components[appUid];
         // Use the app data to generate the app config in the expected shape, to match old projects.
         const appConfig = {
             name: appData.config.name,
-            description: (_a = appData.config) === null || _a === void 0 ? void 0 : _a.description,
+            description: appData.config?.description,
             uid: appData.uid,
             extensions: {
                 crm: {
                     cards: [],
                 },
             },
-            auth: (_b = appData.config) === null || _b === void 0 ? void 0 : _b.auth,
-            support: (_c = appData.config) === null || _c === void 0 ? void 0 : _c.support,
+            auth: appData.config?.auth,
+            support: appData.config?.support,
             // All unified apps are currently "public" meaning they don't support serverless and do support a proxy.
             // The determination of what is "public" and "private" as it relates to our usage is still up in the air.
             isPublicApp: true,
-            allowedUrls: ((_d = appData.config) === null || _d === void 0 ? void 0 : _d.permittedUrls)
+            allowedUrls: appData.config?.permittedUrls
                 ? Object.values(appData.config.permittedUrls).flat()
                 : [],
             variables: profileData || {},
         };
         // Then get all the supported extensions
         const extensionUids = allComponentUids.filter((componentUid) => {
-            return constants_1.SUPPORTED_EXTENSION_TYPES.includes(components[componentUid].componentType);
+            return SUPPORTED_EXTENSION_TYPES.includes(components[componentUid].componentType);
         });
         // Build the extension mapping data
         extensionUids.forEach((extensionUid) => {
-            var _a;
             const extension = components[extensionUid];
             // Update the extension entrypoint to be "relative" to the extension directory (eg from /app/card/card.jsx to ./card.jsx)
-            extension.config.entrypoint = `./${path_1.default.basename(extension.config.entrypoint)}`;
+            extension.config.entrypoint = `./${path.basename(extension.config.entrypoint)}`;
             // Hardcode the extension name if this is a settings extension (the user does not provide a name for their settings card).
-            if (extension.componentType === types_1.UnifiedComponentTypes.SETTINGS ||
-                extension.componentType === types_1.UnifiedComponentTypes.PAGE) {
-                extension.config.name = (_a = getComponentName(extension.componentType)) !== null && _a !== void 0 ? _a : '';
+            if (extension.componentType === UnifiedComponentTypes.SETTINGS ||
+                extension.componentType === UnifiedComponentTypes.PAGE) {
+                extension.config.name = getComponentName(extension.componentType) ?? '';
             }
             // Add them to the app config
             switch (extension.componentType) {
-                case types_1.UnifiedComponentTypes.CARD:
+                case UnifiedComponentTypes.CARD:
                 default:
                     appConfig.extensions.crm.cards.push({
                         file: extension.config.entrypoint,
@@ -90,8 +72,8 @@ class DevModeUnifiedInterface extends DevModeParentInterface_1.DevModeParentInte
             }
             // Generate the name and other extension data for the mapping.
             const extensionName = `${appData.config.name}/${extension.config.name}`;
-            const extensionOutput = (0, utils_1.getUrlSafeFileName)(path_1.default.resolve(extension.localDev.componentRoot, extension.config.entrypoint));
-            const filePath = path_1.default.resolve(extension.localDev.componentRoot, extension.config.entrypoint);
+            const extensionOutput = getUrlSafeFileName(path.resolve(extension.localDev.componentRoot, extension.config.entrypoint));
+            const filePath = path.resolve(extension.localDev.componentRoot, extension.config.entrypoint);
             // Build the config in the correct shape
             const extensionData = {
                 title: extension.config.name,
@@ -127,13 +109,10 @@ class DevModeUnifiedInterface extends DevModeParentInterface_1.DevModeParentInte
         });
         return mappings;
     }
-    setup(args) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            args.choices = this._generateAppExtensionMappings(args.components, (_a = args.profileData) !== null && _a !== void 0 ? _a : {});
-            yield this.parentSetup(args);
-        });
+    async setup(args) {
+        args.choices = this._generateAppExtensionMappings(args.components, args.profileData ?? {});
+        await this.parentSetup(args);
     }
 }
-exports.DevModeUnifiedInterfaceNonSingleton = DevModeUnifiedInterface;
-exports.default = new DevModeUnifiedInterface();
+export { DevModeUnifiedInterface as DevModeUnifiedInterfaceNonSingleton };
+export default new DevModeUnifiedInterface();

package/dist/lib/DevServerState.d.ts

@@ -1,12 +1,12 @@
-import { AppConfig, ExtensionOutputConfig, ExtensionMetadata, Logger, PlatformVersion } from './types';
+import { AppConfig, ExtensionOutputConfig, ExtensionMetadata, Logger, PlatformVersion } from './types.ts';
 import { ServiceConfiguration, ProxyServiceConfig } from '@hubspot/app-functions-dev-server';
+import { ExtensionsWebSocket } from './ExtensionsWebSocket.ts';
 type DevServerStateLocalDevUrlMapping = ProxyServiceConfig['localDevUrlMapping'] | undefined;
 interface DevServerStateArgs {
     localDevUrlMapping?: DevServerStateLocalDevUrlMapping;
     extensionConfigs?: ExtensionOutputConfig[];
     accountId: number | undefined;
     expressPort: number;
-    webSocketPort: number;
     platformVersion: PlatformVersion;
     logger: Logger;
     urls: {
@@ -16,7 +16,6 @@ interface DevServerStateArgs {
     appConfig?: AppConfig;
 }
 export declare class DevServerState {
-    private _webSocketPort;
     private _expressPort;
     private _functionsConfig;
     private _localDevUrlMapping;
@@ -24,17 +23,22 @@ export declare class DevServerState {
     private _appPath;
     private _extensionsMetadata;
     private _portalId?;
+    private _mutableState;
     logger: Logger;
     appConfig?: AppConfig;
-    constructor({ localDevUrlMapping, extensionConfigs, accountId, expressPort, webSocketPort, platformVersion, logger, urls, appConfig, }: DevServerStateArgs);
+    constructor({ localDevUrlMapping, extensionConfigs, accountId, expressPort, platformVersion, logger, urls, appConfig, }: DevServerStateArgs);
     get portalId(): number | undefined;
-    get webSocketPort(): number;
     get expressPort(): number;
     get extensionsMetadata(): ExtensionMetadata[];
     get functionsConfig(): Partial<ServiceConfiguration>;
     get outputDir(): string;
     get appPath(): string;
     get localDevUrlMapping(): DevServerStateLocalDevUrlMapping;
+    get extensionsWebSocket(): ExtensionsWebSocket | undefined;
+    set extensionsWebSocket(ws: ExtensionsWebSocket);
+    getExtensionsWebSocket(): ExtensionsWebSocket;
     isPublicApp(): boolean;
+    setWebSocketSetupCallback(callback: () => void): void;
+    triggerWebSocketSetup(): void;
 }
 export {};

package/dist/lib/DevServerState.js

@@ -1,13 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DevServerState = void 0;
-const constants_1 = require("./constants");
-const path_1 = __importDefault(require("path"));
-class DevServerState {
-    constructor({ localDevUrlMapping, extensionConfigs, accountId, expressPort, webSocketPort, platformVersion, logger, urls, appConfig, }) {
+import { OUTPUT_DIR } from "./constants.js";
+import path from 'path';
+export class DevServerState {
+    _expressPort;
+    _functionsConfig;
+    _localDevUrlMapping;
+    _outputDir;
+    _appPath;
+    _extensionsMetadata;
+    _portalId;
+    _mutableState = {};
+    logger;
+    appConfig;
+    constructor({ localDevUrlMapping, extensionConfigs, accountId, expressPort, platformVersion, logger, urls, appConfig, }) {
         if (!extensionConfigs) {
             throw new Error('Unable to load the required extension configuration files');
         }
@@ -25,12 +29,11 @@ class DevServerState {
                 },
             });
         });
-        this._webSocketPort = webSocketPort;
         this._expressPort = expressPort;
         this._extensionsMetadata = extensionsMetadata;
         this._appPath = extensionConfigs[0].path;
         this._portalId = accountId;
-        this._outputDir = path_1.default.join(this._appPath, constants_1.OUTPUT_DIR);
+        this._outputDir = path.join(this._appPath, OUTPUT_DIR);
         // Pass options from the CLI for running app functions locally
         this._functionsConfig = {
             app: { path: this._appPath },
@@ -47,9 +50,6 @@ class DevServerState {
     get portalId() {
         return this._portalId;
     }
-    get webSocketPort() {
-        return this._webSocketPort;
-    }
     get expressPort() {
         return this._expressPort;
     }
@@ -68,9 +68,28 @@ class DevServerState {
     get localDevUrlMapping() {
         return this._localDevUrlMapping;
     }
+    get extensionsWebSocket() {
+        return this._mutableState.extensionsWebSocket;
+    }
+    set extensionsWebSocket(ws) {
+        this._mutableState.extensionsWebSocket = ws;
+    }
+    getExtensionsWebSocket() {
+        if (!this._mutableState.extensionsWebSocket) {
+            throw new Error('ExtensionsWebSocket not initialized. Server must be started first.');
+        }
+        return this._mutableState.extensionsWebSocket;
+    }
     isPublicApp() {
-        var _a;
-        return !!((_a = this.appConfig) === null || _a === void 0 ? void 0 : _a.isPublicApp);
+        return !!this.appConfig?.isPublicApp;
+    }
+    setWebSocketSetupCallback(callback) {
+        this._mutableState.webSocketSetupCallback = callback;
+    }
+    triggerWebSocketSetup() {
+        if (this._mutableState.webSocketSetupCallback) {
+            this._mutableState.webSocketSetupCallback();
+            this._mutableState.webSocketSetupCallback = undefined;
+        }
     }
 }
-exports.DevServerState = DevServerState;

package/dist/lib/ExtensionsWebSocket.d.ts

@@ -0,0 +1,25 @@
+import { Server } from 'http';
+import { IncomingMessage } from 'http';
+import { WebSocket } from 'ws';
+import { DevServerState } from './DevServerState.ts';
+export declare const ALLOWED_ORIGIN_PATTERNS: RegExp[];
+export declare function isAllowedOrigin(origin: string | undefined): boolean;
+type WebSocketMessage = {
+    event: string;
+} & Record<string, unknown>;
+export declare class ExtensionsWebSocket {
+    private wss;
+    private logger;
+    private keepAliveIntervalId?;
+    private clientAliveness;
+    constructor(httpServer: Server, devServerState: DevServerState);
+    private setupUpgradeHandler;
+    private setupErrorHandlers;
+    private setupClientHandlers;
+    private startKeepAlive;
+    broadcast(message: WebSocketMessage): void;
+    onConnection(handler: (ws: WebSocket, request: IncomingMessage) => void): void;
+    get clientCount(): number;
+    close(): Promise<void>;
+}
+export {};

package/dist/lib/ExtensionsWebSocket.js

@@ -0,0 +1,110 @@
+import { WebSocket, WebSocketServer } from 'ws';
+export const ALLOWED_ORIGIN_PATTERNS = [
+    /^https?:\/\/localhost(:\d+)?$/,
+    /^https?:\/\/([\w-]+\.)?hubspot(qa)?\.com(:\d+)?$/,
+];
+export function isAllowedOrigin(origin) {
+    if (!origin)
+        return false;
+    return ALLOWED_ORIGIN_PATTERNS.some((pattern) => pattern.test(origin));
+}
+export class ExtensionsWebSocket {
+    wss;
+    logger;
+    keepAliveIntervalId;
+    clientAliveness = new WeakMap();
+    constructor(httpServer, devServerState) {
+        this.logger = devServerState.logger;
+        this.wss = new WebSocketServer({ noServer: true });
+        this.setupUpgradeHandler(httpServer);
+        this.setupErrorHandlers();
+        this.startKeepAlive();
+    }
+    setupUpgradeHandler(httpServer) {
+        httpServer.on('upgrade', (request, socket, head) => {
+            if (!isAllowedOrigin(request.headers.origin)) {
+                this.logger.debug(`Rejected WebSocket: ${request.headers.origin}`);
+                socket.destroy();
+                return;
+            }
+            this.wss.handleUpgrade(request, socket, head, (ws) => {
+                this.setupClientHandlers(ws);
+                this.wss.emit('connection', ws, request);
+            });
+        });
+    }
+    setupErrorHandlers() {
+        this.wss.on('error', (error) => {
+            this.logger.error(`WebSocket server error: ${error}`);
+        });
+    }
+    setupClientHandlers(ws) {
+        ws.on('error', (error) => {
+            this.logger.debug(`Client error: ${error.message}`);
+        });
+        ws.on('close', (code, reason) => {
+            this.logger.debug(`Client disconnected: ${code} ${reason}`);
+        });
+        ws.on('pong', () => {
+            this.clientAliveness.set(ws, true);
+        });
+    }
+    startKeepAlive() {
+        this.keepAliveIntervalId = setInterval(() => {
+            this.wss.clients.forEach((client) => {
+                if (this.clientAliveness.get(client) === false) {
+                    return client.terminate();
+                }
+                this.clientAliveness.set(client, false);
+                client.ping();
+            });
+        }, 30000);
+    }
+    broadcast(message) {
+        if (this.wss.clients.size === 0) {
+            this.logger.debug('No clients connected, message not sent');
+            return;
+        }
+        const data = JSON.stringify(message);
+        let successCount = 0;
+        let failCount = 0;
+        this.wss.clients.forEach((client) => {
+            if (client.readyState === WebSocket.OPEN) {
+                try {
+                    client.send(data);
+                    successCount++;
+                }
+                catch (error) {
+                    failCount++;
+                    this.logger.debug(`Failed to send to client: ${error}`);
+                }
+            }
+        });
+        if (failCount > 0) {
+            this.logger.warn(`Sent to ${successCount} clients, ${failCount} failed`);
+        }
+    }
+    onConnection(handler) {
+        this.wss.on('connection', handler);
+    }
+    get clientCount() {
+        return this.wss.clients.size;
+    }
+    async close() {
+        if (this.keepAliveIntervalId) {
+            clearInterval(this.keepAliveIntervalId);
+        }
+        this.wss.clients.forEach((client) => {
+            this.logger.debug('Terminating WebSocket client connection');
+            client.terminate();
+        });
+        return new Promise((resolve, reject) => {
+            this.wss.close((err) => {
+                if (err)
+                    reject(err);
+                else
+                    resolve();
+            });
+        });
+    }
+}

package/dist/lib/__mocks__/config.d.ts

@@ -0,0 +1,2 @@
+import { LocalAppConfig } from '../types.ts';
+export declare const localConfig: LocalAppConfig;

package/dist/lib/__mocks__/config.js

@@ -0,0 +1,5 @@
+export const localConfig = {
+    proxy: {
+        'https://example.com': 'https://google.com',
+    },
+};

package/dist/lib/__mocks__/isExtensionFile.d.ts

@@ -0,0 +1,5 @@
+/**
+ * For testing purposes, we need to mock the isExtensionFile function when not testing it directly.
+ * This approximates the logic without requiring files to exist on disk.
+ */
+export declare function isExtensionFileMock(filepath: string, extensionPath: string): boolean;

package/dist/lib/__mocks__/isExtensionFile.js

@@ -0,0 +1,11 @@
+import path from 'path';
+/**
+ * For testing purposes, we need to mock the isExtensionFile function when not testing it directly.
+ * This approximates the logic without requiring files to exist on disk.
+ */
+export function isExtensionFileMock(filepath, extensionPath) {
+    const resolvedFilePath = path.resolve(process.cwd(), filepath);
+    const resolvedExtensionPath = path.resolve(process.cwd(), extensionPath);
+    const relativePath = path.relative(resolvedExtensionPath, resolvedFilePath);
+    return !relativePath.startsWith('..') && !path.isAbsolute(relativePath);
+}

package/dist/lib/__tests__/DevModeInterface.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/__tests__/DevModeInterface.spec.js

@@ -0,0 +1,155 @@
+import { describe, it, expect, vi, beforeEach, afterEach, } from 'vitest';
+import DevModeInterface from "../DevModeInterface.js";
+import { DevModeParentInterface } from "../DevModeParentInterface.js";
+import * as config from "../config.js";
+import { appComponent, appComponentTwoCards, appConfig, cardConfig, cardConfigTwo, } from "./fixtures/extensionConfig.js";
+import inquirer from 'inquirer';
+import { urls } from "./fixtures/urls.js";
+vi.mock('../config.ts', async () => {
+    const actual = await vi.importActual('../config.ts');
+    return {
+        ...actual,
+        loadExtensionConfig: vi.fn(),
+    };
+});
+vi.mock('inquirer', () => ({
+    default: {
+        createPromptModule: vi.fn(),
+    },
+}));
+describe('DevModeInterface', () => {
+    describe('setup', () => {
+        let parentSetupSpy;
+        let mockPromptModule;
+        let setActiveApp;
+        let logger;
+        const cardKey = `${appConfig.uid}::${cardConfig.data.uid}`;
+        const components = {
+            'my application': appComponent,
+        };
+        const expectedConfig = {
+            ...cardConfig,
+            appConfig,
+        };
+        beforeEach(() => {
+            DevModeInterface._reset();
+            logger = {
+                info: vi.fn(),
+                debug: vi.fn(),
+                warn: vi.fn(),
+                error: vi.fn(),
+            };
+            DevModeInterface.logger = logger;
+            mockPromptModule = vi.fn().mockResolvedValue({
+                extensions: [{ ...cardConfig, appConfig }],
+            });
+            vi.mocked(inquirer.createPromptModule).mockReturnValue(mockPromptModule);
+            setActiveApp = vi.fn(() => {
+                return Promise.resolve();
+            });
+            parentSetupSpy = vi.spyOn(DevModeParentInterface.prototype, 'parentSetup');
+            vi.mocked(config.loadExtensionConfig).mockReturnValue({
+                [cardKey]: cardConfig,
+            });
+        });
+        afterEach(() => {
+            vi.clearAllMocks();
+        });
+        it('should throw an error if no extensions are parsed from the provided components', async () => {
+            const components = {
+                'not a valid application': {
+                    config: {
+                        name: 'I do not have an extensions object',
+                    },
+                    path: '/path/to/my/application',
+                },
+            };
+            await expect(DevModeInterface.setup({
+                // @ts-expect-error - Trying to trigger an error with missing fields
+                components,
+                logger,
+                setActiveApp,
+                urls,
+            })).rejects.toThrowError('No extensions to run');
+        });
+        it('should directly set configs when there is only one choice', async () => {
+            await DevModeInterface.setup({
+                components,
+                logger,
+                setActiveApp,
+                urls,
+            });
+            expect(parentSetupSpy).toHaveBeenCalledWith({
+                choices: [
+                    {
+                        name: 'my application/Meme Card',
+                        value: expectedConfig,
+                    },
+                ],
+                components,
+                logger,
+                setActiveApp,
+                urls,
+            });
+            expect(DevModeInterface.configs).toStrictEqual([expectedConfig]);
+        });
+        it('should prompt the user when there is more than once choice', async () => {
+            const twoCardComponents = {
+                'my application': appComponentTwoCards,
+            };
+            const cardKeyTwo = `${appConfig.uid}::${cardConfigTwo.data.uid}`;
+            vi.mocked(config.loadExtensionConfig).mockReturnValue({
+                [cardKey]: cardConfig,
+                [cardKeyTwo]: cardConfigTwo,
+            });
+            await DevModeInterface.setup({
+                components: twoCardComponents,
+                logger,
+                setActiveApp,
+                urls,
+            });
+            expect(parentSetupSpy).toHaveBeenCalledWith({
+                choices: [
+                    {
+                        name: 'my application/Meme Card',
+                        value: expectedConfig,
+                    },
+                    {
+                        name: 'my application/Another Meme Card',
+                        value: {
+                            ...cardConfigTwo,
+                            appConfig,
+                        },
+                    },
+                ],
+                components: twoCardComponents,
+                logger,
+                setActiveApp,
+                urls,
+            });
+            expect(mockPromptModule).toHaveBeenCalledTimes(1);
+            expect(DevModeInterface.configs).toStrictEqual([expectedConfig]);
+        });
+        it('should call setActiveApp with the correct arg', async () => {
+            await DevModeInterface.setup({
+                components,
+                logger,
+                setActiveApp,
+                urls,
+            });
+            expect(setActiveApp).toHaveBeenCalledTimes(1);
+            expect(setActiveApp).toHaveBeenCalledWith(appConfig.uid);
+        });
+        it('should not run setup if it has already been configured', async () => {
+            DevModeInterface.isConfigured = true;
+            await DevModeInterface.setup({
+                components,
+                logger,
+                setActiveApp,
+                urls,
+            });
+            expect(logger.debug).toHaveBeenCalledWith('Dev server has already been configured, skipping');
+            expect(DevModeInterface.configs).toBeUndefined();
+        });
+    });
+});

package/dist/lib/__tests__/DevModeParentInterface.spec.d.ts

@@ -0,0 +1 @@
+export {};