feat(ssr): forward propsData to recreated component (algolia/vue-inst…

…antsearch#865) * 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 :/ * fix co-authored-by: Eunjae Lee <eunjae-lee@users.noreply.github.com> Co-authored-by: Eunjae Lee <eunjae-lee@users.noreply.github.com>
algolia · Sep 30, 2020 · 77d0cc4 · 77d0cc4
1 parent 6bb8e08
commit 77d0cc4
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git a/packages/vue-instantsearch/src/util/__tests__/createServerRootMixin.test.js b/packages/vue-instantsearch/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/packages/vue-instantsearch/src/util/createServerRootMixin.js b/packages/vue-instantsearch/src/util/createServerRootMixin.js
@@ -78,11 +78,15 @@ function augmentInstantSearch(instantSearchOptions, searchClient, indexName) {
           store: componentInstance.$store,
         };
 
-        const extended = componentInstance.$vnode
+        const Extended = componentInstance.$vnode
           ? componentInstance.$vnode.componentOptions.Ctor.extend(options)
-          : Object.assign({}, componentInstance.$options, options);
+          : Vue.component(
+              Object.assign({}, componentInstance.$options, options)
+            );
 
-        app = new Vue(extended);
+        app = new Extended({
+          propsData: componentInstance.$options.propsData,
+        });
 
         app.$options.serverPrefetch = [];