vue-instantsearch 4.0.0-beta.2 → 4.1.0

package/CHANGELOG.md

@@ -1,50 +1,35 @@
-# [4.0.0-beta.2](https://github.com/algolia/vue-instantsearch/compare/v4.0.0-beta.1...v4.0.0-beta.2) (2021-08-19)
+# [4.1.0](https://github.com/algolia/vue-instantsearch/compare/v4.0.1...v4.1.0) (2021-10-26)
 
 
-### Bug Fixes
-
-* **range-input:** remove default min and max values from `ais-range-input` (BREAKING CHANGE) ([#1036](https://github.com/algolia/vue-instantsearch/issues/1036)) ([38987ac](https://github.com/algolia/vue-instantsearch/commit/38987ac74548baf239a7ca25d34743b4027704cd))
-* **Server-side rendering:** let users pass renderToString to createServerRootMixin (BREAKING CHANGE) ([#1035](https://github.com/algolia/vue-instantsearch/issues/1035)) ([bc5f58a](https://github.com/algolia/vue-instantsearch/commit/bc5f58a81a205e856207e6cf1e45bc8d11605efd))
-
-
-
-# [4.0.0-beta.1](https://github.com/algolia/vue-instantsearch/compare/v3.8.1...v4.0.0-beta.1) (2021-07-29)
+### Features
 
+* **dependencies:** update downstream ([#1075](https://github.com/algolia/vue-instantsearch/issues/1075)) ([ede11a5](https://github.com/algolia/vue-instantsearch/commit/ede11a5aa907f33123df7f19013680633228d0cf))
 
-Vue InstantSearch now supports Vue 3.
 
-## Breaking Change for Vue 2 users with SSR
 
-From now on, Vue InstantSearch [dynamically imports](https://github.com/algolia/vue-instantsearch/blob/b3ad4a3fc49e1e7470a0e6dd383c24b1dcb0b5bd/src/util/vue-compat/index-2.js#L23:L23) `vue-server-renderer/basic` instead of `require()`.
+## [4.0.1](https://github.com/algolia/vue-instantsearch/compare/v4.0.0...v4.0.1) (2021-09-15)
 
-* If you're using CJS output of Vue InstantSearch, it doesn't change anything for you because it gets transpiled to `require` for CJS output.
-* If you're using ESM output, it should probably be okay. We've tested "dynamic import" with Vue 2 (vue-cli) and Nuxt and it worked fine.
 
-If you have different setup or use different bundler, you may check if it still works for you. If not, please [create an issue](https://github.com/algolia/vue-instantsearch/issues/new/choose) with a reproducible example.
+### Bug Fixes
 
-## For Vue 3 users
+* **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))
 
-Vue InstantSearch includes two packages, one for vue 2 and another one for vue 3. So for vue 3, you need to import with this path:
 
-```js
-import InstantSearch from 'vue-instantsearch/vue3/es';
-```
 
-## Regarding vue-router@v4
+# [4.0.0](https://github.com/algolia/vue-instantsearch/compare/v3.8.1...v4.0.0) (2021-08-23)
 
-If you migrate your `vue-router` to v4 along with vue 3, you need to replace
+Vue InstantSearch now supports Vue 3 ([#990](https://github.com/algolia/vue-instantsearch/issues/990)).
 
-```js
-vueRouter.currentRoute.query
-```
+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).
 
-with
+You can try these examples:
 
-```js
-vueRouter.currentRoute.value.query
-```
+* 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)
 
-due to [its change](https://next.router.vuejs.org/api/#currentroute).
 
 ## [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-beta.2",
+  "version": "4.1.0",
   "files": [
     "vue2",
     "vue3",
@@ -48,8 +48,8 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "algoliasearch-helper": "^3.1.0",
-    "instantsearch.js": "^4.27.2",
+    "algoliasearch-helper": "^3.6.2",
+    "instantsearch.js": "^4.32.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -132,15 +132,15 @@
   "bundlesize": [
     {
       "path": "./vue2/umd/index.js",
-      "maxSize": "55.00 kB"
+      "maxSize": "55.25 kB"
     },
     {
-      "path": "./vue2/cjs/index.js",
-      "maxSize": "17.00 kB"
+      "path": "./vue3/umd/index.js",
+      "maxSize": "56.75 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';
@@ -42,7 +42,7 @@ function getWidgetAttribute(vnode) {
 export default {
   name: 'AisExperimentalDynamicWidgets',
   mixins: [
-    createWidgetMixin({ connector: EXPERIMENTAL_connectDynamicWidgets }),
+    createWidgetMixin({ connector: connectDynamicWidgets }),
     createSuitMixin({ name: 'DynamicWidgets' }),
   ],
   props: {

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

@@ -52,7 +52,6 @@ describe('createServerRootMixin', () => {
         createSSRApp({
           mixins: [
             createServerRootMixin({
-              renderToString,
               searchClient: undefined,
               indexName: 'lol',
             }),
@@ -68,7 +67,6 @@ describe('createServerRootMixin', () => {
         createSSRApp({
           mixins: [
             createServerRootMixin({
-              renderToString,
               searchClient: createFakeClient(),
               indexName: undefined,
             }),
@@ -79,26 +77,10 @@ describe('createServerRootMixin', () => {
       );
     });
 
-    it('requires renderToString', () => {
-      expect(() =>
-        createSSRApp({
-          mixins: [
-            createServerRootMixin({
-              searchClient: createFakeClient(),
-              indexName: 'yup',
-            }),
-          ],
-        })
-      ).toThrowErrorMatchingInlineSnapshot(
-        `"createServerRootMixin requires \`renderToString: (app) => Promise<string>\` in the first argument"`
-      );
-    });
-
     it('creates an instantsearch instance on "data"', () => {
       const App = {
         mixins: [
           createServerRootMixin({
-            renderToString,
             searchClient: createFakeClient(),
             indexName: 'lol',
           }),
@@ -118,7 +100,6 @@ describe('createServerRootMixin', () => {
       const App = {
         mixins: [
           createServerRootMixin({
-            renderToString,
             searchClient: createFakeClient(),
             indexName: 'myIndexName',
           }),
@@ -164,7 +145,6 @@ describe('createServerRootMixin', () => {
         mixins: [
           forceIsServerMixin,
           createServerRootMixin({
-            renderToString,
             searchClient: createFakeClient(),
             indexName: 'hello',
           }),
@@ -179,6 +159,44 @@ describe('createServerRootMixin', () => {
       await renderToString(app);
     });
 
+    it('requires renderToString', async () => {
+      const searchClient = createFakeClient();
+
+      const app = {
+        mixins: [
+          forceIsServerMixin,
+          createServerRootMixin({
+            searchClient,
+            indexName: 'hello',
+          }),
+        ],
+        render: renderCompat(h =>
+          h(InstantSearchSsr, {}, [
+            h(Configure, {
+              attrs: {
+                hitsPerPage: 100,
+              },
+            }),
+            h(SearchBox),
+          ])
+        ),
+        serverPrefetch() {
+          expect(() =>
+            this.instantsearch.findResultsState({ component: this })
+          ).toThrowErrorMatchingInlineSnapshot(
+            `"findResultsState requires \`renderToString: (component) => Promise<string>\` in the first argument."`
+          );
+        },
+      };
+
+      const wrapper = createSSRApp({
+        mixins: [forceIsServerMixin],
+        render: renderCompat(h => h(app)),
+      });
+
+      await renderToString(wrapper);
+    });
+
     it('detects child widgets', async () => {
       const searchClient = createFakeClient();
       let mainIndex;
@@ -187,7 +205,6 @@ describe('createServerRootMixin', () => {
         mixins: [
           forceIsServerMixin,
           createServerRootMixin({
-            renderToString,
             searchClient,
             indexName: 'hello',
           }),
@@ -214,7 +231,10 @@ describe('createServerRootMixin', () => {
           ])
         ),
         serverPrefetch() {
-          return this.instantsearch.findResultsState(this);
+          return this.instantsearch.findResultsState({
+            component: this,
+            renderToString,
+          });
         },
         created() {
           mainIndex = this.instantsearch.mainIndex;
@@ -261,7 +281,6 @@ Array [
         mixins: [
           forceIsServerMixin,
           createServerRootMixin({
-            renderToString,
             searchClient,
             indexName: 'hello',
           }),
@@ -277,7 +296,10 @@ Array [
           ])
         ),
         async serverPrefetch() {
-          const state = await this.instantsearch.findResultsState(this);
+          const state = await this.instantsearch.findResultsState({
+            component: this,
+            renderToString,
+          });
           expect(state).toEqual({
             __identifier: 'stringified',
             hello: {
@@ -339,7 +361,6 @@ Array [
         mixins: [
           forceIsServerMixin,
           createServerRootMixin({
-            renderToString,
             searchClient,
             indexName: 'hello',
           }),
@@ -359,7 +380,10 @@ Array [
           ])
         ),
         serverPrefetch() {
-          return this.instantsearch.findResultsState(this);
+          return this.instantsearch.findResultsState({
+            component: this,
+            renderToString,
+          });
         },
       };
 
@@ -390,7 +414,6 @@ Array [
         mixins: [
           forceIsServerMixin,
           createServerRootMixin({
-            renderToString,
             searchClient,
             indexName: 'hello',
           }),
@@ -410,7 +433,10 @@ Array [
           ])
         ),
         serverPrefetch() {
-          return this.instantsearch.findResultsState(this);
+          return this.instantsearch.findResultsState({
+            component: this,
+            renderToString,
+          });
         },
       };
 
@@ -440,7 +466,6 @@ Array [
           mixins: [
             forceIsServerMixin,
             createServerRootMixin({
-              renderToString,
               searchClient,
               indexName: 'hello',
             }),
@@ -466,7 +491,10 @@ Array [
             ])
           ),
           serverPrefetch() {
-            return this.instantsearch.findResultsState(this);
+            return this.instantsearch.findResultsState({
+              component: this,
+              renderToString,
+            });
           },
         };
 
@@ -487,7 +515,6 @@ Array [
           mixins: [
             forceIsServerMixin,
             createServerRootMixin({
-              renderToString,
               searchClient,
               indexName: 'hello',
             }),
@@ -501,7 +528,7 @@ Array [
           serverPrefetch() {
             return (
               this.instantsearch
-                .findResultsState(this)
+                .findResultsState({ component: this, renderToString })
                 .then(res => {
                   expect(
                     this.instantsearch.mainIndex.getWidgets().map(w => w.$$type)
@@ -541,7 +568,6 @@ Array [
           mixins: [
             forceIsServerMixin,
             createServerRootMixin({
-              renderToString,
               searchClient,
               indexName: 'hello',
             }),
@@ -552,7 +578,7 @@ Array [
           serverPrefetch() {
             return (
               this.instantsearch
-                .findResultsState(this)
+                .findResultsState({ component: this, renderToString })
                 .then(res => {
                   expect(
                     this.instantsearch.mainIndex.getWidgets().map(w => w.$$type)
@@ -600,7 +626,6 @@ Array [
           mixins: [
             forceIsServerMixin,
             createServerRootMixin({
-              renderToString,
               searchClient,
               indexName: 'hello',
             }),
@@ -617,7 +642,10 @@ Array [
             ]);
           }),
           serverPrefetch() {
-            return this.instantsearch.findResultsState(this);
+            return this.instantsearch.findResultsState({
+              component: this,
+              renderToString,
+            });
           },
         };
 
@@ -638,7 +666,6 @@ Array [
       const app = {
         mixins: [
           createServerRootMixin({
-            renderToString,
             searchClient: createFakeClient(),
             indexName: 'hello',
           }),
@@ -685,7 +712,6 @@ Array [
       const app = {
         mixins: [
           createServerRootMixin({
-            renderToString,
             searchClient: createFakeClient(),
             indexName: 'movies',
           }),
@@ -724,7 +750,6 @@ Array [
       const app = {
         mixins: [
           createServerRootMixin({
-            renderToString,
             searchClient: createFakeClient(),
             indexName: 'hello',
           }),
@@ -763,7 +788,6 @@ Array [
       const app = {
         mixins: [
           createServerRootMixin({
-            renderToString,
             searchClient: createFakeClient(),
             indexName: 'hello',
           }),
@@ -803,7 +827,6 @@ Array [
       mount({
         mixins: [
           createServerRootMixin({
-            renderToString,
             searchClient: createFakeClient(),
             indexName: 'lol',
           }),
@@ -843,6 +866,7 @@ Array [
               results: expect.anything(),
             }),
           ]),
+          parent: expect.anything(),
           state: expect.anything(),
           instantSearchInstance: expect.anything(),
         },
@@ -851,6 +875,7 @@ Object {
   "createURL": [Function],
   "helper": Anything,
   "instantSearchInstance": Anything,
+  "parent": Anything,
   "results": Anything,
   "scopedResults": ArrayContaining [
     ObjectContaining {
@@ -875,7 +900,6 @@ Object {
         mount({
           mixins: [
             createServerRootMixin({
-              renderToString,
               searchClient: createFakeClient(),
               indexName: 'lol',
             }),
@@ -909,7 +933,6 @@ Object {
         mount({
           mixins: [
             createServerRootMixin({
-              renderToString,
               searchClient: createFakeClient(),
               indexName: 'lol',
             }),

package/src/util/createServerRootMixin.js

@@ -80,8 +80,7 @@ function augmentInstantSearch(
   instantSearchOptions,
   searchClient,
   indexName,
-  cloneComponent,
-  renderToString
+  cloneComponent
 ) {
   /* eslint-disable no-param-reassign */
 
@@ -92,21 +91,29 @@ function augmentInstantSearch(
 
   /**
    * main API for SSR, called in serverPrefetch of a root component which contains instantsearch
-   * @param {object} componentInstance the calling component's `this`
+   * @param {Object} props the object including `component` and `renderToString`
+   * @param {Object} props.component the calling component's `this`
+   * @param {Function} props.renderToString the function to render componentInstance to string
    * @returns {Promise} result of the search, to save for .hydrate
    */
-  search.findResultsState = function(componentInstance) {
+  search.findResultsState = function({ component, renderToString }) {
+    if (!renderToString) {
+      throw new Error(
+        'findResultsState requires `renderToString: (component) => Promise<string>` in the first argument.'
+      );
+    }
+
     let app;
-    let renderedComponentInstance;
+    let renderedComponent;
 
     return Promise.resolve()
       .then(() => {
-        app = cloneComponent(componentInstance, {
+        app = cloneComponent(component, {
           mixins: [
             {
               created() {
                 // eslint-disable-next-line consistent-this
-                renderedComponentInstance = this;
+                renderedComponent = this;
                 this.instantsearch.helper = helper;
                 this.instantsearch.mainHelper = helper;
 
@@ -124,7 +131,7 @@ function augmentInstantSearch(
       .then(() => searchOnlyWithDerivedHelpers(helper))
       .then(() => {
         const results = {};
-        walkIndex(renderedComponentInstance.instantsearch.mainIndex, widget => {
+        walkIndex(renderedComponent.instantsearch.mainIndex, widget => {
           results[widget.getIndexId()] = widget.getResults();
         });
 
@@ -201,6 +208,7 @@ function augmentInstantSearch(
           results: search.__initialSearchResults[result.indexId],
         })
       ),
+      parent,
       state,
       templatesConfig: {},
       createURL: parent.createURL,
@@ -258,7 +266,6 @@ export function createServerRootMixin(instantSearchOptions = {}) {
   const {
     searchClient,
     indexName,
-    renderToString,
     $cloneComponent = defaultCloneComponent,
   } = instantSearchOptions;
 
@@ -268,18 +275,11 @@ export function createServerRootMixin(instantSearchOptions = {}) {
     );
   }
 
-  if (!renderToString) {
-    throw new Error(
-      'createServerRootMixin requires `renderToString: (app) => Promise<string>` in the first argument'
-    );
-  }
-
   const search = augmentInstantSearch(
     instantSearchOptions,
     searchClient,
     indexName,
-    $cloneComponent,
-    renderToString
+    $cloneComponent
   );
 
   // put this in the user's root Vue instance