From eccacb921c99dd832082f2793899ed5387dd2495 Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Wed, 23 Mar 2022 10:55:38 +0200
Subject: [PATCH] feat(storefront): bctheme-1063 modify stencil to start
 locally with components ui library

---
 lib/template-assembler.js | 51 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 48 insertions(+), 3 deletions(-)

diff --git a/lib/template-assembler.js b/lib/template-assembler.js
index b2932f44..c5712c2e 100644
--- 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);
                 },
             );