@bigcommerce/stencil-cli 8.2.0 → 8.4.0

package/server/plugins/renderer/responses/pencil-response.js

@@ -1,6 +1,5 @@
-const _ = require('lodash');
-const Paper = require('@bigcommerce/stencil-paper');
-
+import { each } from 'lodash-es';
+import Paper from '@bigcommerce/stencil-paper';
 /**
  * Escapes html entities
  *
@@ -13,17 +12,14 @@ const escapeHtml = (html) => {
         '>': '>',
         '"': '"',
     };
-
     return html.replace(/[&<>"]/g, (tag) => charsToReplace[tag] || tag);
 };
-
 /**
  * Scape special characters for regular expression
  *
  * @param {string} string
  */
 const escapeRegex = (string) => string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
-
 /**
  * Returns template path
  *
@@ -33,24 +29,18 @@ const escapeRegex = (string) => string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
  */
 const getTemplatePath = (request, data) => {
     let paths = data.template_file;
-
     if (request.headers['stencil-options']) {
         const options = JSON.parse(request.headers['stencil-options']);
-
         if (options.render_with && typeof options.render_with === 'string') {
             const componentsToRender = options.render_with.split(',');
-
             paths = componentsToRender.map((component) => `components/${component}`);
-
             if (paths.length === 1) {
                 [paths] = paths;
             }
         }
     }
-
     return paths;
 };
-
 /**
  * Returns boolean if this handlebars version is supported
  *
@@ -58,7 +48,6 @@ const getTemplatePath = (request, data) => {
  */
 const isSupportedHandlebarsVersion = (version) =>
     ['handlebars-v3', 'handlebars-v4'].includes(version);
-
 /**
  * Node.js projects are using variables in format: handlebars-v3, handlebars-v4;
  * Storefront and db are using format: handlebars_v3, handlebars_v4;
@@ -67,7 +56,6 @@ const isSupportedHandlebarsVersion = (version) =>
  * @param {string} version
  */
 const compatibilizeTemplateEngine = (version) => version.replace('_', '-');
-
 /**
  * Output post-processing
  *
@@ -76,25 +64,20 @@ const compatibilizeTemplateEngine = (version) => version.replace('_', '-');
  */
 const makeDecorator = (request, context) => (content) => {
     let updatedContent = content;
-
     if (context.settings) {
         const baseUrlregex = new RegExp(escapeRegex(context.settings.base_url), 'g');
         updatedContent = content.replace(baseUrlregex, '');
-
         const secureBaseUrlRegex = new RegExp(escapeRegex(context.settings.secure_base_url), 'g');
         updatedContent = content.replace(secureBaseUrlRegex, '');
     }
-
     if (request.query.debug === 'bar') {
         const contextStr = escapeHtml(JSON.stringify(context, null, 2));
         const debugBar = `<pre style="background-color:#EEE; word-wrap:break-word;"> ${contextStr} </pre>`;
         const bodyRegex = new RegExp('</body>');
         updatedContent = content.replace(bodyRegex, `${debugBar}\n</body>`);
     }
-
     return updatedContent;
 };
-
 class PencilResponse {
     /**
      * @param {Object} data
@@ -120,13 +103,11 @@ class PencilResponse {
         const templateEngine = compatibilizeTemplateEngine(
             this.data.context.template_engine || 'handlebars-v3',
         );
-
         if (!isSupportedHandlebarsVersion(templateEngine)) {
             throw new Error(
                 'Provided Handlebars version is not supported! Please use:handlebars-v3, handlebars-v4',
             );
         }
-
         const paper = new Paper(
             this.data.context.settings,
             this.data.context.theme_settings,
@@ -136,31 +117,23 @@ class PencilResponse {
         // Set the environment to dev
         this.data.context.in_development = true;
         this.data.context.in_production = false;
-
         paper.addDecorator(makeDecorator(request, this.data.context));
         paper.setContent(this.data.renderedRegions);
-
         // Plugins have the opportunity to add/modify the response by using decorators
-        _.each(request.app.decorators, (decorator) => {
+        each(request.app.decorators, (decorator) => {
             paper.addDecorator(decorator);
         });
-
         const templatePath = getTemplatePath(request, this.data);
-
         if (request.query.debug === 'context') {
             return this.data.context;
         }
-
         try {
             await paper.loadTheme(templatePath, this.data.acceptLanguage);
             const output = await paper.renderTheme(templatePath, this.data);
-
             const response = h.response(output).code(this.data.statusCode);
-
             if (this.data.headers['set-cookie']) {
                 response.header('set-cookie', this.data.headers['set-cookie']);
             }
-
             return response;
         } catch (err) {
             console.error(err.message.red);
@@ -168,5 +141,4 @@ class PencilResponse {
         }
     }
 }
-
-module.exports = PencilResponse;
+export default PencilResponse;

package/server/plugins/renderer/responses/raw-response.js

@@ -1,11 +1,10 @@
-const cheerio = require('cheerio');
-const utils = require('../../../lib/utils');
+import * as cheerio from 'cheerio';
+import { int2uuid } from '../../../lib/utils.js';
 
 const internals = {
-    stubActiveVersion: utils.int2uuid(1),
-    stubActiveConfig: utils.int2uuid(1),
+    stubActiveVersion: int2uuid(1),
+    stubActiveConfig: int2uuid(1),
 };
-
 class RawResponse {
     /**
      * @param {buffer} data
@@ -21,15 +20,13 @@ class RawResponse {
 
     respond(request, h) {
         let payload = this.data;
-        internals.stubActiveConfig = utils.int2uuid(request.app.themeConfig.variationIndex + 1);
-
+        internals.stubActiveConfig = int2uuid(request.app.themeConfig.variationIndex + 1);
         if (
             request.path.startsWith('/checkout.php') ||
             request.path.startsWith('/finishorder.php')
         ) {
             payload = this._appendCss(payload.toString('utf8'));
         }
-
         // To be removed when we go to Phase 3
         if (request.path.startsWith('/checkout')) {
             payload = payload
@@ -39,9 +36,7 @@ class RawResponse {
                     `/stencil/${internals.stubActiveVersion}/${internals.stubActiveConfig}/css/optimized-checkout.css`,
                 );
         }
-
         const response = h.response(payload).code(this.statusCode);
-
         for (const [name, values] of Object.entries(this.headers)) {
             switch (name) {
                 case 'transfer-encoding':
@@ -56,7 +51,6 @@ class RawResponse {
                     response.header(name, values.toString());
             }
         }
-
         return response;
     }
 
@@ -69,10 +63,8 @@ class RawResponse {
     _appendCss(payload) {
         const dom = cheerio.load(payload);
         const url = `/stencil/${internals.stubActiveVersion}/${internals.stubActiveConfig}/css/checkout.css`;
-
         dom('head').append(`<link href="${url}" type="text/css" rel="stylesheet">`);
         return dom.html();
     }
 }
-
-module.exports = RawResponse;
+export default RawResponse;

package/server/plugins/renderer/responses/redirect-response.js

@@ -12,7 +12,6 @@ class RedirectResponse {
 
     respond(request, h) {
         const response = h.redirect(this.location).code(this.statusCode);
-
         for (const [name, values] of Object.entries(this.headers)) {
             switch (name) {
                 case 'transfer-encoding':
@@ -34,9 +33,7 @@ class RedirectResponse {
                     response.header(name, values.toString());
             }
         }
-
         return response;
     }
 }
-
-module.exports = RedirectResponse;
+export default RedirectResponse;

package/server/plugins/router/router.module.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
-const ThemeConfig = require('../../../lib/theme-config');
+import { defaultsDeep } from 'lodash-es';
+import ThemeConfig from '../../../lib/theme-config.js';
 
 const internals = {
     options: {
@@ -19,7 +19,6 @@ const internals = {
         graphQL: '/graphql',
     },
 };
-
 function mapUri(req) {
     const host = `https://${internals.options.storeUrl.replace(/http[s]?:\/\//, '')}`;
     const urlParams = req.url.search || '';
@@ -28,28 +27,22 @@ function mapUri(req) {
         'stencil-cli': internals.options.stencilCliVersion,
         'x-auth-token': internals.options.accessToken,
     };
-
     return { uri, headers };
 }
-
 function register(server, options) {
-    internals.options = _.defaultsDeep(options, internals.options);
-
+    internals.options = defaultsDeep(options, internals.options);
     server.ext('onRequest', (request, h) => {
         request.app.storeUrl = internals.options.storeUrl;
         request.app.normalStoreUrl = internals.options.normalStoreUrl;
         request.app.apiKey = internals.options.apiKey;
         request.app.themeConfig = ThemeConfig.getInstance();
-
         return h.continue;
     });
-
     server.dependency(
         ['@hapi/inert', '@hapi/h2o2', 'Renderer', 'ThemeAssets'],
         internals.registerRoutes,
     );
 }
-
 internals.registerRoutes = (server) => {
     server.route([
         {
@@ -188,9 +181,11 @@ internals.registerRoutes = (server) => {
         },
     ]);
 };
-
-module.exports = {
+export const name = 'Router';
+export const version = '0.0.1';
+export { register };
+export default {
     register,
-    name: 'Router',
-    version: '0.0.1',
+    name,
+    version,
 };

package/server/plugins/theme-assets/theme-assets.module.js

@@ -1,42 +1,35 @@
-const _ = require('lodash');
-const Boom = require('@hapi/boom');
-const path = require('path');
-const utils = require('../../lib/utils');
-const cssCompiler = require('../../../lib/css/compile');
+import { defaultsDeep } from 'lodash-es';
+import * as Boom from '@hapi/boom';
+import path from 'path';
+import { uuidRegExp, uuid2int } from '../../lib/utils.js';
+import cssCompiler from '../../../lib/css/compile.js';
 
 const internals = {
     options: {},
 };
-
 function register(server, options) {
-    internals.options = _.defaultsDeep(options, internals.options);
-
+    internals.options = defaultsDeep(options, internals.options);
     server.expose('cssHandler', internals.cssHandler);
     server.expose('assetHandler', internals.assetHandler);
 }
-
 /**
  * Get the variation index from the "ConfigId" in the css filename
  * @param  {string} fileName
  * @returns {number}
  */
 internals.getVariationIndex = (fileName) => {
-    const match = fileName.match(new RegExp(`.+-(${utils.uuidRegExp})$`));
-
-    return match ? utils.uuid2int(match[1]) - 1 : 0;
+    const match = fileName.match(new RegExp(`.+-(${uuidRegExp})$`));
+    return match ? uuid2int(match[1]) - 1 : 0;
 };
-
 /**
  * Get the original css file name
  * @param  {string} fileName
  * @returns {string}
  */
 internals.getOriginalFileName = (fileName) => {
-    const match = fileName.match(new RegExp(`(.+)-${utils.uuidRegExp}$`));
-
+    const match = fileName.match(new RegExp(`(.+)-${uuidRegExp}$`));
     return match ? match[1] : fileName;
 };
-
 /**
  * CSS Compiler Handler.  This utilises the CSS Assembler to gather all of the CSS files and then the
  * StencilStyles plugin to compile them all.
@@ -46,19 +39,15 @@ internals.getOriginalFileName = (fileName) => {
 internals.cssHandler = async (request, h) => {
     const variationIndex = internals.getVariationIndex(request.params.fileName);
     const variationExists = await request.app.themeConfig.variationExists(variationIndex);
-
     if (!variationExists) {
         throw Boom.notFound(`Variation ${variationIndex + 1} does not exist.`);
     }
-
     // Set the variation to get the right theme configuration
     request.app.themeConfig.setVariation(variationIndex);
-
     // Get the theme configuration
     const configuration = await request.app.themeConfig.getConfig();
     const fileName = internals.getOriginalFileName(request.params.fileName);
     const themeAssetsPath = internals.getThemeAssetsPath();
-
     try {
         const css = await cssCompiler.compile(configuration, themeAssetsPath, fileName);
         return h.response(css).type('text/css');
@@ -67,7 +56,6 @@ internals.cssHandler = async (request, h) => {
         throw Boom.badData(err);
     }
 };
-
 /**
  * Assets handler
  *
@@ -76,16 +64,16 @@ internals.cssHandler = async (request, h) => {
  */
 internals.assetHandler = (request, h) => {
     const filePath = path.join(internals.getThemeAssetsPath(), request.params.fileName);
-
     return h.file(filePath);
 };
-
 internals.getThemeAssetsPath = () => {
     return path.join(internals.options.themePath, 'assets');
 };
-
-module.exports = {
+export const name = 'ThemeAssets';
+export const version = '0.0.1';
+export { register };
+export default {
     register,
-    name: 'ThemeAssets',
-    version: '0.0.1',
+    name,
+    version,
 };

package/lib/css-assembler.js

@@ -1,99 +0,0 @@
-const async = require('async');
-const fs = require('fs');
-const path = require('path');
-const upath = require('upath');
-
-const importRegex = /@import\s+?["'](.+?)["'];/g;
-
-/**
- * Parses all of the imports for SCSS files and returns a flat object with the file path as the key and
- * file content as the value.
- *
- * @param cssFiles
- * @param absolutePath
- * @param type - scss
- * @param options - options object
- * @param callback
- */
-function assemble(cssFiles, absolutePath, type, options, callback) {
-    const ret = {};
-    const ext = `.${type}`;
-
-    const cssFilesArr = Array.isArray(cssFiles) ? cssFiles : [cssFiles];
-
-    const parseImports = (cssFileAlias, parseImportsCallback) => {
-        const normalizedCssFileAlias = cssFileAlias.replace(/(\.scss)$/g, '');
-        const typedCssFilePath = path.join(absolutePath, normalizedCssFileAlias + ext);
-        const rawCssFilePath = path.join(absolutePath, normalizedCssFileAlias + '.css');
-        const cssFileAliasDir = path.parse(normalizedCssFileAlias).dir;
-
-        const fileParts = path.parse(typedCssFilePath);
-        const underscoredFilePath = path.join(fileParts.dir, `_${fileParts.base}`);
-        let filePath;
-
-        if (fs.existsSync(typedCssFilePath)) {
-            filePath = typedCssFilePath;
-        } else if (fs.existsSync(underscoredFilePath)) {
-            filePath = underscoredFilePath;
-        } else if (ext === '.scss' && fs.existsSync(rawCssFilePath)) {
-            filePath = rawCssFilePath;
-        } else {
-            // File doesn't exist, just return to skip it
-            parseImportsCallback();
-            return;
-        }
-
-        fs.readFile(filePath, { encoding: 'utf-8' }, (err, content) => {
-            const matches = [];
-            let match;
-            let importCssFileAlias;
-
-            if (!err) {
-                // Ensure all import paths are Unix paths for prod compat.
-                const cssFile = options.bundle
-                    ? upath.toUnix(normalizedCssFileAlias + ext)
-                    : normalizedCssFileAlias + ext;
-
-                ret[cssFile] = content;
-                match = importRegex.exec(content);
-
-                while (match !== null) {
-                    [, importCssFileAlias] = match;
-                    if (cssFileAliasDir) {
-                        importCssFileAlias = path.join(cssFileAliasDir, importCssFileAlias);
-                    }
-
-                    if (!ret[importCssFileAlias + ext]) {
-                        matches.push(importCssFileAlias);
-                    }
-
-                    match = importRegex.exec(content);
-                }
-            }
-
-            async.each(matches, parseImports, parseImportsCallback);
-        });
-    };
-
-    async.map(
-        cssFilesArr,
-        (cssFile, mapCallback) => {
-            const cssFileParts = path.parse(cssFile);
-            const cssFileAlias = path.join(cssFileParts.dir, cssFileParts.name);
-
-            parseImports(cssFileAlias, mapCallback);
-        },
-        (err) => {
-            if (err) {
-                callback(err);
-                return;
-            }
-
-            callback(null, ret);
-        },
-    );
-}
-
-module.exports = {
-    assemble,
-};