@hubspot/cli 8.0.10-experimental.6 → 8.0.11-experimental.0

package/commands/cms/theme/__tests__/preview.test.js

@@ -0,0 +1,54 @@
+import yargs from 'yargs';
+import { addAccountOptions, addConfigOptions, } from '../../../../lib/commonOpts.js';
+import themePreviewCommand from '../preview.js';
+vi.mock('../../../../lib/commonOpts');
+const optionSpy = vi
+    .spyOn(yargs, 'option')
+    .mockReturnValue(yargs);
+describe('commands/theme/preview', () => {
+    describe('command', () => {
+        it('should have the correct command structure', () => {
+            expect(themePreviewCommand.command).toEqual('preview [--src] [--dest]');
+        });
+    });
+    describe('describe', () => {
+        it('should provide a description', () => {
+            expect(themePreviewCommand.describe).toBeDefined();
+        });
+    });
+    describe('builder', () => {
+        it('should support the correct options', () => {
+            themePreviewCommand.builder(yargs);
+            expect(optionSpy).toHaveBeenCalledWith('src', {
+                describe: expect.any(String),
+                type: 'string',
+                requiresArg: true,
+            });
+            expect(optionSpy).toHaveBeenCalledWith('dest', {
+                describe: expect.any(String),
+                type: 'string',
+                requiresArg: true,
+            });
+            expect(optionSpy).toHaveBeenCalledWith('no-ssl', {
+                describe: expect.any(String),
+                type: 'boolean',
+            });
+            expect(optionSpy).toHaveBeenCalledWith('port', {
+                describe: expect.any(String),
+                type: 'number',
+            });
+            expect(optionSpy).toHaveBeenCalledWith('reset-session', {
+                hidden: true,
+                type: 'boolean',
+            });
+            expect(optionSpy).toHaveBeenCalledWith('generate-fields-types', {
+                hidden: true,
+                type: 'boolean',
+            });
+            expect(addAccountOptions).toHaveBeenCalledTimes(1);
+            expect(addAccountOptions).toHaveBeenCalledWith(yargs);
+            expect(addConfigOptions).toHaveBeenCalledTimes(1);
+            expect(addConfigOptions).toHaveBeenCalledWith(yargs);
+        });
+    });
+});

package/commands/cms/theme/create.d.ts

@@ -0,0 +1,6 @@
+import { CommonArgs, ConfigArgs, YargsCommandModule } from '../../../types/Yargs.js';
+type ThemeCreateArgs = CommonArgs & ConfigArgs & {
+    dest?: string;
+};
+declare const themeCreateCommand: YargsCommandModule<unknown, ThemeCreateArgs>;
+export default themeCreateCommand;

package/commands/cms/theme/create.js

@@ -0,0 +1,58 @@
+import fs from 'fs-extra';
+import { logError } from '../../../lib/errorHandlers/index.js';
+import { resolveLocalPath } from '../../../lib/filesystem.js';
+import { trackCommandUsage } from '../../../lib/usageTracking.js';
+import { commands } from '../../../lang/en.js';
+import { uiLogger } from '../../../lib/ui/logger.js';
+import { makeYargsBuilder } from '../../../lib/yargsUtils.js';
+import { EXIT_CODES } from '../../../lib/enums/exitCodes.js';
+import assets from '../../../lib/cmsAssets/index.js';
+const command = 'create [dest]';
+const describe = commands.cms.subcommands.theme.subcommands.create.describe;
+async function handler(args) {
+    const { derivedAccountId, dest } = args;
+    const assetType = 'website-theme';
+    trackCommandUsage('create', { assetType }, derivedAccountId);
+    const asset = assets[assetType];
+    const argsToPass = {
+        commandArgs: args,
+        assetType,
+        dest,
+    };
+    if (!argsToPass.dest) {
+        argsToPass.dest = resolveLocalPath(asset.dest(argsToPass));
+    }
+    try {
+        await fs.ensureDir(argsToPass.dest);
+    }
+    catch (e) {
+        uiLogger.error(commands.cms.subcommands.theme.subcommands.create.errors.unusablePath(argsToPass.dest));
+        logError(e);
+        return;
+    }
+    try {
+        await asset.execute(argsToPass);
+    }
+    catch (e) {
+        logError(e);
+        process.exit(EXIT_CODES.ERROR);
+    }
+}
+function themeCreateBuilder(yargs) {
+    yargs.positional('dest', {
+        describe: commands.cms.subcommands.theme.subcommands.create.positionals.dest,
+        type: 'string',
+    });
+    return yargs;
+}
+const builder = makeYargsBuilder(themeCreateBuilder, command, describe, {
+    useGlobalOptions: true,
+    useConfigOptions: true,
+});
+const themeCreateCommand = {
+    command,
+    describe,
+    builder,
+    handler,
+};
+export default themeCreateCommand;

package/commands/cms/theme/generate-selectors.d.ts

@@ -0,0 +1,6 @@
+import { CommonArgs, YargsCommandModule } from '../../../types/Yargs.js';
+export type ThemeSelectorArgs = CommonArgs & {
+    path: string;
+};
+declare const themeSelectorsCommand: YargsCommandModule<unknown, ThemeSelectorArgs>;
+export default themeSelectorsCommand;

package/commands/cms/theme/generate-selectors.js

@@ -0,0 +1,171 @@
+import fs from 'fs';
+import { commands } from '../../../lang/en.js';
+import { findFieldsJsonPath, combineThemeCss, setPreviewSelectors, generateInheritedSelectors, generateSelectorsMap, getMaxFieldsDepth, } from '../../../lib/generateSelectors.js';
+import { EXIT_CODES } from '../../../lib/enums/exitCodes.js';
+import { makeYargsBuilder } from '../../../lib/yargsUtils.js';
+import { uiLogger } from '../../../lib/ui/logger.js';
+const HUBL_EXPRESSION_REGEX = new RegExp(/{%\s*(.*)\s*%}/, 'g');
+const HUBL_VARIABLE_NAME_REGEX = new RegExp(/{%\s*set\s*(\w*)/, 'i');
+const HUBL_STATEMENT_REGEX = new RegExp(/{{\s*[\w.(,\d\-\s)|/~]*.*}}/, 'g');
+const HUBL_STATEMENT_PLACEHOLDER_REGEX = new RegExp(/hubl_statement_\d*/, 'g');
+const CSS_VARS_REGEX = new RegExp(/--([\w.(,\d\-)]*):(.*);/, 'g');
+const CSS_VARS_NAME_REGEX = new RegExp(/(--[\w.(,\d\-)]*)/, 'g');
+const CSS_SELECTORS_REGEX = new RegExp(/([\s\w:.,\0-[\]]*){/, 'i');
+const CSS_EXPRESSION_REGEX = new RegExp(/(?!\s)([^}])*(?![.#\s,>])[^}]*}/, 'g');
+const THEME_PATH_REGEX = new RegExp(/=\s*.*(theme\.(\w|\.)*)/, 'i');
+const command = 'generate-selectors <path>';
+const describe = commands.cms.subcommands.theme.subcommands.generateSelectors.describe;
+async function handler(args) {
+    const { path } = args;
+    const fieldsJsonPath = findFieldsJsonPath(path);
+    if (!fieldsJsonPath) {
+        uiLogger.error(commands.cms.subcommands.theme.subcommands.generateSelectors.errors
+            .fieldsNotFound);
+        process.exit(EXIT_CODES.ERROR);
+    }
+    let fieldsJson = JSON.parse(fs.readFileSync(fieldsJsonPath, 'utf-8'));
+    let cssString = combineThemeCss(path) ?? '';
+    /**
+     * Creates map of HubL variable names to theme field paths
+     */
+    const HubLExpressions = cssString.match(HUBL_EXPRESSION_REGEX);
+    const hublVariableMap = HubLExpressions
+        ? HubLExpressions.reduce((_hublVariableMap, expression) => {
+            const variableName = expression.match(HUBL_VARIABLE_NAME_REGEX);
+            const themeFieldKey = expression.match(THEME_PATH_REGEX);
+            if (!themeFieldKey || !variableName)
+                return _hublVariableMap;
+            _hublVariableMap[variableName[1]] = themeFieldKey[1];
+            return _hublVariableMap;
+        }, {})
+        : {};
+    /**
+     * Removes HubL variable expressions
+     */
+    cssString = cssString.replace(HUBL_EXPRESSION_REGEX, '');
+    /**
+     * Regex for HubL variable names
+     */
+    const HUBL_EXPRESSIONS = new RegExp(`.*(${Object.keys(hublVariableMap).join('|')}).*`, 'g');
+    /**
+     * Matches all HubL statements in the CSS and replaces them with a placeholder string
+     * This is to prevent the the css expression regex from capturing all the HubL as well
+     */
+    const hublStatements = cssString.match(HUBL_STATEMENT_REGEX) || [];
+    const hublStatementsMap = {};
+    hublStatements.forEach((statement, index) => {
+        const statementKey = `hubl_statement_${index}`;
+        hublStatementsMap[statementKey] = statement;
+        cssString = cssString.replace(statement, statementKey);
+    });
+    /**
+     * Matchs all css variables and determines if there are hubl within those vars.
+     */
+    const cssVars = cssString.match(CSS_VARS_REGEX) || [];
+    const cssVarsMap = cssVars.reduce((acc, expression) => {
+        const cssVarName = expression.match(CSS_VARS_NAME_REGEX);
+        const hublVariables = expression.match(HUBL_STATEMENT_PLACEHOLDER_REGEX);
+        if (!cssVarName || !hublVariables)
+            return acc;
+        cssString = cssString.replace(expression, '');
+        return { ...acc, [cssVarName[0]]: hublVariables };
+    }, {});
+    // replace all css variable references with corresponding hubl placeholder
+    Object.keys(cssVarsMap).forEach(cssVarName => {
+        const hublPlaceholders = cssVarsMap[cssVarName];
+        cssString = cssString.replace(cssVarName, hublPlaceholders.join('  '));
+    });
+    /**
+     * Parses each css string for a HubL statement and tries to map theme field paths to CSS selectors
+     */
+    const cssExpressions = (cssString.match(CSS_EXPRESSION_REGEX) || []).map(exp => exp.replace(/\r?\n/g, ' '));
+    const finalMap = cssExpressions.reduce((themeFieldsSelectorMap, cssExpression) => {
+        const hublStatementsPlaceholderKey = cssExpression.match(HUBL_STATEMENT_PLACEHOLDER_REGEX) || [];
+        hublStatementsPlaceholderKey.forEach(placeholderKey => {
+            let hublStatement;
+            let themeFieldPath;
+            if (placeholderKey in hublStatementsMap) {
+                hublStatement =
+                    hublStatementsMap[placeholderKey].match(HUBL_EXPRESSIONS);
+                themeFieldPath =
+                    hublStatementsMap[placeholderKey].match(/theme\.[\w|.]*/);
+            }
+            const cssSelectors = cssExpression.match(CSS_SELECTORS_REGEX);
+            /**
+             * Try to match a HubL statement to any HubL Variables being used
+             */
+            if (cssSelectors && themeFieldPath) {
+                const cssSelector = cssSelectors[1].replace(/\n/g, ' ');
+                const hublThemePath = themeFieldPath?.[0] ?? '';
+                if (!themeFieldsSelectorMap[hublThemePath]) {
+                    themeFieldsSelectorMap[hublThemePath] = [];
+                }
+                if (!themeFieldsSelectorMap[hublThemePath].includes(cssSelector)) {
+                    themeFieldsSelectorMap[hublThemePath] =
+                        themeFieldsSelectorMap[hublThemePath].concat(cssSelector);
+                }
+            }
+            if (cssSelectors && hublStatement) {
+                const cssSelector = cssSelectors?.[1]?.replace(/\n/g, ' ') ?? '';
+                const hublVariableName = Object.keys(hublVariableMap).find(_hubl => {
+                    return hublStatement && hublStatement[0].includes(_hubl);
+                }) || '';
+                const themeFieldKey = hublVariableName
+                    ? hublVariableMap[hublVariableName]
+                    : undefined;
+                /**
+                 * If the theme path is referenced directly add selectors
+                 */
+                if (themeFieldKey) {
+                    if (!themeFieldsSelectorMap[themeFieldKey]) {
+                        themeFieldsSelectorMap[themeFieldKey] = [];
+                    }
+                    if (!themeFieldsSelectorMap[themeFieldKey].includes(cssSelector)) {
+                        themeFieldsSelectorMap[themeFieldKey] =
+                            themeFieldsSelectorMap[themeFieldKey].concat(cssSelector);
+                    }
+                }
+            }
+        });
+        return themeFieldsSelectorMap;
+    }, {});
+    if (!Object.keys(finalMap).length) {
+        uiLogger.error(commands.cms.subcommands.theme.subcommands.generateSelectors.errors
+            .noSelectorsFound);
+        process.exit(EXIT_CODES.ERROR);
+    }
+    Object.keys(finalMap).forEach(themeFieldKey => {
+        const fieldKey = themeFieldKey.split('.');
+        const selectors = finalMap[themeFieldKey];
+        fieldsJson = setPreviewSelectors(fieldsJson, fieldKey.splice(1), selectors);
+    });
+    // Because fields can have nested inheritance we generated inherited selectors
+    // multiple times to make sure all inherted selectors are bubbled up.
+    const maxFieldsDepth = getMaxFieldsDepth();
+    for (let i = 0; i < maxFieldsDepth; i += 1) {
+        fieldsJson = generateInheritedSelectors(fieldsJson);
+    }
+    const selectorsMap = generateSelectorsMap(fieldsJson);
+    const selectorsPath = `${path}/editor-preview.json`;
+    fs.writeFileSync(selectorsPath, `${JSON.stringify({ selectors: selectorsMap }, null, 2)}\n`);
+    uiLogger.success(commands.cms.subcommands.theme.subcommands.generateSelectors.success(path, selectorsPath));
+}
+function themeSelectorBuilder(yargs) {
+    yargs.positional('path', {
+        describe: commands.cms.subcommands.theme.subcommands.generateSelectors.positionals
+            .path,
+        type: 'string',
+        required: true,
+    });
+    return yargs;
+}
+const builder = makeYargsBuilder(themeSelectorBuilder, command, describe, {
+    useGlobalOptions: true,
+});
+const themeSelectorsCommand = {
+    command,
+    describe,
+    handler,
+    builder,
+};
+export default themeSelectorsCommand;

package/commands/cms/theme/marketplace-validate.d.ts

@@ -0,0 +1,6 @@
+import { CommonArgs, ConfigArgs, AccountArgs, EnvironmentArgs, YargsCommandModule } from '../../../types/Yargs.js';
+export type ThemeValidateArgs = CommonArgs & ConfigArgs & AccountArgs & EnvironmentArgs & {
+    path: string;
+};
+declare const themeValidateCommand: YargsCommandModule<unknown, ThemeValidateArgs>;
+export default themeValidateCommand;

package/commands/cms/theme/marketplace-validate.js

@@ -0,0 +1,64 @@
+import SpinniesManager from '../../../lib/ui/SpinniesManager.js';
+import { trackCommandUsage } from '../../../lib/usageTracking.js';
+import { kickOffValidation, pollForValidationFinish, fetchValidationResults, hasProcessValidationErrors, displayValidationResults, } from '../../../lib/marketplaceValidate.js';
+import { commands } from '../../../lang/en.js';
+import { makeYargsBuilder } from '../../../lib/yargsUtils.js';
+import { EXIT_CODES } from '../../../lib/enums/exitCodes.js';
+import { logError } from '../../../lib/errorHandlers/index.js';
+const command = 'marketplace-validate <path>';
+const describe = commands.cms.subcommands.theme.subcommands.marketplaceValidate.describe;
+async function handler(args) {
+    const { path, derivedAccountId } = args;
+    trackCommandUsage('validate', {}, derivedAccountId);
+    SpinniesManager.add('marketplaceValidation', {
+        text: commands.cms.subcommands.theme.subcommands.marketplaceValidate.logs.validatingTheme(path),
+    });
+    const assetType = 'THEME';
+    let validationId;
+    try {
+        validationId = await kickOffValidation(derivedAccountId, assetType, path);
+        await pollForValidationFinish(derivedAccountId, validationId);
+    }
+    catch (e) {
+        logError(e);
+        process.exit(EXIT_CODES.ERROR);
+    }
+    SpinniesManager.remove('marketplaceValidation');
+    let validationResults;
+    try {
+        validationResults = await fetchValidationResults(derivedAccountId, validationId);
+    }
+    catch (e) {
+        logError(e);
+        process.exit(EXIT_CODES.ERROR);
+    }
+    const hasErrors = hasProcessValidationErrors(commands.cms.subcommands.theme.subcommands.marketplaceValidate.errors
+        .invalidPath, validationResults);
+    if (hasErrors) {
+        process.exit(EXIT_CODES.ERROR);
+    }
+    displayValidationResults(commands.cms.subcommands.theme.subcommands.marketplaceValidate.results, validationResults);
+    process.exit(EXIT_CODES.SUCCESS);
+}
+function themeValidateBuilder(yargs) {
+    yargs.positional('path', {
+        describe: commands.cms.subcommands.theme.subcommands.marketplaceValidate.positionals
+            .path.describe,
+        type: 'string',
+        required: true,
+    });
+    return yargs;
+}
+const builder = makeYargsBuilder(themeValidateBuilder, command, describe, {
+    useGlobalOptions: true,
+    useConfigOptions: true,
+    useAccountOptions: true,
+    useEnvironmentOptions: true,
+});
+const themeValidateCommand = {
+    command,
+    describe,
+    handler,
+    builder,
+};
+export default themeValidateCommand;

package/commands/cms/theme/preview.d.ts

@@ -0,0 +1,11 @@
+import { CommonArgs, ConfigArgs, AccountArgs, YargsCommandModule } from '../../../types/Yargs.js';
+export type ThemePreviewArgs = CommonArgs & ConfigArgs & AccountArgs & {
+    src: string;
+    dest: string;
+    'no-ssl'?: boolean;
+    port?: number;
+    resetSession?: boolean;
+    generateFieldsTypes?: boolean;
+};
+declare const themePreviewCommand: YargsCommandModule<unknown, ThemePreviewArgs>;
+export default themePreviewCommand;

package/commands/cms/theme/preview.js

@@ -0,0 +1,126 @@
+import fs from 'fs';
+import path from 'path';
+import { commands } from '../../../lang/en.js';
+import { getCwd } from '@hubspot/local-dev-lib/path';
+import { getThemeJSONPath } from '@hubspot/local-dev-lib/cms/themes';
+import { spawnDevServer } from '../../../lib/theme/cmsDevServerProcess.js';
+import { trackCommandUsage } from '../../../lib/usageTracking.js';
+import { previewPrompt, previewProjectPrompt, } from '../../../lib/prompts/previewPrompt.js';
+import { EXIT_CODES } from '../../../lib/enums/exitCodes.js';
+import { getProjectConfig } from '../../../lib/projects/config.js';
+import { findProjectComponents } from '../../../lib/projects/structure.js';
+import { ComponentTypes } from '../../../types/Projects.js';
+import { makeYargsBuilder } from '../../../lib/yargsUtils.js';
+import { uiLogger } from '../../../lib/ui/logger.js';
+const command = 'preview [--src] [--dest]';
+const describe = commands.cms.subcommands.theme.subcommands.preview.describe;
+function validateSrcPath(src) {
+    const logInvalidPath = () => {
+        uiLogger.error(commands.cms.subcommands.theme.subcommands.preview.errors.invalidPath(src));
+    };
+    try {
+        const stats = fs.statSync(src);
+        if (!stats.isDirectory()) {
+            logInvalidPath();
+            return false;
+        }
+    }
+    catch (e) {
+        logInvalidPath();
+        return false;
+    }
+    return true;
+}
+async function determineSrcAndDest(args) {
+    let absoluteSrc;
+    let dest;
+    const { projectDir, projectConfig } = await getProjectConfig();
+    if (!(projectDir && projectConfig)) {
+        // Not in a project, prompt for src and dest of traditional theme
+        const previewPromptAnswers = await previewPrompt(args);
+        const src = args.src || previewPromptAnswers.src;
+        dest = args.dest || previewPromptAnswers.dest;
+        absoluteSrc = path.resolve(getCwd(), src);
+        if (!dest || !validateSrcPath(absoluteSrc)) {
+            process.exit(EXIT_CODES.ERROR);
+        }
+    }
+    else {
+        // In a project
+        let themeJsonPath = getThemeJSONPath(getCwd());
+        if (!themeJsonPath) {
+            const projectComponents = await findProjectComponents(projectDir);
+            const themeComponents = projectComponents.filter(c => c.type === ComponentTypes.HublTheme);
+            if (themeComponents.length === 0) {
+                uiLogger.error(commands.cms.subcommands.theme.subcommands.preview.errors
+                    .noThemeComponents);
+                process.exit(EXIT_CODES.ERROR);
+            }
+            const answer = await previewProjectPrompt(themeComponents);
+            themeJsonPath = `${answer.themeComponentPath}/theme.json`;
+        }
+        const { dir: themeDir } = path.parse(themeJsonPath);
+        absoluteSrc = themeDir;
+        const { base: themeName } = path.parse(themeDir);
+        dest = `@projects/${projectConfig.name}/${themeName}`;
+    }
+    return { absoluteSrc, dest };
+}
+async function handler(args) {
+    const { derivedAccountId, noSsl, resetSession, port, generateFieldsTypes } = args;
+    const { absoluteSrc, dest } = await determineSrcAndDest(args);
+    trackCommandUsage('preview', {}, derivedAccountId);
+    // Spawn dev server in isolated subprocess to avoid React version conflicts
+    // File listing and progress bars are handled within the subprocess
+    await spawnDevServer({
+        absoluteSrc,
+        accountName: derivedAccountId?.toString(),
+        noSsl,
+        port,
+        generateFieldsTypes,
+        resetSession: resetSession || false,
+        dest,
+    });
+}
+function themePreviewBuilder(yargs) {
+    yargs
+        .option('src', {
+        describe: commands.cms.subcommands.theme.subcommands.preview.positionals.src,
+        type: 'string',
+        requiresArg: true,
+    })
+        .option('dest', {
+        describe: commands.cms.subcommands.theme.subcommands.preview.positionals.dest,
+        type: 'string',
+        requiresArg: true,
+    })
+        .option('no-ssl', {
+        describe: commands.cms.subcommands.theme.subcommands.preview.options.noSsl,
+        type: 'boolean',
+    })
+        .option('port', {
+        describe: commands.cms.subcommands.theme.subcommands.preview.options.port,
+        type: 'number',
+    })
+        .option('reset-session', {
+        hidden: true,
+        type: 'boolean',
+    })
+        .option('generate-fields-types', {
+        hidden: true,
+        type: 'boolean',
+    });
+    return yargs;
+}
+const builder = makeYargsBuilder(themePreviewBuilder, command, describe, {
+    useGlobalOptions: true,
+    useConfigOptions: true,
+    useAccountOptions: true,
+});
+const themePreviewCommand = {
+    command,
+    describe,
+    handler,
+    builder,
+};
+export default themePreviewCommand;

package/commands/cms/theme.d.ts

@@ -0,0 +1,3 @@
+import { YargsCommandModuleBucket } from '../../types/Yargs.js';
+declare const themeCommand: YargsCommandModuleBucket;
+export default themeCommand;

package/commands/cms/theme.js

@@ -0,0 +1,25 @@
+import marketplaceValidate from './theme/marketplace-validate.js';
+import generateSelectors from './theme/generate-selectors.js';
+import previewCommand from './theme/preview.js';
+import createCommand from './theme/create.js';
+import { commands } from '../../lang/en.js';
+import { makeYargsBuilder } from '../../lib/yargsUtils.js';
+const command = ['theme', 'themes'];
+const describe = commands.cms.subcommands.theme.describe;
+function themeBuilder(yargs) {
+    yargs
+        .command(previewCommand)
+        .command(createCommand)
+        .command(marketplaceValidate)
+        .command(generateSelectors)
+        .demandCommand(1, '');
+    return yargs;
+}
+const builder = makeYargsBuilder(themeBuilder, command, describe);
+const themeCommand = {
+    command,
+    describe,
+    builder,
+    handler: () => { },
+};
+export default themeCommand;

package/commands/cms/upload.d.ts

@@ -0,0 +1,12 @@
+import { CommonArgs, ConfigArgs, AccountArgs, EnvironmentArgs, CmsPublishModeArgs, YargsCommandModule } from '../../types/Yargs.js';
+export type UploadArgs = CommonArgs & ConfigArgs & AccountArgs & EnvironmentArgs & CmsPublishModeArgs & {
+    src?: string;
+    dest?: string;
+    fieldOptions?: string | string[];
+    saveOutput?: boolean;
+    convertFields?: boolean;
+    clean?: boolean;
+    force?: boolean;
+};
+declare const uploadCommand: YargsCommandModule<unknown, UploadArgs>;
+export default uploadCommand;