resolve getSources from plugins too

algolia · Sep 9, 2020 · 9252f21 · 9252f21
1 parent fa4e8ea
commit 9252f21
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 37 deletions.
diff --git a/packages/autocomplete-core/src/getDefaultProps.ts b/packages/autocomplete-core/src/getDefaultProps.ts
@@ -3,7 +3,7 @@ import {
   generateAutocompleteId,
   getItemsCount,
   noop,
-  normalizeGetSources,
+  getNormalizedSources,
 } from './utils';
 
 export function getDefaultProps<TItem>(
@@ -41,7 +41,23 @@ export function getDefaultProps<TItem>(
       context: {},
       ...props.initialState,
     },
-    getSources: normalizeGetSources(props.getSources),
+    getSources: (options) => {
+      const getSourcesFromPlugins = (props.plugins || [])
+        .map((plugin) => plugin.getSources)
+        .filter((getSources) => getSources !== undefined);
+
+      return Promise.all(
+        [...getSourcesFromPlugins, props.getSources].map((getSources) =>
+          getNormalizedSources(getSources!, options)
+        )
+      ).then((nested) =>
+        // same as `nested.flat()`
+        nested.reduce((acc, array) => {
+          acc = acc.concat(array);
+          return acc;
+        }, [])
+      );
+    },
     navigator: {
       navigate({ suggestionUrl }) {
         environment.location.assign(suggestionUrl);

diff --git a/packages/autocomplete-core/src/types/api.ts b/packages/autocomplete-core/src/types/api.ts
@@ -153,6 +153,25 @@ interface Navigator<TItem> {
   }): void;
 }
 
+export type AutocompletePlugin<TItem> = {
+  /**
+   * The sources to get the suggestions from.
+   */
+  getSources?(
+    params: GetSourcesParams<TItem>
+  ):
+    | Array<PublicAutocompleteSource<TItem>>
+    | Promise<Array<PublicAutocompleteSource<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;
+};
+
 export interface PublicAutocompleteOptions<TItem> {
   /**
    * Whether to consider the experience in debug mode.
@@ -247,6 +266,10 @@ export interface PublicAutocompleteOptions<TItem> {
    * updating the state.
    */
   onInput?(params: OnInputParams<TItem>): void;
+  /**
+   * The array of plugins.
+   */
+  plugins?: Array<AutocompletePlugin<TItem>>;
 }
 
 // Props manipulated internally with default values.

diff --git a/packages/autocomplete-core/src/utils.ts b/packages/autocomplete-core/src/utils.ts
@@ -3,7 +3,6 @@ import {
   AutocompleteSource,
   AutocompleteState,
   AutocompleteSuggestion,
-  GetSources,
   PublicAutocompleteOptions,
   PublicAutocompleteSource,
 } from './types';
@@ -57,18 +56,17 @@ function normalizeSource<TItem>(
   };
 }
 
-export function normalizeGetSources<TItem>(
-  getSources: PublicAutocompleteOptions<TItem>['getSources']
-): GetSources<TItem> {
-  return (options) => {
-    return Promise.resolve(getSources(options)).then((sources) =>
-      Promise.all(
-        sources.filter(Boolean).map((source) => {
-          return Promise.resolve(normalizeSource<TItem>(source));
-        })
-      )
-    );
-  };
+export function getNormalizedSources<TItem>(
+  getSources: PublicAutocompleteOptions<TItem>['getSources'],
+  options
+): Promise<Array<AutocompleteSource<TItem>>> {
+  return Promise.resolve(getSources(options)).then((sources) =>
+    Promise.all(
+      sources.filter(Boolean).map((source) => {
+        return Promise.resolve(normalizeSource<TItem>(source));
+      })
+    )
+  );
 }
 
 export function getNextHighlightedIndex<TItem>(

diff --git a/packages/autocomplete-plugin-recent-searches/package.json b/packages/autocomplete-plugin-recent-searches/package.json
@@ -10,6 +10,9 @@
   "umd:main": "dist/umd/index.js",
   "unpkg": "dist/umd/index.js",
   "jsdelivr": "dist/umd/index.js",
+  "peerDependencies": {
+    "@algolia/autocomplete-core": "^1.0.0-alpha.28"
+  },
   "scripts": {
     "build:clean": "rm -rf ./dist",
     "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm",

diff --git a/packages/autocomplete-plugin-recent-searches/rollup.config.js b/packages/autocomplete-plugin-recent-searches/rollup.config.js
@@ -12,5 +12,6 @@ export default {
     name: pkg.name,
     banner: getBundleBanner(pkg),
   },
+  external: ['@algolia/autocomplete-core'],
   plugins,
 };
diff --git a/packages/autocomplete-plugin-recent-searches/src/createPlugin.ts b/packages/autocomplete-plugin-recent-searches/src/createPlugin.ts
@@ -1,33 +1,39 @@
+import { AutocompletePlugin } from '@algolia/autocomplete-core';
+
 import { createRecentSearchStore } from './createRecentSearchStore';
 
-type Plugin = {
-  getSources: Function;
-  onSubmit: Function;
-  add: Function;
+type PluginOptions = {
+  limit?: number;
 };
 
-type CreatePlugin = (options?: any) => Plugin;
+type RecentSearchesPlugin<TItem> = AutocompletePlugin<TItem> & {
+  getFacetFilters: () => string[];
+};
 
-export const createPlugin: CreatePlugin = ({ limit = 5 } = {}) => {
+export function createPlugin<TItem>({
+  limit = 5,
+}: PluginOptions = {}): RecentSearchesPlugin<TItem> {
   const store = createRecentSearchStore({
     key: 'RECENT_SEARCHES',
     limit,
   });
 
   return {
     getSources: ({ query }) => {
-      return [
-        !query && {
-          getInputValue: ({ suggestion }) => suggestion.query,
-          getSuggestions() {
-            return store.getAll();
-          },
-          onSelect({ suggestion }) {
-            store.add(suggestion);
-          },
-          templates: {
-            item({ item }) {
-              return `
+      return query
+        ? []
+        : [
+            {
+              getInputValue: ({ suggestion }) => suggestion.query,
+              getSuggestions() {
+                return store.getAll();
+              },
+              onSelect({ suggestion }) {
+                store.add(suggestion);
+              },
+              templates: {
+                item({ item }) {
+                  return `
                 <div class="autocomplete-item">
                   <div>
                     <svg viewBox="0 0 22 22" width="16" height="16" fill="currentColor">
@@ -39,10 +45,10 @@ export const createPlugin: CreatePlugin = ({ limit = 5 } = {}) => {
                   </div>
                 </div>
               `;
+                },
+              },
             },
-          },
-        },
-      ];
+          ];
     },
     onSubmit: ({ state }) => {
       store.add({
@@ -57,4 +63,4 @@ export const createPlugin: CreatePlugin = ({ limit = 5 } = {}) => {
       return store.getAll().map((item) => [`objectID:-${item.query}`]);
     },
   };
-};
+}