@hubspot/cli 7.8.12-experimental.1 → 7.9.0-beta.0

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,46 @@
+import SpinniesManager from '../../../lib/ui/SpinniesManager.js';
+import { trackCommandUsage } from '../../../lib/usageTracking.js';
+import { kickOffValidation, pollForValidationFinish, fetchValidationResults, processValidationErrors, displayValidationResults, } from '../../../lib/marketplaceValidate.js';
+import { commands } from '../../../lang/en.js';
+import { makeYargsBuilder } from '../../../lib/yargsUtils.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.init();
+    SpinniesManager.add('marketplaceValidation', {
+        text: commands.cms.subcommands.theme.subcommands.marketplaceValidate.logs.validatingTheme(path),
+    });
+    const assetType = 'THEME';
+    const validationId = await kickOffValidation(derivedAccountId, assetType, path);
+    await pollForValidationFinish(derivedAccountId, validationId);
+    SpinniesManager.remove('marketplaceValidation');
+    const validationResults = await fetchValidationResults(derivedAccountId, validationId);
+    processValidationErrors(commands.cms.subcommands.theme.subcommands.marketplaceValidate.errors
+        .invalidPath, validationResults);
+    displayValidationResults(commands.cms.subcommands.theme.subcommands.marketplaceValidate.results, validationResults);
+    process.exit();
+}
+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,12 @@
+import { CommonArgs, ConfigArgs, AccountArgs, YargsCommandModule } from '../../../types/Yargs.js';
+export type ThemePreviewArgs = CommonArgs & ConfigArgs & AccountArgs & {
+    src: string;
+    dest: string;
+    notify: 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,224 @@
+import fs from 'fs';
+import path from 'path';
+import cliProgress from 'cli-progress';
+import { commands } from '../../../lang/en.js';
+import { getCwd } from '@hubspot/local-dev-lib/path';
+import { FILE_UPLOAD_RESULT_TYPES } from '@hubspot/local-dev-lib/constants/files';
+import { getThemeJSONPath } from '@hubspot/local-dev-lib/cms/themes';
+import { preview } from '@hubspot/theme-preview-dev-server';
+import { getUploadableFileList } from '../../../lib/upload.js';
+import { trackCommandUsage } from '../../../lib/usageTracking.js';
+import { previewPrompt, previewProjectPrompt, } from '../../../lib/prompts/previewPrompt.js';
+import { EXIT_CODES } from '../../../lib/enums/exitCodes.js';
+import { ApiErrorContext, logError } from '../../../lib/errorHandlers/index.js';
+import { handleExit, handleKeypress } from '../../../lib/process.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;
+}
+function handleUserInput() {
+    const onTerminate = () => {
+        uiLogger.log(commands.cms.subcommands.theme.subcommands.preview.logs.processExited);
+        process.exit(EXIT_CODES.SUCCESS);
+    };
+    handleExit(onTerminate);
+    handleKeypress(key => {
+        if ((key.ctrl && key.name === 'c') || key.name === 'q') {
+            onTerminate();
+        }
+    });
+}
+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, notify, noSsl, resetSession, port, generateFieldsTypes, } = args;
+    const { absoluteSrc, dest } = await determineSrcAndDest(args);
+    const filePaths = await getUploadableFileList(absoluteSrc, false);
+    function startProgressBar(numFiles) {
+        const initialUploadProgressBar = new cliProgress.SingleBar({
+            gracefulExit: true,
+            format: '[{bar}] {percentage}% | {value}/{total} | {label}',
+            hideCursor: true,
+        }, cliProgress.Presets.rect);
+        initialUploadProgressBar.start(numFiles, 0, {
+            label: commands.cms.subcommands.theme.subcommands.preview
+                .initialUploadProgressBar.start,
+        });
+        let uploadsHaveStarted = false;
+        const uploadOptions = {
+            onAttemptCallback: () => {
+                /* Intentionally blank */
+            },
+            onSuccessCallback: () => {
+                initialUploadProgressBar.increment();
+                if (!uploadsHaveStarted) {
+                    uploadsHaveStarted = true;
+                    initialUploadProgressBar.update(0, {
+                        label: commands.cms.subcommands.theme.subcommands.preview
+                            .initialUploadProgressBar.uploading,
+                    });
+                }
+            },
+            onFirstErrorCallback: () => {
+                /* Intentionally blank */
+            },
+            onRetryCallback: () => {
+                /* Intentionally blank */
+            },
+            onFinalErrorCallback: () => initialUploadProgressBar.increment(),
+            onFinishCallback: (results) => {
+                initialUploadProgressBar.update(numFiles, {
+                    label: commands.cms.subcommands.theme.subcommands.preview
+                        .initialUploadProgressBar.finish,
+                });
+                initialUploadProgressBar.stop();
+                results.forEach(result => {
+                    if (result.resultType == FILE_UPLOAD_RESULT_TYPES.FAILURE) {
+                        uiLogger.error(commands.cms.subcommands.theme.subcommands.preview.errors.uploadFailed(result.file, dest));
+                        logError(result.error, new ApiErrorContext({
+                            accountId: derivedAccountId,
+                            request: dest,
+                            payload: result.file,
+                        }));
+                    }
+                });
+            },
+        };
+        return uploadOptions;
+    }
+    trackCommandUsage('preview', {}, derivedAccountId);
+    let createUnifiedDevServer;
+    try {
+        // @ts-ignore TODO: Remove when we deprecate Node 18
+        require.resolve('@hubspot/cms-dev-server');
+        // @ts-ignore TODO: Remove when we deprecate Node 18
+        const { createDevServer } = await import('@hubspot/cms-dev-server');
+        createUnifiedDevServer = createDevServer;
+    }
+    catch (e) {
+        uiLogger.warn('Unified dev server requires node 20 to run. Defaulting to legacy preview.');
+    }
+    if (createUnifiedDevServer) {
+        if (port) {
+            process.env['PORT'] = port.toString();
+        }
+        createUnifiedDevServer(absoluteSrc, false, '', '', !noSsl, generateFieldsTypes, {
+            filePaths,
+            resetSession: resetSession || false,
+            startProgressBar,
+            dest,
+        });
+    }
+    else {
+        preview(derivedAccountId, absoluteSrc, dest, {
+            notify,
+            filePaths,
+            noSsl,
+            port,
+            resetSession: resetSession || false,
+            startProgressBar,
+            handleUserInput,
+        });
+    }
+}
+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('notify', {
+        alias: 'n',
+        describe: commands.cms.subcommands.theme.subcommands.preview.options.notify,
+        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('resetSession', {
+        hidden: true,
+        type: 'boolean',
+    })
+        .option('generateFieldsTypes', {
+        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;