vue-instantsearch 4.1.1 → 4.2.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# [4.2.0](https://github.com/algolia/vue-instantsearch/compare/v4.1.1...v4.2.0) (2021-12-13)
+
+
+### Features
+
+* **dynamicWidgets:** release as production ([#1086](https://github.com/algolia/vue-instantsearch/issues/1086)) ([9e0902b](https://github.com/algolia/vue-instantsearch/commit/9e0902bc7a3afe3eb2211b78e681e65b3677dd78))
+* **instantsearch:** update version ([dbf485f](https://github.com/algolia/vue-instantsearch/commit/dbf485f6263d9821aaf169e682ff1ab94157d15f))
+* **ssr:** prevent initial network request ([#1090](https://github.com/algolia/vue-instantsearch/issues/1090)) ([d97eea2](https://github.com/algolia/vue-instantsearch/commit/d97eea21fbd059b0ca0634a6984a6a8b02acdd3d))
+
+
+
 ## [4.1.1](https://github.com/algolia/vue-instantsearch/compare/v4.1.0...v4.1.1) (2021-10-27)
 
 

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "files": [
     "vue2",
     "vue3",
@@ -48,8 +48,7 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "algoliasearch-helper": "^3.6.2",
-    "instantsearch.js": "^4.32.0",
+    "instantsearch.js": "^4.35.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -82,6 +81,7 @@
     "@wdio/spec-reporter": "^5.11.7",
     "@wdio/static-server-service": "^5.11.0",
     "algoliasearch": "4.0.1",
+    "algoliasearch-helper": "3.7.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "babel-preset-es2015": "6.24.1",
@@ -132,11 +132,11 @@
   "bundlesize": [
     {
       "path": "./vue2/umd/index.js",
-      "maxSize": "55.25 kB"
+      "maxSize": "56.00 kB"
     },
     {
       "path": "./vue3/umd/index.js",
-      "maxSize": "56.75 kB"
+      "maxSize": "57.00 kB"
     },
     {
       "path": "./vue2/cjs/index.js",

package/src/components/DynamicWidgets.js

@@ -40,7 +40,7 @@ function getWidgetAttribute(vnode) {
 }
 
 export default {
-  name: 'AisExperimentalDynamicWidgets',
+  name: 'AisDynamicWidgets',
   mixins: [
     createWidgetMixin({ connector: connectDynamicWidgets }),
     createSuitMixin({ name: 'DynamicWidgets' }),

package/src/components/ExperimentalDynamicWidgets.js

@@ -0,0 +1,10 @@
+import AisDynamicWidgets from './DynamicWidgets';
+import { warn } from '../util/warn';
+
+// @MAJOR remove this file
+export default Object.assign({}, AisDynamicWidgets, {
+  name: 'AisExperimentalDynamicWidgets',
+  mounted() {
+    warn('Use AisDynamicWidgets instead of AisExperimentalDynamicWidgets.');
+  },
+});

package/src/components/__tests__/ExperimentalDynamicWidgets.js

@@ -0,0 +1,41 @@
+import { mount } from '../../../test/utils';
+import ExperimentalDynamicWidgets from '../ExperimentalDynamicWidgets';
+import { warn } from '../../util/warn';
+import { __setState } from '../../mixins/widget';
+import DynamicWidgets from '../DynamicWidgets';
+
+jest.mock('../../mixins/widget');
+jest.mock('../../util/warn', () => ({ warn: jest.fn() }));
+
+it('warns on mount', () => {
+  __setState(null);
+
+  mount({
+    template: '<ExperimentalDynamicWidgets />',
+    components: {
+      ExperimentalDynamicWidgets,
+    },
+  });
+  expect(warn).toHaveBeenCalledTimes(1);
+  expect(warn.mock.calls[0][0]).toMatchInlineSnapshot(
+    `"Use AisDynamicWidgets instead of AisExperimentalDynamicWidgets."`
+  );
+});
+
+it('behaves the same as DynamicWidgets', () => {
+  Object.keys(ExperimentalDynamicWidgets).forEach(key => {
+    if (key === 'name') {
+      // name is different
+      expect(ExperimentalDynamicWidgets[key]).toBe(
+        'AisExperimentalDynamicWidgets'
+      );
+    } else if (key === 'mounted') {
+      // mounted has the warning
+      expect(ExperimentalDynamicWidgets[key]).toEqual(expect.any(Function));
+    } else if (key[0] === '_') {
+      // private Vue behavior, not tested
+    } else {
+      expect(ExperimentalDynamicWidgets[key]).toEqual(DynamicWidgets[key]);
+    }
+  });
+});

package/src/mixins/widget.js

@@ -31,7 +31,7 @@ export const createWidgetMixin = ({ connector } = {}) => ({
       this.getParentIndex().addWidgets([this.widget]);
 
       if (
-        this.instantSearchInstance.__initialSearchResults &&
+        this.instantSearchInstance._initialResults &&
         !this.instantSearchInstance.started
       ) {
         if (typeof this.instantSearchInstance.__forceRender !== 'function') {

package/src/util/__tests__/createServerRootMixin.test.js

@@ -11,9 +11,9 @@ import { createFakeClient } from '../testutils/client';
 import { createSerializedState } from '../testutils/helper';
 import { isVue3, isVue2, Vue2, renderCompat } from '../vue-compat';
 import {
-  SearchResults,
-  SearchParameters,
   AlgoliaSearchHelper,
+  SearchParameters,
+  SearchResults,
 } from 'algoliasearch-helper';
 
 jest.unmock('instantsearch.js/es');
@@ -57,9 +57,11 @@ describe('createServerRootMixin', () => {
             }),
           ],
         })
-      ).toThrowErrorMatchingInlineSnapshot(
-        `"createServerRootMixin requires \`searchClient\` and \`indexName\` in the first argument"`
-      );
+      ).toThrowErrorMatchingInlineSnapshot(`
+"The \`searchClient\` option is required.
+
+See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/"
+`);
     });
 
     it('requires indexName', () => {
@@ -72,9 +74,11 @@ describe('createServerRootMixin', () => {
             }),
           ],
         })
-      ).toThrowErrorMatchingInlineSnapshot(
-        `"createServerRootMixin requires \`searchClient\` and \`indexName\` in the first argument"`
-      );
+      ).toThrowErrorMatchingInlineSnapshot(`
+"The \`indexName\` option is required.
+
+See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/"
+`);
     });
 
     it('creates an instantsearch instance on "data"', () => {
@@ -301,14 +305,13 @@ Array [
             renderToString,
           });
           expect(state).toEqual({
-            __identifier: 'stringified',
             hello: {
-              _rawResults: [
+              results: [
                 {
                   query: '',
                 },
               ],
-              _state: {
+              state: {
                 disjunctiveFacets: [],
                 disjunctiveFacetsRefinements: {},
                 facets: [],
@@ -534,7 +537,7 @@ Array [
                     this.instantsearch.mainIndex.getWidgets().map(w => w.$$type)
                   ).toEqual(['ais.configure']);
 
-                  expect(res.hello._state.hitsPerPage).toBe(100);
+                  expect(res.hello.state.hitsPerPage).toBe(100);
                 })
                 // jest throws an error we need to catch, since stuck in the flow
                 .catch(e => {
@@ -656,11 +659,73 @@ Array [
 
         await renderToString(wrapper);
       });
+
+      it('searches only once', async () => {
+        const searchClient = createFakeClient();
+        const app = {
+          mixins: [
+            forceIsServerMixin,
+            createServerRootMixin({
+              searchClient,
+              indexName: 'hello',
+            }),
+          ],
+          render: renderCompat(h =>
+            /**
+             * This code triggers this warning in Vue 3:
+             * > Non-function value encountered for default slot. Prefer function slots for better performance.
+             *
+             * To fix it, replace the third argument
+             * > [h(...), h(...)]
+             * with
+             * > { default: () => [h(...), h(...)] }
+             *
+             * but it's not important (and not compatible in vue2), we're leaving it as-is.
+             */
+            h(InstantSearchSsr, {}, [
+              h(Configure, {
+                attrs: {
+                  hitsPerPage: 100,
+                },
+              }),
+              h(SearchBox),
+            ])
+          ),
+          serverPrefetch() {
+            return this.instantsearch.findResultsState({
+              component: this,
+              renderToString,
+            });
+          },
+        };
+
+        const wrapper = createSSRApp({
+          mixins: [forceIsServerMixin],
+          render: renderCompat(h => h(app)),
+        });
+
+        await renderToString(wrapper);
+
+        expect(searchClient.search).toHaveBeenCalledTimes(1);
+        expect(searchClient.search.mock.calls[0][0]).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "indexName": "hello",
+    "params": Object {
+      "facets": Array [],
+      "hitsPerPage": 100,
+      "query": "",
+      "tagFilters": "",
+    },
+  },
+]
+`);
+      });
     }
   });
 
   describe('hydrate', () => {
-    it('sets __initialSearchResults', () => {
+    it('sets _initialResults', () => {
       const serialized = createSerializedState();
 
       const app = {
@@ -683,7 +748,6 @@ Array [
         // in test, beforeCreated doesn't have $data yet, but IRL it does
         created() {
           this.instantsearch.hydrate({
-            __identifier: 'stringified',
             hello: serialized,
           });
         },
@@ -693,57 +757,20 @@ Array [
         vm: { instantsearch },
       } = mount(app);
 
-      expect(instantsearch.__initialSearchResults).toEqual(
-        expect.objectContaining({ hello: expect.any(SearchResults) })
+      expect(instantsearch._initialResults).toEqual(
+        expect.objectContaining({
+          hello: {
+            state: expect.any(Object),
+            results: expect.any(Object),
+          },
+        })
       );
 
-      expect(instantsearch.__initialSearchResults.hello).toEqual(
+      expect(instantsearch._initialResults.hello).toEqual(
         expect.objectContaining(serialized)
       );
     });
 
-    it('accepts non-stringified results', () => {
-      const serialized = createSerializedState();
-      const nonSerialized = new SearchResults(
-        new SearchParameters(serialized._state),
-        serialized._rawResults
-      );
-
-      const app = {
-        mixins: [
-          createServerRootMixin({
-            searchClient: createFakeClient(),
-            indexName: 'movies',
-          }),
-        ],
-        render: renderCompat(h =>
-          h(InstantSearchSsr, {}, [
-            h(Configure, {
-              attrs: {
-                hitsPerPage: 100,
-              },
-            }),
-            h(SearchBox),
-          ])
-        ),
-        created() {
-          this.instantsearch.hydrate({
-            movies: nonSerialized,
-          });
-
-          expect(this.instantsearch.__initialSearchResults).toEqual(
-            expect.objectContaining({ movies: expect.any(SearchResults) })
-          );
-
-          expect(this.instantsearch.__initialSearchResults.movies).toEqual(
-            nonSerialized
-          );
-        },
-      };
-
-      mount(app);
-    });
-
     it('inits the main index', () => {
       const serialized = createSerializedState();
 
@@ -773,7 +800,6 @@ Array [
       expect(instantsearch.mainIndex.getHelper()).toBe(null);
 
       instantsearch.hydrate({
-        __identifier: 'stringified',
         hello: serialized,
       });
 
@@ -812,7 +838,6 @@ Array [
       expect(instantsearch.mainHelper).toBe(null);
 
       instantsearch.hydrate({
-        __identifier: 'stringified',
         hello: serialized,
       });
 
@@ -834,6 +859,7 @@ Array [
         created() {
           instantSearchInstance = this.instantsearch;
         },
+        render() {},
       });
 
       const widget = {
@@ -894,6 +920,58 @@ Object {
       );
     });
 
+    it('uses the results passed to hydrate for rendering', () => {
+      let instantSearchInstance;
+      mount({
+        mixins: [
+          createServerRootMixin({
+            searchClient: createFakeClient(),
+            indexName: 'lol',
+          }),
+        ],
+        created() {
+          instantSearchInstance = this.instantsearch;
+        },
+        render() {},
+      });
+
+      const widget = {
+        init: jest.fn(),
+        render: jest.fn(),
+      };
+
+      const resultsState = createSerializedState();
+      const state = new SearchParameters(resultsState.state);
+      const results = new SearchResults(state, resultsState.results);
+
+      instantSearchInstance.hydrate({
+        lol: resultsState,
+      });
+
+      instantSearchInstance.__forceRender(
+        widget,
+        instantSearchInstance.mainIndex
+      );
+
+      expect(widget.init).toHaveBeenCalledTimes(0);
+      expect(widget.render).toHaveBeenCalledTimes(1);
+
+      const renderArgs = widget.render.mock.calls[0][0];
+
+      expect(renderArgs).toEqual(
+        expect.objectContaining({
+          state,
+          results,
+          scopedResults: [
+            expect.objectContaining({
+              indexId: 'lol',
+              results,
+            }),
+          ],
+        })
+      );
+    });
+
     describe('createURL', () => {
       it('returns # if instantsearch has no routing', () => {
         let instantSearchInstance;
@@ -907,6 +985,7 @@ Object {
           created() {
             instantSearchInstance = this.instantsearch;
           },
+          render() {},
         });
 
         const widget = {
@@ -940,6 +1019,7 @@ Object {
           created() {
             instantSearchInstance = this.instantsearch;
           },
+          render() {},
         });
 
         const widget = {

package/src/util/createServerRootMixin.js

@@ -1,7 +1,5 @@
 import instantsearch from 'instantsearch.js/es';
-import algoliaHelper from 'algoliasearch-helper';
 import { isVue3, isVue2, Vue2, createSSRApp } from '../util/vue-compat';
-const { SearchResults, SearchParameters } = algoliaHelper;
 import { warn } from './warn';
 
 function walkIndex(indexWidget, visit) {
@@ -76,18 +74,10 @@ function defaultCloneComponent(componentInstance, { mixins = [] } = {}) {
   return app;
 }
 
-function augmentInstantSearch(
-  instantSearchOptions,
-  searchClient,
-  indexName,
-  cloneComponent
-) {
-  /* eslint-disable no-param-reassign */
-
-  const helper = algoliaHelper(searchClient, indexName);
+function augmentInstantSearch(instantSearchOptions, cloneComponent) {
   const search = instantsearch(instantSearchOptions);
 
-  let resultsState;
+  let initialResults;
 
   /**
    * main API for SSR, called in serverPrefetch of a root component which contains instantsearch
@@ -104,7 +94,7 @@ function augmentInstantSearch(
     }
 
     let app;
-    let renderedComponent;
+    let instance;
 
     return Promise.resolve()
       .then(() => {
@@ -112,55 +102,36 @@ function augmentInstantSearch(
           mixins: [
             {
               created() {
-                // eslint-disable-next-line consistent-this
-                renderedComponent = this;
-                this.instantsearch.helper = helper;
-                this.instantsearch.mainHelper = helper;
-
-                this.instantsearch.mainIndex.init({
-                  instantSearchInstance: this.instantsearch,
-                  parent: null,
-                  uiState: this.instantsearch._initialUiState,
-                });
+                instance = this.instantsearch;
+
+                instance.start();
+                // although we use start for initializing the main index,
+                // we don't want to send search requests yet
+                instance.started = false;
               },
             },
           ],
         });
       })
       .then(() => renderToString(app))
-      .then(() => searchOnlyWithDerivedHelpers(helper))
+      .then(() => searchOnlyWithDerivedHelpers(instance.mainHelper))
       .then(() => {
-        const results = {};
-        walkIndex(renderedComponent.instantsearch.mainIndex, widget => {
-          results[widget.getIndexId()] = widget.getResults();
+        initialResults = {};
+        walkIndex(instance.mainIndex, widget => {
+          const { _state, _rawResults } = widget.getResults();
+
+          initialResults[widget.getIndexId()] = {
+            // copy just the values of SearchParameters, not the functions
+            state: Object.keys(_state).reduce((acc, key) => {
+              // eslint-disable-next-line no-param-reassign
+              acc[key] = _state[key];
+              return acc;
+            }, {}),
+            results: _rawResults,
+          };
         });
 
-        search.hydrate(results);
-
-        resultsState = Object.keys(results)
-          .map(indexId => {
-            const { _state, _rawResults } = results[indexId];
-            return [
-              indexId,
-              {
-                // copy just the values of SearchParameters, not the functions
-                _state: Object.keys(_state).reduce((acc, key) => {
-                  acc[key] = _state[key];
-                  return acc;
-                }, {}),
-                _rawResults,
-              },
-            ];
-          })
-          .reduce(
-            (acc, [key, val]) => {
-              acc[key] = val;
-              return acc;
-            },
-            {
-              __identifier: 'stringified',
-            }
-          );
+        search.hydrate(initialResults);
         return search.getState();
       });
   };
@@ -169,10 +140,10 @@ function augmentInstantSearch(
    * @returns {Promise} result state to serialize and enter into .hydrate
    */
   search.getState = function() {
-    if (!resultsState) {
+    if (!initialResults) {
       throw new Error('You need to wait for findResultsState to finish');
     }
-    return resultsState;
+    return initialResults;
   };
 
   /**
@@ -184,18 +155,17 @@ function augmentInstantSearch(
    * @returns {void}
    */
   search.__forceRender = function(widget, parent) {
-    const localHelper = parent.getHelper();
-
-    const results = search.__initialSearchResults[parent.getIndexId()];
+    const results = parent.getResults();
 
     // this happens when a different InstantSearch gets rendered initially,
     // after the hydrate finished. There's thus no initial results available.
-    if (!results) {
+    if (results === null) {
       return;
     }
 
     const state = results._state;
 
+    const localHelper = parent.getHelper();
     // helper gets created in init, but that means it doesn't get the injected
     // parameters, because those are from the lastResults
     localHelper.state = state;
@@ -203,11 +173,7 @@ function augmentInstantSearch(
     widget.render({
       helper: localHelper,
       results,
-      scopedResults: parent.getScopedResults().map(result =>
-        Object.assign(result, {
-          results: search.__initialSearchResults[result.indexId],
-        })
-      ),
+      scopedResults: parent.getScopedResults(),
       parent,
       state,
       templatesConfig: {},
@@ -232,55 +198,18 @@ function augmentInstantSearch(
       return;
     }
 
-    const initialResults =
-      results.__identifier === 'stringified'
-        ? Object.keys(results).reduce((acc, indexId) => {
-            if (indexId === '__identifier') {
-              return acc;
-            }
-            acc[indexId] = new SearchResults(
-              new SearchParameters(results[indexId]._state),
-              results[indexId]._rawResults
-            );
-            return acc;
-          }, {})
-        : results;
-
-    search.__initialSearchResults = initialResults;
+    search._initialResults = results;
 
-    search.helper = helper;
-    search.mainHelper = helper;
-
-    search.mainIndex.init({
-      instantSearchInstance: search,
-      parent: null,
-      uiState: search._initialUiState,
-    });
+    search.start();
+    search.started = false;
   };
-
-  /* eslint-enable no-param-reassign */
   return search;
 }
 
 export function createServerRootMixin(instantSearchOptions = {}) {
-  const {
-    searchClient,
-    indexName,
-    $cloneComponent = defaultCloneComponent,
-  } = instantSearchOptions;
-
-  if (!searchClient || !indexName) {
-    throw new Error(
-      'createServerRootMixin requires `searchClient` and `indexName` in the first argument'
-    );
-  }
+  const { $cloneComponent = defaultCloneComponent } = instantSearchOptions;
 
-  const search = augmentInstantSearch(
-    instantSearchOptions,
-    searchClient,
-    indexName,
-    $cloneComponent
-  );
+  const search = augmentInstantSearch(instantSearchOptions, $cloneComponent);
 
   // put this in the user's root Vue instance
   // we can then reuse that InstantSearch instance seamlessly from `ais-instant-search-ssr`
@@ -292,7 +221,7 @@ export function createServerRootMixin(instantSearchOptions = {}) {
     },
     data() {
       return {
-        // this is in data, so that the real & duplicated render do not share
+        // this is in data, so that the real & cloned render do not share
         // the same instantsearch instance.
         instantsearch: search,
       };

package/src/util/testutils/helper.js

@@ -1,5 +1,5 @@
 export const createSerializedState = () => ({
-  _rawResults: [
+  results: [
     {
       hits: [
         {
@@ -50,7 +50,7 @@ export const createSerializedState = () => ({
       index: 'movies',
     },
   ],
-  _state: {
+  state: {
     index: 'movies',
     query: 'hi',
     facets: [],

package/src/widgets.js

@@ -44,3 +44,6 @@ export {
 export { default as AisVoiceSearch } from './components/VoiceSearch.vue';
 export { default as AisRelevantSort } from './components/RelevantSort.vue';
 export { default as AisDynamicWidgets } from './components/DynamicWidgets';
+export {
+  default as AisExperimentalDynamicWidgets,
+} from './components/ExperimentalDynamicWidgets';