Merge pull request #1596 from algolia/feature/MAGE-1000-mustache

Feature/mage 1000 - Mustache alt

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 : {
@@ -27,6 +30,9 @@ var config = {
         'recommend'             : 'Algolia_AlgoliaSearch/js/internals/recommend.min',
         'recommendJs'           : 'Algolia_AlgoliaSearch/js/internals/recommend-js.min',
         'rangeSlider'           : 'Algolia_AlgoliaSearch/js/navigation/range-slider-widget',
+        // Legacy 
+        'algoliaHoganLib'       : 'Algolia_AlgoliaSearch/js/lib/hogan.min',
+        'algoliaMustacheLib'    : 'Algolia_AlgoliaSearch/js/lib/mustache.min'
     },
     deps  : [
         'algoliaInstantSearch',
@@ -38,5 +44,10 @@ var config = {
                 'Algolia_AlgoliaSearch/js/insights/add-to-cart-mixin': true
             }
         }
+    },
+    shim: {
+        'algoliaHoganLib': {
+            exports: 'Hogan' 
+        }
     }
 };

view/frontend/web/js/instantsearch.js

@@ -1,12 +1,15 @@
 define([
     'jquery',
     'algoliaBundle',
+    'algoliaTemplateEngine',
     'Magento_Catalog/js/price-utils',
     'algoliaCommon',
     'algoliaInsights',
     'algoliaHooks',
-], function ($, algoliaBundle, priceUtils) {
-    $(function ($) {
+], 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' ||
@@ -82,10 +85,10 @@ define([
          *
          * For templating is used Hogan library
          * Docs: http://twitter.github.io/hogan.js/
+         * 
+         * Alternatively use Mustache
+         * https://github.com/janl/mustache.js
          **/
-        var wrapperTemplate = algoliaBundle.Hogan.compile(
-            $('#instant_wrapper_template').html()
-        );
         var instant_selector = '#instant-search-bar';
 
         var div = document.createElement('div');
@@ -99,16 +102,17 @@ define([
         $('.algolia-instant-results-wrapper').append(
             '<div class="algolia-instant-selector-results"></div>'
         );
-        $('.algolia-instant-selector-results')
-            .html(
-                wrapperTemplate.render({
-                    second_bar      : algoliaConfig.instant.enabled,
-                    findAutocomplete: findAutocomplete,
-                    config          : algoliaConfig.instant,
-                    translations    : algoliaConfig.translations,
-                })
-            )
-            .show();
+
+        const template = $('#instant_wrapper_template').html();
+        const templateVars = {
+            second_bar      : algoliaConfig.instant.enabled,
+            findAutocomplete: findAutocomplete,
+            config          : algoliaConfig.instant,
+            translations    : algoliaConfig.translations,
+        };
+
+        const wrapperHtml = templateProcessor.process(template, templateVars);
+        $('.algolia-instant-selector-results').html(wrapperHtml).show();
 
         /**
          * Initialise instant search
@@ -332,17 +336,15 @@ define([
                 container: '#algolia-stats',
                 templates: {
                     text: function (data) {
-                        var hoganTemplate = algoliaBundle.Hogan.compile(
-                            $('#instant-stats-template').html()
-                        );
-
                         data.first = data.page * data.hitsPerPage + 1;
                         data.last = Math.min(
                             data.page * data.hitsPerPage + data.hitsPerPage,
                             data.nbHits
                         );
                         data.seconds = data.processingTimeMS / 1000;
                         data.translations = window.algoliaConfig.translations;
+
+                        // TODO: Revisit this injected jQuery logic
                         const searchParams = new URLSearchParams(window.location.search);
                         const searchQuery = searchParams.has('q') || '';
                         if (searchQuery === '' && !algoliaConfig.isSearchPage) {
@@ -352,7 +354,9 @@ define([
                             $('.algolia-instant-replaced-content').hide();
                             $('.algolia-instant-selector-results').show();
                         }
-                        return hoganTemplate.render(data);
+
+                        const template = $('#instant-stats-template').html();
+                        return templateProcessor.process(template, data);
                     },
                 },
             },

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

@@ -0,0 +1,87 @@
+define([], function () {
+  const ENGINE_TYPE_HOGAN = 'hogan';
+  const ENGINE_TYPE_MUSTACHE = 'mustache';
+
+  const trackingAdapter = {
+      processAndMeasure: function(template, data, tag = '') {
+        const start = performance.now();
+        const result = this.process(template, data);
+        const end = performance.now();
+        const prefix = tag ? `${tag}: ` : '';
+        console.log(
+          `${prefix}Template execution time with "${this.engineType}": %s ms`,
+          end - start
+        );
+        return result;
+      }
+  };
+
+  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) {
+      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;
+      }
+    },
+  };
+});