@bigcommerce/stencil-cli 4.1.1 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 ### Draft
 
+### 5.2.0 (2022-08-30)
+
+-   feat: STRF-9877 Publish stencil cli docker image ([972](https://github.com/bigcommerce/stencil-cli/pull/972))
+-   fix: debug command ([970](https://github.com/bigcommerce/stencil-cli/pull/970))
+
+### 5.1.0 (2022-07-14)
+
+-   fix: STRF-9883 Interm fix to grab 1st variation ([951](https://github.com/bigcommerce/stencil-cli/pull/951))
+-   feat(storefront): bctheme-1063 modify stencil to start locally with components ui library ([895](https://github.com/bigcommerce/stencil-cli/pull/895))
+-   feat(storefront): bctheme-1064 Modify Stencil bundle for using Components UI Library ([904](https://github.com/bigcommerce/stencil-cli/pull/904))
+-   feat: paypal-1514 add sort type to schema ([960](https://github.com/bigcommerce/stencil-cli/pull/960))
+-   feat(storefront): strf-9923 CLI should not ask users for which API hostname to use ([955](https://github.com/bigcommerce/stencil-cli/pull/955))
+-   fix(storefront): bctheme-1138 fix error on import components with @ symbol in the path ([953](https://github.com/bigcommerce/stencil-cli/pull/953))
+-   fix(storefront): bctheme-1145 Enable using of external lib nested into organization for templates ([954](https://github.com/bigcommerce/stencil-cli/pull/954))
+-   feat(config): add ability to specify the secret file name ([957](https://github.com/bigcommerce/stencil-cli/pull/957))
+
+### 5.0.0 (2022-06-07)
+
+-   fix: STRF-9835 Bump paper ([947](https://github.com/bigcommerce/stencil-cli/pull/947))
+-   feat: strf-9791 Drop Node 12 Support ([945](https://github.com/bigcommerce/stencil-cli/pull/945))
+-   feat: STRF-9807 Dockerize stencil cli ([938](https://github.com/bigcommerce/stencil-cli/pull/938))
+-   merc-8592 Fix stencil CLI Push resulting in intermittent failures ([935](https://github.com/bigcommerce/stencil-cli/pull/935))
+-   feat: strf-9923 CLI should not ask users for which API hostname to use ([955](https://github.com/bigcommerce/stencil-cli/pull/955))
+
 ### 4.1.1 (2022-05-24)
 
 -   fix: strf-9781 Bump dev packages for linting ([932](https://github.com/bigcommerce/stencil-cli/pull/932))

package/README.md

@@ -8,7 +8,7 @@ The BigCommerce server emulator for local theme development.
 ## Install
 
 _Note: Stencil requires the Node.js runtime environment,
-version 12.x and 14.x (Recommended) are supported.
+version 14.x is supported.
 We do not yet have support for versions greater than Node 14._
 
 Run `npm install -g @bigcommerce/stencil-cli`.
@@ -30,6 +30,7 @@ Commands:
   push        Bundles up the theme into a zip file and uploads it to your store.
   pull        Pulls the configuration from the active theme on your live store and updates your local configuration.
   download    Downloads the theme files from the active theme on your live store.
+  debug       Prints environment and theme settings for debug purposes.
   help [cmd]  display help for [cmd]
 
 Options:
@@ -64,6 +65,8 @@ Run `stencil pull` to sync changes to your theme configuration from your live st
 been used to change certain theme settings, this will update those settings in config.json in your theme files so you
 don't overwrite them on your next upload.
 
+Run `stencil debug` to get information about runtime environment and the configuration
+
 ## Features
 
 ### BrowserSync
@@ -95,6 +98,20 @@ If you need any help or experience any bugs, please create a GitHub issue in thi
 If you would like to improve this project check out the [Contributing Guide](./CONTRIBUTING.md). Also, you can find
 the implementation details there.
 
+## Running in docker
+
+There is possibility to run stencil-cli in docker.
+Here are steps to have this functionality.
+First of all, build a docker image, let's name it `bc/stencil-cli`
+Run `docker build . -t bc/stencil-cli` in stencil-cli repo directory.
+
+Then, after the image is built, you want to run some commands against your theme.
+
+For example
+`docker run -p 3005:3005 -v /bigcommerce/cornerstone:/usr/src/app -it bc/stencil-cli stencil init`, where `3005` is port number definded in `config.stencil.json` and `/bigcommerce/cornerstone` path to where theme is located.
+
+`docker run -p 3005:3005 -v /bigcommerce/cornerstone:/usr/src/app -it bc/stencil-cli stencil start` and so on
+
 ## License
 
 Copyright (c) 2015-present, BigCommerce Inc.

package/bin/stencil.js

@@ -15,4 +15,5 @@ program
     .command('push', 'Bundles up the theme into a zip file and uploads it to your store.')
     .command('pull', 'Pulls currently active theme config files and overwrites local copy')
     .command('download', 'Downloads all the theme files')
+    .command('debug', 'Prints environment and theme settings for debug purposes')
     .parse(process.argv);

package/lib/StencilConfigManager.js

@@ -50,9 +50,8 @@ class StencilConfigManager {
         const generalConfig = this._fs.existsSync(this.configPath)
             ? await this._fsUtils.parseJsonFile(this.configPath)
             : null;
-        const secretsConfig = this._fs.existsSync(this.secretsPath)
-            ? await this._fsUtils.parseJsonFile(this.secretsPath)
-            : null;
+        const secretsConfig = await this._getSecretsConfig(generalConfig);
+
         if (generalConfig || secretsConfig) {
             const parsedConfig = { ...generalConfig, ...secretsConfig };
             return this._validateStencilConfig(parsedConfig, ignoreMissingFields);
@@ -93,6 +92,25 @@ class StencilConfigManager {
         );
     }
 
+    /**
+     * @private
+     * @param {object | null} config
+     * @returns {Promise<object | null>}
+     */
+    async _getSecretsConfig(generalConfig) {
+        if (generalConfig && generalConfig.secretsFileName) {
+            const secretsPath = path.join(this.themePath, generalConfig.secretsFileName);
+
+            if (this._fs.existsSync(secretsPath)) {
+                return this._fsUtils.parseJsonFile(secretsPath);
+            }
+        }
+
+        return this._fs.existsSync(this.secretsPath)
+            ? this._fsUtils.parseJsonFile(this.secretsPath)
+            : null;
+    }
+
     /**
      * @private
      * @param {object} config

package/lib/bundle-validator.js

@@ -410,7 +410,7 @@ class BundleValidator {
     async _validateCssFiles() {
         const assetsPath = path.join(this.themePath, 'assets');
         const stylesPath = path.join(this.themePath, 'assets/scss');
-        const rawConfig = await this.themeConfig.getRawConfig();
+        const rawConfig = await this.themeConfig.getConfig();
         const cssFiles = await this.getCssFiles();
 
         for (const file of cssFiles) {

package/lib/schemas/themeSchema.json

@@ -33,7 +33,8 @@
                 "imageDimension",
                 "text",
                 "optimizedCheckout-image",
-                "input"
+                "input",
+                "sort"
               ]
             },
             "content": {

package/lib/stencil-bundle.js

@@ -84,6 +84,8 @@ class Bundle {
         }
 
         this.tasks = tasks;
+
+        this._getExternalLibs = this._getExternalLibs.bind(this);
     }
 
     /**
@@ -151,51 +153,105 @@ class Bundle {
         };
     }
 
-    assembleTemplatesTask(callback) {
-        console.log('Template Parsing Started...');
+    /**
+     * helps to find any node modules dependencies with
+     * ui templates and returns its list
+     *
+     * @private
+     * @param {string} content
+     * @returns {Array}
+     */
+    async _getExternalLibs(templatePath) {
+        const content = await fs.promises.readFile(templatePath, { encoding: 'utf-8' });
+        const externalPathRegex = /{{2}>\s*(['"]external)[^{]*?}{2}/g;
+        const externalTemplatesImports = content.match(externalPathRegex);
 
-        recursiveReadDir(this.templatesPath, ['!*.html'], (readdirError, files) => {
-            if (readdirError) {
-                return callback(readdirError);
-            }
+        if (!externalTemplatesImports) return [];
 
-            const partials = files.map((file) => {
-                return upath.toUnix(
-                    file.replace(this.templatesPath + path.sep, '').replace(/\.html$/, ''),
-                );
-            });
+        return externalTemplatesImports.map((templateImport) => {
+            const [, importPath] = templateAssembler.partialRegex.exec(templateImport);
 
-            return async.map(
-                partials,
-                templateAssembler.assembleAndBundle.bind(null, this.templatesPath),
-                (err, results) => {
-                    const ret = {};
+            templateAssembler.partialRegex.lastIndex = 0;
 
-                    if (err) {
-                        return callback(err);
-                    }
+            return importPath
+                .split('/templates/')[0]
+                .slice(templateAssembler.packageMarker.length + 1);
+        });
+    }
 
-                    partials.forEach((file, index) => {
-                        ret[file] = results[index];
-                    });
+    async assembleTemplatesTask(callback) {
+        console.log('Template Parsing Started...');
+        const internalTemplatesList = await recursiveReadDir(this.templatesPath, ['!*.html']);
+        let externalLibs;
 
-                    return async.parallel(
-                        [
-                            this._checkObjects.bind(this, results),
-                            this._detectCycles.bind(this, results),
-                        ],
-                        (checkingError) => {
-                            if (checkingError) {
-                                callback(checkingError);
-                            }
-
-                            console.log(`${'ok'.green} -- Template Parsing Finished`);
-                            callback(null, ret);
-                        },
-                    );
-                },
+        try {
+            const removeDuplicates = (arr) => Array.from(new Set(arr.flat()));
+            const temp = internalTemplatesList.map(this._getExternalLibs);
+            const result = await Promise.all(temp);
+
+            externalLibs = removeDuplicates(result);
+        } catch (error) {
+            callback(error);
+        }
+
+        let externalLibPaths = [];
+        if (externalLibs.length) {
+            externalLibPaths = externalLibs.map((lib) =>
+                recursiveReadDir(path.join(this.themePath, 'node_modules', lib, 'templates'), [
+                    '!*.html',
+                ]),
+            );
+        }
+        // eslint-disable-next-line node/no-unsupported-features/es-builtins
+        const res = await Promise.allSettled([
+            recursiveReadDir(this.templatesPath, ['!*.html']),
+            ...externalLibPaths,
+        ]);
+        const [{ value: internalTemplates }, ...externalTemplatesList] = res;
+        const internalPartials = internalTemplates.map((file) => {
+            return upath.toUnix(
+                file.replace(this.templatesPath + path.sep, '').replace(/\.html$/, ''),
             );
         });
+        const externalPartials = externalTemplatesList.reduce(
+            (partials, { value: externalTemplates }) => {
+                const extractedPartials = externalTemplates.map((file) => {
+                    return upath.toUnix(
+                        'external' + file.split('node_modules')[1].replace(/\.html$/, ''),
+                    );
+                });
+                partials.push(...extractedPartials);
+
+                return partials;
+            },
+            [],
+        );
+        const allPartials = [...externalPartials, ...internalPartials];
+
+        let results;
+        try {
+            results = await async.map(
+                allPartials,
+                templateAssembler.assembleAndBundle.bind(null, this.templatesPath),
+            );
+
+            const ret = {};
+
+            allPartials.forEach((file, index) => {
+                ret[file] = results[index];
+            });
+
+            await Promise.all([
+                this._checkObjects.bind(this, results),
+                this._detectCycles.bind(this, results),
+            ]);
+
+            console.log(`${'ok'.green} -- Template Parsing Finished`);
+
+            return ret;
+        } catch (err) {
+            return callback(err);
+        }
     }
 
     async assembleSchema() {
@@ -317,56 +373,59 @@ class Bundle {
             typeof this.options.dest === 'string' ? this.options.dest : this.themePath;
         const bundleZipPath = path.join(outputFolder, outputName);
 
-        async.parallel(this.tasks, (err, taskResults) => {
-            if (err) {
-                return callback(err);
-            }
+        this.tasks.templates = this.assembleTemplatesTask.bind(this, callback);
 
-            const archive = Archiver('zip');
-            const fileStream = fs.createWriteStream(bundleZipPath);
-            archive.pipe(fileStream);
-
-            // Create manifest will use taskResults to generate a manifest file
-            return this.generateManifest(taskResults, (manifestGenerationError, manifest) => {
-                if (manifestGenerationError) {
-                    return callback(manifestGenerationError);
-                }
-
-                // eslint-disable-next-line no-param-reassign
-                taskResults.manifest = manifest;
-                // zip theme files
-                this._bundleThemeFiles(archive, this.themePath);
-
-                // zip all generated files
-                const failedTemplates = this._bundleParsedFiles(archive, taskResults);
-
-                fileStream.on('close', () => {
-                    const stats = fs.statSync(bundleZipPath);
-                    const { size } = stats;
-
-                    if (failedTemplates.length) {
-                        return console.error(
-                            `Error: Your bundle failed as templates generated from the files below are greater than or equal to 1 megabyte in size:\n${failedTemplates.join(
-                                '\n',
-                            )}`,
-                        );
-                    }
+        async
+            .parallel(this.tasks)
+            .then((taskResults) => {
+                const archive = Archiver('zip');
+                const fileStream = fs.createWriteStream(bundleZipPath);
+                archive.pipe(fileStream);
 
-                    if (size > MAX_SIZE_BUNDLE) {
-                        return console.error(
-                            `Error: Your bundle of size ${size} bytes is above the max size of ${MAX_SIZE_BUNDLE} bytes`,
-                        );
+                // Create manifest will use taskResults to generate a manifest file
+                return this.generateManifest(taskResults, (manifestGenerationError, manifest) => {
+                    if (manifestGenerationError) {
+                        return callback(manifestGenerationError);
                     }
 
-                    console.log(`${'ok'.green} -- Zipping Files Finished`);
+                    // eslint-disable-next-line no-param-reassign
+                    taskResults.manifest = manifest;
+                    // zip theme files
+                    this._bundleThemeFiles(archive, this.themePath);
 
-                    return callback(null, bundleZipPath);
-                });
+                    // zip all generated files
+                    const failedTemplates = this._bundleParsedFiles(archive, taskResults);
+
+                    fileStream.on('close', () => {
+                        const stats = fs.statSync(bundleZipPath);
+                        const { size } = stats;
+
+                        if (failedTemplates.length) {
+                            return console.error(
+                                `Error: Your bundle failed as templates generated from the files below are greater than or equal to 1 megabyte in size:\n${failedTemplates.join(
+                                    '\n',
+                                )}`,
+                            );
+                        }
 
-                // This triggers 'close' event in the file stream. No need to callback()
-                return archive.finalize();
+                        if (size > MAX_SIZE_BUNDLE) {
+                            return console.error(
+                                `Error: Your bundle of size ${size} bytes is above the max size of ${MAX_SIZE_BUNDLE} bytes`,
+                            );
+                        }
+
+                        console.log(`${'ok'.green} -- Zipping Files Finished`);
+
+                        return callback(null, bundleZipPath);
+                    });
+
+                    // This triggers 'close' event in the file stream. No need to callback()
+                    return archive.finalize();
+                });
+            })
+            .catch((err) => {
+                console.log(err);
             });
-        });
     }
 
     /**

package/lib/stencil-init.js

@@ -78,8 +78,8 @@ class StencilInit {
     }
 
     /**
-     * @param {{port: (number), normalStoreUrl: (string), accessToken: (string), apiHost: (string)}} defaultAnswers
-     * @param {{port: (number), normalStoreUrl: (string), accessToken: (string), apiHost: (string)}} cliOptions
+     * @param {{port: (number), normalStoreUrl: (string), accessToken: (string)}} defaultAnswers
+     * @param {{port: (number), normalStoreUrl: (string), accessToken: (string)}} cliOptions
      * @returns {{object[]}}
      */
     getQuestions(defaultAnswers, cliOptions) {
@@ -105,15 +105,6 @@ class StencilInit {
             });
         }
 
-        if (!cliOptions.apiHost) {
-            prompts.push({
-                type: 'input',
-                name: 'apiHost',
-                message: 'What API Host would you like to use?',
-                default: defaultAnswers.apiHost,
-            });
-        }
-
         if (!cliOptions.port) {
             prompts.push({
                 type: 'input',

package/lib/stencil-push.js

@@ -13,6 +13,7 @@ function stencilPush(options = {}, callback) {
             utils.notifyUserOfThemeLimitReachedIfNecessary,
             utils.promptUserToDeleteThemesIfNecessary,
             utils.deleteThemesIfNecessary,
+            utils.checkIfDeletionIsComplete(),
             utils.uploadBundleAgainIfNecessary,
             utils.notifyUserOfThemeUploadCompletion,
             utils.pollForJobCompletion((data) => ({ themeId: data.theme_id })),

package/lib/stencil-push.utils.js

@@ -87,6 +87,7 @@ utils.uploadBundle = async (options) => {
         config: { accessToken },
         bundleZipPath,
         storeHash,
+        uploadBundleAgain,
     } = options;
 
     const apiHost = options.apiHost || options.config.apiHost;
@@ -97,6 +98,7 @@ utils.uploadBundle = async (options) => {
             apiHost,
             bundleZipPath,
             storeHash,
+            uploadBundleAgain,
         });
         return {
             ...options,
@@ -188,12 +190,54 @@ utils.deleteThemesIfNecessary = async (options) => {
     return options;
 };
 
+utils.checkIfDeletionIsComplete = () => {
+    return async.retryable(
+        {
+            interval: 1000,
+            errorFilter: (err) => {
+                if (err.message === 'ThemeStillExists') {
+                    console.log(`${'warning'.yellow} -- Theme still exists;Retrying ...`);
+                    return true;
+                }
+                return false;
+            },
+            times: 5,
+        },
+        utils.checkIfThemeIsDeleted(),
+    );
+};
+
+utils.checkIfThemeIsDeleted = () => async (options) => {
+    const {
+        themeLimitReached,
+        config: { accessToken },
+        storeHash,
+        themeIdsToDelete,
+    } = options;
+
+    if (!themeLimitReached) {
+        return options;
+    }
+
+    const apiHost = options.apiHost || options.config.apiHost;
+
+    const result = await themeApiClient.getThemes({ accessToken, apiHost, storeHash });
+
+    const themeStillExists = result.some((theme) => themeIdsToDelete.includes(theme.uuid));
+
+    if (themeStillExists) {
+        throw new Error('ThemeStillExists');
+    }
+
+    return options;
+};
+
 utils.uploadBundleAgainIfNecessary = async (options) => {
     if (!options.themeLimitReached) {
         return options;
     }
 
-    return utils.uploadBundle(options);
+    return utils.uploadBundle({ ...options, uploadThemeAgain: true });
 };
 
 utils.notifyUserOfThemeUploadCompletion = async (options) => {

package/lib/template-assembler.js

@@ -4,8 +4,59 @@ const fs = require('graceful-fs');
 const path = require('path');
 const upath = require('upath');
 
-const partialRegex = /\{\{>\s*([_|\-|a-zA-Z0-9/]+)[^{]*?}}/g;
+const partialRegex = /\{\{>\s*([_|\-|a-zA-Z0-9@'"/]+)[^{]*?}}/g;
 const dynamicComponentRegex = /\{\{\s*?dynamicComponent\s*(?:'|")([_|\-|a-zA-Z0-9/]+)(?:'|").*?}}/g;
+const includeRegex = /{{2}>\s*([_|\-|a-zA-Z0-9/]+)[^{]*?}{2}/g;
+const pathStringRegex = /^["'].+["']$/;
+const packageMarker = 'external/';
+
+/**
+ * indicates if a template source is a node modules dependency
+ *
+ * @param {string} templateName
+ * @returns {Boolean}
+ */
+const isExternalTemplate = (templateName) => {
+    return templateName.startsWith(packageMarker);
+};
+const defineBaseRoute = (route) => route.split('/').slice(0, 3).join('/');
+const applyExternalPath = (templateName, templates) => {
+    return templates.map((t) => `${defineBaseRoute(templateName)}/${t}`);
+};
+const replacePartialNames = (content, partialRoute) => {
+    return content.replace(
+        includeRegex,
+        (__, partialName) => `{{> ${defineBaseRoute(partialRoute)}/${partialName} }}`,
+    );
+};
+const trimPartial = (partial) => {
+    if (pathStringRegex.test(partial)) {
+        return partial.slice(1, -1);
+    }
+    return partial;
+};
+
+/**
+ * Takes a templates folder and template name. It returns simple path for custom template if it's available
+ *  or use default folder instead
+ *
+ * @param {string} templatesFolder
+ * @param {string} templateName
+ */
+function getCustomPath(templatesFolder, templateName) {
+    let customTemplatesDir;
+    let customTemplateName;
+
+    if (templateName.startsWith(packageMarker)) {
+        customTemplatesDir = templatesFolder.replace('templates', 'node_modules');
+        customTemplateName = templateName.slice(packageMarker.length);
+    } else {
+        customTemplatesDir = templatesFolder;
+        customTemplateName = templateName;
+    }
+
+    return path.join(customTemplatesDir, `${customTemplateName}.html`);
+}
 
 /**
  * Takes a list of templates and grabs their content. It returns simple key/val pair
@@ -20,14 +71,17 @@ function getContent(templatesFolder, templatePaths, callback) {
         templatePaths,
         {},
         (acc, templatePath, reduceCallback) => {
-            const file = path.join(templatesFolder, `${templatePath}.html`);
+            const file = getCustomPath(templatesFolder, templatePath);
+
             fs.readFile(file, { encoding: 'utf-8' }, (err, content) => {
                 if (err) {
                     reduceCallback(err);
                     return;
                 }
 
-                acc[templatePath] = content;
+                acc[templatePath] = templatePath.startsWith(packageMarker)
+                    ? replacePartialNames(content, templatePath)
+                    : content;
 
                 reduceCallback(null, acc);
             });
@@ -80,8 +134,9 @@ function getTemplatePaths(templatesFolder, templates, options, callback) {
         return callback(null, templatePaths);
     });
 
-    function resolvePartials(templateName, cb2) {
-        const templatePath = path.join(templatesFolder, `${templateName}.html`);
+    function resolvePartials(t, cb2) {
+        const templateName = trimPartial(t);
+        const templatePath = getCustomPath(templatesFolder, templateName);
 
         fs.readFile(templatePath, { encoding: 'utf-8' }, (err, content) => {
             const componentPaths = [];
@@ -147,6 +202,10 @@ function getTemplatePaths(templatesFolder, templates, options, callback) {
                         return;
                     }
 
+                    if (isExternalTemplate(templateName)) {
+                        matches = applyExternalPath(templateName, matches);
+                    }
+
                     async.each(matches, resolvePartials, cb2);
                 },
             );
@@ -202,6 +261,7 @@ function getTemplateContentSync(templatesFolder, templateFile) {
 }
 
 module.exports = {
+    packageMarker,
     partialRegex,
     dynamicComponentRegex,
     assemble,

package/lib/theme-api-client.js

@@ -278,9 +278,10 @@ async function getVariationsByThemeId({ accessToken, apiHost, storeHash, themeId
  * @param {string} options.accessToken
  * @param {string} options.apiHost
  * @param {string} options.storeHash
+ * @param {boolean} options.uploadBundleAgain
  * @returns {Promise<object>}
  */
-async function postTheme({ bundleZipPath, accessToken, apiHost, storeHash }) {
+async function postTheme({ bundleZipPath, accessToken, apiHost, storeHash, uploadBundleAgain }) {
     const formData = new FormData();
     formData.append('file', fs.createReadStream(bundleZipPath), {
         filename: path.basename(bundleZipPath),
@@ -303,7 +304,12 @@ async function postTheme({ bundleZipPath, accessToken, apiHost, storeHash }) {
         // This status code is overloaded, so we need to check the message to determine
         // if we want to trigger the theme deletion flow.
         const uploadLimitPattern = /You have reached your upload limit/;
-        if (payload && payload.title && uploadLimitPattern.exec(payload.title)) {
+        if (
+            payload &&
+            payload.title &&
+            uploadLimitPattern.exec(payload.title) &&
+            !uploadBundleAgain
+        ) {
             return { themeLimitReached: true };
         }