@hubspot/ui-extensions-dev-server 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "",
   "type": "module",
   "bin": {
@@ -32,7 +32,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@hubspot/app-functions-dev-server": "0.10.2",
+    "@hubspot/app-functions-dev-server": "0.11.0",
     "chalk": "5.4.1",
     "commander": "13.1.0",
     "cors": "2.8.5",
@@ -68,15 +68,6 @@
   "engines": {
     "node": ">=18"
   },
-  "peerDependencies": {
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
-  },
   "gitHead": "3da4a07183d48528ef431d46a8d327c053c4fe94",
   "lint-staged": {
     "**/*.{js,ts}": [

package/dist/index.d.ts

@@ -1,4 +0,0 @@
-import { remoteBuild, buildSingleExtension } from './lib/build.ts';
-import DevModeInterface, { DevModeInterfaceNonSingleton } from './lib/DevModeInterface.ts';
-import DevModeUnifiedInterface, { DevModeUnifiedInterfaceNonSingleton } from './lib/DevModeUnifiedInterface.ts';
-export { remoteBuild, buildSingleExtension, DevModeInterface, DevModeInterfaceNonSingleton, DevModeUnifiedInterface, DevModeUnifiedInterfaceNonSingleton, };

package/dist/index.js

@@ -1,4 +0,0 @@
-import { remoteBuild, buildSingleExtension } from "./lib/build.js";
-import DevModeInterface, { DevModeInterfaceNonSingleton, } from "./lib/DevModeInterface.js";
-import DevModeUnifiedInterface, { DevModeUnifiedInterfaceNonSingleton, } from "./lib/DevModeUnifiedInterface.js";
-export { remoteBuild, buildSingleExtension, DevModeInterface, DevModeInterfaceNonSingleton, DevModeUnifiedInterface, DevModeUnifiedInterfaceNonSingleton, };

package/dist/lib/DevModeInterface.d.ts

@@ -1,9 +0,0 @@
-import { ProjectComponentMap, AppExtensionMapping, DevModeSetupArguments } from './types.ts';
-import { DevModeParentInterface } from './DevModeParentInterface.ts';
-declare class DevModeInterface extends DevModeParentInterface {
-    _generateAppExtensionMappings(components: ProjectComponentMap): AppExtensionMapping[];
-    setup(args: DevModeSetupArguments): Promise<void>;
-}
-export { DevModeInterface as DevModeInterfaceNonSingleton };
-declare const _default: DevModeInterface;
-export default _default;

package/dist/lib/DevModeInterface.js

@@ -1,36 +0,0 @@
-import { SUPPORTED_APP_TYPES, PUBLIC_APP } from "./constants.js";
-import { loadExtensionConfig } from "./config.js";
-import { DevModeParentInterface } from "./DevModeParentInterface.js";
-class DevModeInterface extends DevModeParentInterface {
-    _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 (!SUPPORTED_APP_TYPES.includes(component.type)) {
-                return appExtensionMappings; // It's not a modern app, skip it
-            }
-            // Load all of the extension configs for a particular app.json file
-            const extensionsConfigForApp = loadExtensionConfig(component.config, component.path);
-            const extensionConfigKeys = Object.keys(extensionsConfigForApp);
-            // Loop over the loaded extension configs and generate the list of choices to use to prompt the user for input
-            extensionConfigKeys.forEach((extensionKey) => {
-                const extensionConfig = extensionsConfigForApp[extensionKey];
-                if (extensionConfig.appConfig) {
-                    extensionConfig.appConfig.isPublicApp = component.type === PUBLIC_APP;
-                }
-                appExtensionMappings.push({
-                    name: `${componentName}/${extensionConfig.data.title}`,
-                    value: extensionConfig,
-                });
-            });
-            return appExtensionMappings;
-        }, []);
-    }
-    async setup(args) {
-        args.choices = this._generateAppExtensionMappings(args.components);
-        await this.parentSetup(args);
-    }
-}
-export { DevModeInterface as DevModeInterfaceNonSingleton };
-export default new DevModeInterface();

package/dist/lib/DevModeParentInterface.d.ts

@@ -1,19 +0,0 @@
-import { PlatformVersion, ProjectConfig, Logger, ExtensionOutputConfig, ProjectComponentMap, AppExtensionMapping, DevModeStartArguments, DevModeSetupArguments, UnifiedProjectComponentMap, DevModeBaseSetupArguments } from './types.ts';
-import { DevServerState } from './DevServerState.ts';
-export declare abstract class DevModeParentInterface {
-    configs?: ExtensionOutputConfig[];
-    devServerState?: DevServerState;
-    onUploadRequired?: VoidFunction;
-    logger: Logger;
-    urls?: DevModeSetupArguments['urls'];
-    isConfigured?: boolean;
-    isRunning?: boolean;
-    shutdown?: () => Promise<void>;
-    protected abstract _generateAppExtensionMappings(components: ProjectComponentMap | UnifiedProjectComponentMap): AppExtensionMapping[];
-    _getPlatformVersion(projectConfig?: ProjectConfig): PlatformVersion;
-    _reset(): void;
-    parentSetup({ onUploadRequired, logger, urls, setActiveApp, choices, }: DevModeBaseSetupArguments): Promise<void>;
-    start({ requestPorts, accountId, projectConfig, }: DevModeStartArguments): Promise<void>;
-    fileChange(filePath: string, __event: unknown): Promise<void>;
-    cleanup(): Promise<void>;
-}

package/dist/lib/DevModeParentInterface.js

@@ -1,181 +0,0 @@
-import { PLATFORM_VERSION } from "./constants.js";
-import { startDevMode } from "./dev.js";
-import { loadLocalConfig } from "./config.js";
-import { throwUnhandledPlatformVersionError } from "./utils.js";
-import { DevServerState } from "./DevServerState.js";
-import inquirer from 'inquirer';
-import { EXPRESS_DEFAULT_PORT, EXPRESS_SERVER_ID } from "./constants.js";
-const defaultLogger = {
-    info: (...args) => {
-        console.log(...args);
-    },
-    debug: (...args) => {
-        console.log(...args);
-    },
-    warn: (...args) => {
-        console.error(...args);
-    },
-    error: (...args) => {
-        console.error(...args);
-    },
-};
-export class DevModeParentInterface {
-    configs;
-    devServerState;
-    onUploadRequired;
-    logger = defaultLogger;
-    urls;
-    isConfigured;
-    isRunning;
-    shutdown;
-    _getPlatformVersion(projectConfig) {
-        const { platformVersion } = projectConfig ?? {};
-        if (!platformVersion) {
-            return PLATFORM_VERSION.V20231;
-        }
-        switch (platformVersion) {
-            case PLATFORM_VERSION.V20231:
-                return PLATFORM_VERSION.V20231;
-            case PLATFORM_VERSION.V20232:
-                return PLATFORM_VERSION.V20232;
-            case PLATFORM_VERSION.V20251:
-                return PLATFORM_VERSION.V20251;
-            case PLATFORM_VERSION.V20252:
-            case PLATFORM_VERSION.UNSTABLE:
-                return PLATFORM_VERSION.V20252;
-            default:
-                return throwUnhandledPlatformVersionError(platformVersion);
-        }
-    }
-    _reset() {
-        this.configs = undefined;
-        this.devServerState = undefined;
-        this.onUploadRequired = undefined;
-        this.shutdown = undefined;
-        this.logger = defaultLogger;
-        this.urls = undefined;
-        this.isConfigured = false;
-        this.isRunning = false;
-    }
-    async parentSetup({ onUploadRequired, logger, urls, setActiveApp, choices = [], }) {
-        if (this.isConfigured) {
-            logger.debug('Dev server has already been configured, skipping');
-            return;
-        }
-        this.logger = logger;
-        this.onUploadRequired = onUploadRequired;
-        this.urls = urls;
-        if (choices.length === 0) {
-            throw new Error('No extensions to run');
-        }
-        else if (choices.length === 1) {
-            this.configs = [choices[0].value];
-        }
-        else {
-            const promptModule = inquirer.createPromptModule();
-            const answers = await promptModule({
-                type: 'checkbox',
-                name: 'extensions',
-                message: 'Which extension(s) would you like to run?',
-                validate: (selectedChoices) => {
-                    if (!selectedChoices || selectedChoices.length === 0) {
-                        return 'Select at least one extension to run';
-                    }
-                    const configs = selectedChoices
-                        .map((choice) => choice.value)
-                        .filter((value) => {
-                        return (typeof value === 'object' && value !== null && 'data' in value);
-                    });
-                    if (configs.length !== selectedChoices.length) {
-                        return 'Invalid extension configuration';
-                    }
-                    const appNames = new Set(configs.map((config) => config.data.appName));
-                    if (appNames.size > 1) {
-                        return 'Running multiple extensions is only supported for a single application';
-                    }
-                    return true;
-                },
-                choices,
-            });
-            this.configs = answers.extensions;
-        }
-        this.isConfigured = true;
-        if (typeof setActiveApp === 'function') {
-            await setActiveApp(this.configs?.[0]?.appConfig?.uid);
-        }
-    }
-    async start({ requestPorts, accountId, projectConfig, }) {
-        this.logger.debug('Start function was invoked', {
-            accountId,
-            projectConfig,
-        });
-        if (this.isRunning) {
-            this.logger.debug('Dev server is already running, not starting again');
-            return;
-        }
-        let expressPort = EXPRESS_DEFAULT_PORT;
-        if (requestPorts) {
-            try {
-                const portData = await requestPorts([
-                    { instanceId: EXPRESS_SERVER_ID, port: EXPRESS_DEFAULT_PORT },
-                ]);
-                expressPort = portData[EXPRESS_SERVER_ID];
-            }
-            catch (e) {
-                if (e?.status === 409) {
-                    throw new Error('Another instance is already running. To proceed, please stop the existing server and try again.');
-                }
-                this.logger.debug('Call to port manager failed, using default ports');
-            }
-        }
-        const { proxy: localDevUrlMapping } = loadLocalConfig(this.configs?.[0]?.path || '', this.logger) || {};
-        try {
-            this.devServerState = new DevServerState({
-                localDevUrlMapping,
-                extensionConfigs: this.configs,
-                accountId,
-                platformVersion: this._getPlatformVersion(projectConfig),
-                expressPort,
-                logger: this.logger,
-                urls: this.urls,
-                appConfig: this.configs?.[0]?.appConfig,
-            });
-        }
-        catch (e) {
-            this.logger.debug('Error setting up DevServerState', e);
-            throw e;
-        }
-        try {
-            this.shutdown = await startDevMode(this.devServerState);
-        }
-        catch (e) {
-            this.logger.debug('Error starting dev mode', e);
-            throw e;
-        }
-        const { extensionsMetadata } = this.devServerState;
-        extensionsMetadata.forEach((metadata) => {
-            const { config: { data: { title, appName }, }, } = metadata;
-            this.logger.info(`Running extension '${title}' from app '${appName}'`);
-        });
-        this.isRunning = true;
-    }
-    // The contract is for this to be async, with the __event param. Eslint doesn't like it.
-    // eslint-disable-next-line require-await
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async fileChange(filePath, __event) {
-        if (!this.devServerState || !this.devServerState.extensionsMetadata) {
-            return;
-        }
-        const relevantConfigFileChanged = this.devServerState.extensionsMetadata.some((metadata) => metadata.config.extensionConfigPath === filePath);
-        if (relevantConfigFileChanged && this.onUploadRequired) {
-            this.onUploadRequired();
-        }
-    }
-    async cleanup() {
-        if (this.shutdown) {
-            await this.shutdown();
-        }
-        // Since the DevModeInterface is a singleton, we need to wipe out the state when we shutdown
-        this._reset();
-    }
-}

package/dist/lib/DevModeUnifiedInterface.d.ts

@@ -1,9 +0,0 @@
-import { AppExtensionMapping, UnifiedProjectComponentMap, UnifiedDevModeSetupArguments, ProfileVariables } from './types.ts';
-import { DevModeParentInterface } from './DevModeParentInterface.ts';
-declare class DevModeUnifiedInterface extends DevModeParentInterface {
-    _generateAppExtensionMappings(components: UnifiedProjectComponentMap, profileData?: ProfileVariables): AppExtensionMapping[];
-    setup(args: UnifiedDevModeSetupArguments): Promise<void>;
-}
-export { DevModeUnifiedInterface as DevModeUnifiedInterfaceNonSingleton };
-declare const _default: DevModeUnifiedInterface;
-export default _default;

package/dist/lib/DevModeUnifiedInterface.js

@@ -1,118 +0,0 @@
-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 === UnifiedComponentTypes.SETTINGS) {
-        return 'Settings';
-    }
-    if (componentType === UnifiedComponentTypes.PAGE) {
-        return 'App Home';
-    }
-}
-class DevModeUnifiedInterface extends DevModeParentInterface {
-    _generateAppExtensionMappings(components, profileData) {
-        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 ===
-                UnifiedComponentTypes.APPLICATION);
-        });
-        // This should fail a lot sooner (on the cli side), but added this just in case.
-        if (!appUid) {
-            // 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: appData.config?.description,
-            uid: appData.uid,
-            extensions: {
-                crm: {
-                    cards: [],
-                },
-            },
-            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: appData.config?.permittedUrls
-                ? Object.values(appData.config.permittedUrls).flat()
-                : [],
-            variables: profileData || {},
-        };
-        // Then get all the supported extensions
-        const extensionUids = allComponentUids.filter((componentUid) => {
-            return SUPPORTED_EXTENSION_TYPES.includes(components[componentUid].componentType);
-        });
-        // Build the extension mapping data
-        extensionUids.forEach((extensionUid) => {
-            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.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 === UnifiedComponentTypes.SETTINGS ||
-                extension.componentType === UnifiedComponentTypes.PAGE) {
-                extension.config.name = getComponentName(extension.componentType) ?? '';
-            }
-            // Add them to the app config
-            switch (extension.componentType) {
-                case UnifiedComponentTypes.CARD:
-                default:
-                    appConfig.extensions.crm.cards.push({
-                        file: extension.config.entrypoint,
-                    });
-            }
-            // Generate the name and other extension data for the mapping.
-            const extensionName = `${appData.config.name}/${extension.config.name}`;
-            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,
-                uid: extension.uid,
-                location: extension.config.location,
-                module: {
-                    file: filePath,
-                },
-                objectTypes: [],
-                appName: appData.config.name,
-                sourceId: `${appConfig.uid}::${extension.uid}`,
-            };
-            // Generate object types
-            if (extension.config.objectTypes) {
-                extension.config.objectTypes.forEach((objectType) => {
-                    extensionData.objectTypes.push({
-                        name: objectType,
-                    });
-                });
-            }
-            mappings.push({
-                name: extensionName,
-                value: {
-                    type: extension.componentType.toLowerCase(),
-                    data: extensionData,
-                    output: extensionOutput,
-                    path: appData.localDev.componentRoot,
-                    extensionPath: extension.localDev.componentRoot,
-                    extensionConfigPath: extension.localDev.componentConfigPath,
-                    appConfig,
-                },
-            });
-        });
-        return mappings;
-    }
-    async setup(args) {
-        args.choices = this._generateAppExtensionMappings(args.components, args.profileData ?? {});
-        await this.parentSetup(args);
-    }
-}
-export { DevModeUnifiedInterface as DevModeUnifiedInterfaceNonSingleton };
-export default new DevModeUnifiedInterface();

package/dist/lib/DevServerState.d.ts

@@ -1,44 +0,0 @@
-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;
-    platformVersion: PlatformVersion;
-    logger: Logger;
-    urls: {
-        api: string;
-        web: string;
-    };
-    appConfig?: AppConfig;
-}
-export declare class DevServerState {
-    private _expressPort;
-    private _functionsConfig;
-    private _localDevUrlMapping;
-    private _outputDir;
-    private _appPath;
-    private _extensionsMetadata;
-    private _portalId?;
-    private _mutableState;
-    logger: Logger;
-    appConfig?: AppConfig;
-    constructor({ localDevUrlMapping, extensionConfigs, accountId, expressPort, platformVersion, logger, urls, appConfig, }: DevServerStateArgs);
-    get portalId(): number | undefined;
-    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,95 +0,0 @@
-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');
-        }
-        const extensionsMetadata = [];
-        extensionConfigs.forEach((config) => {
-            const { appName, title, sourceId } = config.data;
-            extensionsMetadata.push({
-                config,
-                baseMessage: {
-                    appName,
-                    title,
-                    sourceId,
-                    callback: `http://hslocal.net:${expressPort}/${config.output}`,
-                    portalId: accountId,
-                },
-            });
-        });
-        this._expressPort = expressPort;
-        this._extensionsMetadata = extensionsMetadata;
-        this._appPath = extensionConfigs[0].path;
-        this._portalId = accountId;
-        this._outputDir = path.join(this._appPath, OUTPUT_DIR);
-        // Pass options from the CLI for running app functions locally
-        this._functionsConfig = {
-            app: { path: this._appPath },
-            accountId,
-            platformVersion,
-            hubspotApiOrigin: urls.api,
-            hubspotWebsiteOrigin: urls.web,
-        };
-        this._localDevUrlMapping = localDevUrlMapping;
-        this.logger = logger;
-        this.appConfig = appConfig;
-        Object.freeze(this);
-    }
-    get portalId() {
-        return this._portalId;
-    }
-    get expressPort() {
-        return this._expressPort;
-    }
-    get extensionsMetadata() {
-        return this._extensionsMetadata;
-    }
-    get functionsConfig() {
-        return this._functionsConfig;
-    }
-    get outputDir() {
-        return this._outputDir;
-    }
-    get appPath() {
-        return this._appPath;
-    }
-    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() {
-        return !!this.appConfig?.isPublicApp;
-    }
-    setWebSocketSetupCallback(callback) {
-        this._mutableState.webSocketSetupCallback = callback;
-    }
-    triggerWebSocketSetup() {
-        if (this._mutableState.webSocketSetupCallback) {
-            this._mutableState.webSocketSetupCallback();
-            this._mutableState.webSocketSetupCallback = undefined;
-        }
-    }
-}

package/dist/lib/ExtensionsWebSocket.d.ts

@@ -1,25 +0,0 @@
-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 {};