@bigcommerce/stencil-cli 3.6.4 → 3.7.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+### 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))

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-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

@@ -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,
         });
@@ -132,6 +153,7 @@ class StencilStart {
             useCache: cliOptions.cache,
             themePath: this._themeConfigManager.themePath,
             stencilCliVersion: PACKAGE_INFO.version,
+            storeSettingsLocale: this._storeSettingsLocale,
         });
     }
 
@@ -179,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
@@ -215,6 +251,8 @@ class StencilStart {
         if (this._buildConfigManager.development) {
             this._buildConfigManager.initWorker().development(this._browserSync);
         }
+
+        await this.checkLangFiles(langsPath, this._storeSettingsLocale.default_shopper_language);
     }
 
     /**
@@ -236,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,
+};

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "3.6.4",
+  "version": "3.7.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -570,19 +570,19 @@
       }
     },
     "@bigcommerce/stencil-paper": {
-      "version": "3.0.0-rc.51",
-      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-paper/-/stencil-paper-3.0.0-rc.51.tgz",
-      "integrity": "sha512-ZnGgG3i8HLhevSOU/Rher2ovPMSLwhqBvDD0m1GA2dp7R8oaZSBlIMSAqvZ1/gtTTk4R0kBsBYC6cz2YbAqwJg==",
+      "version": "3.0.0-rc.52",
+      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-paper/-/stencil-paper-3.0.0-rc.52.tgz",
+      "integrity": "sha512-hANH4m0dh9YJuXIlirXj2F9HeWv8k2kJXH1lZkDWx7Ukl0Mn+caibBFprb4Ds+maAc9mHjg9ECUZ5WFT2wBSgA==",
       "requires": {
-        "@bigcommerce/stencil-paper-handlebars": "4.5.0",
+        "@bigcommerce/stencil-paper-handlebars": "4.5.1",
         "accept-language-parser": "~1.4.1",
         "messageformat": "~0.2.2"
       }
     },
     "@bigcommerce/stencil-paper-handlebars": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-paper-handlebars/-/stencil-paper-handlebars-4.5.0.tgz",
-      "integrity": "sha512-ADkNTYC7U6IaWPY3PKz1nEH3oyuKBA6XKBhKnpeTLhGxORwnYAde+fC1XZ8+OHweAEE0/EXsumqhierYBrvAhw==",
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@bigcommerce/stencil-paper-handlebars/-/stencil-paper-handlebars-4.5.1.tgz",
+      "integrity": "sha512-drdYQDXFI8BI/H4/ACmYJUA1QfCbpYVp8MxG/B+JNZypg6UzTnWRJOvCKqohfr9obnLbSdL+nMjVol2cq/RmgQ==",
       "requires": {
         "@bigcommerce/handlebars-v4": "4.7.6",
         "handlebars": "3.0.8",
@@ -962,6 +962,22 @@
             "ms": "2.1.2"
           }
         },
+        "esprima": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+          "dev": true
+        },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -1520,6 +1536,12 @@
         "resolve-from": "^5.0.0"
       },
       "dependencies": {
+        "esprima": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+          "dev": true
+        },
         "find-up": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -1530,6 +1552,16 @@
             "path-exists": "^4.0.0"
           }
         },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -6110,6 +6142,22 @@
           "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
           "dev": true
         },
+        "esprima": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+          "dev": true
+        },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "dev": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7327,6 +7375,22 @@
       "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==",
       "requires": {
         "js-yaml": "^3.13.1"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+        },
+        "js-yaml": {
+          "version": "3.14.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+          "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        }
       }
     },
     "fs-constants": {
@@ -12174,18 +12238,17 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "requires": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "argparse": "^2.0.1"
       },
       "dependencies": {
-        "esprima": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-          "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
         }
       }
     },
@@ -18062,9 +18125,9 @@
       "integrity": "sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g=="
     },
     "uglify-js": {
-      "version": "3.14.2",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.2.tgz",
-      "integrity": "sha512-rtPMlmcO4agTUfz10CbgJ1k6UAoXM2gWb3GoMPPZB/+/Ackf8lNWk11K4rYi2D0apgoFRLtQOZhb+/iGNJq26A==",
+      "version": "3.14.4",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.14.4.tgz",
+      "integrity": "sha512-AbiSR44J0GoCeV81+oxcy/jDOElO2Bx3d0MfQCUShq7JRXaM4KtQopZsq2vFv8bCq2yMaGrw1FgygUd03RyRDA==",
       "optional": true
     },
     "uglify-to-browserify": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "3.6.4",
+  "version": "3.7.0",
   "description": "CLI tool to run BigCommerce Stores locally for theme development.",
   "main": "index.js",
   "engines": {
@@ -44,7 +44,7 @@
     "package-lock.json"
   ],
   "dependencies": {
-    "@bigcommerce/stencil-paper": "^3.0.0-rc.51",
+    "@bigcommerce/stencil-paper": "^3.0.0-rc.52",
     "@bigcommerce/stencil-styles": "2.1.0",
     "@hapi/boom": "^8.0.1",
     "@hapi/glue": "^6.2.0",
@@ -67,6 +67,7 @@
     "graceful-fs": "^4.2.4",
     "image-size": "^0.9.1",
     "inquirer": "^8.1.5",
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.20",
     "memory-cache": "^0.2.0",
     "npm-which": "^3.0.1",

package/server/index.js

@@ -29,6 +29,8 @@ function buildManifest(srcManifest, options) {
         options.dotStencilFile.customLayouts;
     pluginsByName['./plugins/renderer/renderer.module'].themePath = options.themePath;
     pluginsByName['./plugins/renderer/renderer.module'].storeUrl = storeUrl;
+    pluginsByName['./plugins/renderer/renderer.module'].storeSettingsLocale =
+        options.storeSettingsLocale;
     pluginsByName['./plugins/theme-assets/theme-assets.module'].themePath = options.themePath;
 
     resManifest.register.plugins = _.reduce(

package/server/plugins/renderer/renderer.module.js

@@ -14,6 +14,11 @@ const { readFromStream } = require('../../../lib/utils/asyncUtils');
 const NetworkUtils = require('../../../lib/utils/NetworkUtils');
 const contentApiClient = require('../../../lib/content-api-client');
 const { getPageType } = require('../../lib/page-type-util');
+const {
+    frontmatterRegex,
+    getFrontmatterContent,
+    interpolateThemeSettings,
+} = require('../../../lib/utils/frontmatter');
 
 const networkUtils = new NetworkUtils();
 
@@ -262,7 +267,6 @@ internals.parseResponse = async (bcAppData, request, response, responseArgs) =>
  * @returns {Object}
  */
 internals.getResourceConfig = (data, request, configuration) => {
-    const frontmatterRegex = /---\r?\n(?:.|\s)*?\r?\n---\r?\n/g;
     const missingThemeSettingsRegex = /{{\\s*?theme_settings\\..+?\\s*?}}/g;
     let resourcesConfig = {};
     const templatePath = data.template_file;
@@ -276,16 +280,12 @@ internals.getResourceConfig = (data, request, configuration) => {
             templatePath,
         );
 
-        const frontmatterMatch = rawTemplate.match(frontmatterRegex);
-        if (frontmatterMatch !== null) {
-            let frontmatterContent = frontmatterMatch[0];
-            // Interpolate theme settings for frontmatter
-            for (const [key, val] of Object.entries(configuration.settings)) {
-                const regex = `{{\\s*?theme_settings\\.${key}\\s*?}}`;
-
-                frontmatterContent = frontmatterContent.replace(new RegExp(regex, 'g'), val);
-            }
-
+        let frontmatterContent = getFrontmatterContent(rawTemplate);
+        if (frontmatterContent !== null) {
+            frontmatterContent = interpolateThemeSettings(
+                frontmatterContent,
+                configuration.settings,
+            );
             // Remove any handlebars tags that weren't interpolated because there was no setting for it
             frontmatterContent = frontmatterContent.replace(missingThemeSettingsRegex, '');
             // Replace the frontmatter with the newly interpolated version
@@ -364,6 +364,16 @@ internals.getTemplatePath = (requestPath, data) => {
     return templatePath || data.template_file;
 };
 
+function getAcceptLanguageHeader(request) {
+    if (
+        internals.options.storeSettingsLocale.shopper_language_selection_method ===
+        'default_shopper_language'
+    ) {
+        return internals.options.storeSettingsLocale.default_shopper_language;
+    }
+    return request.headers['accept-language'];
+}
+
 /**
  * Creates a new Pencil Response object and returns it.
  *
@@ -400,7 +410,7 @@ internals.getPencilResponse = (data, request, response, configuration, renderedR
             context,
             translations: data.translations,
             method: request.method,
-            acceptLanguage: request.headers['accept-language'],
+            acceptLanguage: getAcceptLanguageHeader(request),
             headers: response.headers,
             statusCode: response.status,
         },