fix(types): fix collision between js/core and plugins (#532)

* fix(js): Fix exposed types

* Fix example types

examples/playground/app.tsx

@@ -18,11 +18,13 @@ import '@algolia/autocomplete-theme-classic';
 
 import { createCategoriesPlugin } from './categoriesPlugin';
 import { shortcutsPlugin } from './shortcutsPlugin';
-import { ProductHit, ProductRecord } from './types';
+import { ProductHit } from './types';
 
 const appId = 'latency';
 const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
 const searchClient = algoliasearch(appId, apiKey);
+
+// @ts-expect-error type error in search-insights
 insightsClient('init', { appId, apiKey });
 
 const algoliaInsightsPlugin = createAlgoliaInsightsPlugin({ insightsClient });
@@ -49,7 +51,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
 });
 const categoriesPlugin = createCategoriesPlugin({ searchClient });
 
-autocomplete({
+autocomplete<ProductHit>({
   container: '#autocomplete',
   placeholder: 'Search',
   debug: true,
@@ -70,7 +72,7 @@ autocomplete({
       {
         sourceId: 'products',
         getItems() {
-          return getAlgoliaHits<ProductRecord>({
+          return getAlgoliaHits<ProductHit>({
             searchClient,
             queries: [
               {
@@ -91,7 +93,7 @@ autocomplete({
               // eslint-disable-next-line @typescript-eslint/camelcase
               sale_price: hit.free_shipping
                 ? (hit.price - hit.price / 10).toFixed(2)
-                : hit.price,
+                : hit.price.toString(),
             }));
           });
         },

examples/playground/categoriesPlugin.tsx

@@ -6,22 +6,18 @@ import {
 import { SearchClient } from 'algoliasearch/lite';
 import { h, Fragment } from 'preact';
 
-import { Highlighted } from './types';
-
 type CategoryRecord = {
   label: string;
   count: number;
 };
 
-type CategoryHit = Highlighted<CategoryRecord>;
-
 type CreateCategoriesPluginProps = {
   searchClient: SearchClient;
 };
 
 export function createCategoriesPlugin({
   searchClient,
-}: CreateCategoriesPluginProps): AutocompletePlugin<CategoryHit, undefined> {
+}: CreateCategoriesPluginProps): AutocompletePlugin<CategoryRecord, undefined> {
   return {
     getSources({ query }) {
       return [

examples/playground/types/ProductHit.tsx → examples/playground/types/ProductHit.ts

@@ -1,6 +1,6 @@
 import { Hit } from '@algolia/client-search';
 
-export type ProductRecord = {
+type ProductRecord = {
   brand: string;
   categories: string[];
   comments: number;
@@ -22,8 +22,9 @@ export type ProductRecord = {
   prince_range: string;
   rating: number;
   sale: boolean;
-  sale_price: number;
+  sale_price: string;
   type: string;
+  url: string;
 };
 
 type WithAutocompleteAnalytics<THit> = THit & {

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

@@ -22,8 +22,8 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
     'exact_matches',
     'categories',
   ],
-  categoriesPerItem: 1,
-  categoriesLimit: 2,
+  itemsWithCategories: 1,
+  categoriesPerItem: 2,
 });
 
 autocomplete({

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

@@ -9,29 +9,19 @@ import {
   createAlgoliaInsightsPlugin,
 } from '@algolia/autocomplete-plugin-algolia-insights';
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
-import { Hit } from '@algolia/client-search';
 import algoliasearch from 'algoliasearch';
 import { h, Fragment } from 'preact';
 import insightsClient from 'search-insights';
 
 import '@algolia/autocomplete-theme-classic';
 
-type Product = {
-  brand: string;
-  categories: string[];
-  description: string;
-  image: string;
-  name: string;
-  price: number;
-  rating: number;
-  __autocomplete_indexName: string;
-  __autocomplete_queryID: string;
-};
-type ProductHit = Hit<Product>;
+import { ProductHit } from './types';
 
 const appId = 'latency';
 const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
 const searchClient = algoliasearch(appId, apiKey);
+
+// @ts-expect-error type error in search-insights
 insightsClient('init', { appId, apiKey });
 
 const algoliaInsightsPlugin = createAlgoliaInsightsPlugin({ insightsClient });
@@ -46,10 +36,9 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
   },
 });
 
-autocomplete({
+autocomplete<ProductHit>({
   container: '#autocomplete',
   placeholder: 'Search',
-  debug: true,
   openOnFocus: true,
   plugins: [algoliaInsightsPlugin, querySuggestionsPlugin],
   getSources({ query, state }) {
@@ -61,7 +50,7 @@ autocomplete({
       {
         sourceId: 'products',
         getItems() {
-          return getAlgoliaHits<Product>({
+          return getAlgoliaHits<ProductHit>({
             searchClient,
             queries: [
               {
@@ -111,7 +100,7 @@ type ProductItemProps = {
 
 function ProductItem({ hit, insights, components }: ProductItemProps) {
   return (
-    <div className="aa-ItemWrapper">
+    <a href={hit.url} className="aa-ItemLink">
       <div className="aa-ItemContent">
         <div className="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop">
           <img src={hit.image} alt={hit.name} width="40" height="40" />
@@ -185,6 +174,6 @@ function ProductItem({ hit, insights, components }: ProductItemProps) {
           </svg>
         </button>
       </div>
-    </div>
+    </a>
   );
 }

examples/query-suggestions-with-hits/types/ProductHit.ts

@@ -0,0 +1,19 @@
+import { Hit } from '@algolia/client-search';
+
+type ProductRecord = {
+  brand: string;
+  categories: string[];
+  description: string;
+  image: string;
+  name: string;
+  price: number;
+  rating: number;
+  url: string;
+};
+
+type WithAutocompleteAnalytics<THit> = THit & {
+  __autocomplete_indexName: string;
+  __autocomplete_queryID: string;
+};
+
+export type ProductHit = WithAutocompleteAnalytics<Hit<ProductRecord>>;

examples/query-suggestions-with-hits/types/index.ts

@@ -0,0 +1 @@
+export * from './ProductHit';

examples/recently-viewed-items/app.tsx

@@ -10,7 +10,7 @@ import { h, Fragment } from 'preact';
 import '@algolia/autocomplete-theme-classic';
 
 import { createLocalStorageRecentlyViewedItems } from './recentlyViewedItemsPlugin';
-import { ProductItem, ProductHit } from './types/ProductHit';
+import { ProductHit } from './types';
 
 const appId = 'latency';
 const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
@@ -21,7 +21,7 @@ const recentlyViewedItems = createLocalStorageRecentlyViewedItems({
   limit: 5,
 });
 
-autocomplete({
+autocomplete<ProductHit>({
   container: '#autocomplete',
   placeholder: 'Search',
   openOnFocus: true,
@@ -35,7 +35,7 @@ autocomplete({
       {
         sourceId: 'products',
         getItems() {
-          return getAlgoliaHits<ProductItem>({
+          return getAlgoliaHits<ProductHit>({
             searchClient,
             queries: [
               {
@@ -55,6 +55,7 @@ autocomplete({
             id: item.objectID,
             label: item.name,
             image: item.image,
+            url: item.url,
           });
         },
         templates: {

examples/recently-viewed-items/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "index.html",
   "scripts": {
-    "build": "parcel build index.html",
+    "build": "parcel build index.html --dist-dir ./dist",
     "start": "parcel index.html"
   },
   "dependencies": {
@@ -18,6 +18,8 @@
     "preact": "10.5.13"
   },
   "devDependencies": {
+    "@algolia/autocomplete-core": "1.0.0-alpha.45",
+    "@algolia/autocomplete-shared": "1.0.0-alpha.45",
     "parcel": "2.0.0-beta.2"
   },
   "keywords": [

examples/recently-viewed-items/recentlyViewedItemsPlugin.tsx

@@ -1,36 +1,47 @@
 /** @jsx h */
-import { AutocompletePlugin } from '@algolia/autocomplete-js';
+import {
+  AutocompletePlugin,
+  AutocompleteSource,
+  AutocompleteState,
+} from '@algolia/autocomplete-js';
 import {
   createLocalStorageRecentSearchesPlugin,
   search,
+  SearchParams,
 } from '@algolia/autocomplete-plugin-recent-searches';
+import { MaybePromise } from '@algolia/autocomplete-shared';
 import { h, Fragment } from 'preact';
 
-type RecentlyViewedItem = {
+import { Highlighted } from './types';
+
+type RecentlyViewedRecord = {
   id: string;
   label: string;
+  url: string;
   image: string;
-  _highlightResult: {
-    label: {
-      value: string;
-    };
-  };
 };
 
-type CreateLocalStorageRecentlyViewedItemsParams<TItem> = {
+type CreateLocalStorageRecentlyViewedItemsParams<
+  TItem extends RecentlyViewedRecord
+> = {
   key: string;
   limit?: number;
-  search?(params: any): any[];
+  search?(params: SearchParams<TItem>): Array<Highlighted<TItem>>;
+  transformSource?(params: {
+    source: AutocompleteSource<TItem>;
+    state: AutocompleteState<TItem>;
+    onRemove(id: string): void;
+  }): AutocompleteSource<TItem>;
 };
 
-type RecentlyViewedItemsPluginData<TItem> = {
+type RecentlyViewedItemsPluginData<TItem extends RecentlyViewedRecord> = {
   addItem(item: TItem): void;
   removeItem(id: string): void;
-  getAll(query?: string): any[];
+  getAll(query?: string): MaybePromise<Array<Highlighted<TItem>>>;
 };
 
 export function createLocalStorageRecentlyViewedItems<
-  TItem extends RecentlyViewedItem
+  TItem extends RecentlyViewedRecord
 >(
   params: CreateLocalStorageRecentlyViewedItemsParams<TItem>
 ): AutocompletePlugin<TItem, RecentlyViewedItemsPluginData<TItem>> {
@@ -39,7 +50,7 @@ export function createLocalStorageRecentlyViewedItems<
     onSubmit,
     subscribe,
     ...plugin
-  } = createLocalStorageRecentSearchesPlugin({
+  } = createLocalStorageRecentSearchesPlugin<TItem>({
     ...params,
     search(params) {
       if (params.query) {

examples/recently-viewed-items/types/Highlighted.ts

@@ -0,0 +1,7 @@
+export type Highlighted<TItem> = TItem & {
+  _highlightResult: {
+    label: {
+      value: string;
+    };
+  };
+};

examples/recently-viewed-items/types/ProductHit.ts

@@ -3,6 +3,7 @@ import { Hit } from '@algolia/client-search';
 export type ProductItem = {
   name: string;
   image: string;
+  url: string;
   description: string;
 };
 

examples/recently-viewed-items/types/index.ts

@@ -0,0 +1,2 @@
+export * from './Highlighted';
+export * from './ProductHit';

examples/starter/app.tsx

@@ -2,7 +2,12 @@ import { autocomplete } from '@algolia/autocomplete-js';
 
 import '@algolia/autocomplete-theme-classic';
 
-autocomplete({
+type AutocompleteItem = {
+  label: string;
+  url: string;
+};
+
+autocomplete<AutocompleteItem>({
   container: '#autocomplete',
   getSources() {
     return [

packages/autocomplete-core/src/types/AutocompleteOptions.ts

@@ -164,7 +164,7 @@ export interface AutocompleteOptions<TItem extends BaseItem> {
    *
    * @link https://autocomplete.algolia.com/docs/autocomplete-js#plugins
    */
-  plugins?: Array<AutocompletePlugin<TItem, unknown>>;
+  plugins?: Array<AutocompletePlugin<any, any>>;
 }
 
 // Props manipulated internally with default values.
@@ -182,7 +182,7 @@ export interface InternalAutocompleteOptions<TItem extends BaseItem>
   getSources: InternalGetSources<TItem>;
   environment: AutocompleteEnvironment;
   navigator: AutocompleteNavigator<TItem>;
-  plugins: Array<AutocompletePlugin<TItem, unknown>>;
+  plugins: Array<AutocompletePlugin<any, any>>;
   shouldPanelOpen(params: { state: AutocompleteState<TItem> }): boolean;
   onSubmit(params: OnSubmitParams<TItem>): void;
   onReset(params: OnResetParams<TItem>): void;

packages/autocomplete-core/src/types/AutocompletePlugin.ts

@@ -14,17 +14,15 @@ export type AutocompletePlugin<
   TItem extends BaseItem,
   TData = unknown
 > = Partial<
-  Pick<
-    AutocompleteOptions<TItem>,
-    'onStateChange' | 'onSubmit' | 'onReset' | 'getSources'
-  >
+  Pick<AutocompleteOptions<any>, 'onStateChange' | 'onSubmit' | 'onReset'> &
+    Pick<AutocompleteOptions<TItem>, 'getSources'>
 > & {
   /**
    * The function called when Autocomplete starts.
    *
    * It lets you subscribe to lifecycle hooks and interact with the instance's state and context.
    */
-  subscribe?(params: PluginSubscribeParams<TItem>): void;
+  subscribe?(params: PluginSubscribeParams<any>): void;
   /**
    * An extra plugin object to expose properties and functions as APIs.
    */