From 31f8ffe51b4d6c45d9bf4fc0b7d95d763a11b558 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Tue, 1 Oct 2019 11:02:46 +0200 Subject: [PATCH 1/2] fix(templates): prepare InstantSearch template for v4 --- e2e/__snapshots__/templates.test.js.snap | 60 +++++++++---------- src/templates/InstantSearch.js/src/app.js.hbs | 59 +++++++++--------- 2 files changed, 59 insertions(+), 60 deletions(-) diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap index 584d0407c..f5eadd85d 100644 --- a/e2e/__snapshots__/templates.test.js.snap +++ b/e2e/__snapshots__/templates.test.js.snap @@ -3229,46 +3229,44 @@ const search = instantsearch({ searchClient, }); -search.addWidget( - instantsearch.widgets.searchBox({ - container: '#searchbox', - placeholder: 'Search placeholder', - }) -); +const searchBox = instantsearch.widgets.searchBox({ + container: '#searchbox', + placeholder: 'Search placeholder', +}); -search.addWidget( - instantsearch.widgets.hits({ - container: '#hits', - templates: { - item: \` +const hits = instantsearch.widgets.hits({ + container: '#hits', + templates: { + item: \`

{{#helpers.highlight}}{ \\"attribute\\": \\"attribute1\\" }{{/helpers.highlight}}

{{#helpers.highlight}}{ \\"attribute\\": \\"attribute2\\" }{{/helpers.highlight}}

\`, - }, - }) -); + }, +}); -search.addWidget( - instantsearch.widgets.refinementList({ - container: '#facet1-list', - attribute: 'facet1', - }) -); +const facet1RefinementList = instantsearch.widgets.refinementList({ + container: '#facet1-list', + attribute: 'facet1', +}); -search.addWidget( - instantsearch.widgets.refinementList({ - container: '#facet2-list', - attribute: 'facet2', - }) -); +const facet2RefinementList = instantsearch.widgets.refinementList({ + container: '#facet2-list', + attribute: 'facet2', +}); -search.addWidget( - instantsearch.widgets.pagination({ - container: '#pagination', - }) -); +const pagination = instantsearch.widgets.pagination({ + container: '#pagination', +}); + +search.addWidgets([ + searchBox, + hits, + facet1RefinementList, + facet2RefinementList, + pagination, +]); search.start();" `; diff --git a/src/templates/InstantSearch.js/src/app.js.hbs b/src/templates/InstantSearch.js/src/app.js.hbs index 7d133d88d..ea3bec22c 100644 --- a/src/templates/InstantSearch.js/src/app.js.hbs +++ b/src/templates/InstantSearch.js/src/app.js.hbs @@ -10,21 +10,18 @@ const search = instantsearch({ searchClient, }); -search.addWidget( - instantsearch.widgets.searchBox({ - container: '#searchbox', - {{#if searchPlaceholder}} - placeholder: '{{searchPlaceholder}}', - {{/if}} - }) -); +const searchBox = instantsearch.widgets.searchBox({ + container: '#searchbox', + {{#if searchPlaceholder}} + placeholder: '{{searchPlaceholder}}', + {{/if}} +}); -search.addWidget( - instantsearch.widgets.hits({ - container: '#hits', - {{#if attributesToDisplay}} - templates: { - item: ` +const hits = instantsearch.widgets.hits({ + container: '#hits', + {{#if attributesToDisplay}} + templates: { + item: `

\{{#helpers.highlight}}{ "attribute": "{{attributesToDisplay.[0]}}" }\{{/helpers.highlight}}

{{#each attributesToDisplay}} @@ -34,24 +31,28 @@ search.addWidget( {{/each}}
`, - }, - {{/if}} - }) -); + }, + {{/if}} +}); {{#each attributesForFaceting}} -search.addWidget( - instantsearch.widgets.refinementList({ - container: '#{{this}}-list', - attribute: '{{this}}', - }) -); +const {{this}}RefinementList = instantsearch.widgets.refinementList({ + container: '#{{this}}-list', + attribute: '{{this}}', +}); {{/each}} -search.addWidget( - instantsearch.widgets.pagination({ - container: '#pagination', - }) -); +const pagination = instantsearch.widgets.pagination({ + container: '#pagination', +}); + +search.addWidgets([ + searchBox, + hits, + {{#each attributesForFaceting}} + {{this}}RefinementList, + {{/each}} + pagination +]); search.start(); From 86cd6c8071d342854f2ec7154e652ef6613ce7b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Tue, 1 Oct 2019 13:23:48 +0200 Subject: [PATCH 2/2] fix(templates): use anonymous widgets --- e2e/__snapshots__/templates.test.js.snap | 54 ++++++++----------- src/templates/InstantSearch.js/src/app.js.hbs | 54 ++++++++----------- 2 files changed, 44 insertions(+), 64 deletions(-) diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap index f5eadd85d..981b073e2 100644 --- a/e2e/__snapshots__/templates.test.js.snap +++ b/e2e/__snapshots__/templates.test.js.snap @@ -3229,43 +3229,33 @@ const search = instantsearch({ searchClient, }); -const searchBox = instantsearch.widgets.searchBox({ - container: '#searchbox', - placeholder: 'Search placeholder', -}); - -const hits = instantsearch.widgets.hits({ - container: '#hits', - templates: { - item: \` +search.addWidgets([ + instantsearch.widgets.searchBox({ + container: '#searchbox', + placeholder: 'Search placeholder', + }), + instantsearch.widgets.hits({ + container: '#hits', + templates: { + item: \`

{{#helpers.highlight}}{ \\"attribute\\": \\"attribute1\\" }{{/helpers.highlight}}

{{#helpers.highlight}}{ \\"attribute\\": \\"attribute2\\" }{{/helpers.highlight}}

\`, - }, -}); - -const facet1RefinementList = instantsearch.widgets.refinementList({ - container: '#facet1-list', - attribute: 'facet1', -}); - -const facet2RefinementList = instantsearch.widgets.refinementList({ - container: '#facet2-list', - attribute: 'facet2', -}); - -const pagination = instantsearch.widgets.pagination({ - container: '#pagination', -}); - -search.addWidgets([ - searchBox, - hits, - facet1RefinementList, - facet2RefinementList, - pagination, + }, + }), + instantsearch.widgets.refinementList({ + container: '#facet1-list', + attribute: 'facet1', + }), + instantsearch.widgets.refinementList({ + container: '#facet2-list', + attribute: 'facet2', + }), + instantsearch.widgets.pagination({ + container: '#pagination', + }), ]); search.start();" diff --git a/src/templates/InstantSearch.js/src/app.js.hbs b/src/templates/InstantSearch.js/src/app.js.hbs index ea3bec22c..7b1ca6a38 100644 --- a/src/templates/InstantSearch.js/src/app.js.hbs +++ b/src/templates/InstantSearch.js/src/app.js.hbs @@ -10,18 +10,18 @@ const search = instantsearch({ searchClient, }); -const searchBox = instantsearch.widgets.searchBox({ - container: '#searchbox', - {{#if searchPlaceholder}} - placeholder: '{{searchPlaceholder}}', - {{/if}} -}); - -const hits = instantsearch.widgets.hits({ - container: '#hits', - {{#if attributesToDisplay}} - templates: { - item: ` +search.addWidgets([ + instantsearch.widgets.searchBox({ + container: '#searchbox', + {{#if searchPlaceholder}} + placeholder: '{{searchPlaceholder}}', + {{/if}} + }), + instantsearch.widgets.hits({ + container: '#hits', + {{#if attributesToDisplay}} + templates: { + item: `

\{{#helpers.highlight}}{ "attribute": "{{attributesToDisplay.[0]}}" }\{{/helpers.highlight}}

{{#each attributesToDisplay}} @@ -31,28 +31,18 @@ const hits = instantsearch.widgets.hits({ {{/each}}
`, - }, - {{/if}} -}); - -{{#each attributesForFaceting}} -const {{this}}RefinementList = instantsearch.widgets.refinementList({ - container: '#{{this}}-list', - attribute: '{{this}}', -}); - -{{/each}} -const pagination = instantsearch.widgets.pagination({ - container: '#pagination', -}); - -search.addWidgets([ - searchBox, - hits, + }, + {{/if}} + }), {{#each attributesForFaceting}} - {{this}}RefinementList, + instantsearch.widgets.refinementList({ + container: '#{{this}}-list', + attribute: '{{this}}', + }), {{/each}} - pagination + instantsearch.widgets.pagination({ + container: '#pagination', + }) ]); search.start();