@hubspot/cli 8.0.0 → 8.0.2-experimental.0

package/bin/cli.js

@@ -33,6 +33,7 @@ import mcpCommand from '../commands/mcp.js';
 import upgradeCommand from '../commands/upgrade.js';
 import { uiLogger } from '../lib/ui/logger.js';
 import { initializeSpinniesManager } from '../lib/middleware/spinniesMiddleware.js';
+import { addCommandSuggestions } from '../lib/commandSuggestion.js';
 function getTerminalWidth() {
     const width = yargs().terminalWidth();
     if (width >= 100)
@@ -114,20 +115,22 @@ const argv = yargs(process.argv.slice(2))
     .command(completionCommand)
     .command(doctorCommand)
     .command(mcpCommand)
-    .command(upgradeCommand)
+    .command(upgradeCommand);
+const argvWithSuggestions = addCommandSuggestions(argv)
     .help()
     .alias('h', 'help')
     .recommendCommands()
     .demandCommand(1, '')
     .wrap(getTerminalWidth())
     .strict().argv;
-if ('help' in argv && argv.help !== undefined) {
+if ('help' in argvWithSuggestions && argvWithSuggestions.help !== undefined) {
     (async () => {
-        await trackHelpUsage(getCommandName(argv));
+        await trackHelpUsage(getCommandName(argvWithSuggestions));
     })();
 }
-if ('convertFields' in argv && argv.convertFields !== undefined) {
+if ('convertFields' in argvWithSuggestions &&
+    argvWithSuggestions.convertFields !== undefined) {
     (async () => {
-        await trackConvertFieldsUsage(getCommandName(argv));
+        await trackConvertFieldsUsage(getCommandName(argvWithSuggestions));
     })();
 }

package/commands/__tests__/getStarted.test.js

@@ -9,6 +9,8 @@ import { getProjectPackageJsonLocations, installPackages, } from '../../lib/depe
 import { GET_STARTED_OPTIONS } from '../../lib/constants.js';
 import { EXIT_CODES } from '../../lib/enums/exitCodes.js';
 import open from 'open';
+import { renderInteractive } from '../../ui/render.js';
+import { getGetStartedFlow } from '../../ui/components/GetStartedFlow.js';
 vi.mock('../../lib/prompts/promptUtils');
 vi.mock('../../lib/prompts/projectNameAndDestPrompt');
 vi.mock('../../lib/projects/config');
@@ -16,6 +18,8 @@ vi.mock('../../lib/errorHandlers');
 vi.mock('@hubspot/local-dev-lib/github');
 vi.mock('../../lib/dependencyManagement');
 vi.mock('@hubspot/local-dev-lib/config');
+vi.mock('../../ui/render');
+vi.mock('../../ui/components/GetStartedFlow');
 vi.mock('open');
 vi.mock('fs-extra', () => ({
     default: {
@@ -103,6 +107,14 @@ describe('commands/get-started', () => {
                 await getStartedCommand.handler(mockArgs);
                 expect(open).toHaveBeenCalledWith(expect.stringContaining('design-manager'), { url: true });
             });
+            it('should use Ink flow when v2 flag is enabled', async () => {
+                getGetStartedFlow.mockImplementation(() => null);
+                renderInteractive.mockResolvedValue(undefined);
+                await getStartedCommand.handler({ ...mockArgs, v2: true });
+                expect(renderInteractive).toHaveBeenCalled();
+                expect(promptUser).not.toHaveBeenCalled();
+                expect(process.exit).toHaveBeenCalledWith(EXIT_CODES.SUCCESS);
+            });
         });
         describe('App flow', () => {
             beforeEach(() => {

package/commands/getStarted.d.ts

@@ -1,7 +1,8 @@
-import { AccountArgs, YargsCommandModule, CommonArgs, ConfigArgs, EnvironmentArgs } from '../types/Yargs.js';
+import { AccountArgs, CommonArgs, ConfigArgs, EnvironmentArgs, YargsCommandModule } from '../types/Yargs.js';
 type GetStartedArgs = CommonArgs & ConfigArgs & AccountArgs & EnvironmentArgs & {
     name?: string;
     dest?: string;
+    v2?: boolean;
 };
 declare const getStartedCommand: YargsCommandModule<unknown, GetStartedArgs>;
 export default getStartedCommand;

package/commands/getStarted.js

@@ -1,27 +1,28 @@
+import { cloneGithubRepo } from '@hubspot/local-dev-lib/github';
+import { getCwd } from '@hubspot/local-dev-lib/path';
 import fs from 'fs-extra';
-import path from 'path';
 import open from 'open';
-import { getCwd } from '@hubspot/local-dev-lib/path';
-import { cloneGithubRepo } from '@hubspot/local-dev-lib/github';
+import path from 'path';
 import { commands } from '../lang/en.js';
-import { trackCommandMetadataUsage, trackCommandUsage, } from '../lib/usageTracking.js';
+import { GET_STARTED_OPTIONS, HUBSPOT_PROJECT_COMPONENTS_GITHUB_PATH, PROJECT_CONFIG_FILE, } from '../lib/constants.js';
 import { EXIT_CODES } from '../lib/enums/exitCodes.js';
-import { makeYargsBuilder } from '../lib/yargsUtils.js';
-import { promptUser } from '../lib/prompts/promptUtils.js';
+import { debugError, logError } from '../lib/errorHandlers/index.js';
+import { getProjectConfig, validateProjectConfig, writeProjectConfig, } from '../lib/projects/config.js';
+import { handleProjectUpload } from '../lib/projects/upload.js';
 import { projectNameAndDestPrompt } from '../lib/prompts/projectNameAndDestPrompt.js';
+import { promptUser } from '../lib/prompts/promptUtils.js';
 import { uiAccountDescription, uiFeatureHighlight, uiInfoSection, } from '../lib/ui/index.js';
 import { uiLogger } from '../lib/ui/logger.js';
-import { debugError } from '../lib/errorHandlers/index.js';
-import ProjectValidationError from '../lib/errors/ProjectValidationError.js';
-import { handleProjectUpload } from '../lib/projects/upload.js';
-import { PROJECT_CONFIG_FILE, GET_STARTED_OPTIONS, HUBSPOT_PROJECT_COMPONENTS_GITHUB_PATH, } from '../lib/constants.js';
-import { writeProjectConfig, getProjectConfig, validateProjectConfig, } from '../lib/projects/config.js';
-import { pollProjectBuildAndDeploy } from '../lib/projects/pollProjectBuildAndDeploy.js';
+import { trackCommandMetadataUsage, trackCommandUsage, } from '../lib/usageTracking.js';
+import { makeYargsBuilder } from '../lib/yargsUtils.js';
 import { isV2Project } from '../lib/projects/platformVersion.js';
-import { openLink } from '../lib/links.js';
-import { getStaticAuthAppInstallUrl } from '../lib/app/urls.js';
-import { getConfigAccountEnvironment } from '@hubspot/local-dev-lib/config';
+import { pollProjectBuildAndDeploy } from '../lib/projects/pollProjectBuildAndDeploy.js';
 import { fetchPublicAppsForPortal } from '@hubspot/local-dev-lib/api/appsDev';
+import { getConfigAccountEnvironment } from '@hubspot/local-dev-lib/config';
+import { getStaticAuthAppInstallUrl } from '../lib/app/urls.js';
+import ProjectValidationError from '../lib/errors/ProjectValidationError.js';
+import { openLink } from '../lib/links.js';
+import { runGetStartedV2 } from '../lib/getStarted/getStartedV2.js';
 const command = 'get-started';
 const describe = commands.getStarted.describe;
 async function handler(args) {
@@ -29,6 +30,22 @@ async function handler(args) {
     const env = getConfigAccountEnvironment(derivedAccountId);
     await trackCommandUsage('get-started', {}, derivedAccountId);
     const accountName = uiAccountDescription(derivedAccountId);
+    if (args.v2) {
+        try {
+            await runGetStartedV2({
+                ...args,
+                name: args.name,
+                dest: args.dest,
+            });
+            process.exit(EXIT_CODES.SUCCESS);
+            return;
+        }
+        catch (error) {
+            logError(error);
+            process.exit(EXIT_CODES.ERROR);
+            return;
+        }
+    }
     uiInfoSection(commands.getStarted.startTitle, () => {
         uiLogger.log(commands.getStarted.startDescription);
         uiLogger.log(commands.getStarted.guideOverview(accountName));
@@ -277,6 +294,12 @@ function getStartedBuilder(yargs) {
             describe: commands.getStarted.options.dest.describe,
             type: 'string',
         },
+        v2: {
+            describe: commands.getStarted.options.v2.describe,
+            type: 'boolean',
+            default: false,
+            hidden: true,
+        },
         'template-source': {
             describe: commands.getStarted.options.templateSource.describe,
             type: 'string',

package/lang/en.d.ts

@@ -16,10 +16,34 @@ export declare const commands: {
             name: {
                 describe: string;
             };
+            v2: {
+                describe: string;
+            };
             templateSource: {
                 describe: string;
             };
         };
+        v2: {
+            unknownError: string;
+            startTitle: string;
+            guideOverview: (accountName: string) => string;
+            projects: string;
+            runningProjectCreate: string;
+            templateSourceFlag: string;
+            runningInstallDeps: string;
+            installingDependenciesIn: (installPath: string) => string;
+            createdProjectSuccess: (projectName: string, projectDest: string) => string;
+            pressEnterToContinueDeploy: (accountName: string) => string;
+            prompts: {
+                selectOptionV2: string;
+                options: {
+                    app: string;
+                    cms: string;
+                    cmsTheme: string;
+                    cmsReactModule: string;
+                };
+            };
+        };
         startTitle: string;
         verboseDescribe: string;
         startDescription: string;
@@ -33,9 +57,12 @@ export declare const commands: {
         openedDeveloperOverview: string;
         prompts: {
             selectOption: string;
+            selectOptionV2: string;
             options: {
                 app: string;
                 cms: string;
+                cmsTheme: string;
+                cmsReactModule: string;
             };
             uploadProject: (accountName: string) => string;
             projectCreated: {
@@ -2918,14 +2945,13 @@ export declare const lib: {
         appDataNotFound: string;
         oauthAppRedirectUrlError: (redirectUrl: string) => string;
     };
-    LocalDevWebsocketServer: {
+    CLIWebsocketServer: {
         errors: {
-            notInitialized: (prefix: string) => string;
+            portManagerNotRunning: (prefix?: string) => string;
+            originNotAllowed: (origin?: string) => string;
             missingTypeField: (data: string) => string;
-            unknownMessageType: (type: string) => string;
             invalidJSON: (data: string) => string;
-            portManagerNotRunning: (prefix: string) => string;
-            originNotAllowed: (origin?: string) => string;
+            unknownMessageType: (type: string) => string;
         };
         logs: {
             startup: (port: number) => string;

package/lang/en.js

@@ -24,10 +24,34 @@ export const commands = {
             name: {
                 describe: 'Project name (cannot be changed)',
             },
+            v2: {
+                describe: 'Use the new v2 get-started experience',
+            },
             templateSource: {
                 describe: 'Path to custom GitHub repository from which to create project template',
             },
         },
+        v2: {
+            unknownError: 'An unknown error occurred',
+            startTitle: 'Welcome to the HubSpot Developer Platform!',
+            guideOverview: (accountName) => `This guide will walk you through deploying your first project to ${chalk.bold(accountName)}. To target a different account, exit this guide ${chalk.bold('(ctrl + c)')} and run ${uiCommandReference('hs account use')} before trying again.`,
+            projects: 'Projects are used to build a variety of components.',
+            runningProjectCreate: `Running \`${uiCommandReference('hs project create', false)}\` ...`,
+            templateSourceFlag: '--template-source=',
+            runningInstallDeps: `Running \`${uiCommandReference('hs project install-deps', false)}\` to initialize dependencies ...`,
+            installingDependenciesIn: (installPath) => `Installing dependencies in ${installPath}`,
+            createdProjectSuccess: (projectName, projectDest) => `[SUCCESS] Project ${chalk.bold(projectName)} was successfully created in ${projectDest}`,
+            pressEnterToContinueDeploy: (accountName) => `Press ${chalk.bold('<enter>')} to deploy this project to ${chalk.bold(accountName)} ...`,
+            prompts: {
+                selectOptionV2: 'Choose a component type to get started',
+                options: {
+                    app: 'App',
+                    cms: 'CMS assets',
+                    cmsTheme: 'CMS theme (coming soon)',
+                    cmsReactModule: 'CMS React module (coming soon)',
+                },
+            },
+        },
         startTitle: 'Welcome to HubSpot Development!',
         verboseDescribe: 'A step-by-step command to get you started with a HubSpot project.',
         startDescription: 'You can use the HubSpot CLI to build apps, CMS themes, and more.\n',
@@ -41,9 +65,12 @@ export const commands = {
         openedDeveloperOverview: 'HubSpot opened!',
         prompts: {
             selectOption: 'Are you looking to build apps or CMS assets?',
+            selectOptionV2: 'Choose a component type to get started',
             options: {
                 app: 'App',
                 cms: 'CMS assets',
+                cmsTheme: 'CMS theme (coming soon)',
+                cmsReactModule: 'CMS React module (coming soon)',
             },
             uploadProject: (accountName) => `Would you like to upload this project to account "${accountName}" now?`,
             projectCreated: {
@@ -1429,7 +1456,7 @@ export const commands = {
                     describe: 'The starting template.  Only applies when platform version is less than 2025.2.',
                 },
                 templateSource: {
-                    describe: 'Path to custom GitHub repository from which to create project template',
+                    describe: 'Path to custom GitHub repository from which to create project template. Only applies when platform version is less than 2025.2.',
                 },
                 platformVersion: {
                     describe: 'The target platform version for the new project.',
@@ -2941,17 +2968,16 @@ export const lib = {
         appDataNotFound: 'An error occurred while fetching data for your app.',
         oauthAppRedirectUrlError: (redirectUrl) => `${chalk.bold('No reponse from your OAuth service:')} ${redirectUrl}\nYour app needs a valid OAuth2 service to be installed for local dev. ${uiLink('Learn more', 'https://developers.hubspot.com/docs/apps/developer-platform/build-apps/authentication/oauth/working-with-oauth')}`,
     },
-    LocalDevWebsocketServer: {
+    CLIWebsocketServer: {
         errors: {
-            notInitialized: (prefix) => `${prefix}Error: Attempted to access websocket before initialization`,
+            portManagerNotRunning: (prefix) => `${prefix ? `${prefix} ` : ''}PortManagerServing must be running before starting WebsocketServer.`,
+            originNotAllowed: (origin) => `Connections from ${origin ? `origin ${origin}` : 'this origin'} are not allowed.`,
             missingTypeField: (data) => `Unsupported message received. Missing type field: ${data}`,
-            unknownMessageType: (type) => `Unsupported message received. Unknown message type: ${type}`,
             invalidJSON: (data) => `Unsupported message received. Invalid JSON: ${data}`,
-            portManagerNotRunning: (prefix) => `${prefix}Error: PortManagerServing must be running before starting LocalDevWebsocketServer.`,
-            originNotAllowed: (origin) => `Connections from ${origin ? `origin ${origin}` : 'this origin'} are not allowed.`,
+            unknownMessageType: (type) => `Unsupported message received. Unknown message type: ${type}`,
         },
         logs: {
-            startup: (port) => `LocalDevWebsocketServer running on port ${port}`,
+            startup: (port) => `WebsocketServer running on port ${port}`,
         },
     },
     LocalDevProcess: {

package/lib/CLIWebSocketServer.d.ts

@@ -0,0 +1,28 @@
+import { WebSocket } from 'ws';
+export type CLIWebSocketMessage = {
+    type: string;
+    data?: unknown;
+};
+declare class CLIWebSocketServer {
+    private server?;
+    private instanceId;
+    private logPrefix?;
+    private debug?;
+    constructor({ instanceId, logPrefix, debug, }: {
+        instanceId: string;
+        logPrefix?: string;
+        debug?: boolean;
+    });
+    private log;
+    private logError;
+    sendMessage(websocket: WebSocket, message: CLIWebSocketMessage): void;
+    private sendCliMetadata;
+    start({ onConnection, onMessage, onClose, metadata, }: {
+        onConnection?: (websocket: WebSocket) => void;
+        onMessage?: (websocket: WebSocket, message: CLIWebSocketMessage) => boolean;
+        onClose?: () => void;
+        metadata?: Record<string, unknown>;
+    }): Promise<void>;
+    shutdown(): void;
+}
+export default CLIWebSocketServer;

package/lib/CLIWebSocketServer.js

@@ -0,0 +1,91 @@
+import { WebSocketServer } from 'ws';
+import { isPortManagerServerRunning, requestPorts, } from '@hubspot/local-dev-lib/portManager';
+import { uiLogger } from './ui/logger.js';
+import { lib } from '../lang/en.js';
+import { pkg } from './jsonLoader.js';
+const DOMAINS = ['hubspot.com', 'hubspotqa.com'];
+const SUBDOMAINS = ['local', 'app', 'app-na2', 'app-na3', 'app-ap1', 'app-eu1'];
+const ALLOWED_ORIGIN_REGEX = new RegExp(`^https://(${SUBDOMAINS.join('|')})\\.(${DOMAINS.join('|')})$`);
+const CLI_METADATA_MESSAGE_TYPE = 'server:cliMetadata';
+class CLIWebSocketServer {
+    server;
+    instanceId;
+    logPrefix;
+    debug;
+    constructor({ instanceId, logPrefix, debug, }) {
+        this.instanceId = instanceId;
+        this.logPrefix = logPrefix;
+        this.debug = debug;
+    }
+    log(message) {
+        if (this.debug) {
+            uiLogger.log(`${this.logPrefix} ${message}`);
+        }
+    }
+    logError(message) {
+        if (this.debug) {
+            uiLogger.error(`${this.logPrefix} ${message}`);
+        }
+    }
+    sendMessage(websocket, message) {
+        websocket.send(JSON.stringify(message));
+    }
+    sendCliMetadata(websocket, metadata) {
+        this.sendMessage(websocket, {
+            type: CLI_METADATA_MESSAGE_TYPE,
+            data: {
+                cliVersion: pkg.version,
+                ...metadata,
+            },
+        });
+    }
+    async start({ onConnection, onMessage, onClose, metadata, }) {
+        const portManagerIsRunning = await isPortManagerServerRunning();
+        if (!portManagerIsRunning) {
+            throw new Error(lib.CLIWebsocketServer.errors.portManagerNotRunning(this.logPrefix));
+        }
+        const portData = await requestPorts([{ instanceId: this.instanceId }]);
+        const port = portData[this.instanceId];
+        this.server = new WebSocketServer({ port });
+        this.log(lib.CLIWebsocketServer.logs.startup(port));
+        this.server.on('connection', (ws, req) => {
+            const origin = req.headers.origin;
+            if (!origin || !ALLOWED_ORIGIN_REGEX.test(origin)) {
+                ws.close(1008, lib.CLIWebsocketServer.errors.originNotAllowed(origin));
+                return;
+            }
+            this.sendCliMetadata(ws, metadata);
+            if (onConnection) {
+                onConnection(ws);
+            }
+            ws.on('message', data => {
+                try {
+                    const message = JSON.parse(data.toString());
+                    if (!message.type) {
+                        this.logError(lib.CLIWebsocketServer.errors.missingTypeField(data.toString()));
+                        return;
+                    }
+                    if (onMessage) {
+                        const messageHandled = onMessage(ws, message);
+                        if (!messageHandled) {
+                            this.logError(lib.CLIWebsocketServer.errors.unknownMessageType(message.type));
+                        }
+                    }
+                }
+                catch (e) {
+                    this.logError(lib.CLIWebsocketServer.errors.invalidJSON(data.toString()));
+                }
+            });
+        });
+        this.server.on('close', () => {
+            if (onClose) {
+                onClose();
+            }
+        });
+    }
+    shutdown() {
+        this.server?.close();
+        this.server = undefined;
+    }
+}
+export default CLIWebSocketServer;

package/lib/__tests__/CLIWebSocketServer.test.d.ts

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