From dca2d01d5f00e11c25e9c5204dc55dcc5a9cca97 Mon Sep 17 00:00:00 2001
From: Haroen Viaene <hello@haroen.me>
Date: Wed, 23 Sep 2020 11:37:24 +0200
Subject: [PATCH] feat(ssr): forward propsData to recreated component

TODO: this throws a warning (but works) because of:

https://github.com/vuejs/vue/blob/7912f75c5eb09e0aef3e4bfd8a3bb78cad7540d7/src/core/util/options.js#L34-L44

I'm not fully sure how to do `new Vue` or pass this parameter correctly. If I `Object.assign` it for `app = new Vue({...extended, propsData})`, it also doesn't work :/
---
 .../__tests__/createServerRootMixin.test.js   | 51 +++++++++++++++++++
 src/util/createServerRootMixin.js             |  1 +
 2 files changed, 52 insertions(+)

diff --git a/src/util/__tests__/createServerRootMixin.test.js b/src/util/__tests__/createServerRootMixin.test.js
index 5fe79a9d6..200b5bffc 100644
--- a/src/util/__tests__/createServerRootMixin.test.js
+++ b/src/util/__tests__/createServerRootMixin.test.js
@@ -311,6 +311,57 @@ Array [
 
       await renderToString(wrapper);
     });
+
+    it('forwards props', async () => {
+      const searchClient = createFakeClient();
+
+      // there are two renders of App, each with an assertion
+      expect.assertions(2);
+
+      const someProp = { data: Math.random() };
+
+      const App = Vue.component('App', {
+        mixins: [
+          forceIsServerMixin,
+          createServerRootMixin({
+            searchClient,
+            indexName: 'hello',
+          }),
+        ],
+        props: {
+          someProp: {
+            required: true,
+            type: Object,
+            validator(value) {
+              expect(value).toBe(someProp);
+              return value === someProp;
+            },
+          },
+        },
+        render(h) {
+          return h(InstantSearchSsr, {}, [
+            h(Configure, {
+              attrs: {
+                hitsPerPage: 100,
+              },
+            }),
+            h(SearchBox),
+          ]);
+        },
+        serverPrefetch() {
+          return this.instantsearch.findResultsState(this);
+        },
+      });
+
+      const wrapper = new Vue({
+        mixins: [forceIsServerMixin],
+        render(h) {
+          return h(App, { props: { someProp } });
+        },
+      });
+
+      await renderToString(wrapper);
+    });
   });
 
   describe('hydrate', () => {
diff --git a/src/util/createServerRootMixin.js b/src/util/createServerRootMixin.js
index 9e0653d19..a69077b74 100644
--- a/src/util/createServerRootMixin.js
+++ b/src/util/createServerRootMixin.js
@@ -76,6 +76,7 @@ function augmentInstantSearch(instantSearchOptions, searchClient, indexName) {
           // copy over global Vue APIs
           router: componentInstance.$router,
           store: componentInstance.$store,
+          propsData: componentInstance.$options.propsData,
         };
 
         const extended = componentInstance.$vnode