Skip to content

Commit

Permalink
feat(js): introduce Component API (#505)
Browse files Browse the repository at this point in the history
  • Loading branch information
francoischalifour authored Mar 30, 2021
1 parent ac90dce commit 74a908c
Show file tree
Hide file tree
Showing 59 changed files with 1,160 additions and 734 deletions.
2 changes: 1 addition & 1 deletion bundlesize.config.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
},
{
"path": "packages/autocomplete-js/dist/umd/index.production.js",
"maxSize": "14.50 kB"
"maxSize": "14.75 kB"
},
{
"path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",
Expand Down
12 changes: 7 additions & 5 deletions cypress/test-apps/js/app.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/** @jsx h */
import {
autocomplete,
AutocompleteComponents,
getAlgoliaHits,
snippetHit,
} from '@algolia/autocomplete-js';
import {
AutocompleteInsightsApi,
Expand Down Expand Up @@ -102,10 +102,11 @@ autocomplete({
</Fragment>
);
},
item({ item }) {
item({ item, components }) {
return (
<ProductItem
hit={item}
components={components}
insights={state.context.algoliaInsightsPlugin.insights}
/>
);
Expand All @@ -124,20 +125,21 @@ autocomplete({
type ProductItemProps = {
hit: ProductHit;
insights: AutocompleteInsightsApi;
components: AutocompleteComponents;
};

function ProductItem({ hit, insights }: ProductItemProps) {
function ProductItem({ hit, insights, components }: ProductItemProps) {
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--align-top">
<img src={hit.image} alt={hit.name} width="40" height="40" />
</div>
<div className="aa-ItemContent">
<div className="aa-ItemContentTitle">
{snippetHit<ProductHit>({ hit, attribute: 'name' })}
<components.Snippet hit={hit} attribute="name" />
</div>
<div className="aa-ItemContentDescription">
{snippetHit<ProductHit>({ hit, attribute: 'description' })}
<components.Snippet hit={hit} attribute="description" />
</div>
</div>
<div className="aa-ItemActions">
Expand Down
8 changes: 2 additions & 6 deletions cypress/test-apps/js/categoriesPlugin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import {
AutocompletePlugin,
getAlgoliaFacetHits,
highlightHit,
} from '@algolia/autocomplete-js';
import { SearchClient } from 'algoliasearch/lite';
import { h, Fragment } from 'preact';
Expand Down Expand Up @@ -52,7 +51,7 @@ export function createCategoriesPlugin({
</Fragment>
);
},
item({ item }) {
item({ item, components }) {
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--no-border">
Expand All @@ -73,10 +72,7 @@ export function createCategoriesPlugin({
</div>
<div className="aa-ItemContent">
<div className="aa-ItemContentTitle">
{highlightHit<CategoryItem>({
hit: item,
attribute: 'label',
})}
<components.Highlight hit={item} attribute="label" />
</div>
</div>
</Fragment>
Expand Down
9 changes: 5 additions & 4 deletions cypress/test-apps/js/env.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { h } from 'preact';
import * as preact from 'preact';

// Parcel picks the `source` field of the monorepo packages and thus doesn't
// apply the Babel config to replace our `__DEV__` global expression.
// We therefore need to manually override it in the example app.
// apply the Babel config. We therefore need to manually override the constants
// in the app, as well as the React pragmas.
// See https://twitter.com/devongovett/status/1134231234605830144
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
(global as any).__TEST__ = false;
(global as any).h = h;
(global as any).h = preact.h;
(global as any).React = preact;
12 changes: 7 additions & 5 deletions examples/playground/app.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/** @jsx h */
import {
autocomplete,
AutocompleteComponents,
getAlgoliaHits,
snippetHit,
} from '@algolia/autocomplete-js';
import {
AutocompleteInsightsApi,
Expand Down Expand Up @@ -93,10 +93,11 @@ autocomplete({
</Fragment>
);
},
item({ item }) {
item({ item, components }) {
return (
<ProductItem
hit={item}
components={components}
insights={state.context.algoliaInsightsPlugin.insights}
/>
);
Expand All @@ -115,20 +116,21 @@ autocomplete({
type ProductItemProps = {
hit: ProductHit;
insights: AutocompleteInsightsApi;
components: AutocompleteComponents;
};

function ProductItem({ hit, insights }: ProductItemProps) {
function ProductItem({ hit, insights, components }: ProductItemProps) {
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--align-top">
<img src={hit.image} alt={hit.name} width="40" height="40" />
</div>
<div className="aa-ItemContent">
<div className="aa-ItemContentTitle">
{snippetHit<ProductHit>({ hit, attribute: 'name' })}
<components.Snippet hit={hit} attribute="name" />
</div>
<div className="aa-ItemContentDescription">
{snippetHit<ProductHit>({ hit, attribute: 'description' })}
<components.Snippet hit={hit} attribute="description" />
</div>
</div>
<div className="aa-ItemActions">
Expand Down
8 changes: 2 additions & 6 deletions examples/playground/categoriesPlugin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import {
AutocompletePlugin,
getAlgoliaFacetHits,
highlightHit,
} from '@algolia/autocomplete-js';
import { SearchClient } from 'algoliasearch/lite';
import { h, Fragment } from 'preact';
Expand Down Expand Up @@ -56,7 +55,7 @@ export function createCategoriesPlugin({
</Fragment>
);
},
item({ item }) {
item({ item, components }) {
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--no-border">
Expand All @@ -77,10 +76,7 @@ export function createCategoriesPlugin({
</div>
<div className="aa-ItemContent">
<div className="aa-ItemContentTitle">
{highlightHit<CategoryHit>({
hit: item,
attribute: 'label',
})}
<components.Highlight hit={item} attribute="label" />
</div>
</div>
</Fragment>
Expand Down
9 changes: 5 additions & 4 deletions examples/playground/env.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { h } from 'preact';
import * as preact from 'preact';

// Parcel picks the `source` field of the monorepo packages and thus doesn't
// apply the Babel config to replace our `__DEV__` global expression.
// We therefore need to manually override it in the example app.
// apply the Babel config. We therefore need to manually override the constants
// in the app, as well as the React pragmas.
// See https://twitter.com/devongovett/status/1134231234605830144
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
(global as any).__TEST__ = false;
(global as any).h = h;
(global as any).h = preact.h;
(global as any).React = preact;
9 changes: 5 additions & 4 deletions examples/query-suggestions-with-categories/env.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { h } from 'preact';
import * as preact from 'preact';

// Parcel picks the `source` field of the monorepo packages and thus doesn't
// apply the Babel config to replace our `__DEV__` global expression.
// We therefore need to manually override it in the example app.
// apply the Babel config. We therefore need to manually override the constants
// in the app, as well as the React pragmas.
// See https://twitter.com/devongovett/status/1134231234605830144
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
(global as any).__TEST__ = false;
(global as any).h = h;
(global as any).h = preact.h;
(global as any).React = preact;
10 changes: 6 additions & 4 deletions examples/query-suggestions-with-hits/app.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/** @jsx h */
import {
autocomplete,
AutocompleteComponents,
getAlgoliaHits,
snippetHit,
} from '@algolia/autocomplete-js';
import {
AutocompleteInsightsApi,
Expand Down Expand Up @@ -85,10 +85,11 @@ autocomplete({
</Fragment>
);
},
item({ item }) {
item({ item, components }) {
return (
<ProductItem
hit={item}
components={components}
insights={state.context.algoliaInsightsPlugin.insights}
/>
);
Expand All @@ -107,17 +108,18 @@ autocomplete({
type ProductItemProps = {
hit: ProductHit;
insights: AutocompleteInsightsApi;
components: AutocompleteComponents;
};

function ProductItem({ hit, insights }: ProductItemProps) {
function ProductItem({ hit, insights, components }: ProductItemProps) {
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--align-top">
<img src={hit.image} alt={hit.name} width="40" height="40" />
</div>
<div className="aa-ItemContent">
<div className="aa-ItemContentTitle">
{snippetHit<ProductHit>({ hit, attribute: 'name' })}
<components.Snippet hit={hit} attribute="name" />
</div>
<div className="aa-ItemContentDescription">
From <strong>{hit.brand}</strong> in{' '}
Expand Down
9 changes: 5 additions & 4 deletions examples/query-suggestions-with-hits/env.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { h } from 'preact';
import * as preact from 'preact';

// Parcel picks the `source` field of the monorepo packages and thus doesn't
// apply the Babel config to replace our `__DEV__` global expression.
// We therefore need to manually override it in the example app.
// apply the Babel config. We therefore need to manually override the constants
// in the app, as well as the React pragmas.
// See https://twitter.com/devongovett/status/1134231234605830144
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
(global as any).__TEST__ = false;
(global as any).h = h;
(global as any).h = preact.h;
(global as any).React = preact;
11 changes: 4 additions & 7 deletions examples/query-suggestions-with-inline-categories/app.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/** @jsx h */
import { autocomplete, reverseHighlightHit } from '@algolia/autocomplete-js';
import { autocomplete } from '@algolia/autocomplete-js';
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
import algoliasearch from 'algoliasearch';
import { h, Fragment } from 'preact';
Expand Down Expand Up @@ -30,7 +30,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
...source,
templates: {
...source.templates,
item({ item, createElement }) {
item({ item, components }) {
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--no-border">
Expand All @@ -46,11 +46,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({

<div className="aa-ItemContent">
<div className="aa-ItemContentTitle">
{reverseHighlightHit<any>({
hit: item,
attribute: 'query',
createElement,
})}
<components.ReverseHighlight hit={item} attribute="query" />
</div>

{item.__autocomplete_qsCategory && (
Expand All @@ -73,6 +69,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
className="aa-ItemActionButton"
title={`Fill query with "${item.query}"`}
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onTapAhead(item);
}}
Expand Down
9 changes: 5 additions & 4 deletions examples/query-suggestions-with-inline-categories/env.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { h } from 'preact';
import * as preact from 'preact';

// Parcel picks the `source` field of the monorepo packages and thus doesn't
// apply the Babel config to replace our `__DEV__` global expression.
// We therefore need to manually override it in the example app.
// apply the Babel config. We therefore need to manually override the constants
// in the app, as well as the React pragmas.
// See https://twitter.com/devongovett/status/1134231234605830144
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
(global as any).__TEST__ = false;
(global as any).h = h;
(global as any).h = preact.h;
(global as any).React = preact;
9 changes: 5 additions & 4 deletions examples/query-suggestions-with-recent-searches/env.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { h } from 'preact';
import * as preact from 'preact';

// Parcel picks the `source` field of the monorepo packages and thus doesn't
// apply the Babel config to replace our `__DEV__` global expression.
// We therefore need to manually override it in the example app.
// apply the Babel config. We therefore need to manually override the constants
// in the app, as well as the React pragmas.
// See https://twitter.com/devongovett/status/1134231234605830144
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
(global as any).__TEST__ = false;
(global as any).h = h;
(global as any).h = preact.h;
(global as any).React = preact;
9 changes: 5 additions & 4 deletions examples/query-suggestions/env.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { h } from 'preact';
import * as preact from 'preact';

// Parcel picks the `source` field of the monorepo packages and thus doesn't
// apply the Babel config to replace our `__DEV__` global expression.
// We therefore need to manually override it in the example app.
// apply the Babel config. We therefore need to manually override the constants
// in the app, as well as the React pragmas.
// See https://twitter.com/devongovett/status/1134231234605830144
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
(global as any).__TEST__ = false;
(global as any).h = h;
(global as any).h = preact.h;
(global as any).React = preact;
13 changes: 8 additions & 5 deletions examples/recently-viewed-items/app.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/** @jsx h */
import {
autocomplete,
AutocompleteComponents,
getAlgoliaHits,
highlightHit,
} from '@algolia/autocomplete-js';
import algoliasearch from 'algoliasearch';
import { h, Fragment } from 'preact';
Expand Down Expand Up @@ -66,8 +66,10 @@ autocomplete({
</Fragment>
);
},
item({ item }) {
return <AutocompleteProductItem hit={item} />;
item({ item, components }) {
return (
<AutocompleteProductItem hit={item} components={components} />
);
},
noResults() {
return (
Expand All @@ -82,17 +84,18 @@ autocomplete({

type ProductItemProps = {
hit: ProductHit;
components: AutocompleteComponents;
};

function AutocompleteProductItem({ hit }: ProductItemProps) {
function AutocompleteProductItem({ hit, components }: ProductItemProps) {
return (
<Fragment>
<div className="aa-ItemIcon aa-ItemIcon--align-top">
<img src={hit.image} alt={hit.name} width="40" height="40" />
</div>
<div className="aa-ItemContent">
<div className="aa-ItemContentTitle">
{highlightHit<ProductHit>({ hit, attribute: 'name' })}
<components.Highlight hit={hit} attribute="name" />
</div>
</div>
<div className="aa-ItemActions">
Expand Down
Loading

0 comments on commit 74a908c

Please sign in to comment.