vue-instantsearch 4.0.0 → 4.2.0

package/CHANGELOG.md

@@ -1,11 +1,54 @@
-# [4.0.0](https://github.com/algolia/vue-instantsearch/compare/v3.8.1...v4.0.0) (2021-08-23)
+# [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)
+
+
+### Bug Fixes
+
+* **vue3:** disable automatic plugin registration ([#1081](https://github.com/algolia/vue-instantsearch/issues/1081)) ([6077413](https://github.com/algolia/vue-instantsearch/commit/607741312db620242b62a1fa2181563d87e69705))
+
+
+
+# [4.1.0](https://github.com/algolia/vue-instantsearch/compare/v4.0.1...v4.1.0) (2021-10-26)
 
 
 ### Features
 
-* **vue 3:** support vue 3 ([#990](https://github.com/algolia/vue-instantsearch/issues/990))
+* **dependencies:** update downstream ([#1075](https://github.com/algolia/vue-instantsearch/issues/1075)) ([ede11a5](https://github.com/algolia/vue-instantsearch/commit/ede11a5aa907f33123df7f19013680633228d0cf))
+
+
+
+## [4.0.1](https://github.com/algolia/vue-instantsearch/compare/v4.0.0...v4.0.1) (2021-09-15)
+
+
+### Bug Fixes
+
+* **dynamic-widgets:** use non-experimental connector ([5629957](https://github.com/algolia/vue-instantsearch/commit/56299575f1fdd1d8cd777358f77543d5b0211b18))
+* **ssr:** pass parent index to render in __forceRender ([25284aa](https://github.com/algolia/vue-instantsearch/commit/25284aafdb95f4684387744953c2a38241da7ad1))
+
+
+
+# [4.0.0](https://github.com/algolia/vue-instantsearch/compare/v3.8.1...v4.0.0) (2021-08-23)
+
+Vue InstantSearch now supports Vue 3 ([#990](https://github.com/algolia/vue-instantsearch/issues/990)).
+
+It has a few breaking changes that you can easily migrate. You can read [the upgrade guide](https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/vue/#upgrade-from-v3-to-v4).
+
+You can try these examples:
 
-Since v4, Vue InstantSearch supports Vue 3. There's a couple of breaking changes that you can easily migrate to the new version. See more here: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/vue/#upgrade-from-v3-to-v4
+* Vue 3 + Vue CLI: [GitHub](https://github.com/algolia/doc-code-samples/tree/master/Vue%20InstantSearch/vue3-vue-cli) | [CodeSandbox](codesandbox.io/s/github/algolia/doc-code-samples/tree/master/Vue%20InstantSearch/vue3-vue-cli)
+* Vue 3 + Vite: [GitHub](https://github.com/algolia/doc-code-samples/tree/master/Vue%20InstantSearch/vue3-vite)
+* Vue 3 + SSR + Vue CLI: [GitHub](https://github.com/algolia/doc-code-samples/tree/master/Vue%20InstantSearch/vue3-ssr-vue-cli)
+* Vue 3 + SSR + Vite: [GitHub](https://github.com/algolia/doc-code-samples/tree/master/Vue%20InstantSearch/vue3-ssr-vite)
 
 
 ## [3.8.1](https://github.com/algolia/vue-instantsearch/compare/v3.8.0...v3.8.1) (2021-07-12)

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "files": [
     "vue2",
     "vue3",
@@ -48,8 +48,7 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "algoliasearch-helper": "^3.1.0",
-    "instantsearch.js": "^4.27.2",
+    "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,15 +132,15 @@
   "bundlesize": [
     {
       "path": "./vue2/umd/index.js",
-      "maxSize": "55.00 kB"
+      "maxSize": "56.00 kB"
     },
     {
-      "path": "./vue2/cjs/index.js",
-      "maxSize": "17.00 kB"
+      "path": "./vue3/umd/index.js",
+      "maxSize": "57.00 kB"
     },
     {
-      "path": "./vue3/umd/index.js",
-      "maxSize": "56.50 kB"
+      "path": "./vue2/cjs/index.js",
+      "maxSize": "17.00 kB"
     },
     {
       "path": "./vue3/cjs/index.js",

package/src/components/DynamicWidgets.js

@@ -1,5 +1,5 @@
 import { createWidgetMixin } from '../mixins/widget';
-import { EXPERIMENTAL_connectDynamicWidgets } from 'instantsearch.js/es/connectors';
+import { connectDynamicWidgets } from 'instantsearch.js/es/connectors';
 import { createSuitMixin } from '../mixins/suit';
 import { _objectSpread } from '../util/polyfills';
 import { isVue3, renderCompat, getDefaultSlot } from '../util/vue-compat';
@@ -40,9 +40,9 @@ function getWidgetAttribute(vnode) {
 }
 
 export default {
-  name: 'AisExperimentalDynamicWidgets',
+  name: 'AisDynamicWidgets',
   mixins: [
-    createWidgetMixin({ connector: EXPERIMENTAL_connectDynamicWidgets }),
+    createWidgetMixin({ connector: connectDynamicWidgets }),
     createSuitMixin({ name: 'DynamicWidgets' }),
   ],
   props: {

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/instantsearch.umd.js

@@ -1,7 +1,8 @@
 import { plugin } from './plugin';
+import { isVue2 } from './util/vue-compat';
 
-// Automatically register Algolia Search components if Vue is available globally
-if (typeof window !== 'undefined' && window.Vue) {
+// Automatically register Algolia Search components if Vue 2.x is available globally.
+if (typeof window !== 'undefined' && window.Vue && isVue2) {
   window.Vue.use(plugin);
 }
 

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 = {
@@ -866,6 +892,7 @@ Array [
               results: expect.anything(),
             }),
           ]),
+          parent: expect.anything(),
           state: expect.anything(),
           instantSearchInstance: expect.anything(),
         },
@@ -874,6 +901,7 @@ Object {
   "createURL": [Function],
   "helper": Anything,
   "instantSearchInstance": Anything,
+  "parent": Anything,
   "results": Anything,
   "scopedResults": ArrayContaining [
     ObjectContaining {
@@ -892,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;
@@ -905,6 +985,7 @@ Object {
           created() {
             instantSearchInstance = this.instantsearch;
           },
+          render() {},
         });
 
         const widget = {
@@ -938,6 +1019,7 @@ Object {
           created() {
             instantSearchInstance = this.instantsearch;
           },
+          render() {},
         });
 
         const widget = {