MAGE-1000: Split out template engine adapter to use parsing outside of promises

Author: cammonro

view/frontend/web/js/instantsearch.js

@@ -1,34 +1,15 @@
 define([
     'jquery',
     'algoliaBundle',
-    'algoliaHoganLib',
-    'algoliaMustacheLib',
     'algoliaTemplateEngine',
     'Magento_Catalog/js/price-utils',
     'algoliaCommon',
     'algoliaInsights',
     'algoliaHooks',
-], function ($, algoliaBundle, Hogan, Mustache, templateEngine, priceUtils) {
-    
-    const processTemplate = (template, templateVars, useMustache = false) => {
-        const hoganStart = performance.now();
-        const wrapperTemplate = Hogan.compile(template);
-        const hoganResult = wrapperTemplate.render(templateVars);
-        const hoganEnd = performance.now();
-        console.log("Hogan execution time: %s ms", hoganEnd - hoganStart);
-
-        if (useMustache) {
-            const mustacheStart = performance.now();
-            const mustacheResult = Mustache.render(template, templateVars);
-            const mustacheEnd = performance.now();
-            console.log("Mustache execution time: %s ms", mustacheEnd - mustacheStart);
-            return mustacheResult;
-        }
-
-        return hoganResult;
-    };
-
+], function ($, algoliaBundle, templateEngine, priceUtils) {
     $(async function ($) {
+        const templateProcessor = await templateEngine.getSelectedEngineAdapter(); 
+
         /** We have nothing to do here if instantsearch is not enabled **/
         if (
             typeof algoliaConfig === 'undefined' ||
@@ -130,7 +111,7 @@ define([
             translations    : algoliaConfig.translations,
         };
 
-        const wrapperHtml = await templateEngine.processTemplate(template, templateVars);
+        const wrapperHtml = templateProcessor.process(template, templateVars);
         $('.algolia-instant-selector-results').html(wrapperHtml).show();
 
         /**
@@ -375,7 +356,7 @@ define([
                         }
 
                         const template = $('#instant-stats-template').html();
-                        return processTemplate(template, data, true);
+                        return templateProcessor.process(template, data);
                     },
                 },
             },

view/frontend/web/js/internals/template-engine.js

@@ -2,26 +2,46 @@ define([], function () {
   const ENGINE_TYPE_HOGAN = 'hogan';
   const ENGINE_TYPE_MUSTACHE = 'mustache';
 
-  return {
-    ENGINE_TYPE_HOGAN,
-    ENGINE_TYPE_MUSTACHE,
-
-    getSelectedEngine: () => ENGINE_TYPE_MUSTACHE, // override via mixin
-
-    processTemplate: async function (template, data, measure = false) {
-      const adapter = await this.getEngineAdapter(this.getSelectedEngine());
-      if (measure) {
+  const trackingAdapter = {
+      processAndMeasure: function(template, data, tag = '') {
         const start = performance.now();
-        const result = adapter.process(template, data);
+        const result = this.process(template, data);
         const end = performance.now();
+        const prefix = tag ? `${tag}: ` : '';
         console.log(
-          `### Template execution time with "${this.getSelectedEngine()}": %s ms`,
+          `${prefix}Template execution time with "${this.engineType}": %s ms`,
           end - start
         );
         return result;
       }
+  };
 
-      return adapter.process(template, data);
+  return {
+    ENGINE_TYPE_HOGAN,
+    ENGINE_TYPE_MUSTACHE,
+
+    getSelectedEngineType: () => ENGINE_TYPE_MUSTACHE, // override via mixin
+
+    // Retrieve the engine before calling process() if not able to use promises
+    getSelectedEngineAdapter: async function() {
+      return this.getEnhancedEngineAdapter(this.getSelectedEngineType());
+    },
+
+    // Convenience method
+    processTemplate: async function (template, data, measure = false) {
+      const adapter = await this.getSelectedEngineAdapter();
+      return (measure) 
+        ? adapter.processAndMeasure(template, data)
+        : adapter.process(template, data);
+    },
+
+    getEnhancedEngineAdapter: async function (type) {
+      const adapter = await this.getEngineAdapter(type);
+      return {
+        engineType: this.getSelectedEngineType(),
+        ...trackingAdapter,
+        ...adapter
+      };
     },
 
     getEngineAdapter: async function (type) {