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

* fix(js): Fix exposed types

* Fix example types

Author: shortcuts

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/Highlighted.tsx examples/playground/types/Highlighted.tsexamples/playground/types/Highlighted.tsx renamed to examples/playground/types/Highlighted.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/playground/types/ProductHit.tsx examples/playground/types/ProductHit.tsexamples/playground/types/ProductHit.tsx renamed to examples/playground/types/ProductHit.ts

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

examples/playground/types/index.tsx examples/playground/types/index.tsexamples/playground/types/index.tsx renamed to examples/playground/types/index.ts

@@ -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-categories/app.tsx

@@ -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/app.tsx

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

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

@@ -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: {