From 5057297161c7fa7e9c7f58b50c04c8dfe9d3e5f7 Mon Sep 17 00:00:00 2001
From: Shahmir Ejaz <shaejaz5@gmail.com>
Date: Tue, 8 Oct 2024 11:22:05 +0100
Subject: [PATCH] refactor: remove string templates (#495)

---
 .../autocomplete-results-page/src/app.js      |  6 ++--
 .../conditional-request/src/app.js            | 12 +++----
 .../facet-dropdown/src/Dropdown.js            |  6 ++--
 instantsearch.js/facet-dropdown/src/app.js    |  6 ++--
 .../geo-search-custom-marker/src/app.js       |  4 +--
 .../geo-search-tourism/src/app.js             | 34 +++++++++----------
 instantsearch.js/multi-index-hits/src/app.js  |  6 ++--
 instantsearch.js/query-suggestions/src/app.js |  6 ++--
 .../refresh-cache-periodically/src/app.js     | 10 +++---
 .../refresh-cache-user-action/src/app.js      | 22 ++++++------
 instantsearch.js/routing-basic/src/app.js     |  4 +--
 .../routing-seo-friendly/src/app.js           |  4 +--
 instantsearch.js/secured-api-keys/src/app.js  | 10 +++---
 instantsearch.js/segment-connector/src/app.js | 19 +++++------
 14 files changed, 71 insertions(+), 78 deletions(-)

diff --git a/instantsearch.js/autocomplete-results-page/src/app.js b/instantsearch.js/autocomplete-results-page/src/app.js
index 1eeffd0cdb..9ffcaa5fc3 100644
--- a/instantsearch.js/autocomplete-results-page/src/app.js
+++ b/instantsearch.js/autocomplete-results-page/src/app.js
@@ -57,13 +57,13 @@ search.addWidgets([
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
-      item: `
+      item: (hit, { html, components }) => html`
         <div>
           <header class="hit-name">
-            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
+            ${components.Highlight({ hit, attribute: 'name' })}
           </header>
           <p class="hit-description">
-            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
+            ${components.Highlight({ hit, attribute: 'description' })}
           </p>
         </div>
       `,
diff --git a/instantsearch.js/conditional-request/src/app.js b/instantsearch.js/conditional-request/src/app.js
index 3ec7b2c790..b5235189ce 100644
--- a/instantsearch.js/conditional-request/src/app.js
+++ b/instantsearch.js/conditional-request/src/app.js
@@ -35,15 +35,13 @@ search.addWidgets([
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
-      empty: `
-        {{#query}}
-          No results for <q>{{query}}</q>
-        {{/query}}
+      empty: ({ query }, { html }) => html`
+        No results for <q>${query}</q>
       `,
-      item: `
+      item: (hit, { html, components }) => html`
         <article>
-          <h1>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h1>
-          <p>{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</p>
+          <h1>${components.Highlight({ hit, attribute: 'name' })}</h1>
+          <p>${components.Highlight({ hit, attribute: 'description' })}</p>
         </article>
       `,
     },
diff --git a/instantsearch.js/facet-dropdown/src/Dropdown.js b/instantsearch.js/facet-dropdown/src/Dropdown.js
index fce4582629..74a7aceb57 100644
--- a/instantsearch.js/facet-dropdown/src/Dropdown.js
+++ b/instantsearch.js/facet-dropdown/src/Dropdown.js
@@ -35,7 +35,7 @@ export function createDropdown(
   const makeWidget = instantsearch.widgets.panel({
     cssClasses,
     templates: {
-      header: options => {
+      header: (options, { html }) => {
         const { widgetParams } = options;
 
         let text;
@@ -67,13 +67,13 @@ export function createDropdown(
           classNames.push(cssClasses.buttonRefined);
         }
 
-        return `
+        return html`
           <button type="button" class="${cx(...classNames)}">
             ${text}
           </button>
         `;
       },
-      footer: `<button type="button" class="${cssClasses.closeButton}">Apply</button>`,
+      footer: (_, { html }) => html`<button type="button" class="${cssClasses.closeButton}">Apply</button>`,
     },
   })(baseWidget);
 
diff --git a/instantsearch.js/facet-dropdown/src/app.js b/instantsearch.js/facet-dropdown/src/app.js
index 866a6fe58b..c797bea82d 100644
--- a/instantsearch.js/facet-dropdown/src/app.js
+++ b/instantsearch.js/facet-dropdown/src/app.js
@@ -69,10 +69,10 @@ search.addWidgets([
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
-      item: `
+      item: (hit, { html, components }) => html`
 <article>
-  <h1>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h1>
-  <p>{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</p>
+  <h1>${components.Highlight({ hit, attribute: 'name' })}</h1>
+  <p>${components.Highlight({ hit, attribute: 'description' })}</p>
 </article>
 `,
     },
diff --git a/instantsearch.js/geo-search-custom-marker/src/app.js b/instantsearch.js/geo-search-custom-marker/src/app.js
index 0f325db05a..68eac11f35 100644
--- a/instantsearch.js/geo-search-custom-marker/src/app.js
+++ b/instantsearch.js/geo-search-custom-marker/src/app.js
@@ -24,9 +24,9 @@ injectScript(
         container: '#maps',
         googleReference: window.google,
         templates: {
-          HTMLMarker: `
+          HTMLMarker: (hit, { html }) => html`
             <span class="marker">
-              {{ city }} - {{ airport_id }}
+              ${hit.city} - ${hit.airport_id}
             </span>
           `,
         },
diff --git a/instantsearch.js/geo-search-tourism/src/app.js b/instantsearch.js/geo-search-tourism/src/app.js
index ccc9b0d0b2..a9ef8778f7 100644
--- a/instantsearch.js/geo-search-tourism/src/app.js
+++ b/instantsearch.js/geo-search-tourism/src/app.js
@@ -35,23 +35,23 @@ $script(
       instantsearch.widgets.hits({
         container: '#hits',
         templates: {
-          item:
-            '<div class="hit col-sm-3">' +
-            '<div class="pictures-wrapper">' +
-            '<img class="picture" src="{{picture_url}}" />' +
-            '<img class="profile" src="{{user.user.thumbnail_url}}" />' +
-            '</div>' +
-            '<div class="infos">' +
-            '<h4 class="media-heading">{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h4>' +
-            '<p>' +
-            '{{room_type}} - ' +
-            '{{#helpers.highlight}}{ "attribute": "city" }{{/helpers.highlight}},' +
-            '{{#helpers.highlight}}{ "attribute": "country" }{{/helpers.highlight}}' +
-            '</p>' +
-            '</div>' +
-            '</div>',
-          empty:
-            '<div class="text-center">No results found matching <strong>{{query}}</strong>.</div>',
+          item: (hit, { html, components }) => html`
+            <div class="hit col-sm-3">
+              <div class="pictures-wrapper">
+                <img class="picture" src=${hit.picture_url} />
+                <img class="profile" src=${hit.user.user.thumbnail_url} />
+              </div>
+              <div class="infos">
+                <h4 class="media-heading">${components.Highlight({ hit, attribute: 'name' })}</h4>
+                <p>
+                  ${hit.room_type} - ${components.Highlight({ hit, attribute: 'city' })}, ${components.Highlight({ hit, attribute: 'country' })}
+                </p>
+              </div>
+            </div>'
+          `,
+          empty: ({ query }, { html }) => html`
+            <div class="text-center">No results found matching <strong>${query}</strong>.</div>
+          `
         },
       }),
 
diff --git a/instantsearch.js/multi-index-hits/src/app.js b/instantsearch.js/multi-index-hits/src/app.js
index 223c3bbe1b..740ab46f1e 100644
--- a/instantsearch.js/multi-index-hits/src/app.js
+++ b/instantsearch.js/multi-index-hits/src/app.js
@@ -21,8 +21,7 @@ search.addWidgets([
   instantsearch.widgets.hits({
     container: '#hits-instant-search',
     templates: {
-      item:
-        '{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
+      item: (hit, { components }) => components.Highlight({ hit, attribute: 'name' })
     },
   }),
   instantsearch.widgets
@@ -34,8 +33,7 @@ search.addWidgets([
       instantsearch.widgets.hits({
         container: '#hits-instant-search-price-desc',
         templates: {
-          item:
-            '{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
+          item: (hit, { components }) => components.Highlight({ hit, attribute: 'name' })
         },
       }),
     ]),
diff --git a/instantsearch.js/query-suggestions/src/app.js b/instantsearch.js/query-suggestions/src/app.js
index 322cfc3eed..54c20bc847 100644
--- a/instantsearch.js/query-suggestions/src/app.js
+++ b/instantsearch.js/query-suggestions/src/app.js
@@ -109,13 +109,13 @@ search.addWidgets([
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
-      item: `
+      item: (hit, { html, components }) => html`
         <div>
           <header class="hit-name">
-            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
+            ${components.Highlight({ hit, attribute: 'name' })}
           </header>
           <p class="hit-description">
-            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
+            ${components.Highlight({ hit, attribute: 'description' })}
           </p>
         </div>
       `,
diff --git a/instantsearch.js/refresh-cache-periodically/src/app.js b/instantsearch.js/refresh-cache-periodically/src/app.js
index 1a8717164c..b8b2202095 100644
--- a/instantsearch.js/refresh-cache-periodically/src/app.js
+++ b/instantsearch.js/refresh-cache-periodically/src/app.js
@@ -22,16 +22,16 @@ search.addWidgets([
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
-      item: `
+      item: (hit, { html, components }) => html`
         <div>
           <header class="hit-name">
-            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
+            ${components.Highlight({ hit, attribute: 'name' })}
           </header>
-          <img src="{{image}}" align="left" />
+          <img src="${hit.image}" align="left" />
           <p class="hit-description">
-            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
+            ${components.Highlight({ hit, attribute: 'description' })}
           </p>
-          <p class="hit-price">\${{price}}</p>
+          <p class="hit-price">\$${hit.price}</p>
         </div>
       `,
     },
diff --git a/instantsearch.js/refresh-cache-user-action/src/app.js b/instantsearch.js/refresh-cache-user-action/src/app.js
index 0d5d96e056..aab650b16f 100644
--- a/instantsearch.js/refresh-cache-user-action/src/app.js
+++ b/instantsearch.js/refresh-cache-user-action/src/app.js
@@ -22,17 +22,17 @@ search.addWidgets([
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
-      item: `
-      <div>
-        <header class="hit-name">
-          {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
-        </header>
-        <img src="{{image}}" align="left" />
-        <p class="hit-description">
-          {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
-        </p>
-        <p class="hit-price">\${{price}}</p>
-      </div>
+      item: (hit, { html, components }) => html`
+        <div>
+          <header class="hit-name">
+            ${components.Highlight({ hit, attribute: 'name' })}
+          </header>
+          <img src="${hit.image}" align="left" />
+          <p class="hit-description">
+            ${components.Highlight({ hit, attribute: 'description' })}
+          </p>
+          <p class="hit-price">\$${hit.price}</p>
+        </div>
       `,
     },
   }),
diff --git a/instantsearch.js/routing-basic/src/app.js b/instantsearch.js/routing-basic/src/app.js
index 66b2af1f5a..13f4464ee3 100644
--- a/instantsearch.js/routing-basic/src/app.js
+++ b/instantsearch.js/routing-basic/src/app.js
@@ -34,9 +34,9 @@ search.addWidgets([
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
-      item: `
+      item: (hit, { html, components }) => html`
         <div>
-          {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
+          ${components.Highlight({ hit, attribute: 'name' })}
         </div>
       `,
     },
diff --git a/instantsearch.js/routing-seo-friendly/src/app.js b/instantsearch.js/routing-seo-friendly/src/app.js
index 61cb022e95..90fbd6f9b1 100644
--- a/instantsearch.js/routing-seo-friendly/src/app.js
+++ b/instantsearch.js/routing-seo-friendly/src/app.js
@@ -36,9 +36,9 @@ search.addWidgets([
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
-      item: `
+      item: (hit, { html, components }) => html`
         <div>
-          {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
+          ${components.Highlight({ hit, attribute: 'name' })}
         </div>
       `,
     },
diff --git a/instantsearch.js/secured-api-keys/src/app.js b/instantsearch.js/secured-api-keys/src/app.js
index 013ccbf139..517f1bf98b 100644
--- a/instantsearch.js/secured-api-keys/src/app.js
+++ b/instantsearch.js/secured-api-keys/src/app.js
@@ -26,16 +26,16 @@ search.addWidgets([
   instantsearch.widgets.hits({
     container: '#hits',
     templates: {
-      item: `
+      item: (hit, { html, components }) => html`
         <div>
           <header class="hit-name">
-            {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
+            ${components.Highlight({ hit, attribute: 'name' })}
           </header>
-          <img src="{{image}}" align="left" />
+          <img src="${hit.image}" align="left" />
           <p class="hit-description">
-            {{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
+            ${components.Highlight({ hit, attribute: 'description' })}
           </p>
-          <p class="hit-price">\${{price}}</p>
+          <p class="hit-price">\$${hit.price}</p>
         </div>
       `,
     },
diff --git a/instantsearch.js/segment-connector/src/app.js b/instantsearch.js/segment-connector/src/app.js
index aa833f4904..160b0c9b0a 100644
--- a/instantsearch.js/segment-connector/src/app.js
+++ b/instantsearch.js/segment-connector/src/app.js
@@ -28,27 +28,24 @@ search.addWidgets([
   hits({
     container: '#hits',
     templates: {
-      item: (hit, bindEvent) => {
-        const result = `
+      item: (hit, { html, components, sendEvent }) => html`
         <article>
-          <h1>${instantsearch.highlight({ attribute: 'name', hit })}</h1>
-          <p>${instantsearch.highlight({ attribute: 'description', hit })}</p>
-          <button type="button" ${bindEvent('view', hit, 'View')}>
+          <h1>${components.Highlight({ hit, attribute: 'name' })}</h1>
+          <p>${components.Highlight({ hit, attribute: 'description' })}</p>
+          <button type="button" onClick="${() => sendEvent('view', hit, 'View')}">
             View Product
           </button>
-          <button type="button" ${bindEvent('click', hit, 'Favorite')}>
+          <button type="button" onClick="${() => sendEvent('click', hit, 'Favorite')}">
             Favorite
           </button>
-          <button type="button" ${bindEvent('conversion', hit, 'Add to Cart')}>
+          <button type="button" onClick="${() => sendEvent('conversion', hit, 'Add to Cart')}">
             Add to Cart
           </button>
-          <button type="button" ${bindEvent('conversion', hit, 'Order')}>
+          <button type="button" onClick="${() => sendEvent('conversion', hit, 'Order')}">
             Order Now
           </button>
         </article>
-      `;
-        return result;
-      },
+      `
     },
   }),
   refinementList({