feat(ssr): forward router instance to findResultsState clone (#863)

* feat(ssr): forward router instance to findResultsState clone

* test: assert that $router is accessible

* chore(refactor): smaller

* pin dependency

Author: Haroenv

package.json

@@ -103,6 +103,7 @@
     "vue-jest": "2.6.0",
     "vue-json-tree": "0.3.3",
     "vue-loader": "14.2.2",
+    "vue-router": "3.4.3",
     "vue-server-renderer": "^2.6.11",
     "vue-slider-component": "3.0.15",
     "vue-template-compiler": "2.5.18",

src/util/__tests__/createServerRootMixin.test.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import _renderToString from 'vue-server-renderer/basic';
+import Router from 'vue-router';
 import { createServerRootMixin } from '../createServerRootMixin';
 import InstantSearchSsr from '../../components/InstantSearchSsr';
 import Configure from '../../components/Configure';
@@ -213,6 +214,54 @@ Array [
 ]
 `);
     });
+
+    it('forwards router', async () => {
+      const searchClient = createFakeClient();
+
+      const router = new Router({});
+
+      // there are two renders of App, each with an assertion
+      expect.assertions(2);
+
+      const App = Vue.component('App', {
+        mixins: [
+          forceIsServerMixin,
+          createServerRootMixin({
+            searchClient,
+            indexName: 'hello',
+          }),
+        ],
+        data() {
+          expect(this.$router).toBe(router);
+          return {};
+        },
+        render(h) {
+          return h(InstantSearchSsr, {}, [
+            h(Configure, {
+              attrs: {
+                hitsPerPage: 100,
+              },
+            }),
+            h(SearchBox),
+          ]);
+        },
+        serverPrefetch() {
+          return this.instantsearch.findResultsState(this);
+        },
+      });
+
+      Vue.use(Router);
+
+      const wrapper = new Vue({
+        mixins: [forceIsServerMixin],
+        router,
+        render(h) {
+          return h(App);
+        },
+      });
+
+      await renderToString(wrapper);
+    });
   });
 
   describe('hydrate', () => {

src/util/createServerRootMixin.js

@@ -73,6 +73,8 @@ function augmentInstantSearch(instantSearchOptions, searchClient, indexName) {
           fetch: undefined,
           _base: undefined,
           name: 'ais-ssr-root-component',
+          // copy over global Vue APIs
+          router: componentInstance.$router,
         };
 
         const extended = componentInstance.$vnode

yarn.lock

@@ -15612,6 +15612,11 @@ vue-property-decorator@^8.0.0:
   dependencies:
     vue-class-component "^7.0.1"
 
+[email protected]:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.3.tgz#fa93768616ee338aa174f160ac965167fa572ffa"
+  integrity sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A==
+
 vue-server-renderer@^2.6.11:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.11.tgz#be8c9abc6aacc309828a755c021a05fc474b4bc3"