feat(recent-searches): support search and templating

examples/js/app.ts

@@ -6,8 +6,7 @@ import {
   getAlgoliaHits,
   reverseHighlightHit,
 } from '@algolia/autocomplete-js';
-import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
-import '@algolia/autocomplete-plugin-recent-searches/style';
+import { createSearchableLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
 
 const searchClient = algoliasearch(
   'latency',
@@ -16,7 +15,10 @@ const searchClient = algoliasearch(
 
 type QuerySuggestionHit = { query: string };
 
-const recentSearches = createRecentSearchesPlugin({ key: 'recent' });
+const recentSearches = createSearchableLocalStorageRecentSearchesPlugin({
+  key: 'recent',
+  limit: 3,
+});
 
 autocomplete<Hit<QuerySuggestionHit>>({
   container: '#autocomplete',
@@ -32,8 +34,10 @@ autocomplete<Hit<QuerySuggestionHit>>({
           indexName: 'instant_search_demo_query_suggestions',
           query,
           params: {
-            hitsPerPage: 10,
-            facetFilters: [...recentSearches.data.getFacetFilters()],
+            hitsPerPage: recentSearches.data.getQuerySuggestionsHitsPerPage(10),
+            facetFilters: [
+              ...recentSearches.data.getQuerySuggestionsFacetFilters(),
+            ],
           },
         },
       ],
@@ -49,12 +53,14 @@ autocomplete<Hit<QuerySuggestionHit>>({
           templates: {
             item({ item }) {
               return `
-                <div class="item-icon">${searchIcon}</div>
-                <div>
-                  ${reverseHighlightHit<Hit<QuerySuggestionHit>>({
-                    hit: item,
-                    attribute: 'query',
-                  })}
+                <div class="aa-ItemContent">
+                  <div class="aa-ItemSourceIcon">${searchIcon}</div>
+                  <div class="aa-ItemTitle">
+                    ${reverseHighlightHit<Hit<QuerySuggestionHit>>({
+                      hit: item,
+                      attribute: 'query',
+                    })}
+                  </div>
                 </div>
               `;
             },
@@ -65,7 +71,8 @@ autocomplete<Hit<QuerySuggestionHit>>({
   },
 });
 
-const searchIcon = `<svg width="20" height="20" viewBox="0 0 20 20">
+const searchIcon = `
+<svg width="20" height="20" viewBox="0 0 20 20">
   <path
     d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
     stroke="currentColor"
@@ -74,4 +81,5 @@ const searchIcon = `<svg width="20" height="20" viewBox="0 0 20 20">
     strokeLinecap="round"
     strokeLinejoin="round"
   />
-</svg>`;
+</svg>
+`;

examples/js/autocomplete.css

@@ -107,11 +107,12 @@
 }
 
 .aa-Item {
+  align-items: center;
   color: #23263b;
   cursor: pointer;
-  padding: 0.5rem;
   display: flex;
-  align-items: center;
+  grid-gap: 0.5rem;
+  justify-content: space-between;
 }
 
 .aa-Item mark {
@@ -123,3 +124,28 @@
 .aa-Item[aria-selected='true'] {
   background-color: #f5f5fa;
 }
+
+.aa-ItemContent {
+  display: flex;
+  flex-grow: 1;
+  grid-gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+.aa-ItemSourceIcon,
+.aa-ItemActionButton {
+  color: rgba(80, 80, 80, 0.32);
+}
+
+.aa-ItemActionButton {
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  opacity: 0.8;
+  padding: 0.5rem;
+  transition: color 100ms;
+}
+
+.aa-ItemActionButton:hover {
+  color: rgba(80, 80, 80, 1);
+}

examples/js/style.css

@@ -15,8 +15,3 @@ body {
   padding: 1rem;
   width: 100%;
 }
-
-.item-icon {
-  color: #aaa;
-  padding-right: 0.5rem;
-}

packages/autocomplete-core/package.json

@@ -3,15 +3,23 @@
   "description": "Core primitives for building autocomplete experiences.",
   "version": "1.0.0-alpha.34",
   "license": "MIT",
+  "homepage": "https://github.com/algolia/autocomplete.js",
+  "repository": "algolia/autocomplete.js",
+  "author": {
+    "name": "Algolia, Inc.",
+    "url": "https://www.algolia.com"
+  },
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
   "main": "dist/umd/index.js",
   "umd:main": "dist/umd/index.js",
   "unpkg": "dist/umd/index.js",
   "jsdelivr": "dist/umd/index.js",
-  "homepage": "https://github.com/algolia/autocomplete.js",
-  "repository": "algolia/autocomplete.js",
+  "sideEffects": false,
+  "files": [
+    "dist/"
+  ],
   "scripts": {
     "build:clean": "rm -rf ./dist",
     "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm --ignore '**/*/__tests__/'",
@@ -21,13 +29,5 @@
     "on:change": "concurrently \"yarn build:esm\" \"yarn build:types\"",
     "prepare": "yarn build:esm && yarn build:types",
     "watch": "watch \"yarn on:change\" --ignoreDirectoryPattern \"/dist/\""
-  },
-  "author": {
-    "name": "Algolia, Inc.",
-    "url": "https://www.algolia.com"
-  },
-  "sideEffects": false,
-  "files": [
-    "dist/"
-  ]
+  }
 }

packages/autocomplete-core/src/getDefaultProps.ts

@@ -2,7 +2,6 @@ import { InternalAutocompleteOptions, AutocompleteOptions } from './types';
 import {
   generateAutocompleteId,
   getItemsCount,
-  noop,
   getNormalizedSources,
   flatten,
 } from './utils';
@@ -25,7 +24,6 @@ export function getDefaultProps<TItem>(
     stallThreshold: 300,
     environment,
     shouldDropdownShow: ({ state }) => getItemsCount(state) > 0,
-    onStateChange: noop,
     ...props,
     // Since `generateAutocompleteId` triggers a side effect (it increments
     // and internal counter), we don't want to execute it if unnecessary.
@@ -41,17 +39,19 @@ export function getDefaultProps<TItem>(
       context: {},
       ...props.initialState,
     },
-    onSubmit: (params) => {
-      if (props.onSubmit) {
-        props.onSubmit(params);
-      }
+    onStateChange(params) {
+      props.onStateChange?.(params);
       plugins.forEach((plugin) => {
-        if (plugin.onSubmit) {
-          plugin.onSubmit(params);
-        }
+        plugin.onStateChange?.(params);
+      });
+    },
+    onSubmit(params) {
+      props.onSubmit?.(params);
+      plugins.forEach((plugin) => {
+        plugin.onSubmit?.(params);
       });
     },
-    getSources: (options) => {
+    getSources(options) {
       const getSourcesFromPlugins = plugins
         .map((plugin) => plugin.getSources)
         .filter((getSources) => getSources !== undefined);
@@ -65,12 +65,10 @@ export function getDefaultProps<TItem>(
         .then((sources) =>
           sources.map((source) => ({
             ...source,
-            onSelect: (params) => {
+            onSelect(params) {
               source.onSelect(params);
               plugins.forEach((plugin) => {
-                if (plugin.onSelect) {
-                  plugin.onSelect(params);
-                }
+                plugin.subscribed?.onSelect?.(params);
               });
             },
           }))

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

@@ -1,4 +1,5 @@
 import { AutocompleteAccessibilityGetters } from './getters';
+import { AutocompletePlugin } from './plugins';
 import { AutocompleteSetters } from './setters';
 import { AutocompleteState } from './state';
 import { MaybePromise } from './wrappers';
@@ -156,27 +157,6 @@ interface Navigator<TItem> {
   }): void;
 }
 
-export type AutocompletePlugin<TItem, TData> = {
-  /**
-   * The sources to get the suggestions from.
-   */
-  getSources?(
-    params: GetSourcesParams<TItem>
-  ): MaybePromise<Array<AutocompleteSource<TItem>>>;
-  /**
-   * The function called when the autocomplete form is submitted.
-   */
-  onSubmit?(params: OnSubmitParams<TItem>): void;
-  /**
-   * Function called when an item is selected.
-   */
-  onSelect?(params: OnSelectParams<TItem>): void;
-  /**
-   * An extra plugin specific object to store variables and functions
-   */
-  data?: TData;
-};
-
 export interface AutocompleteOptions<TItem> {
   /**
    * Whether to consider the experience in debug mode.

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

@@ -1,5 +1,6 @@
 export * from './api';
 export * from './getters';
+export * from './plugins';
 export * from './setters';
 export * from './state';
 export * from './store';

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

@@ -0,0 +1,17 @@
+import { AutocompleteOptions, AutocompleteSource } from './api';
+
+export type AutocompletePlugin<TItem, TData = unknown> = Partial<
+  Pick<AutocompleteOptions<TItem>, 'onStateChange' | 'onSubmit' | 'getSources'>
+> & {
+  /**
+   * The subscribed properties are properties that are called when other sources
+   * are interacted with.
+   */
+  subscribed: {
+    onSelect: AutocompleteSource<TItem>['onSelect'];
+  };
+  /**
+   * An extra plugin specific object to store variables and functions
+   */
+  data: TData;
+};

packages/autocomplete-js/package.json

@@ -3,15 +3,23 @@
   "description": "Fast and fully-featured autocomplete JavaScript library.",
   "version": "1.0.0-alpha.34",
   "license": "MIT",
+  "homepage": "https://github.com/algolia/autocomplete.js",
+  "repository": "algolia/autocomplete.js",
+  "author": {
+    "name": "Algolia, Inc.",
+    "url": "https://www.algolia.com"
+  },
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
   "main": "dist/umd/index.js",
   "umd:main": "dist/umd/index.js",
   "unpkg": "dist/umd/index.js",
   "jsdelivr": "dist/umd/index.js",
-  "homepage": "https://github.com/algolia/autocomplete.js",
-  "repository": "algolia/autocomplete.js",
+  "sideEffects": false,
+  "files": [
+    "dist/"
+  ],
   "scripts": {
     "build:clean": "rm -rf ./dist",
     "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm --ignore '**/*/__tests__/'",
@@ -22,14 +30,6 @@
     "prepare": "yarn build:esm && yarn build:types",
     "watch": "watch \"yarn on:change\" --ignoreDirectoryPattern \"/dist/\""
   },
-  "author": {
-    "name": "Algolia, Inc.",
-    "url": "https://www.algolia.com"
-  },
-  "sideEffects": false,
-  "files": [
-    "dist/"
-  ],
   "dependencies": {
     "@algolia/autocomplete-core": "^1.0.0-alpha.34",
     "@algolia/autocomplete-preset-algolia": "^1.0.0-alpha.34",

packages/autocomplete-js/src/types/index.ts

@@ -9,7 +9,7 @@ import {
 
 type Template<TParams> = (params: TParams) => string | void;
 
-type SourceTemplates<TItem> = {
+export type SourceTemplates<TItem> = {
   /**
    * Templates to display in the autocomplete dropdown.
    *

packages/autocomplete-plugin-recent-searches/package.json

@@ -3,38 +3,34 @@
   "description": "A plugin to add recent searches to Algolia Autocomplete.",
   "version": "1.0.0-alpha.34",
   "license": "MIT",
+  "homepage": "https://github.com/algolia/autocomplete.js",
+  "repository": "algolia/autocomplete.js",
+  "author": {
+    "name": "Algolia, Inc.",
+    "url": "https://www.algolia.com"
+  },
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "module": "dist/esm/index.js",
   "main": "dist/umd/index.js",
   "umd:main": "dist/umd/index.js",
   "unpkg": "dist/umd/index.js",
   "jsdelivr": "dist/umd/index.js",
-  "peerDependencies": {
-    "@algolia/autocomplete-core": "^1.0.0-alpha.34"
-  },
+  "sideEffects": false,
+  "files": [
+    "dist/"
+  ],
   "scripts": {
     "build:clean": "rm -rf ./dist",
-    "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm --ignore '**/*/__tests__/'  && cp src/style.css ./dist/esm/",
+    "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm --ignore '**/*/__tests__/'",
     "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm",
-    "build:umd": "rollup --config && cp src/style.css ./dist/umd/",
+    "build:umd": "rollup --config",
     "build": "rm -rf ./dist && yarn build:umd && yarn build:esm && yarn build:types",
     "on:change": "concurrently \"yarn build:esm\" \"yarn build:types\"",
     "prepare": "yarn run build:esm",
     "watch": "watch \"yarn on:change\" --ignoreDirectoryPattern \"/dist/\""
   },
-  "homepage": "https://github.com/algolia/autocomplete.js",
-  "repository": "algolia/autocomplete.js",
-  "author": {
-    "name": "Algolia, Inc.",
-    "url": "https://www.algolia.com"
-  },
-  "sideEffects": false,
-  "files": [
-    "dist/",
-    "style/"
-  ],
-  "dependencies": {
-    "@algolia/autocomplete-core": "^1.0.0-alpha.31"
+  "peerDependencies": {
+    "@algolia/autocomplete-core": "^1.0.0-alpha.34"
   }
 }

packages/autocomplete-plugin-recent-searches/src/RecentSearchesPluginData.ts

@@ -0,0 +1,4 @@
+export type RecentSearchesPluginData = {
+  getQuerySuggestionsFacetFilters(): string[][];
+  getQuerySuggestionsHitsPerPage(hitsPerPage: number): number;
+};