@bigcommerce/stencil-cli 4.1.0 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 ### Draft
 
+### 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))
+-   fix: STRF-9781 Bump axios, @ocktokit/rest and browser-sync ([931](https://github.com/bigcommerce/stencil-cli/pull/931))
+-   fix: STRF-9781 Bump async and confidence ([929](https://github.com/bigcommerce/stencil-cli/pull/929))
+-   fix: STRF-9781 Bump simple-git ([928](https://github.com/bigcommerce/stencil-cli/pull/928))
+
 ### 4.1.0 (2022-04-28)
 
 -   feat: strf-9749 Update Stencil Cli to use node-sass latest by default ([923](https://github.com/bigcommerce/stencil-cli/pull/923))

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`.
@@ -95,6 +95,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-debug.js

@@ -1,3 +1,5 @@
+#!/usr/bin/env node
+
 require('colors');
 const program = require('../lib/commander');
 

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