Merge pull request #895 from bc-alexsaiannyi/bctheme-1063

feat(storefront): bctheme-1063 modify stencil to start locally with components ui library
bigcommerce · Jun 20, 2022 · e66c57a · e66c57a
2 parents 36e0192 + eccacb9
commit e66c57a
Showing 1 changed file with 48 additions and 3 deletions.
diff --git a/lib/template-assembler.js b/lib/template-assembler.js
@@ -6,6 +6,44 @@ const upath = require('upath');
 
 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 packageMarker = 'external/';
+
+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} }}`,
+    );
+};
+
+/**
+ * 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 +58,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);
             });
@@ -81,7 +122,7 @@ function getTemplatePaths(templatesFolder, templates, options, callback) {
     });
 
     function resolvePartials(templateName, cb2) {
-        const templatePath = path.join(templatesFolder, `${templateName}.html`);
+        const templatePath = getCustomPath(templatesFolder, templateName);
 
         fs.readFile(templatePath, { encoding: 'utf-8' }, (err, content) => {
             const componentPaths = [];
@@ -147,6 +188,10 @@ function getTemplatePaths(templatesFolder, templates, options, callback) {
                         return;
                     }
 
+                    if (isExternalTemplate(templateName)) {
+                        matches = applyExternalPath(templateName, matches);
+                    }
+
                     async.each(matches, resolvePartials, cb2);
                 },
             );