Skip to content

Commit 5057297

Browse files
shaejazshaejaz
authored
refactor: remove string templates (#495)
1 parent 81a45c0 commit 5057297

File tree

14 files changed

+71
-78
lines changed

14 files changed

+71
-78
lines changed

‎instantsearch.js/autocomplete-results-page/src/app.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,13 @@ search.addWidgets([
5757
instantsearch.widgets.hits({
5858
container: '#hits',
5959
templates: {
60-
item: `
60+
item: (hit, { html, components }) => html`
6161
<div>
6262
<header class="hit-name">
63-
{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
63+
${components.Highlight({ hit, attribute: 'name' })}
6464
</header>
6565
<p class="hit-description">
66-
{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
66+
${components.Highlight({ hit, attribute: 'description' })}
6767
</p>
6868
</div>
6969
`,

‎instantsearch.js/conditional-request/src/app.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,13 @@ search.addWidgets([
3535
instantsearch.widgets.hits({
3636
container: '#hits',
3737
templates: {
38-
empty: `
39-
{{#query}}
40-
No results for <q>{{query}}</q>
41-
{{/query}}
38+
empty: ({ query }, { html }) => html`
39+
No results for <q>${query}</q>
4240
`,
43-
item: `
41+
item: (hit, { html, components }) => html`
4442
<article>
45-
<h1>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h1>
46-
<p>{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</p>
43+
<h1>${components.Highlight({ hit, attribute: 'name' })}</h1>
44+
<p>${components.Highlight({ hit, attribute: 'description' })}</p>
4745
</article>
4846
`,
4947
},

‎instantsearch.js/facet-dropdown/src/Dropdown.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function createDropdown(
3535
const makeWidget = instantsearch.widgets.panel({
3636
cssClasses,
3737
templates: {
38-
header: options => {
38+
header: (options, { html }) => {
3939
const { widgetParams } = options;
4040

4141
let text;
@@ -67,13 +67,13 @@ export function createDropdown(
6767
classNames.push(cssClasses.buttonRefined);
6868
}
6969

70-
return `
70+
return html`
7171
<button type="button" class="${cx(...classNames)}">
7272
${text}
7373
</button>
7474
`;
7575
},
76-
footer: `<button type="button" class="${cssClasses.closeButton}">Apply</button>`,
76+
footer: (_, { html }) => html`<button type="button" class="${cssClasses.closeButton}">Apply</button>`,
7777
},
7878
})(baseWidget);
7979

‎instantsearch.js/facet-dropdown/src/app.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,10 @@ search.addWidgets([
6969
instantsearch.widgets.hits({
7070
container: '#hits',
7171
templates: {
72-
item: `
72+
item: (hit, { html, components }) => html`
7373
<article>
74-
<h1>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h1>
75-
<p>{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</p>
74+
<h1>${components.Highlight({ hit, attribute: 'name' })}</h1>
75+
<p>${components.Highlight({ hit, attribute: 'description' })}</p>
7676
</article>
7777
`,
7878
},

‎instantsearch.js/geo-search-custom-marker/src/app.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ injectScript(
2424
container: '#maps',
2525
googleReference: window.google,
2626
templates: {
27-
HTMLMarker: `
27+
HTMLMarker: (hit, { html }) => html`
2828
<span class="marker">
29-
{{ city }} - {{ airport_id }}
29+
${hit.city} - ${hit.airport_id}
3030
</span>
3131
`,
3232
},

‎instantsearch.js/geo-search-tourism/src/app.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,23 @@ $script(
3535
instantsearch.widgets.hits({
3636
container: '#hits',
3737
templates: {
38-
item:
39-
'<div class="hit col-sm-3">' +
40-
'<div class="pictures-wrapper">' +
41-
'<img class="picture" src="{{picture_url}}" />' +
42-
'<img class="profile" src="{{user.user.thumbnail_url}}" />' +
43-
'</div>' +
44-
'<div class="infos">' +
45-
'<h4 class="media-heading">{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h4>' +
46-
'<p>' +
47-
'{{room_type}} - ' +
48-
'{{#helpers.highlight}}{ "attribute": "city" }{{/helpers.highlight}},' +
49-
'{{#helpers.highlight}}{ "attribute": "country" }{{/helpers.highlight}}' +
50-
'</p>' +
51-
'</div>' +
52-
'</div>',
53-
empty:
54-
'<div class="text-center">No results found matching <strong>{{query}}</strong>.</div>',
38+
item: (hit, { html, components }) => html`
39+
<div class="hit col-sm-3">
40+
<div class="pictures-wrapper">
41+
<img class="picture" src=${hit.picture_url} />
42+
<img class="profile" src=${hit.user.user.thumbnail_url} />
43+
</div>
44+
<div class="infos">
45+
<h4 class="media-heading">${components.Highlight({ hit, attribute: 'name' })}</h4>
46+
<p>
47+
${hit.room_type} - ${components.Highlight({ hit, attribute: 'city' })}, ${components.Highlight({ hit, attribute: 'country' })}
48+
</p>
49+
</div>
50+
</div>'
51+
`,
52+
empty: ({ query }, { html }) => html`
53+
<div class="text-center">No results found matching <strong>${query}</strong>.</div>
54+
`
5555
},
5656
}),
5757

‎instantsearch.js/multi-index-hits/src/app.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@ search.addWidgets([
2121
instantsearch.widgets.hits({
2222
container: '#hits-instant-search',
2323
templates: {
24-
item:
25-
'{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
24+
item: (hit, { components }) => components.Highlight({ hit, attribute: 'name' })
2625
},
2726
}),
2827
instantsearch.widgets
@@ -34,8 +33,7 @@ search.addWidgets([
3433
instantsearch.widgets.hits({
3534
container: '#hits-instant-search-price-desc',
3635
templates: {
37-
item:
38-
'{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}',
36+
item: (hit, { components }) => components.Highlight({ hit, attribute: 'name' })
3937
},
4038
}),
4139
]),

‎instantsearch.js/query-suggestions/src/app.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -109,13 +109,13 @@ search.addWidgets([
109109
instantsearch.widgets.hits({
110110
container: '#hits',
111111
templates: {
112-
item: `
112+
item: (hit, { html, components }) => html`
113113
<div>
114114
<header class="hit-name">
115-
{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
115+
${components.Highlight({ hit, attribute: 'name' })}
116116
</header>
117117
<p class="hit-description">
118-
{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
118+
${components.Highlight({ hit, attribute: 'description' })}
119119
</p>
120120
</div>
121121
`,

‎instantsearch.js/refresh-cache-periodically/src/app.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,16 @@ search.addWidgets([
2222
instantsearch.widgets.hits({
2323
container: '#hits',
2424
templates: {
25-
item: `
25+
item: (hit, { html, components }) => html`
2626
<div>
2727
<header class="hit-name">
28-
{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
28+
${components.Highlight({ hit, attribute: 'name' })}
2929
</header>
30-
<img src="{{image}}" align="left" />
30+
<img src="${hit.image}" align="left" />
3131
<p class="hit-description">
32-
{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
32+
${components.Highlight({ hit, attribute: 'description' })}
3333
</p>
34-
<p class="hit-price">\${{price}}</p>
34+
<p class="hit-price">\$${hit.price}</p>
3535
</div>
3636
`,
3737
},

‎instantsearch.js/refresh-cache-user-action/src/app.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,17 @@ search.addWidgets([
2222
instantsearch.widgets.hits({
2323
container: '#hits',
2424
templates: {
25-
item: `
26-
<div>
27-
<header class="hit-name">
28-
{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
29-
</header>
30-
<img src="{{image}}" align="left" />
31-
<p class="hit-description">
32-
{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
33-
</p>
34-
<p class="hit-price">\${{price}}</p>
35-
</div>
25+
item: (hit, { html, components }) => html`
26+
<div>
27+
<header class="hit-name">
28+
${components.Highlight({ hit, attribute: 'name' })}
29+
</header>
30+
<img src="${hit.image}" align="left" />
31+
<p class="hit-description">
32+
${components.Highlight({ hit, attribute: 'description' })}
33+
</p>
34+
<p class="hit-price">\$${hit.price}</p>
35+
</div>
3636
`,
3737
},
3838
}),

‎instantsearch.js/routing-basic/src/app.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ search.addWidgets([
3434
instantsearch.widgets.hits({
3535
container: '#hits',
3636
templates: {
37-
item: `
37+
item: (hit, { html, components }) => html`
3838
<div>
39-
{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
39+
${components.Highlight({ hit, attribute: 'name' })}
4040
</div>
4141
`,
4242
},

‎instantsearch.js/routing-seo-friendly/src/app.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@ search.addWidgets([
3636
instantsearch.widgets.hits({
3737
container: '#hits',
3838
templates: {
39-
item: `
39+
item: (hit, { html, components }) => html`
4040
<div>
41-
{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
41+
${components.Highlight({ hit, attribute: 'name' })}
4242
</div>
4343
`,
4444
},

‎instantsearch.js/secured-api-keys/src/app.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,16 @@ search.addWidgets([
2626
instantsearch.widgets.hits({
2727
container: '#hits',
2828
templates: {
29-
item: `
29+
item: (hit, { html, components }) => html`
3030
<div>
3131
<header class="hit-name">
32-
{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
32+
${components.Highlight({ hit, attribute: 'name' })}
3333
</header>
34-
<img src="{{image}}" align="left" />
34+
<img src="${hit.image}" align="left" />
3535
<p class="hit-description">
36-
{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}
36+
${components.Highlight({ hit, attribute: 'description' })}
3737
</p>
38-
<p class="hit-price">\${{price}}</p>
38+
<p class="hit-price">\$${hit.price}</p>
3939
</div>
4040
`,
4141
},

‎instantsearch.js/segment-connector/src/app.js

+8-11
Original file line numberDiff line numberDiff line change
@@ -28,27 +28,24 @@ search.addWidgets([
2828
hits({
2929
container: '#hits',
3030
templates: {
31-
item: (hit, bindEvent) => {
32-
const result = `
31+
item: (hit, { html, components, sendEvent }) => html`
3332
<article>
34-
<h1>${instantsearch.highlight({ attribute: 'name', hit })}</h1>
35-
<p>${instantsearch.highlight({ attribute: 'description', hit })}</p>
36-
<button type="button" ${bindEvent('view', hit, 'View')}>
33+
<h1>${components.Highlight({ hit, attribute: 'name' })}</h1>
34+
<p>${components.Highlight({ hit, attribute: 'description' })}</p>
35+
<button type="button" onClick="${() => sendEvent('view', hit, 'View')}">
3736
View Product
3837
</button>
39-
<button type="button" ${bindEvent('click', hit, 'Favorite')}>
38+
<button type="button" onClick="${() => sendEvent('click', hit, 'Favorite')}">
4039
Favorite
4140
</button>
42-
<button type="button" ${bindEvent('conversion', hit, 'Add to Cart')}>
41+
<button type="button" onClick="${() => sendEvent('conversion', hit, 'Add to Cart')}">
4342
Add to Cart
4443
</button>
45-
<button type="button" ${bindEvent('conversion', hit, 'Order')}>
44+
<button type="button" onClick="${() => sendEvent('conversion', hit, 'Order')}">
4645
Order Now
4746
</button>
4847
</article>
49-
`;
50-
return result;
51-
},
48+
`
5249
},
5350
}),
5451
refinementList({

0 commit comments

Comments
 (0)