Skip to content

Commit 74a908c

Browse files
francoischalifourfrancoischalifour
authored
feat(js): introduce Component API (#505)
1 parent ac90dce commit 74a908c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1160
-734
lines changed

‎bundlesize.config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
},
77
{
88
"path": "packages/autocomplete-js/dist/umd/index.production.js",
9-
"maxSize": "14.50 kB"
9+
"maxSize": "14.75 kB"
1010
},
1111
{
1212
"path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",

‎cypress/test-apps/js/app.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/** @jsx h */
22
import {
33
autocomplete,
4+
AutocompleteComponents,
45
getAlgoliaHits,
5-
snippetHit,
66
} from '@algolia/autocomplete-js';
77
import {
88
AutocompleteInsightsApi,
@@ -102,10 +102,11 @@ autocomplete({
102102
</Fragment>
103103
);
104104
},
105-
item({ item }) {
105+
item({ item, components }) {
106106
return (
107107
<ProductItem
108108
hit={item}
109+
components={components}
109110
insights={state.context.algoliaInsightsPlugin.insights}
110111
/>
111112
);
@@ -124,20 +125,21 @@ autocomplete({
124125
type ProductItemProps = {
125126
hit: ProductHit;
126127
insights: AutocompleteInsightsApi;
128+
components: AutocompleteComponents;
127129
};
128130

129-
function ProductItem({ hit, insights }: ProductItemProps) {
131+
function ProductItem({ hit, insights, components }: ProductItemProps) {
130132
return (
131133
<Fragment>
132134
<div className="aa-ItemIcon aa-ItemIcon--align-top">
133135
<img src={hit.image} alt={hit.name} width="40" height="40" />
134136
</div>
135137
<div className="aa-ItemContent">
136138
<div className="aa-ItemContentTitle">
137-
{snippetHit<ProductHit>({ hit, attribute: 'name' })}
139+
<components.Snippet hit={hit} attribute="name" />
138140
</div>
139141
<div className="aa-ItemContentDescription">
140-
{snippetHit<ProductHit>({ hit, attribute: 'description' })}
142+
<components.Snippet hit={hit} attribute="description" />
141143
</div>
142144
</div>
143145
<div className="aa-ItemActions">

‎cypress/test-apps/js/categoriesPlugin.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import {
33
AutocompletePlugin,
44
getAlgoliaFacetHits,
5-
highlightHit,
65
} from '@algolia/autocomplete-js';
76
import { SearchClient } from 'algoliasearch/lite';
87
import { h, Fragment } from 'preact';
@@ -52,7 +51,7 @@ export function createCategoriesPlugin({
5251
</Fragment>
5352
);
5453
},
55-
item({ item }) {
54+
item({ item, components }) {
5655
return (
5756
<Fragment>
5857
<div className="aa-ItemIcon aa-ItemIcon--no-border">
@@ -73,10 +72,7 @@ export function createCategoriesPlugin({
7372
</div>
7473
<div className="aa-ItemContent">
7574
<div className="aa-ItemContentTitle">
76-
{highlightHit<CategoryItem>({
77-
hit: item,
78-
attribute: 'label',
79-
})}
75+
<components.Highlight hit={item} attribute="label" />
8076
</div>
8177
</div>
8278
</Fragment>

‎cypress/test-apps/js/env.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { h } from 'preact';
1+
import * as preact from 'preact';
22

33
// Parcel picks the `source` field of the monorepo packages and thus doesn't
4-
// apply the Babel config to replace our `__DEV__` global expression.
5-
// We therefore need to manually override it in the example app.
4+
// apply the Babel config. We therefore need to manually override the constants
5+
// in the app, as well as the React pragmas.
66
// See https://twitter.com/devongovett/status/1134231234605830144
77
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
88
(global as any).__TEST__ = false;
9-
(global as any).h = h;
9+
(global as any).h = preact.h;
10+
(global as any).React = preact;

‎examples/playground/app.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/** @jsx h */
22
import {
33
autocomplete,
4+
AutocompleteComponents,
45
getAlgoliaHits,
5-
snippetHit,
66
} from '@algolia/autocomplete-js';
77
import {
88
AutocompleteInsightsApi,
@@ -93,10 +93,11 @@ autocomplete({
9393
</Fragment>
9494
);
9595
},
96-
item({ item }) {
96+
item({ item, components }) {
9797
return (
9898
<ProductItem
9999
hit={item}
100+
components={components}
100101
insights={state.context.algoliaInsightsPlugin.insights}
101102
/>
102103
);
@@ -115,20 +116,21 @@ autocomplete({
115116
type ProductItemProps = {
116117
hit: ProductHit;
117118
insights: AutocompleteInsightsApi;
119+
components: AutocompleteComponents;
118120
};
119121

120-
function ProductItem({ hit, insights }: ProductItemProps) {
122+
function ProductItem({ hit, insights, components }: ProductItemProps) {
121123
return (
122124
<Fragment>
123125
<div className="aa-ItemIcon aa-ItemIcon--align-top">
124126
<img src={hit.image} alt={hit.name} width="40" height="40" />
125127
</div>
126128
<div className="aa-ItemContent">
127129
<div className="aa-ItemContentTitle">
128-
{snippetHit<ProductHit>({ hit, attribute: 'name' })}
130+
<components.Snippet hit={hit} attribute="name" />
129131
</div>
130132
<div className="aa-ItemContentDescription">
131-
{snippetHit<ProductHit>({ hit, attribute: 'description' })}
133+
<components.Snippet hit={hit} attribute="description" />
132134
</div>
133135
</div>
134136
<div className="aa-ItemActions">

‎examples/playground/categoriesPlugin.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import {
33
AutocompletePlugin,
44
getAlgoliaFacetHits,
5-
highlightHit,
65
} from '@algolia/autocomplete-js';
76
import { SearchClient } from 'algoliasearch/lite';
87
import { h, Fragment } from 'preact';
@@ -56,7 +55,7 @@ export function createCategoriesPlugin({
5655
</Fragment>
5756
);
5857
},
59-
item({ item }) {
58+
item({ item, components }) {
6059
return (
6160
<Fragment>
6261
<div className="aa-ItemIcon aa-ItemIcon--no-border">
@@ -77,10 +76,7 @@ export function createCategoriesPlugin({
7776
</div>
7877
<div className="aa-ItemContent">
7978
<div className="aa-ItemContentTitle">
80-
{highlightHit<CategoryHit>({
81-
hit: item,
82-
attribute: 'label',
83-
})}
79+
<components.Highlight hit={item} attribute="label" />
8480
</div>
8581
</div>
8682
</Fragment>

‎examples/playground/env.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { h } from 'preact';
1+
import * as preact from 'preact';
22

33
// Parcel picks the `source` field of the monorepo packages and thus doesn't
4-
// apply the Babel config to replace our `__DEV__` global expression.
5-
// We therefore need to manually override it in the example app.
4+
// apply the Babel config. We therefore need to manually override the constants
5+
// in the app, as well as the React pragmas.
66
// See https://twitter.com/devongovett/status/1134231234605830144
77
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
88
(global as any).__TEST__ = false;
9-
(global as any).h = h;
9+
(global as any).h = preact.h;
10+
(global as any).React = preact;

‎examples/query-suggestions-with-categories/env.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { h } from 'preact';
1+
import * as preact from 'preact';
22

33
// Parcel picks the `source` field of the monorepo packages and thus doesn't
4-
// apply the Babel config to replace our `__DEV__` global expression.
5-
// We therefore need to manually override it in the example app.
4+
// apply the Babel config. We therefore need to manually override the constants
5+
// in the app, as well as the React pragmas.
66
// See https://twitter.com/devongovett/status/1134231234605830144
77
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
88
(global as any).__TEST__ = false;
9-
(global as any).h = h;
9+
(global as any).h = preact.h;
10+
(global as any).React = preact;

‎examples/query-suggestions-with-hits/app.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/** @jsx h */
22
import {
33
autocomplete,
4+
AutocompleteComponents,
45
getAlgoliaHits,
5-
snippetHit,
66
} from '@algolia/autocomplete-js';
77
import {
88
AutocompleteInsightsApi,
@@ -85,10 +85,11 @@ autocomplete({
8585
</Fragment>
8686
);
8787
},
88-
item({ item }) {
88+
item({ item, components }) {
8989
return (
9090
<ProductItem
9191
hit={item}
92+
components={components}
9293
insights={state.context.algoliaInsightsPlugin.insights}
9394
/>
9495
);
@@ -107,17 +108,18 @@ autocomplete({
107108
type ProductItemProps = {
108109
hit: ProductHit;
109110
insights: AutocompleteInsightsApi;
111+
components: AutocompleteComponents;
110112
};
111113

112-
function ProductItem({ hit, insights }: ProductItemProps) {
114+
function ProductItem({ hit, insights, components }: ProductItemProps) {
113115
return (
114116
<Fragment>
115117
<div className="aa-ItemIcon aa-ItemIcon--align-top">
116118
<img src={hit.image} alt={hit.name} width="40" height="40" />
117119
</div>
118120
<div className="aa-ItemContent">
119121
<div className="aa-ItemContentTitle">
120-
{snippetHit<ProductHit>({ hit, attribute: 'name' })}
122+
<components.Snippet hit={hit} attribute="name" />
121123
</div>
122124
<div className="aa-ItemContentDescription">
123125
From <strong>{hit.brand}</strong> in{' '}

‎examples/query-suggestions-with-hits/env.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { h } from 'preact';
1+
import * as preact from 'preact';
22

33
// Parcel picks the `source` field of the monorepo packages and thus doesn't
4-
// apply the Babel config to replace our `__DEV__` global expression.
5-
// We therefore need to manually override it in the example app.
4+
// apply the Babel config. We therefore need to manually override the constants
5+
// in the app, as well as the React pragmas.
66
// See https://twitter.com/devongovett/status/1134231234605830144
77
(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
88
(global as any).__TEST__ = false;
9-
(global as any).h = h;
9+
(global as any).h = preact.h;
10+
(global as any).React = preact;

0 commit comments

Comments
 (0)