Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(rendering): Expose createElement #85

Merged
merged 25 commits into from
Jun 21, 2022
Merged

feat(rendering): Expose createElement #85

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b9d8236
feat: return createElement and Fragment
SophieManley03 Jun 8, 2022
cf0254c
feat: return createElement and Fragment for fallback
SophieManley03 Jun 8, 2022
bcfa781
feat: use Renderer
SophieManley03 Jun 13, 2022
ff0c5f9
feat: add tests
SophieManley03 Jun 13, 2022
3d9f32d
Update packages/recommend-vdom/src/types/FacetsViewProps.ts
SophieManley03 Jun 13, 2022
ef91a7c
Update packages/recommend-vdom/src/types/ViewProps.ts
SophieManley03 Jun 13, 2022
313d400
fix: missing import
SophieManley03 Jun 13, 2022
9aa3739
fix: typings
SophieManley03 Jun 13, 2022
6e822f0
fix: lint
SophieManley03 Jun 13, 2022
93ca5f0
fix: size limit
SophieManley03 Jun 13, 2022
11cf12e
fix: add more tests
SophieManley03 Jun 14, 2022
b5ff0d9
fix: remove useless if
SophieManley03 Jun 17, 2022
c84b6ec
Update packages/recommend-js/src/__tests__/frequentlyBoughtTogether.t…
SophieManley03 Jun 21, 2022
6b8a8f4
Update packages/recommend-js/src/__tests__/frequentlyBoughtTogether.t…
SophieManley03 Jun 21, 2022
d05c46b
Update packages/recommend-js/src/__tests__/frequentlyBoughtTogether.t…
SophieManley03 Jun 21, 2022
4e0509f
Update packages/recommend-js/src/__tests__/frequentlyBoughtTogether.t…
SophieManley03 Jun 21, 2022
6cfb5e7
Update packages/recommend-js/src/__tests__/frequentlyBoughtTogether.t…
SophieManley03 Jun 21, 2022
52b64ad
Update packages/recommend-js/src/__tests__/trendingItems.test.tsx
SophieManley03 Jun 21, 2022
6bd6da8
Update packages/recommend-js/src/__tests__/trendingItems.test.tsx
SophieManley03 Jun 21, 2022
c19b3ba
Update packages/recommend-js/src/__tests__/trendingItems.test.tsx
SophieManley03 Jun 21, 2022
fbd7648
Update packages/recommend-js/src/__tests__/trendingItems.test.tsx
SophieManley03 Jun 21, 2022
a0bc683
Update packages/recommend-js/src/__tests__/trendingItems.test.tsx
SophieManley03 Jun 21, 2022
c53d2c4
Update packages/recommend-js/src/__tests__/relatedProducts.test.tsx
SophieManley03 Jun 21, 2022
6674f98
Update packages/recommend-js/src/__tests__/relatedProducts.test.tsx
SophieManley03 Jun 21, 2022
be21c6d
fix: naming in test
SophieManley03 Jun 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/recommend-vdom/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@
"build": "yarn build:clean && yarn build:esm && yarn build:umd && yarn build:types",
"prepare": "yarn build:esm && yarn build:types"
},
"dependencies": {
"preact": "^10.0.0"
},
SophieManley03 marked this conversation as resolved.
Show resolved Hide resolved
"devDependencies": {
"@algolia/recommend-core": "1.3.1"
}
Expand Down
7 changes: 6 additions & 1 deletion packages/recommend-vdom/src/DefaultChildren.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<TObject>(props: ChildrenProps<TObject>) {
if (props.recommendations.length === 0 && props.status === 'idle') {
return <props.Fallback />;
Expand All @@ -15,6 +18,8 @@ export function createDefaultChildrenComponent({ createElement }: Renderer) {
classNames={props.classNames}
recommendations={props.recommendations}
translations={props.translations}
createElement={createElement}
Fragment={Fragment}
/>

<props.View />
Expand Down
8 changes: 6 additions & 2 deletions packages/recommend-vdom/src/FacetsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<TItem extends FacetEntry>(
props: FacetsViewProps<TItem, RecommendTranslations, RecommendClassNames>
) {
Expand All @@ -23,7 +23,11 @@ export function createFacetsView({ createElement }: Renderer) {
key={item.facetValue}
className={cx('auc-Recommend-item', props.classNames.item)}
>
<props.itemComponent item={item} />
<props.itemComponent
createElement={createElement}
Fragment={Fragment}
item={item}
/>
</li>
))}
</ol>
Expand Down
5 changes: 4 additions & 1 deletion packages/recommend-vdom/src/FrequentlyBoughtTogether.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,11 @@ export function createFrequentlyBoughtTogetherComponent({
const children =
props.children ??
createDefaultChildrenComponent({ createElement, Fragment });
const Fallback =
const FallbackComponent =
props.fallbackComponent ?? createDefaultFallbackComponent();
const Fallback = () => (
<FallbackComponent Fragment={Fragment} createElement={createElement} />
);
const Header =
props.headerComponent ??
createDefaultHeaderComponent({ createElement, Fragment });
Expand Down
8 changes: 6 additions & 2 deletions packages/recommend-vdom/src/ListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<TItem extends RecordWithObjectID>(
props: ViewProps<TItem, RecommendTranslations, RecommendClassNames>
) {
Expand All @@ -23,7 +23,11 @@ export function createListViewComponent({ createElement }: Renderer) {
key={item.objectID}
className={cx('auc-Recommend-item', props.classNames.item)}
>
<props.itemComponent item={item} />
<props.itemComponent
createElement={createElement}
Fragment={Fragment}
item={item}
/>
</li>
))}
</ol>
Expand Down
5 changes: 4 additions & 1 deletion packages/recommend-vdom/src/RelatedProducts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,11 @@ export function createRelatedProductsComponent({
const children =
props.children ??
createDefaultChildrenComponent({ createElement, Fragment });
const Fallback =
const FallbackComponent =
props.fallbackComponent ?? createDefaultFallbackComponent();
const Fallback = () => (
<FallbackComponent Fragment={Fragment} createElement={createElement} />
);
const Header =
props.headerComponent ??
createDefaultHeaderComponent({ createElement, Fragment });
Expand Down
5 changes: 4 additions & 1 deletion packages/recommend-vdom/src/TrendingFacets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,11 @@ export function createTrendingFacetsComponent({
const children =
props.children ??
createDefaultChildrenComponent({ createElement, Fragment });
const Fallback =
const FallbackComponent =
props.fallbackComponent ?? createDefaultFallbackComponent();
const Fallback = () => (
<FallbackComponent Fragment={Fragment} createElement={createElement} />
);
const Header =
props.headerComponent ??
createDefaultHeaderComponent({ createElement, Fragment });
Expand Down
5 changes: 4 additions & 1 deletion packages/recommend-vdom/src/TrendingItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,11 @@ export function createTrendingItemsComponent({
const children =
props.children ??
createDefaultChildrenComponent({ createElement, Fragment });
const Fallback =
const FallbackComponent =
props.fallbackComponent ?? createDefaultFallbackComponent();
const Fallback = () => (
<FallbackComponent Fragment={Fragment} createElement={createElement} />
);
const Header =
props.headerComponent ??
createDefaultHeaderComponent({ createElement, Fragment });
Expand Down
6 changes: 5 additions & 1 deletion packages/recommend-vdom/src/types/FacetsViewProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ export type FacetsViewProps<
TClassNames extends Record<string, string>
> = {
classNames: TClassNames;
itemComponent({ item: TItem }): JSX.Element;
itemComponent({
item: TItem,
createElement: Pragma,
Fragment: PragmaFrag,
SophieManley03 marked this conversation as resolved.
Show resolved Hide resolved
}): JSX.Element;
SophieManley03 marked this conversation as resolved.
Show resolved Hide resolved
items: TItem[];
translations: TTranslations;
};
19 changes: 14 additions & 5 deletions packages/recommend-vdom/src/types/RecommendComponentProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,21 @@ import { FacetsViewProps } from './FacetsViewProps';
import { RecommendClassNames } from './RecommendClassNames';
import { RecommendStatus } from './RecommendStatus';
import { RecommendTranslations } from './RecommendTranslations';
import { Pragma, PragmaFrag } from './Renderer';
import { ViewProps } from './ViewProps';

export type ItemComponentProps<TObject> = {
item: TObject;
} & RenderProps;

export type RenderProps = {
SophieManley03 marked this conversation as resolved.
Show resolved Hide resolved
createElement: Pragma;
Fragment: PragmaFrag;
};

export type HeaderComponentProps<TObject> = RenderProps &
ComponentProps<TObject>;

export type ComponentProps<TObject> = {
classNames: RecommendClassNames;
recommendations: TObject[];
Expand All @@ -18,7 +27,7 @@ export type ComponentProps<TObject> = {

export type ChildrenProps<TObject> = ComponentProps<TObject> & {
Fallback(): JSX.Element | null;
Header(props: ComponentProps<TObject>): JSX.Element | null;
Header(props: HeaderComponentProps<TObject>): JSX.Element | null;
status: RecommendStatus;
View(props: unknown): JSX.Element;
};
Expand All @@ -28,8 +37,8 @@ export type RecommendComponentProps<TObject> = {
items: Array<RecordWithObjectID<TObject>>;
classNames?: RecommendClassNames;
children?(props: ChildrenProps<TObject>): JSX.Element;
fallbackComponent?(): JSX.Element;
headerComponent?(props: ComponentProps<TObject>): JSX.Element;
fallbackComponent?(props: RenderProps): JSX.Element;
headerComponent?(props: HeaderComponentProps<TObject>): JSX.Element;
status: RecommendStatus;
translations?: RecommendTranslations;
view?(
Expand All @@ -46,8 +55,8 @@ export type TrendingComponentProps<TObject> = {
items: Array<FacetEntry<TObject>>;
classNames?: RecommendClassNames;
children?(props: ChildrenProps<TObject>): JSX.Element;
fallbackComponent?(): JSX.Element;
headerComponent?(props: ComponentProps<TObject>): JSX.Element;
fallbackComponent?(props: RenderProps): JSX.Element;
headerComponent?(props: HeaderComponentProps<TObject>): JSX.Element;
status: RecommendStatus;
translations?: RecommendTranslations;
view?(
Expand Down
6 changes: 5 additions & 1 deletion packages/recommend-vdom/src/types/ViewProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ export type ViewProps<
TClassNames extends Record<string, string>
> = {
classNames: TClassNames;
itemComponent({ item: TItem }): JSX.Element;
itemComponent({
item: TItem,
createElement: Pragma,
Fragment: PragmaFrag,
}): JSX.Element;
SophieManley03 marked this conversation as resolved.
Show resolved Hide resolved
items: TItem[];
translations: TTranslations;
};