@bigcommerce/stencil-cli 8.2.0 → 8.4.0

package/lib/theme-config.js

@@ -1,9 +1,9 @@
-const _ = require('lodash');
-const fs = require('fs');
-const Path = require('path');
-const glob = require('glob');
-const { promisify } = require('util');
-const { parseJsonFile } = require('./utils/fsUtils');
+import { defaultsDeep, cloneDeep, omit, inRange, isObject } from 'lodash-es';
+import fs from 'fs';
+import Path from 'path';
+import glob from 'glob';
+import { promisify } from 'util';
+import { parseJsonFile } from './utils/fsUtils.js';
 
 class ThemeConfig {
     /**
@@ -16,7 +16,6 @@ class ThemeConfig {
         if (themePath) {
             this.setThemePath(themePath);
         }
-
         this.currentVariationSettings = null;
         this.globalSettings = null;
         this.variationIndex = 0;
@@ -31,13 +30,10 @@ class ThemeConfig {
     async getConfig() {
         const config = await this.getRawConfig();
         const variation = this._getVariation(config, this.variationIndex);
-
-        this.globalSettings = _.cloneDeep(config.settings);
-
+        this.globalSettings = cloneDeep(config.settings);
         if (!this.currentVariationSettings) {
             this.currentVariationSettings = variation.settings;
         }
-
         // Set some defaults
         config.css_compiler = config.css_compiler || 'scss';
         config.autoprefixer_cascade = config.autoprefixer_cascade || true;
@@ -46,12 +42,10 @@ class ThemeConfig {
             'last 2 versions',
             'Firefox ESR',
         ];
-
         // Merge in the variation settings and images objects
-        config.settings = _.defaultsDeep(this.currentVariationSettings, config.settings || {});
-        config.images = _.defaultsDeep(variation.images, config.images || {});
+        config.settings = defaultsDeep(this.currentVariationSettings, config.settings || {});
+        config.images = defaultsDeep(variation.images, config.images || {});
         config.variationName = variation.name;
-
         return config;
     }
 
@@ -65,27 +59,22 @@ class ThemeConfig {
     async updateConfig(newSettings, saveToFile) {
         let rawConfig;
         let variation;
-
         // Remove all variation settings that match theme's settings
-        this.currentVariationSettings = _.omit(
+        this.currentVariationSettings = omit(
             newSettings,
             (value, key) => this.globalSettings[key] === value,
             this,
         );
-
         if (saveToFile) {
             // Resetting the global settings so the only data saved to the file are the changes
             // from a specific variation's settings.
             rawConfig = await this.getRawConfig();
             variation = this._getVariation(rawConfig, this.variationIndex);
-
             variation.settings = this.currentVariationSettings;
-
             fs.writeFileSync(this.configPath, JSON.stringify(rawConfig, null, 2), {
                 encoding: 'utf-8',
             });
         }
-
         return this;
     }
 
@@ -101,7 +90,6 @@ class ThemeConfig {
         this.schemaPath = Path.join(themePath, 'schema.json');
         this.schemaTranslationsPath = Path.join(themePath, 'schemaTranslations.json');
         this.variationIndex = 0;
-
         return this;
     }
 
@@ -125,7 +113,6 @@ class ThemeConfig {
             this.variationIndex = variationIndex;
             this.currentVariationSettings = null;
         }
-
         return this;
     }
 
@@ -147,22 +134,18 @@ class ThemeConfig {
     async setVariationByName(variationName) {
         const config = await this.getRawConfig();
         let variationIndex = 0;
-
         if (variationName) {
             variationIndex = config.variations.findIndex(
                 (variation) => variation.name === variationName,
             );
-
             if (variationIndex === -1) {
                 throw new Error(
                     `Variation: ${variationName} is not defined in the theme's config.json`,
                 );
             }
         }
-
         this.variationIndex = variationIndex;
         this.currentVariationSettings = null;
-
         return this;
     }
 
@@ -190,11 +173,9 @@ class ThemeConfig {
      */
     async getVariationCount() {
         const { variations } = await this.getConfig();
-
         if (!Array.isArray(variations)) {
             return 0;
         }
-
         return variations.length;
     }
 
@@ -203,7 +184,7 @@ class ThemeConfig {
      * @returns {boolean}
      */
     async variationExists(variationIndex) {
-        return _.inRange(variationIndex, 0, await this.getVariationCount());
+        return inRange(variationIndex, 0, await this.getVariationCount());
     }
 
     /**
@@ -239,19 +220,13 @@ class ThemeConfig {
         if (!fs.existsSync(this.schemaPath)) {
             return [];
         }
-
         const themeSchema = await parseJsonFile(this.schemaPath);
-
         if (!Array.isArray(themeSchema)) {
             return [];
         }
-
         const files = await promisify(glob)(Path.join(this.themePath, 'templates/**/*.html'));
-
         const themeSettings = await Promise.all(files.map(this._fetchThemeSettings));
-
         const forceReloadIds = themeSettings.reduce((res, item) => ({ ...res, ...item }), {});
-
         for (const themeSchemaItem of themeSchema) {
             for (const item of themeSchemaItem.settings) {
                 if (forceReloadIds[item.id]) {
@@ -259,7 +234,6 @@ class ThemeConfig {
                 }
             }
         }
-
         return themeSchema;
     }
 
@@ -272,10 +246,8 @@ class ThemeConfig {
         if (!fs.existsSync(this.schemaTranslationsPath)) {
             return {};
         }
-
         const schemaTranslations = await parseJsonFile(this.schemaTranslationsPath);
-
-        return _.isObject(schemaTranslations) ? schemaTranslations : {};
+        return isObject(schemaTranslations) ? schemaTranslations : {};
     }
 
     /**
@@ -316,33 +288,26 @@ class ThemeConfig {
      */
     _getVariation(config, variationIndex) {
         let variation;
-
         if (!Array.isArray(config.variations) || config.variations.length === 0) {
             throw new Error('Your theme must have at least one variation in the config.json file.');
         }
-
         if (!variationIndex) {
             [variation] = config.variations;
         } else {
             variation = config.variations[variationIndex];
-
             if (!variation) {
                 throw new Error(`Variation index: ${variationIndex} not found theme's config.json`);
             }
         }
-
-        if (!_.isObject(variation.settings)) {
+        if (!isObject(variation.settings)) {
             variation.settings = {};
         }
-
-        if (!_.isObject(variation.images)) {
+        if (!isObject(variation.images)) {
             variation.images = {};
         }
-
-        if (!_.isObject(variation.meta)) {
+        if (!isObject(variation.meta)) {
             variation.meta = {};
         }
-
         return variation;
     }
 
@@ -356,20 +321,15 @@ class ThemeConfig {
         const themeSettingsRegexPattern = /\Wtheme_settings\.(.+?)\W/g;
         const themeSettings = {};
         let match;
-
         const content = await fs.promises.readFile(path, 'utf8');
-
         // eslint-disable-next-line
         while ((match = themeSettingsRegexPattern.exec(content))) {
             themeSettings[match[1]] = true;
         }
-
         return themeSettings;
     }
 }
-
 let themeConfigInstance;
-
 /**
  * Grabs the currently set instance or creates one if it doesn't exist.  If called
  * a second time with params, it will set those specific params and return the instance.
@@ -380,17 +340,14 @@ let themeConfigInstance;
 function getInstance(themePath) {
     if (!themeConfigInstance) {
         themeConfigInstance = new ThemeConfig(themePath);
-
         return themeConfigInstance;
     }
-
     if (themePath) {
         themeConfigInstance.setThemePath(themePath);
     }
-
     return themeConfigInstance;
 }
 
-module.exports = {
+export default {
     getInstance,
 };

package/lib/utils/NetworkUtils.js

@@ -1,16 +1,10 @@
-/**
- * @module Contains helpers functions for working with network requests
- */
-
-const https = require('https');
-const fsModule = require('fs');
-const axios = require('axios');
-
-const { PACKAGE_INFO } = require('../../constants');
-const stencilCLISettings = require('../StencilCLISettings');
+import https from 'https';
+import fsModule from 'fs';
+import axios from 'axios';
+import { PACKAGE_INFO } from '../../constants.js';
+import stencilCLISettings from '../StencilCLISettings.js';
 
 const defaultHttpsAgent = new https.Agent({ rejectUnauthorized: false });
-
 class NetworkUtils {
     constructor({
         fs = fsModule,
@@ -52,11 +46,9 @@ class NetworkUtils {
         if (accessToken) {
             reqConfig.headers['x-auth-token'] = accessToken;
         }
-
         if (stencilCLISettings.isVerbose()) {
             this.log(reqConfig);
         }
-
         return this._reqLibrary(reqConfig);
     }
 
@@ -70,7 +62,6 @@ class NetworkUtils {
             url,
             responseType: 'stream',
         });
-
         return new Promise((resolve, reject) => {
             response.data
                 .pipe(this._fs.createWriteStream(outputPath))
@@ -84,5 +75,4 @@ class NetworkUtils {
         this._logger.info(`Upcoming request ${method.green}: ${config.url.green}`);
     }
 }
-
-module.exports = NetworkUtils;
+export default NetworkUtils;

package/lib/utils/asyncUtils.js

@@ -1,7 +1,6 @@
 /**
  * @module Contains helpers functions for working with async stuff and streams
  */
-
 /**
  * WARNING! Can be used with text content only. Binary data (e.g. images) will get broken!
  *
@@ -15,7 +14,7 @@ async function readFromStream(stream) {
     }
     return result;
 }
-
-module.exports = {
+export { readFromStream };
+export default {
     readFromStream,
 };

package/lib/utils/frontmatter.js

@@ -1,5 +1,4 @@
 const frontmatterRegex = /---[\s\S]+?---/g;
-
 /**
  *
  * @param {String} file
@@ -9,7 +8,6 @@ function getFrontmatterContent(file) {
     const frontmatterMatch = file.match(frontmatterRegex);
     return frontmatterMatch !== null ? frontmatterMatch[0] : null;
 }
-
 /**
  *
  * @param {String} frontmatter
@@ -22,11 +20,12 @@ function interpolateThemeSettings(frontmatter, settings) {
         // eslint-disable-next-line no-param-reassign
         frontmatter = frontmatter.replace(new RegExp(regex, 'g'), val);
     }
-
     return frontmatter;
 }
-
-module.exports = {
+export { frontmatterRegex };
+export { getFrontmatterContent };
+export { interpolateThemeSettings };
+export default {
     frontmatterRegex,
     getFrontmatterContent,
     interpolateThemeSettings,

package/lib/utils/fsUtils.js

@@ -1,11 +1,6 @@
-/**
- * @module Contains helpers functions for working with file system
- */
-
-const fs = require('fs');
-const recursiveReadDir = require('recursive-readdir');
-const { parse } = require('../parse-json');
-
+import fs from 'fs';
+import recursiveReadDir from 'recursive-readdir';
+import { parse } from '../parse-json.js';
 /**
  * @param {string} filePath
  * @returns {Promise<Object>} - parsed JSON content of the file
@@ -15,8 +10,9 @@ async function parseJsonFile(filePath) {
     // We use parse-json instead of JSON.parse because it throws errors with better explanations what is wrong
     return parse(contentStr, filePath);
 }
-
-module.exports = {
+export { parseJsonFile };
+export { recursiveReadDir };
+export default {
     ...fs,
     parseJsonFile,
     recursiveReadDir,

package/lib/validator/schema-translations.js

@@ -1,4 +1,7 @@
-const schemaTranslations = require('../schemas/schemaTranslations.json');
+import { readFileSync } from 'fs';
+
+const fileUrl = new URL('../schemas/schemaTranslations.json', import.meta.url);
+const schemaTranslations = JSON.parse(readFileSync(fileUrl));
 
 class ValidatorSchemaTranslations {
     constructor() {
@@ -23,7 +26,6 @@ class ValidatorSchemaTranslations {
      */
     setTranslations(translations) {
         this.translations = translations;
-
         this.getTranslationsKeys();
     }
 
@@ -79,11 +81,9 @@ class ValidatorSchemaTranslations {
                 if (!this.trackedKeys.includes(key)) {
                     continue;
                 }
-
                 if (Array.isArray(value)) {
                     this.getTranslatableStrings(value);
                 }
-
                 this.setSchemaKeys(value);
             }
         }
@@ -100,7 +100,6 @@ class ValidatorSchemaTranslations {
             if (translationMatch) {
                 return false;
             }
-
             return !this.schemaKeys.includes(key);
         });
     }
@@ -113,5 +112,4 @@ class ValidatorSchemaTranslations {
         return this.schemaKeys.filter((key) => !this.translationsKeys.includes(key));
     }
 }
-
-module.exports = ValidatorSchemaTranslations;
+export default ValidatorSchemaTranslations;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@bigcommerce/stencil-cli",
-  "version": "8.2.0",
+  "version": "8.4.0",
+  "type": "module",
   "description": "CLI tool to run BigCommerce Stores locally for theme development.",
   "main": "index.js",
   "engines": {
@@ -10,8 +11,8 @@
   "scripts": {
     "lint": "eslint . && prettier --check . --ignore-unknown",
     "lint-and-fix": "eslint . --fix && prettier --write . --ignore-unknown",
-    "test": "jest",
-    "test-with-coverage": "jest --coverage --verbose",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "test-with-coverage": "npm run test --coverage --verbose",
     "release": "semantic-release"
   },
   "bin": {
@@ -49,13 +50,14 @@
   ],
   "dependencies": {
     "@bigcommerce/stencil-paper": "5.0.0",
-    "@bigcommerce/stencil-styles": "5.3.3",
+    "@bigcommerce/stencil-styles": "^6.1.1",
     "@hapi/boom": "^10.0.0",
-    "@hapi/glue": "^8.0.0",
+    "@hapi/glue": "^9.0.1",
     "@hapi/h2o2": "^9.1.0",
     "@hapi/hapi": "^20.2.2",
     "@hapi/inert": "^6.0.5",
-    "@octokit/rest": "^18.0.6",
+    "@jest/globals": "^29.7.0",
+    "@octokit/rest": "^21.0.2",
     "ajv": "^6.12.5",
     "archiver": "^5.0.2",
     "async": "^3.2.3",
@@ -74,6 +76,7 @@
     "inquirer": "^8.1.5",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.20",
+    "lodash-es": "^4.17.21",
     "memory-cache": "^0.2.0",
     "npm-which": "^3.0.1",
     "nypm": "^0.3.8",
@@ -86,7 +89,7 @@
     "progress": "^2.0.3",
     "recursive-readdir": "^2.2.2",
     "semver": "^7.3.2",
-    "simple-git": "^3.7.1",
+    "simple-git": "^3.26.0",
     "tarjan-graph": "^2.0.0",
     "tmp-promise": "^3.0.2",
     "upath": "^1.2.0",
@@ -99,7 +102,7 @@
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^8.0.6",
+    "@semantic-release/github": "^11.0.0",
     "@semantic-release/npm": "^9.0.1",
     "@semantic-release/release-notes-generator": "^10.0.3",
     "axios-mock-adapter": "^1.21.2",
@@ -113,7 +116,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "jest": "^29.7.0",
     "prettier": "2.1.2",
-    "semantic-release": "^19.0.5",
+    "semantic-release": "^24.1.1",
     "semantic-release-github-pullrequest": "^1.3.0"
   }
 }

package/server/config.js

@@ -1,4 +1,4 @@
-const Confidence = require('confidence');
+import Confidence from 'confidence';
 
 const config = {
     $meta: 'Config file',
@@ -7,13 +7,9 @@ const config = {
         port: 3000,
     },
 };
-
 const criteria = {
     env: process.env.NODE_ENV || 'development',
 };
-
 const store = new Confidence.Store(config);
-
-exports.get = (key) => store.get(key, criteria);
-
-exports.meta = (key) => store.meta(key, criteria);
+export const get = (key) => store.get(key, criteria);
+export const meta = (key) => store.meta(key, criteria);

package/server/index.js

@@ -1,58 +1,58 @@
-const Glue = require('@hapi/glue');
-const _ = require('lodash');
-const manifest = require('./manifest');
-const logo = require('./lib/show-logo');
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import Glue from '@hapi/glue';
+import * as _ from 'lodash-es';
+import * as manifest from './manifest.js';
+import logo from './lib/show-logo.js';
+import 'colors';
 
-require('colors');
+const getDirname = dirname(fileURLToPath(import.meta.url));
 
 function buildManifest(srcManifest, options) {
     const resManifest = _.cloneDeep(srcManifest);
     const pluginsByName = resManifest.register.plugins;
-
     const parsedSecureUrl = new URL(options.dotStencilFile.storeUrl); // The url to a secure page (prompted as login page)
     const parsedNormalUrl = new URL(options.dotStencilFile.normalStoreUrl); // The host url of the homepage;
     const storeUrl = parsedSecureUrl.protocol + '//' + parsedSecureUrl.host;
-
     resManifest.server.port = options.dotStencilFile.port;
-    pluginsByName['./plugins/router/router.module'].storeUrl = storeUrl;
-    pluginsByName['./plugins/router/router.module'].normalStoreUrl =
+    pluginsByName['./plugins/router/router.module.js'].storeUrl = storeUrl;
+    pluginsByName['./plugins/router/router.module.js'].normalStoreUrl =
         parsedNormalUrl.protocol + '//' + parsedNormalUrl.host;
-    pluginsByName['./plugins/router/router.module'].apiKey = options.dotStencilFile.apiKey;
-    pluginsByName['./plugins/router/router.module'].port = options.dotStencilFile.port;
-    pluginsByName['./plugins/router/router.module'].stencilCliVersion = options.stencilCliVersion;
-    pluginsByName['./plugins/router/router.module'].accessToken =
+    pluginsByName['./plugins/router/router.module.js'].apiKey = options.dotStencilFile.apiKey;
+    pluginsByName['./plugins/router/router.module.js'].port = options.dotStencilFile.port;
+    pluginsByName['./plugins/router/router.module.js'].stencilCliVersion =
+        options.stencilCliVersion;
+    pluginsByName['./plugins/router/router.module.js'].accessToken =
         options.dotStencilFile.accessToken;
-    pluginsByName['./plugins/renderer/renderer.module'].useCache = options.useCache;
-    pluginsByName['./plugins/renderer/renderer.module'].username = options.dotStencilFile.username;
-    pluginsByName['./plugins/renderer/renderer.module'].token = options.dotStencilFile.token;
-    pluginsByName['./plugins/renderer/renderer.module'].accessToken =
+    pluginsByName['./plugins/renderer/renderer.module.js'].useCache = options.useCache;
+    pluginsByName['./plugins/renderer/renderer.module.js'].username =
+        options.dotStencilFile.username;
+    pluginsByName['./plugins/renderer/renderer.module.js'].token = options.dotStencilFile.token;
+    pluginsByName['./plugins/renderer/renderer.module.js'].accessToken =
         options.dotStencilFile.accessToken;
-    pluginsByName['./plugins/renderer/renderer.module'].customLayouts =
+    pluginsByName['./plugins/renderer/renderer.module.js'].customLayouts =
         options.dotStencilFile.customLayouts;
-    pluginsByName['./plugins/renderer/renderer.module'].themePath = options.themePath;
-    pluginsByName['./plugins/renderer/renderer.module'].storeUrl = storeUrl;
-    pluginsByName['./plugins/renderer/renderer.module'].storeSettingsLocale =
+    pluginsByName['./plugins/renderer/renderer.module.js'].themePath = options.themePath;
+    pluginsByName['./plugins/renderer/renderer.module.js'].storeUrl = storeUrl;
+    pluginsByName['./plugins/renderer/renderer.module.js'].storeSettingsLocale =
         options.storeSettingsLocale;
-    pluginsByName['./plugins/theme-assets/theme-assets.module'].themePath = options.themePath;
-
+    pluginsByName['./plugins/theme-assets/theme-assets.module.js'].themePath = options.themePath;
     resManifest.register.plugins = _.reduce(
         pluginsByName,
         (pluginsArr, opts, plugin) => [...pluginsArr, { plugin, options: opts }],
         [],
     );
-
     return resManifest;
 }
-
 async function create(options) {
     const serverManifest = buildManifest(manifest.get('/'), options);
-
-    const server = await Glue.compose(serverManifest, { relativeTo: __dirname });
+    const server = await Glue.compose(serverManifest, { relativeTo: getDirname });
     await server.start();
 
     console.log(logo);
 
     return server;
 }
-
-module.exports = { create };
+export default {
+    create,
+};

package/server/lib/page-type-util.js

@@ -40,7 +40,6 @@ const PageTypes = {
     SUBSCRIBED: 'SUBSCRIBED',
     UNSUBSCRIBE: 'UNSUBSCRIBE',
 };
-
 const templateFileToPageTypeMap = {
     'pages/page': PageTypes.PAGE,
     'pages/product': PageTypes.PRODUCT,
@@ -83,7 +82,6 @@ const templateFileToPageTypeMap = {
     'pages/subscribed': PageTypes.SUBSCRIBED,
     'pages/unsubscribe': PageTypes.UNSUBSCRIBE,
 };
-
 /**
  * Convert a templateFile to pageType
  *
@@ -92,10 +90,9 @@ const templateFileToPageTypeMap = {
  */
 function getPageType(templateFile) {
     const pageType = templateFileToPageTypeMap[templateFile];
-
     return pageType;
 }
-
-module.exports = {
+export { getPageType };
+export default {
     getPageType,
 };

package/server/lib/show-logo.js

@@ -1,5 +1,6 @@
-require('colors');
+import 'colors';
 
+// eslint-disable-next-line import/no-mutable-exports
 let logo = '\n';
 logo += '                                     `+h\n'.blue;
 logo += '                                   `+ddd\n'.blue;
@@ -24,5 +25,4 @@ logo += '_________________________\n'.white;
 logo += '\n';
 logo += 'BigCommerce Stencil \n'.yellow;
 logo += '_________________________\n'.white;
-
-module.exports = logo;
+export default logo;