@bigcommerce/stencil-cli 8.3.0 → 8.4.1

package/README.md

@@ -8,7 +8,7 @@ The BigCommerce server emulator for local theme development.
 ## Install
 
 Note: Stencil requires the Node.js runtime environment,
-versions 16.x, 18.x are supported.
+versions 20.x are supported.
 
 Run `npm install -g @bigcommerce/stencil-cli`.
 

package/bin/stencil-bundle.js

@@ -1,14 +1,11 @@
 #!/usr/bin/env node
-
-require('colors');
-
-const program = require('../lib/commander');
-const { THEME_PATH, PACKAGE_INFO } = require('../constants');
-const ThemeConfig = require('../lib/theme-config');
-const Bundle = require('../lib/stencil-bundle');
-const { printCliResultErrorAndExit } = require('../lib/cliCommon');
-const { prepareCommand } = require('../lib/cliCommon');
-const BuildConfigManager = require('../lib/BuildConfigManager');
+import 'colors';
+import program from '../lib/commander.js';
+import { THEME_PATH, PACKAGE_INFO } from '../constants.js';
+import ThemeConfig from '../lib/theme-config.js';
+import Bundle from '../lib/stencil-bundle.js';
+import { printCliResultErrorAndExit, prepareCommand } from '../lib/cliCommon.js';
+import BuildConfigManager from '../lib/BuildConfigManager.js';
 
 program
     .version(PACKAGE_INFO.version)
@@ -29,20 +26,16 @@ program
         'Set a timeout for the bundle operation. Default is 20 secs',
         '60',
     );
-
 const cliOptions = prepareCommand(program);
 const themeConfig = ThemeConfig.getInstance(THEME_PATH);
-
 async function run() {
     try {
         if (cliOptions.dest === true) {
             throw new Error('You have to specify a value for -d or --dest'.red);
         }
-
         if (cliOptions.name === true) {
             throw new Error('You have to specify a value for -n or --name'.red);
         }
-
         if (!themeConfig.configExists()) {
             throw new Error(
                 `${
@@ -50,7 +43,6 @@ async function run() {
                 } file in your top level theme directory.`,
             );
         }
-
         const rawConfig = await themeConfig.getRawConfig();
         const timeout = cliOptions.timeout * 1000; // seconds
         const buildConfigManager = new BuildConfigManager({ timeout });
@@ -61,13 +53,10 @@ async function run() {
             cliOptions,
             buildConfigManager,
         );
-
         const bundlePath = await bundle.initBundle();
-
         console.log(`Bundled saved to: ${bundlePath.cyan}`);
     } catch (err) {
         printCliResultErrorAndExit(err);
     }
 }
-
 run();

package/bin/stencil-debug.js

@@ -1,17 +1,13 @@
 #!/usr/bin/env node
-
-require('colors');
-const program = require('../lib/commander');
-
-const StencilDebug = require('../lib/StencilDebug');
-const { PACKAGE_INFO } = require('../constants');
-const { printCliResultErrorAndExit } = require('../lib/cliCommon');
+import 'colors';
+import program from '../lib/commander.js';
+import StencilDebug from '../lib/StencilDebug.js';
+import { PACKAGE_INFO } from '../constants.js';
+import { printCliResultErrorAndExit } from '../lib/cliCommon.js';
 
 program
     .version(PACKAGE_INFO.version)
     .option('-o, --output [filename]', 'If provided will write to file')
     .parse(process.argv);
-
 const cliOptions = program.opts();
-
 new StencilDebug().run(cliOptions).catch(printCliResultErrorAndExit);

package/bin/stencil-download.js

@@ -1,13 +1,10 @@
 #!/usr/bin/env node
-
-require('colors');
-const inquirer = require('inquirer');
-const program = require('../lib/commander');
-
-const { PACKAGE_INFO } = require('../constants');
-const stencilDownload = require('../lib/stencil-download');
-const { prepareCommand } = require('../lib/cliCommon');
-const { printCliResultErrorAndExit } = require('../lib/cliCommon');
+import 'colors';
+import inquirer from 'inquirer';
+import program from '../lib/commander.js';
+import { PACKAGE_INFO } from '../constants.js';
+import stencilDownload from '../lib/stencil-download.js';
+import { prepareCommand, printCliResultErrorAndExit } from '../lib/cliCommon.js';
 
 program
     .version(PACKAGE_INFO.version)
@@ -15,7 +12,6 @@ program
     .option('-e, --exclude [exclude]', 'specify a directory to exclude from download')
     .option('-c, --channel_id [channelId]', 'specify the channel ID of the storefront', parseInt)
     .option('-o, --overwrite', 'overwrite local with remote files');
-
 const cliOptions = prepareCommand(program);
 const extraExclude = cliOptions.exclude ? [cliOptions.exclude] : [];
 const options = {
@@ -23,13 +19,11 @@ const options = {
     apiHost: cliOptions.host,
     channelId: cliOptions.channel_id,
     overwrite: cliOptions.overwrite,
-    applyTheme: true, // fix to be compatible with stencil-push.utils
+    applyTheme: true,
     file: cliOptions.file,
 };
-
 async function run(opts) {
     const overwriteType = opts.file ? opts.file : 'files';
-
     const promptAnswers = await inquirer.prompt([
         {
             message: `${'Warning'.yellow} -- overwrite local with remote ${overwriteType}?`,
@@ -40,26 +34,20 @@ async function run(opts) {
             },
         },
     ]);
-
     const answers = {
         ...opts,
         ...promptAnswers,
     };
-
     if (!answers.overwrite) {
         console.log(`Request cancelled by user ${'No'.red}`);
         return;
     }
-
     console.log(`${'ok'.green} -- ${overwriteType} will be overwritten by the changes`);
-
     try {
         await stencilDownload(opts);
     } catch (err) {
         printCliResultErrorAndExit(err);
     }
-
     console.log(`${'ok'.green} -- Theme file(s) updated from remote`);
 }
-
 run(options);

package/bin/stencil-init.js

@@ -1,10 +1,8 @@
 #!/usr/bin/env node
-
-const program = require('../lib/commander');
-
-const StencilInit = require('../lib/stencil-init');
-const { PACKAGE_INFO } = require('../constants');
-const { prepareCommand, printCliResultErrorAndExit } = require('../lib/cliCommon');
+import program from '../lib/commander.js';
+import StencilInit from '../lib/stencil-init.js';
+import { PACKAGE_INFO } from '../constants.js';
+import { prepareCommand, printCliResultErrorAndExit } from '../lib/cliCommon.js';
 
 program
     .version(PACKAGE_INFO.version)
@@ -14,9 +12,7 @@ program
     .option('-h, --apiHost [host]', 'API Host')
     .option('-pm, --packageManager [pm]', 'Package manager')
     .option('-skip, --skipInstall', 'Skip packages installation');
-
 const cliOptions = prepareCommand(program);
-
 new StencilInit()
     .run({
         normalStoreUrl: cliOptions.url,

package/bin/stencil-pull.js

@@ -1,12 +1,9 @@
 #!/usr/bin/env node
-
-require('colors');
-
-const { PACKAGE_INFO } = require('../constants');
-const program = require('../lib/commander');
-const stencilPull = require('../lib/stencil-pull');
-const { prepareCommand } = require('../lib/cliCommon');
-const { printCliResultErrorAndExit } = require('../lib/cliCommon');
+import 'colors';
+import { PACKAGE_INFO } from '../constants.js';
+import program from '../lib/commander.js';
+import stencilPull from '../lib/stencil-pull.js';
+import { prepareCommand, printCliResultErrorAndExit } from '../lib/cliCommon.js';
 
 program
     .version(PACKAGE_INFO.version)
@@ -21,9 +18,7 @@ program
         'specify the channel ID of the storefront to pull configuration from',
         parseInt,
     );
-
 const cliOptions = prepareCommand(program);
-
 const options = {
     apiHost: cliOptions.host,
     saveConfigName: cliOptions.filename,
@@ -31,7 +26,6 @@ const options = {
     saved: cliOptions.saved || false,
     applyTheme: true, // fix to be compatible with stencil-push.utils
 };
-
 stencilPull(options, (err) => {
     if (err) {
         printCliResultErrorAndExit(err);

package/bin/stencil-push.js

@@ -1,11 +1,9 @@
 #!/usr/bin/env node
-
-require('colors');
-const { PACKAGE_INFO } = require('../constants');
-const program = require('../lib/commander');
-const stencilPush = require('../lib/stencil-push');
-const { prepareCommand } = require('../lib/cliCommon');
-const { printCliResultErrorAndExit } = require('../lib/cliCommon');
+import 'colors';
+import { PACKAGE_INFO } from '../constants.js';
+import program from '../lib/commander.js';
+import stencilPush from '../lib/stencil-push.js';
+import { prepareCommand, printCliResultErrorAndExit } from '../lib/cliCommon.js';
 
 program
     .version(PACKAGE_INFO.version)
@@ -18,7 +16,6 @@ program
         'specify the channel IDs of the storefront to push the theme to',
     )
     .option('-allc, --all_channels', 'push a theme to all available channels');
-
 const cliOptions = prepareCommand(program);
 const options = {
     apiHost: cliOptions.host,

package/bin/stencil-release.js

@@ -1,22 +1,17 @@
 #!/usr/bin/env node
-
-require('colors');
-const StencilRelease = require('../lib/release/release');
-const { PACKAGE_INFO } = require('../constants');
-const program = require('../lib/commander');
-const { checkNodeVersion } = require('../lib/cliCommon');
-const { printCliResultErrorAndExit } = require('../lib/cliCommon');
+import 'colors';
+import StencilRelease from '../lib/release/release.js';
+import { PACKAGE_INFO } from '../constants.js';
+import program from '../lib/commander.js';
+import { checkNodeVersion, printCliResultErrorAndExit } from '../lib/cliCommon.js';
 
 program
     .version(PACKAGE_INFO.version)
     .option('-b, --branch [name]', 'specify the main branch name')
     .parse(process.argv);
-
 checkNodeVersion();
-
 const cliOptions = program.opts();
 const options = {
     branch: cliOptions.branch || 'master',
 };
-
 new StencilRelease().run(options).catch(printCliResultErrorAndExit);

package/bin/stencil-scss-autofix.js

@@ -1,12 +1,10 @@
 #!/usr/bin/env node
-
-require('colors');
-const program = require('../lib/commander');
-
-const ThemeConfig = require('../lib/theme-config');
-const NodeSassAutoFixer = require('../lib/nodeSass/AutoFixer');
-const { THEME_PATH, PACKAGE_INFO } = require('../constants');
-const { printCliResultErrorAndExit } = require('../lib/cliCommon');
+import 'colors';
+import program from '../lib/commander.js';
+import ThemeConfig from '../lib/theme-config.js';
+import NodeSassAutoFixer from '../lib/nodeSass/AutoFixer.js';
+import { THEME_PATH, PACKAGE_INFO } from '../constants.js';
+import { printCliResultErrorAndExit } from '../lib/cliCommon.js';
 
 program
     .version(PACKAGE_INFO.version)
@@ -15,9 +13,6 @@ program
         'will not write any changes to the file system, instead it will print the changes to the console',
     )
     .parse(process.argv);
-
 const cliOptions = program.opts();
-
 const themeConfig = ThemeConfig.getInstance(THEME_PATH);
-
 new NodeSassAutoFixer(THEME_PATH, themeConfig, cliOptions).run().catch(printCliResultErrorAndExit);

package/bin/stencil-start.js

@@ -1,11 +1,10 @@
 #!/usr/bin/env node
-
-require('colors');
-const { PACKAGE_INFO } = require('../constants');
-const program = require('../lib/commander');
-const StencilStart = require('../lib/stencil-start');
-const { printCliResultErrorAndExit, prepareCommand } = require('../lib/cliCommon');
-const BuildConfigManager = require('../lib/BuildConfigManager');
+import 'colors';
+import { PACKAGE_INFO } from '../constants.js';
+import program from '../lib/commander.js';
+import StencilStart from '../lib/stencil-start.js';
+import { printCliResultErrorAndExit, prepareCommand } from '../lib/cliCommon.js';
+import BuildConfigManager from '../lib/BuildConfigManager.js';
 
 program
     .version(PACKAGE_INFO.version)
@@ -21,7 +20,6 @@ program
         'Turns off caching for API resource data per storefront page. The cache lasts for 5 minutes before automatically refreshing.',
     )
     .option('-t, --timeout', 'Set a timeout for the bundle operation. Default is 20 secs', '60');
-
 const cliOptions = prepareCommand(program);
 const options = {
     open: cliOptions.open,
@@ -31,7 +29,6 @@ const options = {
     tunnel: cliOptions.tunnel,
     cache: cliOptions.cache,
 };
-
 const timeout = cliOptions.timeout * 1000; // seconds
 const buildConfigManager = new BuildConfigManager({ timeout });
 new StencilStart({ buildConfigManager }).run(options).catch(printCliResultErrorAndExit);

package/bin/stencil.js

@@ -1,7 +1,6 @@
 #!/usr/bin/env node
-
-const program = require('../lib/commander');
-const { PACKAGE_INFO } = require('../constants');
+import program from '../lib/commander.js';
+import { PACKAGE_INFO } from '../constants.js';
 
 program
     .version(PACKAGE_INFO.version)

package/constants.js

@@ -1,23 +1,23 @@
-/// //////////////////////////////////////   Stencil CLI   ///////////////////////////////////// ///
-
-const PACKAGE_INFO = require('./package.json');
-
+import { readFileSync } from 'fs';
 /// ////////////////////////////////////////   Themes   /////////////////////////////////////// ///
-
 const THEME_PATH = process.cwd();
-
 const DEFAULT_CUSTOM_LAYOUTS_CONFIG = {
     brand: {},
     category: {},
     page: {},
     product: {},
 };
-
 /// /////////////////////////////////////////   Other   //////////////////////////////////////// ///
-
 const API_HOST = 'https://api.bigcommerce.com';
 
-module.exports = {
+const packageConfigUrl = new URL('./package.json', import.meta.url);
+const PACKAGE_INFO = JSON.parse(readFileSync(packageConfigUrl));
+
+export { PACKAGE_INFO };
+export { THEME_PATH };
+export { DEFAULT_CUSTOM_LAYOUTS_CONFIG };
+export { API_HOST };
+export default {
     PACKAGE_INFO,
     THEME_PATH,
     DEFAULT_CUSTOM_LAYOUTS_CONFIG,

package/lib/BuildConfigManager.js

@@ -1,24 +1,25 @@
-const _ = require('lodash');
-const { fork } = require('child_process');
-const path = require('path');
-const fsModule = require('fs');
+import { once } from 'lodash-es';
+import { fork } from 'child_process';
+import path from 'path';
+import fsModule from 'fs';
+import { createRequire } from 'node:module';
+import { THEME_PATH } from '../constants.js';
 
-const { THEME_PATH } = require('../constants');
+const require = createRequire(import.meta.url);
 
 class BuildConfigManager {
     constructor({ workDir = THEME_PATH, fs = fsModule, timeout = 20000 } = {}) {
-        this.configFileName = 'stencil.conf.js';
-
+        this.oldConfigFileName = 'stencil.conf.js';
+        this.configFileName = 'stencil.conf.cjs';
         this._workDir = workDir;
         this._buildConfigPath = path.join(workDir, this.configFileName);
+        this._oldBuildConfigPath = path.join(workDir, this.oldConfigFileName);
         this._fs = fs;
         this._onReadyCallbacks = [];
         this._worker = null;
         this._workerIsReady = false;
         this.timeout = timeout;
-
-        const config = this._getConfig(this._buildConfigPath);
-
+        const config = this._getConfig(this._buildConfigPath, this._oldBuildConfigPath);
         this.development = config.development || this._devWorker;
         this.production = config.production || this._prodWorker;
         this.watchOptions = config.watchOptions;
@@ -27,7 +28,6 @@ class BuildConfigManager {
     initWorker() {
         if (this._fs.existsSync(this._buildConfigPath)) {
             this._worker = fork(this._buildConfigPath, [], { cwd: this._workDir });
-
             this._worker.on('message', (message) => {
                 if (message === 'ready') {
                     this._workerIsReady = true;
@@ -35,7 +35,6 @@ class BuildConfigManager {
                 }
             });
         }
-
         return this;
     }
 
@@ -43,20 +42,28 @@ class BuildConfigManager {
         this._worker.kill(signal);
     }
 
-    _getConfig(configPath) {
+    _getConfig(configPath, oldConfigPath) {
         if (this._fs.existsSync(configPath)) {
-            // eslint-disable-next-line
+            // eslint-disable-next-line import/no-dynamic-require
+            return require(configPath);
+        }
+        if (this._fs.existsSync(oldConfigPath)) {
+            this._moveOldConfig(configPath, oldConfigPath);
+            // eslint-disable-next-line import/no-dynamic-require
             return require(configPath);
         }
-
         return {};
     }
 
+    _moveOldConfig(newPath, oldPath) {
+        this._fs.copyFileSync(oldPath, newPath);
+        this._fs.rmSync(oldPath);
+    }
+
     _onWorkerReady(onReady) {
         if (this._workerIsReady) {
             process.nextTick(onReady);
         }
-
         this._onReadyCallbacks.push(onReady);
     }
 
@@ -75,13 +82,11 @@ class BuildConfigManager {
     }
 
     _prodWorker(done) {
-        const callback = _.once(done);
-
+        const callback = once(done);
         if (!this._worker) {
             process.nextTick(() => callback('worker initialization failed'));
             return;
         }
-
         const timeoutId = setTimeout(() => {
             this.stopWorker();
             console.log(
@@ -90,7 +95,6 @@ class BuildConfigManager {
             );
             callback('worker timed out');
         }, this.timeout);
-
         this._onWorkerReady(() => {
             clearTimeout(timeoutId);
             // send a message to the worker to start bundling js
@@ -102,12 +106,10 @@ class BuildConfigManager {
                 }
             });
         });
-
         this._worker.on('close', () => {
             callback('worker terminated');
             clearTimeout(timeoutId);
         });
     }
 }
-
-module.exports = BuildConfigManager;
+export default BuildConfigManager;

package/lib/Cycles.js

@@ -1,5 +1,5 @@
-const Graph = require('tarjan-graph');
-const util = require('util');
+import Graph from 'tarjan-graph';
+import util from 'util';
 
 class Cycles {
     /**
@@ -9,7 +9,6 @@ class Cycles {
         if (!Array.isArray(templatePaths)) {
             throw new Error('templatePaths must be an Array');
         }
-
         this.templatePaths = templatePaths;
         this.partialRegex = /{{>\s*([_|\-|a-zA-Z0-9/]+)[^{]*?}}/g;
         this.dynamicComponentRegex = /{{\s*?dynamicComponent\s*(?:'|")([_|\-|a-zA-Z0-9/]+)(?:'|").*?}}/g;
@@ -22,7 +21,6 @@ class Cycles {
     detect() {
         for (const templatesByPath of this.templatePaths) {
             const graph = new Graph();
-
             for (const [templatePath, templateContent] of Object.entries(templatesByPath)) {
                 const dependencies = [
                     ...this._geDependantPartials(templateContent, templatePath),
@@ -32,10 +30,8 @@ class Cycles {
                         templatePath,
                     ),
                 ];
-
                 graph.add(templatePath, dependencies);
             }
-
             if (graph.hasCycle()) {
                 const foundCycles = util.inspect(graph.getCycles());
                 throw new Error(`Circular dependency in template detected. \r\n${foundCycles}`);
@@ -51,7 +47,6 @@ class Cycles {
      */
     _geDependantPartials(templateContent, pathToSkip) {
         const dependencies = [];
-
         let match = this.partialRegex.exec(templateContent);
         while (match !== null) {
             const partialPath = match[1];
@@ -61,7 +56,6 @@ class Cycles {
             }
             match = this.partialRegex.exec(templateContent);
         }
-
         return dependencies;
     }
 
@@ -74,7 +68,6 @@ class Cycles {
      */
     _getDependantDynamicComponents(templateContent, allTemplatesByPath, pathToSkip) {
         const dependencies = [];
-
         let match = this.dynamicComponentRegex.exec(templateContent);
         while (match !== null) {
             const dynamicComponents = this._getDynamicComponents(
@@ -85,7 +78,6 @@ class Cycles {
             dependencies.push(...dynamicComponents);
             match = this.dynamicComponentRegex.exec(templateContent);
         }
-
         return dependencies;
     }
 
@@ -105,5 +97,4 @@ class Cycles {
         }, []);
     }
 }
-
-module.exports = Cycles;
+export default Cycles;

package/lib/ScssValidator.js

@@ -1,8 +1,7 @@
-require('colors');
-const path = require('path');
-const StencilStyles = require('@bigcommerce/stencil-styles');
-
-const cssCompiler = require('./css/compile');
+import 'colors';
+import path from 'path';
+import StencilStyles from '@bigcommerce/stencil-styles';
+import cssCompiler from './css/compile.js';
 
 class ScssValidator {
     /**
@@ -20,7 +19,6 @@ class ScssValidator {
         const stylesPath = path.join(this.themePath, 'assets/scss');
         const rawConfig = await this.themeConfig.getConfig();
         const cssFiles = await this.getCssFiles();
-
         for await (const file of cssFiles) {
             try {
                 /* eslint-disable-next-line no-await-in-loop */
@@ -43,7 +41,6 @@ class ScssValidator {
         if (e.formatted) {
             return `${e.formatted.replace('Error: ', '')}: `;
         }
-
         return e.message;
     }
 
@@ -52,5 +49,4 @@ class ScssValidator {
         return styles.getCssFiles(this.themePath);
     }
 }
-
-module.exports = ScssValidator;
+export default ScssValidator;

package/lib/StencilCLISettings.js

@@ -14,7 +14,5 @@ class StencilCLISettings {
         return this.versboseNetworkLogging;
     }
 }
-
 const settings = new StencilCLISettings();
-
-module.exports = settings;
+export default settings;