create-instantsearch-app 7.1.0 → 7.2.1

package/README.md

@@ -16,7 +16,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [Get started](#get-started)
 - [Usage](#usage)
 - [API](#api)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-instantsearch-app",
-  "version": "7.1.0",
+  "version": "7.2.1",
   "license": "MIT",
   "description": "⚡️ Build InstantSearch apps at the speed of thought",
   "keywords": [
@@ -49,9 +49,9 @@
     "validate-npm-package-name": "3.0.0"
   },
   "devDependencies": {
-    "@instantsearch/testutils": "1.15.0",
+    "@instantsearch/testutils": "1.17.0",
     "jest-image-snapshot": "2.12.0",
     "walk-sync": "2.0.2"
   },
-  "gitHead": "b2196f01f03c6bea37a3aa048e4e5b45a9bbf33d"
+  "gitHead": "8fb537f2301a5e133e9e5df20c7c208cae16b3aa"
 }

package/src/cli/__tests__/postProcessAnswers.js

@@ -185,4 +185,60 @@ describe('flags', () => {
       ).toEqual(expect.objectContaining({ insights: false }));
     });
   });
+
+  describe('autocomplete', () => {
+    test('with usage of autocomplete in searchInputType', async () => {
+      expect(
+        await postProcessAnswers({
+          configuration: {},
+          templateConfig: {
+            libraryName: 'instantsearch.js',
+            flags: {
+              autocomplete: '>= 4.52',
+            },
+          },
+          optionsFromArguments: {},
+          answers: { searchInputType: 'autocomplete' },
+        })
+      ).toEqual(
+        expect.objectContaining({
+          searchInputType: 'autocomplete',
+          flags: expect.objectContaining({ autocomplete: true }),
+        })
+      );
+    });
+
+    test('without usage of autocomplete in searchInputType', async () => {
+      expect(
+        await postProcessAnswers({
+          configuration: {},
+          templateConfig: {
+            libraryName: 'instantsearch.js',
+            flags: {
+              autocomplete: '>= 4.52',
+            },
+          },
+          optionsFromArguments: {},
+          answers: { searchInputType: 'searchbox' },
+        })
+      ).toEqual(
+        expect.objectContaining({
+          searchInputType: 'searchbox',
+          flags: expect.objectContaining({ autocomplete: false }),
+        })
+      );
+    });
+
+    test('without config', async () => {
+      expect(
+        (
+          await postProcessAnswers({
+            configuration: {},
+            templateConfig: {},
+            optionsFromArguments: {},
+          })
+        ).flags
+      ).toEqual(expect.objectContaining({ autocomplete: false }));
+    });
+  });
 });

package/src/cli/index.js

@@ -201,6 +201,91 @@ const getQuestions = ({ appName }) => ({
       when: ({ appId, apiKey, indexName }) =>
         attributesForFaceting.length === 0 && appId && apiKey && indexName,
     },
+    {
+      type: 'list',
+      name: 'searchInputType',
+      message: 'Type of search input',
+      choices: [
+        {
+          name: 'Autocomplete with suggested and recent searches',
+          value: 'autocomplete',
+        },
+        { name: 'Regular search box', value: 'searchbox' },
+      ],
+      default: 'autocomplete',
+      when: ({ libraryVersion, template }) => {
+        const templatePath = getTemplatePath(template);
+        const templateConfig = getAppTemplateConfig(templatePath);
+
+        const selectedLibraryVersion = libraryVersion;
+        const requiredLibraryVersion =
+          templateConfig.flags && templateConfig.flags.autocomplete;
+        const supportsAutocomplete =
+          selectedLibraryVersion &&
+          requiredLibraryVersion &&
+          semver.satisfies(selectedLibraryVersion, requiredLibraryVersion, {
+            includePrerelease: true,
+          });
+
+        return supportsAutocomplete;
+      },
+    },
+    {
+      type: 'input',
+      name: 'querySuggestionsIndexName',
+      message: 'Index name for suggested searches',
+      suffix: `\n  ${chalk.gray('This must be a Query Suggestions index')}`,
+      default: 'instant_search_demo_query_suggestions',
+      when: ({ searchInputType }) => searchInputType === 'autocomplete',
+    },
+    {
+      type: 'list',
+      name: 'autocompleteLibraryVersion',
+      message: () => `Autocomplete version`,
+      choices: async () => {
+        const libraryName = '@algolia/autocomplete-js';
+
+        try {
+          const versions = await fetchLibraryVersions(libraryName);
+          const latestStableVersion = semver.maxSatisfying(versions, '1', {
+            includePrerelease: false,
+          });
+
+          if (!latestStableVersion) {
+            return versions;
+          }
+
+          return [
+            new inquirer.Separator('Latest stable version (recommended)'),
+            latestStableVersion,
+            new inquirer.Separator('All versions'),
+            ...versions,
+          ];
+        } catch (err) {
+          const fallbackLibraryVersion = '1.11.0';
+
+          console.log();
+          console.error(
+            chalk.red(
+              `Cannot fetch versions for library "${chalk.cyan(libraryName)}".`
+            )
+          );
+          console.log();
+          console.log(
+            `Fallback to ${chalk.cyan(
+              fallbackLibraryVersion
+            )}, please upgrade the dependency after generating the app.`
+          );
+          console.log();
+
+          return [
+            new inquirer.Separator('Available versions'),
+            fallbackLibraryVersion,
+          ];
+        }
+      },
+      when: ({ searchInputType }) => searchInputType === 'autocomplete',
+    },
   ],
   widget: [
     {

package/src/cli/postProcessAnswers.js

@@ -77,6 +77,9 @@ async function postProcessAnswers({
       insights:
         Boolean(templateConfig.flags && templateConfig.flags.insights) &&
         semver.satisfies(libraryVersion, templateConfig.flags.insights),
+      autocomplete:
+        Boolean(templateConfig.flags && templateConfig.flags.autocomplete) &&
+        combinedAnswers.searchInputType === 'autocomplete',
     },
   };
 }

package/src/templates/InstantSearch.js/.template.js

@@ -8,6 +8,7 @@ module.exports = {
   flags: {
     dynamicWidgets: '>= 4.30',
     insights: '>= 4.55',
+    autocomplete: '>= 4.52',
   },
   templateName: 'instantsearch.js',
   appName: 'instantsearch.js-app',

package/src/templates/InstantSearch.js/index.html.hbs

@@ -9,6 +9,9 @@
   <link rel="shortcut icon" href="./favicon.png">
 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
+  {{#if flags.autocomplete}}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic@1.11.0/dist/theme.min.css">
+  {{/if}}
   <link rel="stylesheet" href="./src/index.css">
   <link rel="stylesheet" href="./src/app.css">
 
@@ -50,6 +53,11 @@
 
   <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.10.5/dist/algoliasearch-lite.umd.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@{{libraryVersion}}"></script>
+  {{#if flags.autocomplete}}
+  <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js@{{autocompleteLibraryVersion}}/dist/umd/index.production.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-query-suggestions@{{autocompleteLibraryVersion}}/dist/umd/index.production.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches@{{autocompleteLibraryVersion}}/dist/umd/index.production.min.js"></script>
+  {{/if}}
   <script src="./src/app.js"></script>
 </body>
 

package/src/templates/InstantSearch.js/{package.json → package.json.hbs}

@@ -14,6 +14,11 @@
     "prettier": "2.6.2"
   },
   "dependencies": {
+    {{#if flags.autocomplete}}
+    "@algolia/autocomplete-js": "{{autocompleteLibraryVersion}}",
+    "@algolia/autocomplete-plugin-recent-searches": "{{autocompleteLibraryVersion}}",
+    "@algolia/autocomplete-plugin-query-suggestions": "{{autocompleteLibraryVersion}}",
+    {{/if}}
     "algoliasearch": "4",
     "instantsearch.js": "{{libraryVersion}}"
   }

package/src/templates/InstantSearch.js/src/app.js.hbs

@@ -1,20 +1,38 @@
 const { algoliasearch, instantsearch } = window;
+{{#if flags.autocomplete}}
+const { autocomplete } = window['@algolia/autocomplete-js'];
+const { createLocalStorageRecentSearchesPlugin } = window[
+  '@algolia/autocomplete-plugin-recent-searches'
+];
+const { createQuerySuggestionsPlugin } = window[
+  '@algolia/autocomplete-plugin-query-suggestions'
+];
+{{/if}}
 
 const searchClient = algoliasearch('{{appId}}', '{{apiKey}}');
 
 const search = instantsearch({
   indexName: '{{indexName}}',
   searchClient,
+  future: { preserveSharedStateOnUnmount: true },
   {{#if flags.insights}}insights: true,{{/if}}
 });
 
+{{#if flags.autocomplete}}
+const virtualSearchBox = instantsearch.connectors.connectSearchBox(() => {});
+{{/if}}
+
 search.addWidgets([
+  {{#unless flags.autocomplete}}
   instantsearch.widgets.searchBox({
     container: '#searchbox',
     {{#if searchPlaceholder}}
     placeholder: '{{searchPlaceholder}}',
     {{/if}}
   }),
+  {{else}}
+  virtualSearchBox({}),
+  {{/unless}}
   instantsearch.widgets.hits({
     container: '#hits',
     {{#if attributesToDisplay}}
@@ -74,3 +92,81 @@ search.addWidgets([
 ]);
 
 search.start();
+
+{{#if flags.autocomplete}}
+const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
+  key: 'instantsearch',
+  limit: 3,
+  transformSource({ source }) {
+    return {
+      ...source,
+      onSelect({ setIsOpen, setQuery, item, event }) {
+        onSelect({ setQuery, setIsOpen, event, query: item.label });
+      },
+    };
+  },
+});
+
+const querySuggestionsPlugin = createQuerySuggestionsPlugin({
+  searchClient,
+  indexName: '{{querySuggestionsIndexName}}',
+  getSearchParams() {
+    return recentSearchesPlugin.data.getAlgoliaSearchParams({ hitsPerPage: 6 });
+  },
+  transformSource({ source }) {
+    return {
+      ...source,
+      sourceId: 'querySuggestionsPlugin',
+      onSelect({ setIsOpen, setQuery, event, item }) {
+        onSelect({ setQuery, setIsOpen, event, query: item.query });
+      },
+      getItems(params) {
+        if (!params.state.query) {
+          return [];
+        }
+
+        return source.getItems(params);
+      },
+    };
+  },
+});
+
+autocomplete({
+  container: '#searchbox',
+  {{#if searchPlaceholder}}
+    placeholder: '{{searchPlaceholder}}',
+  {{/if}}
+  openOnFocus: true,
+  detachedMediaQuery: 'none',
+  onSubmit({ state }) {
+    setInstantSearchUiState({ query: state.query });
+  },
+  plugins: [recentSearchesPlugin, querySuggestionsPlugin],
+});
+
+function setInstantSearchUiState(indexUiState) {
+  search.mainIndex.setIndexUiState({ page: 1, ...indexUiState });
+}
+
+function onSelect({ setIsOpen, setQuery, event, query }) {
+  if (isModifierEvent(event)) {
+    return;
+  }
+
+  setQuery(query);
+  setIsOpen(false);
+  setInstantSearchUiState({ query });
+}
+
+function isModifierEvent(event) {
+  const isMiddleClick = event.button === 1;
+
+  return (
+    isMiddleClick ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.shiftKey
+  );
+}
+{{/if}}

package/src/templates/InstantSearch.js/src/global.d.ts.hbs

@@ -1,3 +1,8 @@
+{{#if flags.autocomplete}}
+import { autocomplete } from '@algolia/autocomplete-js';
+import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
+import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
+{{/if}}
 import algoliasearch from 'algoliasearch/lite';
 import instantsearch from 'instantsearch.js/dist/instantsearch.production.min';
 
@@ -5,5 +10,16 @@ declare global {
   interface Window {
     algoliasearch: typeof algoliasearch;
     instantsearch: typeof instantsearch;
+    {{#if flags.autocomplete}}
+    '@algolia/autocomplete-js': {
+      autocomplete: typeof autocomplete;
+    };
+    '@algolia/autocomplete-plugin-recent-searches': {
+      createLocalStorageRecentSearchesPlugin: typeof createLocalStorageRecentSearchesPlugin;
+    };
+    '@algolia/autocomplete-plugin-query-suggestions': {
+      createQuerySuggestionsPlugin: typeof createQuerySuggestionsPlugin;
+    };
+    {{/if}}
   }
 }

package/src/templates/React InstantSearch/src/App.tsx.hbs

@@ -31,6 +31,8 @@ const searchClient = algoliasearch(
   '{{apiKey}}'
 );
 
+const future = { preserveSharedStateOnUnmount: true };
+
 export function App() {
   return (
     <div>
@@ -47,7 +49,7 @@ export function App() {
       </header>
 
       <div className="container">
-        <InstantSearch searchClient={searchClient} indexName="{{indexName}}" {{#if flags.insights}}insights{{/if}}>
+        <InstantSearch searchClient={searchClient} indexName="{{indexName}}" future={future} {{#if flags.insights}}insights{{/if}}>
           <Configure hitsPerPage={8} />
           <div className="search-panel">
             <div className="search-panel__filters">

package/src/templates/Vue InstantSearch with Vue 3/src/App.vue

@@ -16,6 +16,7 @@
       <ais-instant-search
         :search-client="searchClient"
         index-name="{{indexName}}"
+        :future="future"
         {{#if flags.insights}}insights{{/if}}
       >
         <ais-configure :hits-per-page.camel="8" />
@@ -85,6 +86,7 @@ export default {
   data() {
     return {
       searchClient: algoliasearch('{{appId}}', '{{apiKey}}'),
+      future: { preserveSharedStateOnUnmount: true },
     };
   },
 };