vue-instantsearch 4.1.1 → 4.3.2

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+## [4.3.2](https://github.com/algolia/vue-instantsearch/compare/v4.3.1...v4.3.2) (2022-01-31)
+
+
+### Bug Fixes
+
+* **ssr:** extend component correctly if at root (vue2) ([#1104](https://github.com/algolia/vue-instantsearch/issues/1104)) ([08b7124](https://github.com/algolia/vue-instantsearch/commit/08b71244c3bf7cf2cbd8183a671d1a589af75798)), closes [#1054](https://github.com/algolia/vue-instantsearch/issues/1054)
+
+
+
+## [4.3.1](https://github.com/algolia/vue-instantsearch/compare/v4.3.0...v4.3.1) (2022-01-11)
+
+
+### Bug Fixes
+
+* **dependencies:** update instantsearch.js requirement ([a36ae2b](https://github.com/algolia/vue-instantsearch/commit/a36ae2b964110f3e4bc98c39895dd31b79527701)), closes [#1096](https://github.com/algolia/vue-instantsearch/issues/1096)
+
+
+
+# [4.3.0](https://github.com/algolia/vue-instantsearch/compare/v4.2.0...v4.3.0) (2021-12-16)
+
+
+### Features
+
+* **dynamicWidgets:** pass parameters to connector ([#1093](https://github.com/algolia/vue-instantsearch/issues/1093)) ([247ed0f](https://github.com/algolia/vue-instantsearch/commit/247ed0f101b5dabd5eebf35a7b8c3a2504eef2e2))
+
+
+
+# [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.3.2",
   "files": [
     "vue2",
     "vue3",
@@ -48,8 +48,7 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "algoliasearch-helper": "^3.6.2",
-    "instantsearch.js": "^4.32.0",
+    "instantsearch.js": "^4.37.2",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -76,12 +75,14 @@
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
     "@wdio/cli": "^5.11.13",
     "@wdio/jasmine-framework": "^5.11.0",
+    "@wdio/junit-reporter": "^5.11.7",
     "@wdio/local-runner": "^5.11.13",
     "@wdio/sauce-service": "^5.11.1",
     "@wdio/selenium-standalone-service": "^5.11.2",
     "@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",
@@ -95,7 +96,7 @@
     "eslint-plugin-jest": "22.3.0",
     "eslint-plugin-prettier": "3.0.0",
     "eslint-plugin-vue": "4.7.1",
-    "instantsearch-e2e-tests": "algolia/instantsearch-e2e-tests#v1.3.0",
+    "instantsearch-e2e-tests": "algolia/instantsearch-e2e-tests#v2.0.1",
     "instantsearch.css": "7.3.1",
     "jest": "23.6.0",
     "jest-serializer-html": "7.1.0",
@@ -132,11 +133,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' }),
@@ -50,6 +50,14 @@ export default {
       type: Function,
       default: undefined,
     },
+    facets: {
+      type: Array,
+      default: undefined,
+    },
+    maxValuesPerFacet: {
+      type: Number,
+      default: undefined,
+    },
   },
   render: renderCompat(function(h) {
     const components = new Map();
@@ -91,6 +99,8 @@ export default {
     widgetParams() {
       return {
         transformItems: this.transformItems,
+        facets: this.facets,
+        maxValuesPerFacet: this.maxValuesPerFacet,
         // we do not pass "widgets" to the connector, since Vue is in charge of rendering
         widgets: [],
       };

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__/DynamicWidgets.js

@@ -46,6 +46,51 @@ const MockHierarchicalMenu = {
   `,
 };
 
+it('passes arguments to connector', () => {
+  __setState(null);
+
+  const transformItems = items => items;
+  const facets = ['test'];
+  const maxValuesPerFacet = 100;
+  const wrapper = mount({
+    data() {
+      return { props: { transformItems, facets, maxValuesPerFacet } };
+    },
+    template: `
+      <DynamicWidgets v-bind="props">
+        <MockRefinementList attribute="test1"/>
+        <MockMenu attribute="test2"/>
+        <AisPanel>
+          <MockHierarchicalMenu :attributes="['test3', 'test4']" />
+        </AisPanel>
+      </DynamicWidgets>
+      `,
+    components: {
+      DynamicWidgets,
+      MockRefinementList,
+      MockMenu,
+      MockHierarchicalMenu,
+      AisPanel,
+    },
+  });
+
+  const dynamicWidgets = wrapper.findComponent(DynamicWidgets);
+
+  expect(dynamicWidgets.props()).toEqual({
+    classNames: undefined,
+    transformItems,
+    facets: ['test'],
+    maxValuesPerFacet: 100,
+  });
+
+  expect(dynamicWidgets.vm.widgetParams).toEqual({
+    transformItems,
+    facets: ['test'],
+    maxValuesPerFacet: 100,
+    widgets: [],
+  });
+});
+
 it('renders all children without state', () => {
   __setState(null);
 

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,149 @@ 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": "",
+    },
+  },
+]
+`);
+      });
+
+      it('works when component is at root (and therefore has no $vnode)', async () => {
+        const searchClient = createFakeClient();
+        let mainIndex;
+
+        const app = {
+          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),
+            ])
+          ),
+        };
+
+        const wrapper = createSSRApp({
+          mixins: [
+            forceIsServerMixin,
+            createServerRootMixin({
+              searchClient,
+              indexName: 'hello',
+            }),
+          ],
+          serverPrefetch() {
+            return this.instantsearch.findResultsState({
+              component: this,
+              renderToString,
+            });
+          },
+          created() {
+            mainIndex = this.instantsearch.mainIndex;
+          },
+          render: renderCompat(h => h(app)),
+        });
+
+        await renderToString(wrapper);
+
+        expect(mainIndex.getWidgetState()).toMatchInlineSnapshot(`
+Object {
+  "hello": Object {
+    "configure": Object {
+      "hitsPerPage": 100,
+    },
+  },
+}
+`);
+
+        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 +824,6 @@ Array [
         // in test, beforeCreated doesn't have $data yet, but IRL it does
         created() {
           this.instantsearch.hydrate({
-            __identifier: 'stringified',
             hello: serialized,
           });
         },
@@ -693,57 +833,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 +876,6 @@ Array [
       expect(instantsearch.mainIndex.getHelper()).toBe(null);
 
       instantsearch.hydrate({
-        __identifier: 'stringified',
         hello: serialized,
       });
 
@@ -812,7 +914,6 @@ Array [
       expect(instantsearch.mainHelper).toBe(null);
 
       instantsearch.hydrate({
-        __identifier: 'stringified',
         hello: serialized,
       });
 
@@ -834,6 +935,7 @@ Array [
         created() {
           instantSearchInstance = this.instantsearch;
         },
+        render() {},
       });
 
       const widget = {
@@ -894,6 +996,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 +1061,7 @@ Object {
           created() {
             instantSearchInstance = this.instantsearch;
           },
+          render() {},
         });
 
         const widget = {
@@ -940,6 +1095,7 @@ Object {
           created() {
             instantSearchInstance = this.instantsearch;
           },
+          render() {},
         });
 
         const widget = {