feat(js): introduce Component API

bundlesize.config.json

@@ -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",

cypress/test-apps/js/app.tsx

@@ -1,8 +1,8 @@
 /** @jsx h */
 import {
   autocomplete,
+  AutocompleteComponents,
   getAlgoliaHits,
-  snippetHit,
 } from '@algolia/autocomplete-js';
 import {
   AutocompleteInsightsApi,
@@ -102,10 +102,11 @@ autocomplete({
               </Fragment>
             );
           },
-          item({ item }) {
+          item({ item, components }) {
             return (
               <ProductItem
                 hit={item}
+                components={components}
                 insights={state.context.algoliaInsightsPlugin.insights}
               />
             );
@@ -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">

cypress/test-apps/js/categoriesPlugin.tsx

@@ -2,7 +2,6 @@
 import {
   AutocompletePlugin,
   getAlgoliaFacetHits,
-  highlightHit,
 } from '@algolia/autocomplete-js';
 import { SearchClient } from 'algoliasearch/lite';
 import { h, Fragment } from 'preact';
@@ -52,7 +51,7 @@ export function createCategoriesPlugin({
                 </Fragment>
               );
             },
-            item({ item }) {
+            item({ item, components }) {
               return (
                 <Fragment>
                   <div className="aa-ItemIcon aa-ItemIcon--no-border">
@@ -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>

cypress/test-apps/js/env.ts

@@ -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;

examples/playground/app.tsx

@@ -1,8 +1,8 @@
 /** @jsx h */
 import {
   autocomplete,
+  AutocompleteComponents,
   getAlgoliaHits,
-  snippetHit,
 } from '@algolia/autocomplete-js';
 import {
   AutocompleteInsightsApi,
@@ -93,10 +93,11 @@ autocomplete({
               </Fragment>
             );
           },
-          item({ item }) {
+          item({ item, components }) {
             return (
               <ProductItem
                 hit={item}
+                components={components}
                 insights={state.context.algoliaInsightsPlugin.insights}
               />
             );
@@ -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">

examples/playground/categoriesPlugin.tsx

@@ -2,7 +2,6 @@
 import {
   AutocompletePlugin,
   getAlgoliaFacetHits,
-  highlightHit,
 } from '@algolia/autocomplete-js';
 import { SearchClient } from 'algoliasearch/lite';
 import { h, Fragment } from 'preact';
@@ -56,7 +55,7 @@ export function createCategoriesPlugin({
                 </Fragment>
               );
             },
-            item({ item }) {
+            item({ item, components }) {
               return (
                 <Fragment>
                   <div className="aa-ItemIcon aa-ItemIcon--no-border">
@@ -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>

examples/playground/env.ts

@@ -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;

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

@@ -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;

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

@@ -1,8 +1,8 @@
 /** @jsx h */
 import {
   autocomplete,
+  AutocompleteComponents,
   getAlgoliaHits,
-  snippetHit,
 } from '@algolia/autocomplete-js';
 import {
   AutocompleteInsightsApi,
@@ -85,10 +85,11 @@ autocomplete({
               </Fragment>
             );
           },
-          item({ item }) {
+          item({ item, components }) {
             return (
               <ProductItem
                 hit={item}
+                components={components}
                 insights={state.context.algoliaInsightsPlugin.insights}
               />
             );
@@ -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{' '}

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

@@ -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;

examples/query-suggestions-with-inline-categories/app.tsx

@@ -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';
@@ -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">
@@ -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 && (
@@ -73,6 +69,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
                   className="aa-ItemActionButton"
                   title={`Fill query with "${item.query}"`}
                   onClick={(event) => {
+                    event.preventDefault();
                     event.stopPropagation();
                     onTapAhead(item);
                   }}

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

@@ -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;

examples/query-suggestions-with-recent-searches/env.ts

@@ -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;

examples/query-suggestions/env.ts

@@ -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;

examples/recently-viewed-items/app.tsx

@@ -1,8 +1,8 @@
 /** @jsx h */
 import {
   autocomplete,
+  AutocompleteComponents,
   getAlgoliaHits,
-  highlightHit,
 } from '@algolia/autocomplete-js';
 import algoliasearch from 'algoliasearch';
 import { h, Fragment } from 'preact';
@@ -66,8 +66,10 @@ autocomplete({
               </Fragment>
             );
           },
-          item({ item }) {
-            return <AutocompleteProductItem hit={item} />;
+          item({ item, components }) {
+            return (
+              <AutocompleteProductItem hit={item} components={components} />
+            );
           },
           noResults() {
             return (
@@ -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">