feat(facets): use dynamicWidgets (#534)

* feat(facets): use dynamicWidgets

* add configure

* add condition

* quotes

* slightly safer + fix typos

* make it a flag

* refactor(search): call search only once

* change text

* refactor a little

Author: Haroenv

package.json

@@ -36,7 +36,8 @@
     "node": ">= 10"
   },
   "dependencies": {
-    "algoliasearch": "3.35.1",
+    "@algolia/cache-in-memory": "4.11.0",
+    "algoliasearch": "4.11.0",
     "chalk": "3.0.0",
     "commander": "4.0.1",
     "inquirer": "8.0.0",

src/cli/__tests__/getAttributesFromIndex.test.js

@@ -1,25 +1,23 @@
-const algoliasearch = require('algoliasearch');
 const getAttributesFromIndex = require('../getAttributesFromIndex');
+const getInformationFromIndex = require('../getInformationFromIndex');
 
-jest.mock('algoliasearch');
+jest.mock('../getInformationFromIndex');
 
 test('with search success should fetch attributes', async () => {
-  algoliasearch.mockImplementationOnce(() => ({
-    initIndex: () => ({
-      search: () => ({
-        hits: [
-          {
-            _highlightResult: {
-              brand: 'brand',
-              description: 'description',
-              name: 'name',
-              title: 'title',
-            },
+  getInformationFromIndex.mockImplementationOnce(() =>
+    Promise.resolve({
+      hits: [
+        {
+          _highlightResult: {
+            brand: 'brand',
+            description: 'description',
+            name: 'name',
+            title: 'title',
           },
-        ],
-      }),
-    }),
-  }));
+        },
+      ],
+    })
+  );
 
   const attributes = await getAttributesFromIndex({
     appId: 'appId',
@@ -31,13 +29,9 @@ test('with search success should fetch attributes', async () => {
 });
 
 test('with search failure should return default attributes', async () => {
-  algoliasearch.mockImplementationOnce(() => ({
-    initIndex: () => ({
-      search: () => {
-        throw new Error();
-      },
-    }),
-  }));
+  getInformationFromIndex.mockImplementationOnce(() =>
+    Promise.reject(new Error())
+  );
 
   const attributes = await getAttributesFromIndex({
     appId: 'appId',

src/cli/__tests__/getFacetsFromIndex.test.js

@@ -0,0 +1,39 @@
+const getFacetsFromIndex = require('../getFacetsFromIndex');
+const getInformationFromIndex = require('../getInformationFromIndex');
+
+jest.mock('../getInformationFromIndex');
+
+test('with search success should fetch attributes', async () => {
+  getInformationFromIndex.mockImplementationOnce(() =>
+    Promise.resolve({
+      facets: {
+        abc: {},
+        def: {},
+        something: {},
+        'something.nested': {},
+      },
+    })
+  );
+
+  const attributes = await getFacetsFromIndex({
+    appId: 'appId',
+    apiKey: 'apiKey',
+    indexName: 'indexName',
+  });
+
+  expect(attributes).toEqual(['abc', 'def', 'something', 'something.nested']);
+});
+
+test('with search failure should return default attributes', async () => {
+  getInformationFromIndex.mockImplementationOnce(() =>
+    Promise.reject(new Error())
+  );
+
+  const attributes = await getFacetsFromIndex({
+    appId: 'appId',
+    apiKey: 'apiKey',
+    indexName: 'indexName',
+  });
+
+  expect(attributes).toEqual([]);
+});

src/cli/__tests__/getInformationFromIndex.js

@@ -0,0 +1,68 @@
+const algoliasearch = require('algoliasearch');
+const getInformationFromIndex = require('../getInformationFromIndex');
+
+jest.mock('algoliasearch', () => {
+  const _algoliasearch = jest.fn(() => ({ search: _algoliasearch.__search }));
+  _algoliasearch.__search = jest.fn(() =>
+    Promise.resolve({
+      results: [
+        {
+          hits: [],
+          facets: {},
+        },
+      ],
+    })
+  );
+
+  return _algoliasearch;
+});
+
+test('returns default information', async () => {
+  const info = await getInformationFromIndex({
+    appId: 'a',
+    apiKey: 'a',
+    indexName: 'a',
+  });
+
+  expect(info).toEqual({ hits: [], facets: {} });
+});
+
+test('returns {} on error', async () => {
+  algoliasearch.__search.mockImplementationOnce(() =>
+    Promise.reject(new Error())
+  );
+
+  const info = await getInformationFromIndex({
+    appId: 'a',
+    apiKey: 'a',
+    indexName: 'a',
+  });
+
+  expect(info).toEqual({});
+});
+
+test('creates client once per credentials', async () => {
+  await getInformationFromIndex({
+    appId: 'a',
+    apiKey: 'a',
+    indexName: 'a',
+  });
+
+  expect(algoliasearch).toHaveBeenCalledTimes(1);
+
+  await getInformationFromIndex({
+    appId: 'b',
+    apiKey: 'b',
+    indexName: 'b',
+  });
+
+  expect(algoliasearch).toHaveBeenCalledTimes(2);
+
+  await getInformationFromIndex({
+    appId: 'b',
+    apiKey: 'b',
+    indexName: 'c',
+  });
+
+  expect(algoliasearch).toHaveBeenCalledTimes(2);
+});

src/cli/getAttributesFromIndex.js

@@ -1,17 +1,19 @@
-const algoliasearch = require('algoliasearch');
+const getInformationFromIndex = require('./getInformationFromIndex');
 
 module.exports = async function getAttributesFromIndex({
   appId,
   apiKey,
   indexName,
 } = {}) {
-  const client = algoliasearch(appId, apiKey);
-  const index = client.initIndex(indexName);
   const defaultAttributes = ['title', 'name', 'description'];
   let attributes = [];
 
   try {
-    const { hits } = await index.search({ hitsPerPage: 1 });
+    const { hits } = await getInformationFromIndex({
+      appId,
+      apiKey,
+      indexName,
+    });
     const [firstHit] = hits;
     const highlightedAttributes = Object.keys(firstHit._highlightResult);
     attributes = [

src/cli/getFacetsFromIndex.js

@@ -0,0 +1,18 @@
+const getInformationFromIndex = require('./getInformationFromIndex');
+
+module.exports = async function getFacetsFromIndex({
+  appId,
+  apiKey,
+  indexName,
+} = {}) {
+  try {
+    const { facets } = await getInformationFromIndex({
+      appId,
+      apiKey,
+      indexName,
+    });
+    return Object.keys(facets);
+  } catch (err) {
+    return [];
+  }
+};

src/cli/getInformationFromIndex.js

@@ -0,0 +1,40 @@
+const algoliasearch = require('algoliasearch');
+const { createInMemoryCache } = require('@algolia/cache-in-memory');
+
+const clients = new Map();
+function getClient(appId, apiKey) {
+  const key = [appId, apiKey].join('__');
+  let client = clients.get(key);
+  if (!client) {
+    client = algoliasearch(appId, apiKey, {
+      responsesCache: createInMemoryCache(),
+      requestsCache: createInMemoryCache(),
+    });
+
+    clients.set(key, client);
+  }
+
+  return client;
+}
+
+async function getInformationFromIndex({ appId, apiKey, indexName }) {
+  try {
+    const client = getClient(appId, apiKey);
+    return await client
+      .search([
+        {
+          indexName,
+          params: {
+            hitsPerPage: 1,
+            facets: '*',
+            maxValuesPerFacet: 1,
+          },
+        },
+      ])
+      .then(({ results: [result] }) => result);
+  } catch (err) {
+    return {};
+  }
+}
+
+module.exports = getInformationFromIndex;

src/cli/index.js

@@ -1,11 +1,12 @@
 #!/usr/bin/env node
 const path = require('path');
 const process = require('process');
+const os = require('os');
 const program = require('commander');
 const inquirer = require('inquirer');
 const chalk = require('chalk');
 const latestSemver = require('latest-semver');
-const os = require('os');
+const semver = require('semver');
 
 const createInstantSearchApp = require('../api');
 const {
@@ -18,6 +19,7 @@ const {
 } = require('../utils');
 const getOptionsFromArguments = require('./getOptionsFromArguments');
 const getAttributesFromIndex = require('./getAttributesFromIndex');
+const getFacetsFromIndex = require('./getFacetsFromIndex');
 const getAnswersDefaultValues = require('./getAnswersDefaultValues');
 const isQuestionAsked = require('./isQuestionAsked');
 const {
@@ -61,6 +63,10 @@ const attributesToDisplay = (optionsFromArguments.attributesToDisplay || '')
   .split(',')
   .filter(Boolean)
   .map(x => x.trim());
+const attributesForFaceting = (optionsFromArguments.attributesForFaceting || '')
+  .split(',')
+  .filter(Boolean)
+  .map(x => x.trim());
 
 const getQuestions = ({ appName }) => ({
   application: [
@@ -156,6 +162,48 @@ const getQuestions = ({ appName }) => ({
       when: ({ appId, apiKey, indexName }) =>
         !attributesToDisplay.length > 0 && appId && apiKey && indexName,
     },
+    {
+      type: 'checkbox',
+      name: 'attributesForFaceting',
+      message: 'Attributes to display',
+      suffix: `\n  ${chalk.gray('Used to filter the search interface')}`,
+      pageSize: 10,
+      choices: async answers => {
+        const templatePath = getTemplatePath(answers.template);
+        const templateConfig = getAppTemplateConfig(templatePath);
+
+        const selectedLibraryVersion = answers.libraryVersion;
+        const requiredLibraryVersion =
+          templateConfig.flags && templateConfig.flags.dynamicWidgets;
+        const supportsDynamicWidgets =
+          selectedLibraryVersion &&
+          requiredLibraryVersion &&
+          semver.satisfies(selectedLibraryVersion, requiredLibraryVersion, {
+            includePrerelease: true,
+          });
+
+        const dynamicWidgets = supportsDynamicWidgets
+          ? [
+              {
+                name: 'Dynamic widgets',
+                value: 'ais.dynamicWidgets',
+                checked: true,
+              },
+              new inquirer.Separator(),
+            ]
+          : [];
+
+        return [
+          ...dynamicWidgets,
+          new inquirer.Separator('From your index'),
+          ...(await getFacetsFromIndex(answers)),
+          new inquirer.Separator(),
+        ];
+      },
+      filter: attributes => attributes.filter(Boolean),
+      when: ({ appId, apiKey, indexName }) =>
+        !attributesForFaceting.length > 0 && appId && apiKey && indexName,
+    },
   ],
   widget: [
     {
@@ -301,6 +349,11 @@ async function run() {
       ...configuration,
       ...answers,
       ...alternativeNames,
+      flags: {
+        dynamicWidgets:
+          Array.isArray(answers.attributesForFaceting) &&
+          answers.attributesForFaceting.includes('ais.dynamicWidgets'),
+      },
       libraryVersion,
       template: templatePath,
       installation: program.installation,

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

@@ -5,6 +5,9 @@ module.exports = {
   category: 'Web',
   libraryName: 'instantsearch.js',
   supportedVersion: '>= 3.0.0 < 5.0.0',
+  flags: {
+    dynamicWidgets: '>= 4.30',
+  },
   templateName: 'instantsearch.js',
   appName: 'instantsearch.js-app',
   keywords: ['algolia', 'InstantSearch', 'Vanilla', 'instantsearch.js'],