refactor: remove string templates (#495)

algolia · Oct 8, 2024 · 5057297 · 5057297
1 parent 81a45c0
commit 5057297
Show file tree

Hide file tree

Showing 14 changed files with 71 additions and 78 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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({