From 53f9259fe9c737a54b59ca3754fb50bd39961dd8 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Tue, 22 Sep 2020 14:31:54 +0200 Subject: [PATCH 1/4] feat(ssr): forward router instance to findResultsState clone --- src/util/createServerRootMixin.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/util/createServerRootMixin.js b/src/util/createServerRootMixin.js index 3e268cc05..9dfd4e3a0 100644 --- a/src/util/createServerRootMixin.js +++ b/src/util/createServerRootMixin.js @@ -73,6 +73,10 @@ function augmentInstantSearch(instantSearchOptions, searchClient, indexName) { fetch: undefined, _base: undefined, name: 'ais-ssr-root-component', + // copy over global Vue APIs + router: componentInstance._routerRoot + ? componentInstance._routerRoot._router + : undefined, }; const extended = componentInstance.$vnode From 7b30c7776ebbcba217b79ff45d747d1206882dfe Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Tue, 22 Sep 2020 14:56:02 +0200 Subject: [PATCH 2/4] test: assert that $router is accessible --- package.json | 1 + .../__tests__/createServerRootMixin.test.js | 49 +++++++++++++++++++ yarn.lock | 5 ++ 3 files changed, 55 insertions(+) diff --git a/package.json b/package.json index ac3dae4ca..b3ba7e12d 100644 --- a/package.json +++ b/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", diff --git a/src/util/__tests__/createServerRootMixin.test.js b/src/util/__tests__/createServerRootMixin.test.js index 0adfad524..26d30326a 100644 --- a/src/util/__tests__/createServerRootMixin.test.js +++ b/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', () => { diff --git a/yarn.lock b/yarn.lock index d2eca1609..c22a156bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15612,6 +15612,11 @@ vue-property-decorator@^8.0.0: dependencies: vue-class-component "^7.0.1" +vue-router@^3.4.3: + 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" From 5506885a7a76550db524a865387245d8e9f7fd24 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Tue, 22 Sep 2020 18:30:21 +0200 Subject: [PATCH 3/4] chore(refactor): smaller --- src/util/createServerRootMixin.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/util/createServerRootMixin.js b/src/util/createServerRootMixin.js index 9dfd4e3a0..9042bb0e2 100644 --- a/src/util/createServerRootMixin.js +++ b/src/util/createServerRootMixin.js @@ -74,9 +74,7 @@ function augmentInstantSearch(instantSearchOptions, searchClient, indexName) { _base: undefined, name: 'ais-ssr-root-component', // copy over global Vue APIs - router: componentInstance._routerRoot - ? componentInstance._routerRoot._router - : undefined, + router: componentInstance.$router, }; const extended = componentInstance.$vnode From 877d19aec306f93c3e15547498ec18aa62023d47 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Wed, 23 Sep 2020 10:53:17 +0200 Subject: [PATCH 4/4] pin dependency --- package.json | 2 +- yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b3ba7e12d..09631c27a 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "vue-jest": "2.6.0", "vue-json-tree": "0.3.3", "vue-loader": "14.2.2", - "vue-router": "^3.4.3", + "vue-router": "3.4.3", "vue-server-renderer": "^2.6.11", "vue-slider-component": "3.0.15", "vue-template-compiler": "2.5.18", diff --git a/yarn.lock b/yarn.lock index c22a156bd..be1a3f8f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15612,7 +15612,7 @@ vue-property-decorator@^8.0.0: dependencies: vue-class-component "^7.0.1" -vue-router@^3.4.3: +vue-router@3.4.3: version "3.4.3" resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.3.tgz#fa93768616ee338aa174f160ac965167fa572ffa" integrity sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A==