From 600d6126a92555eae7ab938cc3817faca020c8da Mon Sep 17 00:00:00 2001 From: Aymeric Giraudet Date: Tue, 8 Oct 2024 10:25:54 +0200 Subject: [PATCH 01/37] fix(templating): remove hogan.js (#6378) BREAKING CHANGE : Hogan.js and raw HTML templates will no longer work. `bindEvent` also removed. --------- Co-authored-by: Haroen Viaene --- babel.config.js | 4 + packages/algolia-experiences/src/render.tsx | 2 +- packages/instantsearch.js/package.json | 2 - .../src/__tests__/common-widgets.test.tsx | 2 +- .../Answers/__tests__/Answers-test.tsx | 6 +- .../Breadcrumb/__tests__/Breadcrumb-test.tsx | 1 - .../__tests__/GeoSearchControls-test.tsx | 9 +- .../components/InfiniteHits/InfiniteHits.tsx | 2 - .../__tests__/InfiniteHits-test.tsx | 48 ++-- .../__tests__/InfiniteHits.test.tsx | 1 - .../MenuSelect/__tests__/MenuSelect-test.tsx | 4 +- .../__snapshots__/MenuSelect-test.tsx.snap | 63 ++--- .../components/Panel/__tests__/Panel-test.tsx | 30 +-- .../__snapshots__/Panel-test.tsx.snap | 2 - .../QueryRuleCustomData-test.tsx.snap | 4 +- .../RangeInput/__tests__/RangeInput-test.tsx | 4 +- .../__snapshots__/RangeInput-test.tsx.snap | 84 +++---- .../__tests__/RefinementList-test.tsx | 105 ++++----- .../RefinementList-test.tsx.snap | 32 ++- .../RefinementListItem-test.tsx.snap | 2 - .../__tests__/RelevantSort-test.tsx | 10 +- .../components/Stats/__tests__/Stats-test.tsx | 19 +- .../src/components/Template/Template.tsx | 83 +------ .../Template/__tests__/Template-test.tsx | 91 +------ .../__snapshots__/Template-test.tsx.snap | 65 +---- .../__tests__/VoiceSearch-test.tsx | 34 ++- .../__snapshots__/VoiceSearch-test.tsx.snap | 17 +- .../instantsearch.js/src/lib/InstantSearch.ts | 7 - .../src/lib/__tests__/createHelpers.tests.ts | 71 ------ .../instantsearch.js/src/lib/createHelpers.ts | 127 ---------- .../__tests__/prepareTemplateProps.test.ts | 52 +--- .../__tests__/renderTemplate.test.ts | 119 ++-------- .../lib/templating/prepareTemplateProps.ts | 63 +---- .../src/lib/templating/renderTemplate.ts | 93 ++------ .../src/lib/utils/render-args.ts | 2 - .../instantsearch.js/src/types/templates.ts | 47 ++-- packages/instantsearch.js/src/types/widget.ts | 1 - .../widgets/answers/__tests__/answers-test.ts | 2 +- .../src/widgets/answers/answers.tsx | 3 +- .../breadcrumb/__tests__/breadcrumb.test.tsx | 9 +- .../src/widgets/breadcrumb/breadcrumb.tsx | 6 +- .../__tests__/clear-refinements.test.tsx | 9 +- .../clear-refinements/clear-refinements.tsx | 3 +- .../frequently-bought-together.test.tsx | 8 +- .../frequently-bought-together.tsx | 1 - .../widgets/geo-search/GeoSearchRenderer.js | 2 - .../__snapshots__/geo-search-test.ts.snap | 14 -- .../geo-search/__tests__/geo-search-test.ts | 42 +++- .../geo-search/__tests__/geo-search.test.tsx | 9 +- .../__tests__/hierarchical-menu.test.tsx | 9 +- .../hierarchical-menu/hierarchical-menu.tsx | 2 - .../src/widgets/hits/__tests__/hits.test.tsx | 197 +--------------- .../src/widgets/hits/hits.tsx | 19 +- .../src/widgets/index/__tests__/index-test.ts | 5 - .../__tests__/infinite-hits.test.tsx | 146 +----------- .../widgets/infinite-hits/infinite-hits.tsx | 6 +- .../__tests__/looking-similar.test.tsx | 8 +- .../looking-similar/looking-similar.tsx | 1 - .../menu-select/__tests__/menu-select-test.ts | 170 ++++++------- .../src/widgets/menu-select/menu-select.tsx | 7 +- .../src/widgets/menu/__tests__/menu.test.tsx | 9 +- .../src/widgets/menu/menu.tsx | 2 - .../__tests__/numeric-menu.test.tsx | 9 +- .../src/widgets/numeric-menu/numeric-menu.tsx | 6 +- .../pagination/__tests__/pagination.test.tsx | 85 +------ .../src/widgets/panel/__tests__/panel-test.ts | 17 +- .../widgets/panel/__tests__/panel.test.tsx | 9 +- .../__tests__/query-rule-custom-data-test.ts | 5 +- .../__tests__/query-rule-custom-data.test.tsx | 9 +- .../__tests__/range-input.test.tsx | 9 +- .../src/widgets/range-input/range-input.tsx | 6 +- .../__tests__/range-slider-test.ts | 4 +- .../__tests__/rating-menu.test.tsx | 9 +- .../src/widgets/rating-menu/rating-menu.tsx | 2 - .../__tests__/refinement-list.test.tsx | 9 +- .../refinement-list/refinement-list.tsx | 3 - .../__tests__/related-products.test.tsx | 9 +- .../related-products/related-products.tsx | 1 - .../__tests__/relevant-sort-test.ts | 2 +- .../__tests__/relevant-sort.test.tsx | 149 ++++++------ .../search-box/__tests__/search-box.test.tsx | 9 +- .../src/widgets/search-box/search-box.tsx | 6 +- .../widgets/stats/__tests__/stats.test.tsx | 205 ++++++++-------- .../src/widgets/stats/stats.tsx | 2 - .../__tests__/toggle-refinement.test.tsx | 9 +- .../toggle-refinement/toggle-refinement.tsx | 2 - .../__tests__/trending-items.test.tsx | 9 +- .../widgets/trending-items/trending-items.tsx | 1 - .../__tests__/voice-search.test.tsx | 223 +++++++++--------- .../instantsearch.js/stories/hits.stories.ts | 100 -------- .../stories/infinite-hits.stories.ts | 6 +- .../stories/query-rule-custom-data.stories.ts | 31 --- .../test/createInstantSearch.ts | 1 - .../instantsearch.js/test/createWidget.ts | 2 - .../src/hooks/__tests__/useConnector.test.tsx | 1 - .../src/hooks/useConnector.ts | 1 - .../components/__tests__/Index-integration.js | 1 - .../__tests__/createServerRootMixin.test.js | 1 - .../src/util/createServerRootMixin.js | 1 - yarn.lock | 35 +-- 100 files changed, 730 insertions(+), 2256 deletions(-) delete mode 100644 packages/instantsearch.js/src/lib/__tests__/createHelpers.tests.ts delete mode 100644 packages/instantsearch.js/src/lib/createHelpers.ts diff --git a/babel.config.js b/babel.config.js index 750b6bb718..0fc8ca7957 100644 --- a/babel.config.js +++ b/babel.config.js @@ -87,6 +87,10 @@ module.exports = (api) => { // false positive (spread) 'Object.getOwnPropertyDescriptors', + + // @TODO: see when we remove IE11 support + 'Object.fromEntries', + 'Object.entries', ]; if (defaultShouldInject && !exclude.includes(name)) { throw new Error( diff --git a/packages/algolia-experiences/src/render.tsx b/packages/algolia-experiences/src/render.tsx index 166f10e505..3aef09f1f3 100644 --- a/packages/algolia-experiences/src/render.tsx +++ b/packages/algolia-experiences/src/render.tsx @@ -293,7 +293,7 @@ function blockToWidget(child: Block, container: HTMLElement): Widget[] { return [ panel({ templates: { - header, + header: () => header, collapseButtonText: ({ collapsed }) => ( // @TODO: put this style in a stylesheet {collapsed ? '+' : '-'} diff --git a/packages/instantsearch.js/package.json b/packages/instantsearch.js/package.json index d2cdb0102b..0db0b764a6 100644 --- a/packages/instantsearch.js/package.json +++ b/packages/instantsearch.js/package.json @@ -29,10 +29,8 @@ "@algolia/events": "^4.0.1", "@types/dom-speech-recognition": "^0.0.1", "@types/google.maps": "^3.55.12", - "@types/hogan.js": "^3.0.0", "@types/qs": "^6.5.3", "algoliasearch-helper": "3.24.1", - "hogan.js": "^3.0.2", "htm": "^3.0.0", "instantsearch-ui-components": "0.11.1", "preact": "^10.10.0", diff --git a/packages/instantsearch.js/src/__tests__/common-widgets.test.tsx b/packages/instantsearch.js/src/__tests__/common-widgets.test.tsx index 983279477c..c006253c01 100644 --- a/packages/instantsearch.js/src/__tests__/common-widgets.test.tsx +++ b/packages/instantsearch.js/src/__tests__/common-widgets.test.tsx @@ -418,7 +418,7 @@ const testSetups: TestSetupsMap = { container: document.body.appendChild(document.createElement('div')), ...widgetParams, templates: { - labelText: label, + labelText: label ? () => label : undefined, }, }), ]) diff --git a/packages/instantsearch.js/src/components/Answers/__tests__/Answers-test.tsx b/packages/instantsearch.js/src/components/Answers/__tests__/Answers-test.tsx index 2e1ebab362..ab0c552658 100644 --- a/packages/instantsearch.js/src/components/Answers/__tests__/Answers-test.tsx +++ b/packages/instantsearch.js/src/components/Answers/__tests__/Answers-test.tsx @@ -23,9 +23,9 @@ const defaultProps: AnswersProps = { }, templateProps: { templates: { - header: 'header', - loader: 'loader', - item: 'item', + header: () => 'header', + loader: () => 'loader', + item: () => 'item', }, }, }; diff --git a/packages/instantsearch.js/src/components/Breadcrumb/__tests__/Breadcrumb-test.tsx b/packages/instantsearch.js/src/components/Breadcrumb/__tests__/Breadcrumb-test.tsx index bf162d0220..860f9faeee 100644 --- a/packages/instantsearch.js/src/components/Breadcrumb/__tests__/Breadcrumb-test.tsx +++ b/packages/instantsearch.js/src/components/Breadcrumb/__tests__/Breadcrumb-test.tsx @@ -28,7 +28,6 @@ const defaultProps: BreadcrumbProps = { templateProps: prepareTemplateProps({ defaultTemplates, templates: {}, - templatesConfig: {}, }), }; diff --git a/packages/instantsearch.js/src/components/GeoSearchControls/__tests__/GeoSearchControls-test.tsx b/packages/instantsearch.js/src/components/GeoSearchControls/__tests__/GeoSearchControls-test.tsx index 4ccea94745..b66484d323 100644 --- a/packages/instantsearch.js/src/components/GeoSearchControls/__tests__/GeoSearchControls-test.tsx +++ b/packages/instantsearch.js/src/components/GeoSearchControls/__tests__/GeoSearchControls-test.tsx @@ -24,13 +24,12 @@ describe('GeoSearchControls', () => { const templateProps = prepareTemplateProps({ defaultTemplates: { - toggle: 'toggle', - redo: 'redo', - reset: 'reset', - HTMLMarker: '', + toggle: () => 'toggle', + redo: () => 'redo', + reset: () => 'reset', + HTMLMarker: () => '', }, templates: {}, - templatesConfig: {}, }); const defaultProps = { diff --git a/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx b/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx index e3c32f2368..cbf1b1cd97 100644 --- a/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx +++ b/packages/instantsearch.js/src/components/InfiniteHits/InfiniteHits.tsx @@ -81,7 +81,6 @@ const InfiniteHits = ({ results, hits, insights, - bindEvent, sendEvent, hasShowPrevious, showPrevious, @@ -188,7 +187,6 @@ const InfiniteHits = ({ return index; }, }} - bindEvent={bindEvent} sendEvent={sendEvent} /> ))} diff --git a/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits-test.tsx b/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits-test.tsx index 9533800f97..ab4fdbf878 100644 --- a/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits-test.tsx +++ b/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits-test.tsx @@ -61,10 +61,10 @@ describe('InfiniteHits', () => { isLastPage: false, templateProps: { templates: { - empty: 'empty', - showPreviousText: 'showPreviousText', - showMoreText: 'showMoreText', - item: 'item', + empty: () => 'empty', + showPreviousText: () => 'showPreviousText', + showMoreText: () => 'showMoreText', + item: () => 'item', }, }, cssClasses, @@ -101,10 +101,10 @@ describe('InfiniteHits', () => { isLastPage: true, templateProps: { templates: { - empty: 'empty', - showPreviousText: 'showPreviousText', - showMoreText: 'showMoreText', - item: 'item', + empty: () => 'empty', + showPreviousText: () => 'showPreviousText', + showMoreText: () => 'showMoreText', + item: () => 'item', }, }, cssClasses, @@ -130,10 +130,10 @@ describe('InfiniteHits', () => { isLastPage: false, templateProps: { templates: { - empty: 'empty', - showPreviousText: 'showPreviousText', - showMoreText: 'showMoreText', - item: 'item', + empty: () => 'empty', + showPreviousText: () => 'showPreviousText', + showMoreText: () => 'showMoreText', + item: () => 'item', }, }, cssClasses, @@ -159,10 +159,10 @@ describe('InfiniteHits', () => { isLastPage: true, templateProps: { templates: { - empty: 'empty', - showPreviousText: 'showPreviousText', - showMoreText: 'showMoreText', - item: 'item', + empty: () => 'empty', + showPreviousText: () => 'showPreviousText', + showMoreText: () => 'showMoreText', + item: () => 'item', }, }, cssClasses, @@ -199,10 +199,10 @@ describe('InfiniteHits', () => { isLastPage: false, templateProps: { templates: { - empty: 'empty', - showPreviousText: 'showPreviousText', - showMoreText: 'showMoreText', - item: 'item', + empty: () => 'empty', + showPreviousText: () => 'showPreviousText', + showMoreText: () => 'showMoreText', + item: () => 'item', }, }, cssClasses, @@ -244,10 +244,10 @@ describe('InfiniteHits', () => { isLastPage: true, templateProps: { templates: { - empty: 'empty', - showPreviousText: 'showPreviousText', - showMoreText: 'showMoreText', - item: 'item', + empty: () => 'empty', + showPreviousText: () => 'showPreviousText', + showMoreText: () => 'showMoreText', + item: () => 'item', }, }, cssClasses, diff --git a/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits.test.tsx b/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits.test.tsx index 456c5618d5..c1eee9299f 100644 --- a/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits.test.tsx +++ b/packages/instantsearch.js/src/components/InfiniteHits/__tests__/InfiniteHits.test.tsx @@ -82,7 +82,6 @@ describe('InfiniteHits', () => { return ''; }, }, - templatesConfig: {}, templates: {}, }), ...props, diff --git a/packages/instantsearch.js/src/components/MenuSelect/__tests__/MenuSelect-test.tsx b/packages/instantsearch.js/src/components/MenuSelect/__tests__/MenuSelect-test.tsx index 023ce403cf..3dec61ebe8 100644 --- a/packages/instantsearch.js/src/components/MenuSelect/__tests__/MenuSelect-test.tsx +++ b/packages/instantsearch.js/src/components/MenuSelect/__tests__/MenuSelect-test.tsx @@ -55,8 +55,8 @@ describe('MenuSelect', () => { refine: () => {}, templateProps: { templates: { - item: '{{label}}', - defaultOption: 'defaultOption', + item: ({ label }: { label: string }) => label, + defaultOption: () => 'defaultOption', }, }, cssClasses, diff --git a/packages/instantsearch.js/src/components/MenuSelect/__tests__/__snapshots__/MenuSelect-test.tsx.snap b/packages/instantsearch.js/src/components/MenuSelect/__tests__/__snapshots__/MenuSelect-test.tsx.snap index 363ef2f038..457df9ac2e 100644 --- a/packages/instantsearch.js/src/components/MenuSelect/__tests__/__snapshots__/MenuSelect-test.tsx.snap +++ b/packages/instantsearch.js/src/components/MenuSelect/__tests__/__snapshots__/MenuSelect-test.tsx.snap @@ -11,31 +11,22 @@ exports[`MenuSelect should render with custom templates 1`] = ` > `; @@ -51,31 +42,22 @@ exports[`MenuSelect should render with items 1`] = ` > `; @@ -91,13 +73,10 @@ exports[`MenuSelect should render with no items 1`] = ` > `; diff --git a/packages/instantsearch.js/src/components/Panel/__tests__/Panel-test.tsx b/packages/instantsearch.js/src/components/Panel/__tests__/Panel-test.tsx index f9ab84a63e..4a20dac126 100644 --- a/packages/instantsearch.js/src/components/Panel/__tests__/Panel-test.tsx +++ b/packages/instantsearch.js/src/components/Panel/__tests__/Panel-test.tsx @@ -29,11 +29,7 @@ const getDefaultProps = () => ({ collapsible: false, isCollapsed: false, data: createRenderOptions(), - templates: { - header: '', - footer: '', - collapseButtonText: '', - }, + templates: {}, }); describe('Panel', () => { @@ -79,9 +75,9 @@ describe('Panel', () => { const props = { ...getDefaultProps(), templates: { - header: 'Header', - footer: 'Footer', - collapseButtonText: 'Toggle', + header: () => 'Header', + footer: () => 'Footer', + collapseButtonText: () => 'Toggle', }, }; @@ -128,9 +124,9 @@ describe('Panel', () => { ...getDefaultProps(), hidden: true, templates: { - header: 'Header', - footer: 'Footer', - collapseButtonText: 'Toggle', + header: () => 'Header', + footer: () => 'Footer', + collapseButtonText: () => 'Toggle', }, }; @@ -171,8 +167,8 @@ describe('Panel', () => { const props: PanelProps = { ...getDefaultProps(), templates: { - header: 'Header', - footer: 'Footer', + header: () => 'Header', + footer: () => 'Footer', collapseButtonText: ({ collapsed }) => (collapsed ? 'More' : 'Less'), }, collapsible: true, @@ -217,8 +213,8 @@ describe('Panel', () => { collapsible: true, isCollapsed: true, templates: { - header: 'Header', - footer: 'Footer', + header: () => 'Header', + footer: () => 'Footer', collapseButtonText: ({ collapsed }) => (collapsed ? 'More' : 'Less'), }, }; @@ -262,8 +258,8 @@ describe('Panel', () => { collapsible: true, isCollapsed: false, templates: { - header: 'Header', - footer: 'Footer', + header: () => 'Header', + footer: () => 'Footer', collapseButtonText: ({ collapsed }) => (collapsed ? 'More' : 'Less'), }, }; diff --git a/packages/instantsearch.js/src/components/Panel/__tests__/__snapshots__/Panel-test.tsx.snap b/packages/instantsearch.js/src/components/Panel/__tests__/__snapshots__/Panel-test.tsx.snap index 89f6901fc2..5caf2335fa 100644 --- a/packages/instantsearch.js/src/components/Panel/__tests__/__snapshots__/Panel-test.tsx.snap +++ b/packages/instantsearch.js/src/components/Panel/__tests__/__snapshots__/Panel-test.tsx.snap @@ -73,13 +73,11 @@ exports[`Panel default should render component with default props 1`] = `
-
-
`; diff --git a/packages/instantsearch.js/src/components/QueryRuleCustomData/__tests__/__snapshots__/QueryRuleCustomData-test.tsx.snap b/packages/instantsearch.js/src/components/QueryRuleCustomData/__tests__/__snapshots__/QueryRuleCustomData-test.tsx.snap index e0addb0561..84e9d7e422 100644 --- a/packages/instantsearch.js/src/components/QueryRuleCustomData/__tests__/__snapshots__/QueryRuleCustomData-test.tsx.snap +++ b/packages/instantsearch.js/src/components/QueryRuleCustomData/__tests__/__snapshots__/QueryRuleCustomData-test.tsx.snap @@ -4,7 +4,9 @@ exports[`QueryRuleCustomData renders with empty items 1`] = `
+ > + +
`; diff --git a/packages/instantsearch.js/src/components/RangeInput/__tests__/RangeInput-test.tsx b/packages/instantsearch.js/src/components/RangeInput/__tests__/RangeInput-test.tsx index 98c79f6f97..a264cbfcf6 100644 --- a/packages/instantsearch.js/src/components/RangeInput/__tests__/RangeInput-test.tsx +++ b/packages/instantsearch.js/src/components/RangeInput/__tests__/RangeInput-test.tsx @@ -30,8 +30,8 @@ describe('RangeInput', () => { }, templateProps: { templates: { - separatorText: 'to', - submitText: 'Go', + separatorText: () => 'to', + submitText: () => 'Go', }, }, refine: () => {}, diff --git a/packages/instantsearch.js/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.tsx.snap b/packages/instantsearch.js/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.tsx.snap index 9c39a43b3e..d0e6b4cfee 100644 --- a/packages/instantsearch.js/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.tsx.snap +++ b/packages/instantsearch.js/src/components/RangeInput/__tests__/__snapshots__/RangeInput-test.tsx.snap @@ -34,12 +34,10 @@ exports[`RangeInput expect to render 1`] = ` templateKey="separatorText" templates={ { - "separatorText": "to", - "submitText": "Go", + "separatorText": [Function], + "submitText": [Function], } } - templatesConfig={{}} - useCustomCompileOptions={{}} />