fix(server): make vue-server-renderer not a dependency (#801)

* fix(server): make vue-server-renderer not a dependency

this is done by making this dependency-injected to prevent the dependency being required for everyone

* add error

* use require instead

* chore: try/catch

examples/nuxt/package.json

@@ -14,7 +14,8 @@
     "algoliasearch": "^4.0.1",
     "cross-env": "^5.2.0",
     "nuxt": "^2.4.5",
-    "vue-instantsearch": "file:../../"
+    "vue-instantsearch": "file:../../",
+    "vue-server-renderer": "2.6.11"
   },
   "devDependencies": {}
 }

examples/ssr/package.json

@@ -14,7 +14,7 @@
     "vue": "^2.6.7",
     "vue-instantsearch": "file:../../",
     "vue-router": "^3.0.2",
-    "vue-server-renderer": "^2.6.7"
+    "vue-server-renderer": "^2.6.11"
   },
   "devDependencies": {
     "@akryum/vue-cli-plugin-ssr": "^0.5.0",

examples/ssr/src/main.js

@@ -34,8 +34,8 @@ export async function createApp({
               const url = context
                 ? context.url
                 : typeof window.location === 'object'
-                ? window.location.href
-                : '';
+                  ? window.location.href
+                  : '';
               const search = url.slice(url.indexOf('?'));
 
               return qs.parse(search, {

src/util/__tests__/createServerRootMixin.test.js

@@ -53,7 +53,7 @@ describe('createServerRootMixin', () => {
             ],
           })
       ).toThrowErrorMatchingInlineSnapshot(
-        `"createServerRootMixin requires the \`searchClient\` and \`indexName\` arguments to be passed"`
+        `"createServerRootMixin requires \`searchClient\` and \`indexName\` in the first argument"`
       );
     });
 
@@ -69,7 +69,7 @@ describe('createServerRootMixin', () => {
             ],
           })
       ).toThrowErrorMatchingInlineSnapshot(
-        `"createServerRootMixin requires the \`searchClient\` and \`indexName\` arguments to be passed"`
+        `"createServerRootMixin requires \`searchClient\` and \`indexName\` in the first argument"`
       );
     });
 

src/util/createServerRootMixin.js

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import _renderToString from 'vue-server-renderer/basic';
 import instantsearch from 'instantsearch.js/es';
 import algoliaHelper from 'algoliasearch-helper';
 const { SearchResults, SearchParameters } = algoliaHelper;
@@ -15,7 +14,7 @@ function walkIndex(indexWidget, visit) {
   });
 }
 
-function renderToString(app) {
+function renderToString(app, _renderToString) {
   return new Promise((resolve, reject) =>
     _renderToString(app, (err, res) => {
       if (err) reject(err);
@@ -55,7 +54,18 @@ function augmentInstantSearch(instantSearchOptions, searchClient, indexName) {
    * @returns {Promise} result of the search, to save for .hydrate
    */
   search.findResultsState = function(componentInstance) {
+    let _renderToString;
+    try {
+      _renderToString = require('vue-server-renderer/basic');
+    } catch (e) {
+      // error is handled by regular if, in case it's `undefined`
+    }
+    if (!_renderToString) {
+      throw new Error('you need to install vue-server-renderer');
+    }
+
     let app;
+
     return Promise.resolve()
       .then(() => {
         const options = {
@@ -82,7 +92,7 @@ function augmentInstantSearch(instantSearchOptions, searchClient, indexName) {
           uiState: app.instantsearch._initialUiState,
         });
       })
-      .then(() => renderToString(app))
+      .then(() => renderToString(app, _renderToString))
       .then(() => searchOnlyWithDerivedHelpers(helper))
       .then(() => {
         const results = {};
@@ -229,7 +239,7 @@ export function createServerRootMixin(instantSearchOptions = {}) {
 
   if (!searchClient || !indexName) {
     throw new Error(
-      'createServerRootMixin requires the `searchClient` and `indexName` arguments to be passed'
+      'createServerRootMixin requires `searchClient` and `indexName` in the first argument'
     );
   }