MAGE-1000 Experiment with template engine adapter

Author: cammonro

view/frontend/requirejs-config.js

@@ -16,7 +16,10 @@ var config = {
             'additionalHtml' : 'Algolia_AlgoliaSearch/js/template/autocomplete/additional-section',
 
             // Recommend templates
-            'recommendProductsHtml': 'Algolia_AlgoliaSearch/js/template/recommend/products'
+            'recommendProductsHtml': 'Algolia_AlgoliaSearch/js/template/recommend/products',
+
+            // Unbundling 
+            'algoliaTemplateEngine': 'Algolia_AlgoliaSearch/js/internals/template-engine'
         }
     },
     paths : {

view/frontend/web/js/instantsearch.js

@@ -3,11 +3,13 @@ define([
     'algoliaBundle',
     'algoliaHoganLib',
     'algoliaMustacheLib',
+    'algoliaTemplateEngine',
     'Magento_Catalog/js/price-utils',
     'algoliaCommon',
     'algoliaInsights',
     'algoliaHooks',
-], function ($, algoliaBundle, Hogan, Mustache, priceUtils) {
+], function ($, algoliaBundle, Hogan, Mustache, templateEngine, priceUtils) {
+    
     const processTemplate = (template, templateVars, useMustache = false) => {
         const hoganStart = performance.now();
         const wrapperTemplate = Hogan.compile(template);
@@ -26,7 +28,7 @@ define([
         return hoganResult;
     };
 
-    $(function ($) {
+    $(async function ($) {
         /** We have nothing to do here if instantsearch is not enabled **/
         if (
             typeof algoliaConfig === 'undefined' ||
@@ -127,10 +129,9 @@ define([
             config          : algoliaConfig.instant,
             translations    : algoliaConfig.translations,
         };
-        
-        $('.algolia-instant-selector-results')
-            .html(processTemplate(template, templateVars, true))
-            .show();
+
+        const wrapperHtml = await templateEngine.processTemplate(template, templateVars);
+        $('.algolia-instant-selector-results').html(wrapperHtml).show();
 
         /**
          * Initialise instant search
@@ -373,7 +374,7 @@ define([
                             $('.algolia-instant-selector-results').show();
                         }
 
-                        var template = $('#instant-stats-template').html();
+                        const template = $('#instant-stats-template').html();
                         return processTemplate(template, data, true);
                     },
                 },

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

@@ -0,0 +1,64 @@
+define([], function () {
+  const ENGINE_TYPE_HOGAN = 'hogan';
+  const ENGINE_TYPE_MUSTACHE = 'mustache';
+
+  return {
+    getSelectedEngine: () => ENGINE_TYPE_HOGAN, // override via mixin
+
+    processTemplate: async function (template, data, measure = false) {
+      const adapter = await this.getEngineAdapter(this.getSelectedEngine());
+      if (measure) {
+        const start = performance.now();
+        const result = adapter.process(template, data);
+        const end = performance.now();
+        console.log(
+          `### Template execution time with "${this.getSelectedEngine()}": %s ms`,
+          end - start
+        );
+        return result;
+      }
+
+      return adapter.process(template, data);
+    },
+
+    getEngineAdapter: async function (type) {
+      switch (type) {
+        case ENGINE_TYPE_HOGAN:
+          return this.getHoganAdapter();
+        case ENGINE_TYPE_MUSTACHE:
+          return this.getMustacheAdapter();
+        default:
+          throw new Error(`Unknown template engine: ${type}`);
+      }
+    },
+
+    getHoganAdapter: async function () {
+      const Hogan = await this.getAdapterEngine('algoliaHoganLib');
+      return {
+        process: (template, data) => {
+          return Hogan.compile(template).render(data);
+        },
+      };
+    },
+
+    getMustacheAdapter: async function () {
+      const Mustache = await this.getAdapterEngine('algoliaMustacheLib');
+      return {
+        process: (template, data) => {
+          return Mustache.render(template, data);
+        },
+      };
+    },
+
+    getAdapterEngine: async function (lib) {
+      try {
+        return await new Promise((resolve, reject) => {
+          require([lib], resolve, reject);
+        });
+      } catch (err) {
+        console.error(`Failed to load module ${lib} for template engine:`, err);
+        throw err;
+      }
+    },
+  };
+});