From a6ab0326c5aa17ca98431b8b72e3d107a52bcca5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 25 Apr 2018 14:22:14 +0200
Subject: [PATCH 1/7] feat: Add `search-client` support

---
 src/components/Index.vue | 54 ++++++++++++++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/components/Index.vue b/src/components/Index.vue
index e1218e73c..b6807d919 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -5,7 +5,10 @@
 </template>
 
 <script>
-import { createFromAlgoliaCredentials } from '../store';
+import {
+  createFromAlgoliaCredentials,
+  createFromAlgoliaClient,
+} from '../store';
 import algoliaComponent from '../component';
 
 export default {
@@ -17,6 +20,9 @@ export default {
         return this._searchStore;
       },
     },
+    searchClient: {
+      type: Object,
+    },
     apiKey: {
       type: String,
       default() {
@@ -73,14 +79,46 @@ export default {
     };
   },
   provide() {
-    if (!this.searchStore) {
-      this._localSearchStore = createFromAlgoliaCredentials(
-        this.appId,
-        this.apiKey,
-        { stalledSearchDelay: this.stalledSearchDelay }
-      );
+    if (this.searchClient) {
+      if (!this.indexName) {
+        throw new Error(
+          'vue-instantsearch: `indexName` is required with `searchClient`'
+        );
+      }
+
+      if (this.searchStore) {
+        throw new Error('`searchStore` cannot be used with `searchClient`');
+      }
+
+      if (this.appId) {
+        throw new Error(
+          'vue-instantsearch: `appId` cannot be used with `searchClient`'
+        );
+      }
+
+      if (this.apiKey) {
+        throw new Error(
+          'vue-instantsearch: `apiKey` cannot be used with `searchClient`'
+        );
+      }
+
+      if (typeof this.searchClient.search !== 'function') {
+        throw new Error(
+          'vue-instantsearch: `searchClient` must implement a method `search(requests)`'
+        );
+      }
+
+      this._localSearchStore = createFromAlgoliaClient(Object.create(this.searchClient));
     } else {
-      this._localSearchStore = this.searchStore;
+      if (!this.searchStore) {
+        this._localSearchStore = createFromAlgoliaCredentials(
+          this.appId,
+          this.apiKey,
+          { stalledSearchDelay: this.stalledSearchDelay }
+        );
+      } else {
+        this._localSearchStore = this.searchStore;
+      }
     }
 
     if (this.indexName) {

From f5651cec3cff3d2ab922b21589fbcdb7d1e80aeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 25 Apr 2018 14:22:33 +0200
Subject: [PATCH 2/7] feat: Call `addAlgoliaAgent` only if exists

---
 src/store.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/store.js b/src/store.js
index dac25d03a..1c2779306 100644
--- a/src/store.js
+++ b/src/store.js
@@ -86,7 +86,11 @@ export class Store {
     this._helper.on('result', onHelperResult.bind(this));
     this._helper.on('search', onHelperSearch.bind(this));
 
-    this._helper.getClient().addAlgoliaAgent(`vue-instantsearch ${version}`);
+    const client = this._helper.getClient();
+
+    if (typeof client.addAlgoliaAgent === 'function') {
+      client.addAlgoliaAgent(`vue-instantsearch ${version}`);
+    }
 
     this._stalledSearchTimer = null;
     this.isSearchStalled = true;

From 39179bf6b729f738c1c06b3a8de7a682f89a356b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 25 Apr 2018 14:23:18 +0200
Subject: [PATCH 3/7] test: Add tests for `search-client`

---
 .../__tests__/__snapshots__/index.js.snap     |  11 ++
 src/components/__tests__/index.js             | 120 ++++++++++++++++++
 2 files changed, 131 insertions(+)
 create mode 100644 src/components/__tests__/__snapshots__/index.js.snap
 create mode 100644 src/components/__tests__/index.js

diff --git a/src/components/__tests__/__snapshots__/index.js.snap b/src/components/__tests__/__snapshots__/index.js.snap
new file mode 100644
index 000000000..232539552
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/index.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search Client API collision and apiKey 1`] = `"vue-instantsearch: \`apiKey\` cannot be used with \`searchClient\`"`;
+
+exports[`Search Client API collision and appId 1`] = `"vue-instantsearch: \`appId\` cannot be used with \`searchClient\`"`;
+
+exports[`Search Client API collision and searchStore 1`] = `"\`searchStore\` cannot be used with \`searchClient\`"`;
+
+exports[`Search Client API collision without indexName 1`] = `"vue-instantsearch: \`indexName\` is required with \`searchClient\`"`;
+
+exports[`Search Client Properties throws if no \`search()\` method 1`] = `"vue-instantsearch: \`searchClient\` must implement a method \`search(requests)\`"`;
diff --git a/src/components/__tests__/index.js b/src/components/__tests__/index.js
new file mode 100644
index 000000000..cc2dd2d27
--- /dev/null
+++ b/src/components/__tests__/index.js
@@ -0,0 +1,120 @@
+import Vue from 'vue';
+import Index from '../Index.vue';
+
+describe('Search Client', () => {
+  describe('Properties', () => {
+    it('throws if no `search()` method', () => {
+      expect(() => {
+        const Component = Vue.extend(Index);
+
+        const vm = new Component({
+          propsData: {
+            indexName: 'indexName',
+            searchClient: {},
+          },
+        });
+
+        vm.$mount();
+      }).toThrowErrorMatchingSnapshot();
+    });
+  });
+
+  describe('API collision', () => {
+    test('and indexName', () => {
+      expect(() => {
+        const Component = Vue.extend(Index);
+
+        const vm = new Component({
+          propsData: {
+            indexName: 'indexName',
+            searchClient: {
+              search() {
+                return Promise.resolve({ results: [{ hits: [] }] });
+              },
+            },
+          },
+        });
+
+        vm.$mount();
+      }).not.toThrow();
+    });
+
+    test('without indexName', () => {
+      expect(() => {
+        const Component = Vue.extend(Index);
+
+        const vm = new Component({
+          propsData: {
+            searchClient: {
+              search() {
+                return Promise.resolve({ results: [{ hits: [] }] });
+              },
+            },
+          },
+        });
+
+        vm.$mount();
+      }).toThrowErrorMatchingSnapshot();
+    });
+
+    test('and appId', () => {
+      expect(() => {
+        const Component = Vue.extend(Index);
+
+        const vm = new Component({
+          propsData: {
+            indexName: 'indexName',
+            appId: 'appId',
+            searchClient: {
+              search() {
+                return Promise.resolve({ results: [{ hits: [] }] });
+              },
+            },
+          },
+        });
+
+        vm.$mount();
+      }).toThrowErrorMatchingSnapshot();
+    });
+
+    test('and apiKey', () => {
+      expect(() => {
+        const Component = Vue.extend(Index);
+
+        const vm = new Component({
+          propsData: {
+            indexName: 'indexName',
+            apiKey: 'apiKey',
+            searchClient: {
+              search() {
+                return Promise.resolve({ results: [{ hits: [] }] });
+              },
+            },
+          },
+        });
+
+        vm.$mount();
+      }).toThrowErrorMatchingSnapshot();
+    });
+
+    test('and searchStore', () => {
+      expect(() => {
+        const Component = Vue.extend(Index);
+
+        const vm = new Component({
+          propsData: {
+            indexName: 'indexName',
+            searchStore: {},
+            searchClient: {
+              search() {
+                return Promise.resolve({ results: [{ hits: [] }] });
+              },
+            },
+          },
+        });
+
+        vm.$mount();
+      }).toThrowErrorMatchingSnapshot();
+    });
+  });
+});

From ebe4647dd00464c624afc08f94295b9b368ec49e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 25 Apr 2018 14:38:24 +0200
Subject: [PATCH 4/7] docs: Add `search-client` prop to Index documentation

---
 docs/src/components/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/src/components/index.md b/docs/src/components/index.md
index 634068be1..ecea1f845 100644
--- a/docs/src/components/index.md
+++ b/docs/src/components/index.md
@@ -54,6 +54,7 @@ Provide search query parameters:
 | cache            | Boolean | `true`  | Whether to cache results or not. See [the documentation](https://www.algolia.com/doc/tutorials/getting-started/quick-start-with-the-api-client/javascript/#cache)       |
 | auto-search      | Boolean | `true`  | Whether to initiate a query to Algolia when this component is mounted                                                                               |
 | stalledSearchDelay | number | `200`  | Time before the search is considered unresponsive. Used to display a loading indicator. |
+| search-client | Object | `` | The search client to plug to InstantSearch |
 
 ## Slots
 

From 7d807e5501455fce14e955a577be6276540b4a91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 25 Apr 2018 14:48:50 +0200
Subject: [PATCH 5/7] refactor: Remove `Object.create()` to create client

---
 src/components/Index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Index.vue b/src/components/Index.vue
index b6807d919..e33e2e25e 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -108,7 +108,7 @@ export default {
         );
       }
 
-      this._localSearchStore = createFromAlgoliaClient(Object.create(this.searchClient));
+      this._localSearchStore = createFromAlgoliaClient(this.searchClient);
     } else {
       if (!this.searchStore) {
         this._localSearchStore = createFromAlgoliaCredentials(

From 346019aece683117501bdfeebc9db5c5a469c071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 25 Apr 2018 14:57:57 +0200
Subject: [PATCH 6/7] refactor: Use `else if` for ESLint

---
 src/components/Index.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/Index.vue b/src/components/Index.vue
index e33e2e25e..9c4eb9b5f 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -109,16 +109,14 @@ export default {
       }
 
       this._localSearchStore = createFromAlgoliaClient(this.searchClient);
+    } else if (!this.searchStore) {
+      this._localSearchStore = createFromAlgoliaCredentials(
+        this.appId,
+        this.apiKey,
+        { stalledSearchDelay: this.stalledSearchDelay }
+      );
     } else {
-      if (!this.searchStore) {
-        this._localSearchStore = createFromAlgoliaCredentials(
-          this.appId,
-          this.apiKey,
-          { stalledSearchDelay: this.stalledSearchDelay }
-        );
-      } else {
-        this._localSearchStore = this.searchStore;
-      }
+      this._localSearchStore = this.searchStore;
     }
 
     if (this.indexName) {

From 03fa0d2b5c63700b258d76a3a0b8b10233f75a2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 25 Apr 2018 17:37:34 +0200
Subject: [PATCH 7/7] docs: Add section on store with custom search client

---
 docs/src/getting-started/search-store.md | 36 ++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/docs/src/getting-started/search-store.md b/docs/src/getting-started/search-store.md
index 4fa2b1103..6982e1dfe 100644
--- a/docs/src/getting-started/search-store.md
+++ b/docs/src/getting-started/search-store.md
@@ -66,6 +66,42 @@ const searchStore = createFromAlgoliaClient(client);
 
 Note that there is no reason to provide your own client if you are not reusing it elsewhere.
 
+### Create a search store from a custom search client
+
+If you want to use the [official JavaScript API Client](https://github.com/algolia/algoliasearch-client-javascript) on your backend, or even a custom search client, you can create an object implementing the `search()` method (and `searchForFacetValues()` if needed).
+
+The search client can be passed to the [`search-client`](../components/index.html#props) prop of the [`Index`](../components/index.html):
+
+```html
+<template>
+  <ais-index
+    index-name="your_indexName"
+    :search-client="searchClient"
+  >
+    <!-- Add your InstantSearch components here. -->
+  </ais-index>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        searchClient: {
+          search(requests) {
+            // perform the requests
+            return response;
+          },
+          searchForFacetValues(requests) {
+            // perform the requests
+            return response;
+          },
+        },
+      },
+    },
+  };
+</script>
+```
+
 ### Create a search store from an Algolia helper instance
 
 The [Algolia helper](https://github.com/algolia/algoliasearch-helper-js) is a JavaScript library that is built on top of the Algolia API client. Its goal is to enable a simple API to achieve advanced queries while also providing utility methods and behavior like keeping track of the last result.