diff --git a/bundlesize.config.json b/bundlesize.config.json index b4314457..02386623 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -6,7 +6,7 @@ }, { "path": "packages/recommend-js/dist/umd/index.js", - "maxSize": "7.30 kB" + "maxSize": "7.35 kB" }, { "path": "packages/recommend-react/dist/umd/index.js", diff --git a/packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx b/packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx new file mode 100644 index 00000000..0705263e --- /dev/null +++ b/packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx @@ -0,0 +1,207 @@ +/** @jsx h */ +import { ObjectWithObjectID } from '@algolia/client-search'; +import { waitFor, within } from '@testing-library/dom'; +import { h } from 'preact'; + +import { createMultiSearchResponse } from '../../../../test/utils/createApiResponse'; +import { + createRecommendClient, + hit, +} from '../../../../test/utils/createRecommendClient'; +import { frequentlyBoughtTogether } from '../frequentlyBoughtTogether'; + +function createMockedRecommendClient(recommendations: ObjectWithObjectID[]) { + const recommendClient = createRecommendClient({ + getFrequentlyBoughtTogether: jest.fn(() => + Promise.resolve( + createMultiSearchResponse({ + hits: recommendations, + }) + ) + ), + }); + + return recommendClient; +} + +describe('frequentlyBoughtTogether', () => { + beforeEach(() => { + document.body.innerHTML = ''; + }); + + describe('rendering the header and items', () => { + test('renders JSX templates', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient(hit.recommendations); + + document.body.appendChild(container); + + frequentlyBoughtTogether({ + container, + recommendClient, + indexName: 'products', + objectIDs: ['D06270-9132-995'], + headerComponent: () =>

FBT

, + itemComponent: ({ item }) =>
{item.objectID}
, + }); + + await waitFor(() => { + expect(within(container).getAllByRole('listitem')).not.toBeNull(); + expect(container).toMatchInlineSnapshot(` +
+
+

+ FBT +

+
+
    +
  1. +
    + 1 +
    +
    2. +
  2. +
    + 2 +
    +
    3. +
  3. +
    + 3 +
    +
    4. +
+
+
+
+ `); + }); + }); + + test('renders using `createElement` and `Fragment`', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient(hit.recommendations); + + document.body.appendChild(container); + + frequentlyBoughtTogether({ + container, + recommendClient, + indexName: 'products', + objectIDs: ['D06270-9132-995'], + headerComponent: ({ createElement }) => + createElement('h1', null, 'FBT'), + itemComponent: ({ item, createElement, Fragment }) => + createElement(Fragment, null, item.objectID), + }); + + await waitFor(() => { + expect(within(container).getAllByRole('listitem')).not.toBeNull(); + expect(container).toMatchInlineSnapshot(` +
+
+

+ FBT +

+
+
    +
  1. + 1 +
    2. +
  2. + 2 +
    3. +
  3. + 3 +
    4. +
+
+
+
+ `); + }); + }); + }); + + describe('rendering `fallbackComponent`', () => { + test('renders JSX templates', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient([]); + + document.body.appendChild(container); + + frequentlyBoughtTogether({ + container, + recommendClient, + indexName: 'products', + objectIDs: ['D06270-9132-995'], + itemComponent: ({ item }) =>
{item.objectID}
, + fallbackComponent: () =>
Fallback component
, + }); + + await waitFor(() => { + expect(within(container).getByText('Fallback component')) + .toMatchInlineSnapshot(` +
+ Fallback component +
+ `); + }); + }); + + test('renders using `createElement` and `Fragment`', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient([]); + + document.body.appendChild(container); + + frequentlyBoughtTogether({ + container, + recommendClient, + indexName: 'products', + objectIDs: ['D06270-9132-995'], + itemComponent: ({ item, createElement }) => + createElement('div', null, item.objectID), + fallbackComponent: ({ createElement, Fragment }) => + createElement(Fragment, null, 'Fallback component'), + }); + + await waitFor(() => { + expect(within(container).getByText('Fallback component')) + .toMatchInlineSnapshot(` +
+ Fallback component +
+ `); + }); + }); + }); +}); diff --git a/packages/recommend-js/src/__tests__/relatedProducts.test.tsx b/packages/recommend-js/src/__tests__/relatedProducts.test.tsx new file mode 100644 index 00000000..3fb20ac1 --- /dev/null +++ b/packages/recommend-js/src/__tests__/relatedProducts.test.tsx @@ -0,0 +1,206 @@ +/** @jsx h */ +import { ObjectWithObjectID } from '@algolia/client-search'; +import { waitFor, within } from '@testing-library/dom'; +import { h } from 'preact'; + +import { createMultiSearchResponse } from '../../../../test/utils/createApiResponse'; +import { + createRecommendClient, + hit, +} from '../../../../test/utils/createRecommendClient'; +import { relatedProducts } from '../relatedProducts'; + +function createMockedRecommendClient(recommendations: ObjectWithObjectID[]) { + const recommendClient = createRecommendClient({ + getRelatedProducts: jest.fn(() => + Promise.resolve( + createMultiSearchResponse({ + hits: recommendations, + }) + ) + ), + }); + + return recommendClient; +} + +describe('relatedProducts', () => { + beforeEach(() => { + document.body.innerHTML = ''; + }); + + describe('renders using `createElement` and `Fragment`', () => { + test('renders JSX templates', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient(hit.recommendations); + + document.body.appendChild(container); + + relatedProducts({ + container, + recommendClient, + indexName: 'products', + objectIDs: ['D06270-9132-995'], + headerComponent: () =>

RP

, + itemComponent: ({ item }) =>
{item.objectID}
, + }); + + await waitFor(() => { + expect(within(container).getAllByRole('listitem')).not.toBeNull(); + expect(container).toMatchInlineSnapshot(` +
+
+

+ RP +

+
+
    +
  1. +
    + 1 +
    +
    2. +
  2. +
    + 2 +
    +
    3. +
  3. +
    + 3 +
    +
    4. +
+
+
+
+ `); + }); + }); + + test('renders using `createElement` and `Fragment`', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient(hit.recommendations); + + document.body.appendChild(container); + + relatedProducts({ + container, + recommendClient, + indexName: 'products', + objectIDs: ['D06270-9132-995'], + headerComponent: ({ createElement }) => createElement('h1', null, 'RP'), + itemComponent: ({ item, createElement, Fragment }) => + createElement(Fragment, null, item.objectID), + }); + + await waitFor(() => { + expect(within(container).getAllByRole('listitem')).not.toBeNull(); + expect(container).toMatchInlineSnapshot(` +
+
+

+ RP +

+
+
    +
  1. + 1 +
    2. +
  2. + 2 +
    3. +
  3. + 3 +
    4. +
+
+
+
+ `); + }); + }); + }); + + describe('rendering `fallbackComponent`', () => { + test('renders JSX templates', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient([]); + + document.body.appendChild(container); + + relatedProducts({ + container, + recommendClient, + indexName: 'products', + objectIDs: ['D06270-9132-995'], + itemComponent: ({ item }) =>
{item.objectID}
, + fallbackComponent: () =>
Fallback component
, + }); + + await waitFor(() => { + expect(within(container).getByText('Fallback component')) + .toMatchInlineSnapshot(` +
+ Fallback component +
+ `); + }); + }); + + test('renders using `createElement` and `Fragment`', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient([]); + + document.body.appendChild(container); + + relatedProducts({ + container, + recommendClient, + indexName: 'products', + objectIDs: ['D06270-9132-995'], + itemComponent: ({ item, createElement }) => + createElement('div', null, item.objectID), + fallbackComponent: ({ createElement, Fragment }) => + createElement(Fragment, null, 'Fallback component'), + }); + + await waitFor(() => { + expect(within(container).getByText('Fallback component')) + .toMatchInlineSnapshot(` +
+ Fallback component +
+ `); + }); + }); + }); +}); diff --git a/packages/recommend-js/src/__tests__/trendingFacets.test.tsx b/packages/recommend-js/src/__tests__/trendingFacets.test.tsx new file mode 100644 index 00000000..b29694b6 --- /dev/null +++ b/packages/recommend-js/src/__tests__/trendingFacets.test.tsx @@ -0,0 +1,204 @@ +/** @jsx h */ +import { ObjectWithObjectID } from '@algolia/client-search'; +import { waitFor, within } from '@testing-library/dom'; +import { h } from 'preact'; + +import { createMultiSearchResponse } from '../../../../test/utils/createApiResponse'; +import { + createRecommendClient, + hit, +} from '../../../../test/utils/createRecommendClient'; +import { trendingFacets } from '../trendingFacets'; + +function createMockedRecommendClient(recommendations: ObjectWithObjectID[]) { + const recommendClient = createRecommendClient({ + getTrendingFacets: jest.fn(() => + Promise.resolve( + createMultiSearchResponse({ + hits: recommendations, + }) + ) + ), + }); + + return recommendClient; +} + +describe('trendingFacets', () => { + beforeEach(() => { + document.body.innerHTML = ''; + }); + + describe('rendering the header and items', () => { + test('renders JSX templates', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient(hit.recommendations); + + document.body.appendChild(container); + + trendingFacets({ + container, + recommendClient, + indexName: 'products', + facetName: 'category', + headerComponent: () =>

Trending facets

, + itemComponent: ({ item }) =>
{item.objectID}
, + }); + + await waitFor(() => { + expect(within(container).getAllByRole('listitem')).not.toBeNull(); + expect(container).toMatchInlineSnapshot(` +
+
+

+ Trending facets +

+
+
    +
  1. +
    + 1 +
    +
    2. +
  2. +
    + 2 +
    +
    3. +
  3. +
    + 3 +
    +
    4. +
+
+
+
+ `); + }); + }); + + test('renders using `createElement` and `Fragment`', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient(hit.recommendations); + + document.body.appendChild(container); + + trendingFacets({ + container, + recommendClient, + indexName: 'products', + headerComponent: ({ createElement }) => + createElement('h1', null, 'Trending facets'), + itemComponent: ({ item, createElement, Fragment }) => + createElement(Fragment, null, item.objectID), + }); + + await waitFor(() => { + expect(within(container).getAllByRole('listitem')).not.toBeNull(); + expect(container).toMatchInlineSnapshot(` +
+
+

+ Trending facets +

+
+
    +
  1. + 1 +
    2. +
  2. + 2 +
    3. +
  3. + 3 +
    4. +
+
+
+
+ `); + }); + }); + }); + + describe('rendering `fallbackComponent`', () => { + test('renders JSX templates', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient([]); + + document.body.appendChild(container); + + trendingFacets({ + container, + recommendClient, + indexName: 'products', + itemComponent: ({ item }) =>
{item.objectID}
, + fallbackComponent: () =>
Fallback component
, + }); + + await waitFor(() => { + expect(within(container).getByText('Fallback component')) + .toMatchInlineSnapshot(` +
+ Fallback component +
+ `); + }); + }); + + test('renders using `createElement` and `Fragment`', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient([]); + + document.body.appendChild(container); + + trendingFacets({ + container, + recommendClient, + indexName: 'products', + itemComponent: ({ item, createElement }) => + createElement('div', null, item.objectID), + fallbackComponent: ({ createElement, Fragment }) => + createElement(Fragment, null, 'Fallback component'), + }); + + await waitFor(() => { + expect(within(container).getByText('Fallback component')) + .toMatchInlineSnapshot(` +
+ Fallback component +
+ `); + }); + }); + }); +}); diff --git a/packages/recommend-js/src/__tests__/trendingItems.test.tsx b/packages/recommend-js/src/__tests__/trendingItems.test.tsx new file mode 100644 index 00000000..3425deba --- /dev/null +++ b/packages/recommend-js/src/__tests__/trendingItems.test.tsx @@ -0,0 +1,203 @@ +/** @jsx h */ +import { ObjectWithObjectID } from '@algolia/client-search'; +import { waitFor, within } from '@testing-library/dom'; +import { h } from 'preact'; + +import { createMultiSearchResponse } from '../../../../test/utils/createApiResponse'; +import { + createRecommendClient, + hit, +} from '../../../../test/utils/createRecommendClient'; +import { trendingItems } from '../trendingItems'; + +function createMockedRecommendClient(recommendations: ObjectWithObjectID[]) { + const recommendClient = createRecommendClient({ + getTrendingItems: jest.fn(() => + Promise.resolve( + createMultiSearchResponse({ + hits: recommendations, + }) + ) + ), + }); + + return recommendClient; +} + +describe('trendingItems', () => { + beforeEach(() => { + document.body.innerHTML = ''; + }); + + describe('rendering the header and items', () => { + test('renders JSX templates', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient(hit.recommendations); + + document.body.appendChild(container); + + trendingItems({ + container, + recommendClient, + indexName: 'products', + headerComponent: () =>

Trending items

, + itemComponent: ({ item }) =>
{item.objectID}
, + }); + + await waitFor(() => { + expect(within(container).getAllByRole('listitem')).not.toBeNull(); + expect(container).toMatchInlineSnapshot(` +
+
+

+ Trending items +

+
+
    +
  1. +
    + 1 +
    +
    2. +
  2. +
    + 2 +
    +
    3. +
  3. +
    + 3 +
    +
    4. +
+
+
+
+ `); + }); + }); + + test('renders using `createElement` and `Fragment`', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient(hit.recommendations); + + document.body.appendChild(container); + + trendingItems({ + container, + recommendClient, + indexName: 'products', + headerComponent: ({ createElement }) => + createElement('h1', null, 'Trending items'), + itemComponent: ({ item, createElement, Fragment }) => + createElement(Fragment, null, item.objectID), + }); + + await waitFor(() => { + expect(within(container).getAllByRole('listitem')).not.toBeNull(); + expect(container).toMatchInlineSnapshot(` +
+
+

+ Trending items +

+
+
    +
  1. + 1 +
    2. +
  2. + 2 +
    3. +
  3. + 3 +
    4. +
+
+
+
+ `); + }); + }); + }); + + describe('rendering `fallbackComponent`', () => { + test('renders JSX templates', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient([]); + + document.body.appendChild(container); + + trendingItems({ + container, + recommendClient, + indexName: 'products', + itemComponent: ({ item }) =>
{item.objectID}
, + fallbackComponent: () =>
Fallback component
, + }); + + await waitFor(() => { + expect(within(container).getByText('Fallback component')) + .toMatchInlineSnapshot(` +
+ Fallback component +
+ `); + }); + }); + + test('renders using `createElement` and `Fragment`', async () => { + const container = document.createElement('div'); + + const recommendClient = createMockedRecommendClient([]); + + document.body.appendChild(container); + + trendingItems({ + container, + recommendClient, + indexName: 'products', + itemComponent: ({ item, createElement }) => + createElement('div', null, item.objectID), + fallbackComponent: ({ createElement, Fragment }) => + createElement(Fragment, null, 'Fallback component'), + }); + + await waitFor(() => { + expect(within(container).getByText('Fallback component')) + .toMatchInlineSnapshot(` +
+ Fallback component +
+ `); + }); + }); + }); +}); diff --git a/packages/recommend-vdom/src/DefaultChildren.tsx b/packages/recommend-vdom/src/DefaultChildren.tsx index a1347219..addee7a0 100644 --- a/packages/recommend-vdom/src/DefaultChildren.tsx +++ b/packages/recommend-vdom/src/DefaultChildren.tsx @@ -3,7 +3,10 @@ import { ChildrenProps, Renderer } from './types'; import { cx } from './utils'; -export function createDefaultChildrenComponent({ createElement }: Renderer) { +export function createDefaultChildrenComponent({ + createElement, + Fragment, +}: Renderer) { return function DefaultChildren(props: ChildrenProps) { if (props.recommendations.length === 0 && props.status === 'idle') { return ; @@ -15,6 +18,8 @@ export function createDefaultChildrenComponent({ createElement }: Renderer) { classNames={props.classNames} recommendations={props.recommendations} translations={props.translations} + createElement={createElement} + Fragment={Fragment} /> diff --git a/packages/recommend-vdom/src/FacetsView.tsx b/packages/recommend-vdom/src/FacetsView.tsx index 6e6ef16e..1f2da600 100644 --- a/packages/recommend-vdom/src/FacetsView.tsx +++ b/packages/recommend-vdom/src/FacetsView.tsx @@ -9,7 +9,7 @@ import { } from './types'; import { cx } from './utils'; -export function createFacetsView({ createElement }: Renderer) { +export function createFacetsView({ createElement, Fragment }: Renderer) { return function FacetsView( props: FacetsViewProps ) { @@ -23,7 +23,11 @@ export function createFacetsView({ createElement }: Renderer) { key={item.facetValue} className={cx('auc-Recommend-item', props.classNames.item)} > - + ))} diff --git a/packages/recommend-vdom/src/FrequentlyBoughtTogether.tsx b/packages/recommend-vdom/src/FrequentlyBoughtTogether.tsx index 7d7cdb7b..57e15002 100644 --- a/packages/recommend-vdom/src/FrequentlyBoughtTogether.tsx +++ b/packages/recommend-vdom/src/FrequentlyBoughtTogether.tsx @@ -30,8 +30,11 @@ export function createFrequentlyBoughtTogetherComponent({ const children = props.children ?? createDefaultChildrenComponent({ createElement, Fragment }); - const Fallback = + const FallbackComponent = props.fallbackComponent ?? createDefaultFallbackComponent(); + const Fallback = () => ( + + ); const Header = props.headerComponent ?? createDefaultHeaderComponent({ createElement, Fragment }); diff --git a/packages/recommend-vdom/src/ListView.tsx b/packages/recommend-vdom/src/ListView.tsx index 7b39fb7b..30b286ea 100644 --- a/packages/recommend-vdom/src/ListView.tsx +++ b/packages/recommend-vdom/src/ListView.tsx @@ -9,7 +9,7 @@ import { } from './types'; import { cx } from './utils'; -export function createListViewComponent({ createElement }: Renderer) { +export function createListViewComponent({ createElement, Fragment }: Renderer) { return function ListView( props: ViewProps ) { @@ -23,7 +23,11 @@ export function createListViewComponent({ createElement }: Renderer) { key={item.objectID} className={cx('auc-Recommend-item', props.classNames.item)} > - + ))} diff --git a/packages/recommend-vdom/src/RelatedProducts.tsx b/packages/recommend-vdom/src/RelatedProducts.tsx index a1411a37..1d323f87 100644 --- a/packages/recommend-vdom/src/RelatedProducts.tsx +++ b/packages/recommend-vdom/src/RelatedProducts.tsx @@ -28,8 +28,11 @@ export function createRelatedProductsComponent({ const children = props.children ?? createDefaultChildrenComponent({ createElement, Fragment }); - const Fallback = + const FallbackComponent = props.fallbackComponent ?? createDefaultFallbackComponent(); + const Fallback = () => ( + + ); const Header = props.headerComponent ?? createDefaultHeaderComponent({ createElement, Fragment }); diff --git a/packages/recommend-vdom/src/TrendingFacets.tsx b/packages/recommend-vdom/src/TrendingFacets.tsx index b07cf555..682cbeef 100644 --- a/packages/recommend-vdom/src/TrendingFacets.tsx +++ b/packages/recommend-vdom/src/TrendingFacets.tsx @@ -26,8 +26,11 @@ export function createTrendingFacetsComponent({ const children = props.children ?? createDefaultChildrenComponent({ createElement, Fragment }); - const Fallback = + const FallbackComponent = props.fallbackComponent ?? createDefaultFallbackComponent(); + const Fallback = () => ( + + ); const Header = props.headerComponent ?? createDefaultHeaderComponent({ createElement, Fragment }); diff --git a/packages/recommend-vdom/src/TrendingItems.tsx b/packages/recommend-vdom/src/TrendingItems.tsx index 6592136b..c67a0579 100644 --- a/packages/recommend-vdom/src/TrendingItems.tsx +++ b/packages/recommend-vdom/src/TrendingItems.tsx @@ -26,8 +26,11 @@ export function createTrendingItemsComponent({ const children = props.children ?? createDefaultChildrenComponent({ createElement, Fragment }); - const Fallback = + const FallbackComponent = props.fallbackComponent ?? createDefaultFallbackComponent(); + const Fallback = () => ( + + ); const Header = props.headerComponent ?? createDefaultHeaderComponent({ createElement, Fragment }); diff --git a/packages/recommend-vdom/src/types/FacetsViewProps.ts b/packages/recommend-vdom/src/types/FacetsViewProps.ts index 1610eba9..cdd195d0 100644 --- a/packages/recommend-vdom/src/types/FacetsViewProps.ts +++ b/packages/recommend-vdom/src/types/FacetsViewProps.ts @@ -1,4 +1,6 @@ -import { FacetEntry } from '@algolia/recommend-core/src'; +import { FacetEntry } from '@algolia/recommend-core'; + +import { Renderer } from './Renderer'; export type FacetsViewProps< TItem extends FacetEntry, @@ -6,7 +8,7 @@ export type FacetsViewProps< TClassNames extends Record > = { classNames: TClassNames; - itemComponent({ item: TItem }): JSX.Element; + itemComponent(props: { item: TItem } & Renderer): JSX.Element; items: TItem[]; translations: TTranslations; }; diff --git a/packages/recommend-vdom/src/types/RecommendComponentProps.ts b/packages/recommend-vdom/src/types/RecommendComponentProps.ts index f64cc031..eccb34bf 100644 --- a/packages/recommend-vdom/src/types/RecommendComponentProps.ts +++ b/packages/recommend-vdom/src/types/RecommendComponentProps.ts @@ -4,11 +4,14 @@ import { FacetsViewProps } from './FacetsViewProps'; import { RecommendClassNames } from './RecommendClassNames'; import { RecommendStatus } from './RecommendStatus'; import { RecommendTranslations } from './RecommendTranslations'; +import { Renderer } from './Renderer'; import { ViewProps } from './ViewProps'; export type ItemComponentProps = { item: TObject; -}; +} & Renderer; + +export type HeaderComponentProps = Renderer & ComponentProps; export type ComponentProps = { classNames: RecommendClassNames; @@ -18,18 +21,20 @@ export type ComponentProps = { export type ChildrenProps = ComponentProps & { Fallback(): JSX.Element | null; - Header(props: ComponentProps): JSX.Element | null; + Header(props: HeaderComponentProps): JSX.Element | null; status: RecommendStatus; View(props: unknown): JSX.Element; }; export type RecommendComponentProps = { - itemComponent(props: ItemComponentProps): JSX.Element; + itemComponent( + props: ItemComponentProps> + ): JSX.Element; items: Array>; classNames?: RecommendClassNames; children?(props: ChildrenProps): JSX.Element; - fallbackComponent?(): JSX.Element; - headerComponent?(props: ComponentProps): JSX.Element; + fallbackComponent?(props: Renderer): JSX.Element; + headerComponent?(props: HeaderComponentProps): JSX.Element; status: RecommendStatus; translations?: RecommendTranslations; view?( @@ -42,12 +47,12 @@ export type RecommendComponentProps = { }; export type TrendingComponentProps = { - itemComponent(props: ItemComponentProps): JSX.Element; + itemComponent(props: ItemComponentProps>): JSX.Element; items: Array>; classNames?: RecommendClassNames; children?(props: ChildrenProps): JSX.Element; - fallbackComponent?(): JSX.Element; - headerComponent?(props: ComponentProps): JSX.Element; + fallbackComponent?(props: Renderer): JSX.Element; + headerComponent?(props: HeaderComponentProps): JSX.Element; status: RecommendStatus; translations?: RecommendTranslations; view?( diff --git a/packages/recommend-vdom/src/types/ViewProps.ts b/packages/recommend-vdom/src/types/ViewProps.ts index a79338f1..ff2e441a 100644 --- a/packages/recommend-vdom/src/types/ViewProps.ts +++ b/packages/recommend-vdom/src/types/ViewProps.ts @@ -1,12 +1,14 @@ import { RecordWithObjectID } from '@algolia/recommend-core'; +import { Renderer } from './Renderer'; + export type ViewProps< TItem extends RecordWithObjectID, TTranslations extends Record, TClassNames extends Record > = { classNames: TClassNames; - itemComponent({ item: TItem }): JSX.Element; + itemComponent(props: { item: TItem } & Renderer): JSX.Element; items: TItem[]; translations: TTranslations; };