@bigcommerce/stencil-cli 3.6.2 → 3.7.1

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+### 3.7.1 (2021-12-20)
+
+-   fix: strf-9576 Fix graphql queries ([810](https://github.com/bigcommerce/stencil-cli/pull/810))
+-   fix: strf-9553 bundled lang.json has lowercase lang keys ([808](https://github.com/bigcommerce/stencil-cli/pull/808))
+
+### 3.7.0 (2021-12-08)
+
+-   fix: strf-9535 Add fallback for shopper language default ([804](https://github.com/bigcommerce/stencil-cli/pull/804))
+-   feat: strf-9245 Warn user if shopper default language file is missing or has missing keys ([802](https://github.com/bigcommerce/stencil-cli/pull/802))
+-   Bump paper to rc52
+
+Note: BREAKING CHANGE!
+In order to get stencil cli working with this version, new Stencil CLI token should be created
+
+### 3.6.5 (2021-11-22)
+
+-   fix: strf-4307 Frontmatter/yaml validation and trailing symbols checks ([798](https://github.com/bigcommerce/stencil-cli/pull/798))
+
+### 3.6.4 (2021-11-5)
+
+-   fix: strf-9474 Removed "git+" prefix from package-lock ([794](https://github.com/bigcommerce/stencil-cli/pull/794))
+
+### 3.6.3 (2021-10-22)
+
+-   Bump paper to rc51
+-   fix: strf-8846 Send stencil-cli header to storefront api ([789](https://github.com/bigcommerce/stencil-cli/pull/789))
+
 ### 3.6.2 (2021-10-06)
 
 -   feat: Add overwrite option to download command ([785](https://github.com/bigcommerce/stencil-cli/pull/785))

package/lib/bundle-validator.js

@@ -6,7 +6,10 @@ const fs = require('fs');
 const sizeOf = require('image-size');
 const path = require('path');
 const Validator = require('ajv');
+const yamlValidator = require('js-yaml');
 
+const { recursiveReadDir } = require('./utils/fsUtils');
+const { getFrontmatterContent, interpolateThemeSettings } = require('./utils/frontmatter');
 const ValidatorSchemaTranslations = require('./validator/schema-translations');
 const privateThemeConfigValidationSchema = require('./schemas/privateThemeConfig.json');
 const themeConfigValidationSchema = require('./schemas/themeConfig.json');
@@ -43,6 +46,7 @@ class BundleValidator {
             this._validateThemeConfiguration.bind(this),
             this._validateThemeSchema.bind(this),
             this._validateSchemaTranslations.bind(this),
+            this._validateTemplatesFrontmatter.bind(this),
         ];
 
         if (!this.isPrivate) {
@@ -371,6 +375,61 @@ class BundleValidator {
             cb(null, true);
         });
     }
+
+    async _validateTemplatesFrontmatter() {
+        const config = await this.themeConfig.getRawConfig();
+        const filePaths = await recursiveReadDir(path.join(this.themePath, 'templates'), [
+            '!*.html',
+        ]);
+
+        for await (const filePath of filePaths) {
+            const fileContent = await fs.promises.readFile(filePath, { encoding: 'utf-8' });
+            const frontmatter = getFrontmatterContent(fileContent);
+            if (frontmatter) {
+                const yaml = interpolateThemeSettings(frontmatter, config.settings);
+
+                try {
+                    const result = yamlValidator.loadAll(yaml);
+                    this.validateTrailingSymbols(result[0]);
+                } catch (e) {
+                    throw new Error(
+                        `Error: ${e.message}, while parsing frontmatter at "${filePath}".`.red,
+                    );
+                }
+            }
+        }
+
+        return true;
+    }
+
+    validateTrailingSymbols(data) {
+        if (_.isObject(data)) {
+            return _.every(data, (value) => this.validateTrailingSymbols(value));
+        }
+        if (_.isArray(data)) {
+            return data.every((row) => this.validateTrailingSymbols(row));
+        }
+
+        return data ? this.hasFrontmatterValidValue(data) : true;
+    }
+
+    hasFrontmatterValidValue(value) {
+        if (this.hasUnallowedTrailingSymbol(value)) {
+            throw new Error(`Found unallowed trailing symbol in: "${value}"`);
+        }
+
+        return true;
+    }
+
+    getUnallowedTrailingSymbols() {
+        return [',', ';'];
+    }
+
+    hasUnallowedTrailingSymbol(value) {
+        const symbols = this.getUnallowedTrailingSymbols();
+        const trailingSymbol = value.toString().trim().slice(-1);
+        return symbols.includes(trailingSymbol);
+    }
 }
 
 module.exports = BundleValidator;

package/lib/lang-assembler.js

@@ -26,7 +26,7 @@ function assemble(callback) {
         for (const localeFile of filteredLocaleFiles) {
             const localeName = path.basename(localeFile, '.json');
 
-            localesToLoad[localeName] = (cb2) => {
+            localesToLoad[localeName.toLowerCase()] = (cb2) => {
                 const localeFilePath = `${LOCALE_DIRECTORY}/${localeFile}`;
 
                 fs.readFile(localeFilePath, 'utf-8', cb2);

package/lib/lang-helper.js

@@ -0,0 +1,59 @@
+require('colors');
+const fsUtilsModule = require('./utils/fsUtils');
+
+function flattenObject(object, result = {}, parentKey = '') {
+    return Object.entries(object).reduce((currentLayer, [key, innerValue]) => {
+        const resultKey = parentKey !== '' ? `${parentKey}.${key}` : key;
+        if (typeof innerValue === 'object') {
+            return flattenObject(innerValue, currentLayer, resultKey);
+        }
+        // eslint-disable-next-line no-param-reassign
+        currentLayer[resultKey] = innerValue;
+        return currentLayer;
+    }, result);
+}
+
+class LangHelper {
+    constructor({ fsUtils = fsUtilsModule, logger = console } = {}) {
+        this._fsUtils = fsUtils;
+        this._logger = logger;
+    }
+
+    async checkLangKeysPresence(filesPaths, themeLang) {
+        const themeLangFilename = `${themeLang}.json`;
+        const defaultLangFilePath = filesPaths.find((filePath) =>
+            filePath.includes(themeLangFilename),
+        );
+        const defaultLangFile = await this._fsUtils.parseJsonFile(defaultLangFilePath);
+        const flattenedDefaultLang = flattenObject(defaultLangFile);
+        const alreadyWarnedKey = [];
+
+        for await (const filePath of filesPaths) {
+            if (!filePath.includes(themeLangFilename)) {
+                const langFile = await this._fsUtils.parseJsonFile(filePath);
+                const flattenedLang = flattenObject(langFile);
+                const langKeys = Object.keys(flattenedLang);
+                for (const langKey of langKeys) {
+                    if (!alreadyWarnedKey.includes(langKey)) {
+                        if (!flattenedDefaultLang[langKey]) {
+                            this._logger.log(
+                                `${
+                                    'Warning'.yellow
+                                }: file: ${defaultLangFilePath} doesn't have ${langKey}, which is present in ${filePath}`,
+                            );
+                        } else if (flattenedDefaultLang[langKey].trim().length === 0) {
+                            this._logger.log(
+                                `${
+                                    'Warning'.yellow
+                                }: file: ${defaultLangFilePath} has ${langKey}, but it's empty`,
+                            );
+                        }
+                        alreadyWarnedKey.push(langKey);
+                    }
+                }
+            }
+        }
+    }
+}
+
+module.exports = LangHelper;

package/lib/stencil-start.js

@@ -5,7 +5,7 @@ const path = require('path');
 
 const Cycles = require('./Cycles');
 const templateAssemblerModule = require('./template-assembler');
-const { THEME_PATH } = require('../constants');
+const { PACKAGE_INFO, THEME_PATH } = require('../constants');
 const Server = require('../server');
 const StencilConfigManager = require('./StencilConfigManager');
 const ThemeConfig = require('./theme-config');
@@ -14,11 +14,15 @@ const fsUtilsModule = require('./utils/fsUtils');
 const stencilPushUtilsModule = require('./stencil-push.utils');
 const cliCommonModule = require('./cliCommon');
 const themeApiClientModule = require('./theme-api-client');
+const storeSettingsApiClientModule = require('./store-settings-api-client');
+const LangHelper = require('./lang-helper');
 
 class StencilStart {
     constructor({
         browserSync = BrowserSync.create(),
         themeApiClient = themeApiClientModule,
+        storeSettingsApiClient = storeSettingsApiClientModule,
+        langHelper = new LangHelper(),
         fsUtils = fsUtilsModule,
         cliCommon = cliCommonModule,
         stencilConfigManager = new StencilConfigManager(),
@@ -31,6 +35,8 @@ class StencilStart {
     } = {}) {
         this._browserSync = browserSync;
         this._themeApiClient = themeApiClient;
+        this._storeSettingsApiClient = storeSettingsApiClient;
+        this._langHelper = langHelper;
         this._fsUtils = fsUtils;
         this._cliCommon = cliCommon;
         this._stencilConfigManager = stencilConfigManager;
@@ -62,6 +68,11 @@ class StencilStart {
             storeInfoFromAPI,
         );
 
+        this._storeSettingsLocale = await this.getStoreSettingsLocale(
+            cliOptions,
+            updatedStencilConfig,
+        );
+
         await this.startLocalServer(cliOptions, updatedStencilConfig);
 
         this._logger.log(this.getStartUpInfo(updatedStencilConfig));
@@ -69,14 +80,24 @@ class StencilStart {
         await this.startBrowserSync(cliOptions, updatedStencilConfig, browserSyncPort);
     }
 
+    async getStoreSettingsLocale(cliOptions, stencilConfig) {
+        const { accessToken } = stencilConfig;
+        const apiHost = cliOptions.apiHost || stencilConfig.apiHost;
+        return this._storeSettingsApiClient.getStoreSettingsLocale({
+            storeHash: this.storeHash,
+            accessToken,
+            apiHost,
+        });
+    }
+
     async getChannelUrl(stencilConfig, cliOptions) {
         const { accessToken } = stencilConfig;
         const apiHost = cliOptions.apiHost || stencilConfig.apiHost;
-        const storeHash = await this._themeApiClient.getStoreHash({
+        this.storeHash = await this._themeApiClient.getStoreHash({
             storeUrl: stencilConfig.normalStoreUrl,
         });
         const channels = await this._themeApiClient.getStoreChannels({
-            storeHash,
+            storeHash: this.storeHash,
             accessToken,
             apiHost,
         });
@@ -131,6 +152,8 @@ class StencilStart {
             variationIndex: this._themeConfigManager.variationIndex || 0,
             useCache: cliOptions.cache,
             themePath: this._themeConfigManager.themePath,
+            stencilCliVersion: PACKAGE_INFO.version,
+            storeSettingsLocale: this._storeSettingsLocale,
         });
     }
 
@@ -178,6 +201,20 @@ class StencilStart {
             }
         });
 
+        const langsPath = path.join(themePath, 'lang');
+        this._browserSync.watch(langsPath, async (event) => {
+            try {
+                if (event === 'change') {
+                    await this.checkLangFiles(
+                        langsPath,
+                        this._storeSettingsLocale.default_shopper_language,
+                    );
+                }
+            } catch (e) {
+                this._logger.error(e);
+            }
+        });
+
         // tunnel value should be true/false or a string with name
         // https://browsersync.io/docs/options#option-tunnel
         // convert undefined/true -> false/true
@@ -214,6 +251,8 @@ class StencilStart {
         if (this._buildConfigManager.development) {
             this._buildConfigManager.initWorker().development(this._browserSync);
         }
+
+        await this.checkLangFiles(langsPath, this._storeSettingsLocale.default_shopper_language);
     }
 
     /**
@@ -235,6 +274,27 @@ class StencilStart {
         );
     }
 
+    async checkLangFiles(langsPath, defaultShopperLanguage) {
+        const filesPaths = await this._fsUtils.recursiveReadDir(langsPath);
+        const isDefaultLanguagePresent = filesPaths.some((file) =>
+            file.includes(defaultShopperLanguage),
+        );
+
+        if (!isDefaultLanguagePresent) {
+            this._logger.log(
+                `${
+                    'Warning'.yellow
+                }: "missing language file for default shopper language: ${defaultShopperLanguage}"`,
+            );
+        } else {
+            try {
+                await this._langHelper.checkLangKeysPresence(filesPaths, defaultShopperLanguage);
+            } catch (e) {
+                this._logger.error(e);
+            }
+        }
+    }
+
     /**
      * Displays information about your environment and configuration.
      * @param {Object} stencilConfig

package/lib/store-settings-api-client.js

@@ -0,0 +1,34 @@
+require('colors');
+const NetworkUtils = require('./utils/NetworkUtils');
+
+const networkUtils = new NetworkUtils();
+
+async function getStoreSettingsLocale({ apiHost, storeHash, accessToken }) {
+    try {
+        const response = await networkUtils.sendApiRequest({
+            url: `${apiHost}/stores/${storeHash}/v3/settings/store/locale`,
+            accessToken,
+        });
+
+        if (!response.data.data) {
+            throw new Error('Received empty store locale in the server response'.red);
+        } else if (!response.data.data.default_shopper_language) {
+            throw new Error(
+                'Received empty default_shopper_language field in the server response'.red,
+            );
+        } else if (!response.data.data.shopper_language_selection_method) {
+            throw new Error(
+                'Received empty shopper_language_selection_method field in the server response'.red,
+            );
+        }
+
+        return response.data.data;
+    } catch (err) {
+        err.name = 'StoreSettingsLocaleError';
+        throw err;
+    }
+}
+
+module.exports = {
+    getStoreSettingsLocale,
+};

package/lib/utils/frontmatter.js

@@ -0,0 +1,33 @@
+const frontmatterRegex = /---\r?\n(?:.|\s)*?\r?\n---\r?\n/g;
+
+/**
+ *
+ * @param {String} file
+ * @returns {String|null}
+ */
+function getFrontmatterContent(file) {
+    const frontmatterMatch = file.match(frontmatterRegex);
+    return frontmatterMatch !== null ? frontmatterMatch[0] : null;
+}
+
+/**
+ *
+ * @param {String} frontmatter
+ * @param {Object} settings
+ * @returns {String}
+ */
+function interpolateThemeSettings(frontmatter, settings) {
+    for (const [key, val] of Object.entries(settings)) {
+        const regex = `{{\\s*?theme_settings\\.${key}\\s*?}}`;
+        // eslint-disable-next-line no-param-reassign
+        frontmatter = frontmatter.replace(new RegExp(regex, 'g'), val);
+    }
+
+    return frontmatter;
+}
+
+module.exports = {
+    frontmatterRegex,
+    getFrontmatterContent,
+    interpolateThemeSettings,
+};