feat(search-client): use search client

README.md

@@ -25,6 +25,7 @@ InstantSearch.js is a vanilla JavaScript library that lets you create an instant
 
 - [Why](#why)
 - [Getting started](#getting-started)
+- [Installation](#installation)
 - [Documentation](#documentation)
 - [Demos](#demos)
 - [Playground](#playground)
@@ -52,9 +53,8 @@ Using InstantSearch.js is as simple as adding this JavaScript code to your page:
 ```javascript
 // 1. Instantiate the search
 const search = instantsearch({
-  appId: 'latency',
-  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
   indexName: 'instant_search',
+  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
 });
 
 // 2. Create an interactive search box
@@ -97,6 +97,14 @@ search.start();
 
 To learn more about the library, follow the [getting started](https://community.algolia.com/instantsearch.js/v2/getting-started.html) guide or check how to [add it to your own project](https://community.algolia.com/instantsearch.js/v2/guides/usage.html).
 
+## Installation
+
+```sh
+npm install instantsearch.js algoliasearch
+# or
+yarn add instantsearch.js algoliasearch
+```
+
 ## Documentation
 
 The documentation is available at [community.algolia.com/instantsearch.js](https://community.algolia.com/instantsearch.js).

dev/app/builtin/stories/hits.stories.js

@@ -1,6 +1,7 @@
 /* eslint-disable import/default */
 
 import { storiesOf } from 'dev-novel';
+import algoliasearch from 'algoliasearch/lite';
 import instantsearch from '../../../../index';
 import { wrapWithHits } from '../../utils/wrap-with-hits.js';
 
@@ -64,9 +65,11 @@ export default () => {
           );
         },
         {
-          appId: 'KY4PR9ORUL',
-          apiKey: 'a5ca312adab3b79e14054154efa00b37',
           indexName: 'highlight_array',
+          searchClient: algoliasearch(
+            'KY4PR9ORUL',
+            'a5ca312adab3b79e14054154efa00b37'
+          ),
         }
       )
     );

dev/app/utils/wrap-with-hits.js

@@ -1,6 +1,7 @@
 /* eslint-disable import/default */
 
 import { action } from 'dev-novel';
+import algoliasearch from 'algoliasearch/lite';
 import instantsearch from '../../../index.js';
 import item from './item.html';
 import empty from './no-results.html';
@@ -10,18 +11,16 @@ export const wrapWithHits = (
   instantSearchConfig = {}
 ) => container => {
   const {
-    appId = 'latency',
-    apiKey = '6be0576ff61c053d5f9a3225e2a90f76',
     indexName = 'instant_search',
+    searchClient = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
     searchParameters = {},
     ...otherInstantSearchConfig
   } = instantSearchConfig;
 
   const urlLogger = action('Routing state');
   window.search = instantsearch({
-    appId,
-    apiKey,
     indexName,
+    searchClient,
     searchParameters: {
       hitsPerPage: 3,
       ...searchParameters,

docgen/assets/js/bindRunExamples.js

@@ -1,16 +1,17 @@
 import instantsearch from "../../../src/lib/main.js";
+import algoliasearch from "algoliasearch/lite";
 import capitalize from "lodash/capitalize";
 
 window.instantsearch = instantsearch;
 window.search = instantsearch({
-  appId: "latency",
-  apiKey: "6be0576ff61c053d5f9a3225e2a90f76",
-  indexName: "instant_search",
-  urlSync: false,
+  indexName: window.searchConfig.indexName || "instant_search",
+  searchClient: algoliasearch(
+    window.searchConfig.appId || "latency",
+    window.searchConfig.apiKey || "6be0576ff61c053d5f9a3225e2a90f76"
+  ),
   searchParameters: {
-    hitsPerPage: 3
-  },
-  ...window.searchConfig
+    hitsPerPage: 3,
+  }
 });
 
 const el = html => {

docgen/src/examples/calendar-widget/app.js

@@ -1,10 +1,9 @@
 const ONE_DAY_IN_MS = 3600 * 24 * 1000;
 
 const search = instantsearch({
-  appId: 'latency',
-  apiKey: '059c79ddd276568e990286944276464a',
   indexName: 'concert_events_instantsearchjs',
-  routing: true
+  searchClient: algoliasearch('latency', '059c79ddd276568e990286944276464a'),
+  routing: true,
 });
 
 search.addWidget(

docgen/src/examples/calendar-widget/index.html

@@ -42,7 +42,8 @@ <h3>Dates</h3>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
   <script src="https://unpkg.com/[email protected]/public/js/Calendar.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
   <script src="app.js"></script>
 </body>
 

docgen/src/examples/e-commerce/index.html

@@ -55,4 +55,5 @@
 </div>
 
 <script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js" async></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="search.js"></script>

docgen/src/examples/e-commerce/search.js

@@ -1,10 +1,9 @@
 'use strict';
-/* global instantsearch */
+/* global instantsearch algoliasearch */
 
 var search = instantsearch({
-  appId: 'latency',
-  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
   indexName: 'instant_search',
+  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
   routing: true
 });
 
@@ -143,21 +142,6 @@ search.addWidget(
   })
 );
 
-search.addWidget(
-  instantsearch.widgets.priceRanges({
-    container: '#prices',
-    attributeName: 'price',
-    cssClasses: {
-      list: 'nav nav-list',
-      count: 'badge pull-right',
-      active: 'active'
-    },
-    templates: {
-      header: '<div class="facet-title">Prices</div class="facet-title">'
-    }
-  })
-);
-
 search.addWidget(
   instantsearch.widgets.sortBy({
     container: '#sort-by',
@@ -170,17 +154,17 @@ search.addWidget(
   })
 );
 
-search.addWidget(
-  instantsearch.widgets.clearAll({
-    container: '#clear-all',
-    templates: {
-      link: '<i class="fa fa-eraser"></i> Clear all filters'
-    },
-    cssClasses: {
-      root: 'btn btn-block btn-default'
-    },
-    autoHideContainer: true
-  })
-);
+// search.addWidget(
+//   instantsearch.widgets.clearAll({
+//     container: '#clear-all',
+//     templates: {
+//       link: '<i class="fa fa-eraser"></i> Clear all filters'
+//     },
+//     cssClasses: {
+//       root: 'btn btn-block btn-default'
+//     },
+//     autoHideContainer: true
+//   })
+// );
 
 search.start();

docgen/src/examples/getting-started-boilerplate/index.html

@@ -41,7 +41,8 @@
     </div>
 
     <!-- js -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
     <script src="app.js"></script>
   </body>
 </html>

docgen/src/examples/media/index.html

@@ -31,4 +31,5 @@ <h5><i class="fa fa-chevron-right"></i> Ratings</h5>
       <div id="pagination" class="text-center"></div>
     </article>
   </section>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
   <script src="search.js"></script>

docgen/src/examples/media/search.js

@@ -1,9 +1,8 @@
-/* global instantsearch */
+/* global instantsearch algoliasearch */
 
 var search = instantsearch({
-  appId: 'latency',
-  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
   indexName: 'movies',
+  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
   routing: true
 });
 

docgen/src/examples/tourism/index.html

@@ -72,5 +72,5 @@
 <script src="https://cdn.jsdelivr.net/react/15.5.4/react-dom.min.js" async></script>
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBawL8VbstJDdU5397SUX7pEt9DslAwWgQ" async></script>
 <script src="https://cdn.jsdelivr.net/instantsearch-googlemaps/1/instantsearch-googlemaps.min.js" async></script>
-
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="search.js"></script>

docgen/src/examples/tourism/search.js

@@ -1,9 +1,8 @@
-/* global instantsearch */
+/* global instantsearch algoliasearch */
 
 window.addEventListener('load', function() {
   var search = instantsearch({
-    appId: 'latency',
-    apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
+    searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
     indexName: 'airbnb',
     routing: true
   });

docgen/src/getting-started.md.hbs

@@ -60,9 +60,10 @@ The jsDeliver CDN is highly available with [over 110 locations](https://www.jsde
 If you have a JavaScript build system, you can install **InstantSearch.js** from NPM:
 
 ```javascript
-// `npm install instantsearch.js --save` OR
-// `yarn add instantsearch.js`
+// `npm install instantsearch.js algoliasearch` OR
+// `yarn add instantsearch.js algoliasearch`
 
+const algoliasearch = require('algoliasearch/lite');
 const instantsearch = require('instantsearch.js');
 ```
 
@@ -86,9 +87,8 @@ To initialize with the credentials proposed at the beginning:
 
 ```javascript
 const search = instantsearch({
-  appId: 'latency',
-  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
   indexName: 'instant_search',
+  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
   routing: true
 });
 

docgen/src/guides/angular-integration.md

@@ -70,9 +70,8 @@ import instantsearch from 'instantsearch.js/es';
 @Injectable()
 export class InstantSearchService {
   search = instantsearch({
-    appId: 'latency',
-    apiKey: '3d9875e51fbd20c7754e65422f7ce5e1',
     indexName: 'bestbuy',
+    searchClient: algoliasearch('latency', '3d9875e51fbd20c7754e65422f7ce5e1'),
     urlSync: true
   });
 

docgen/src/guides/custom-widget.md

@@ -117,9 +117,8 @@ the DOM is already set up. You can [see the example live](https://jsfiddle.net/b
 
 ```javascript
 const search = instantsearch({
-  appId: 'latency',
-  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
   indexName: 'movies',
+  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
 });
 
 search.addWidget({

docgen/src/guides/opensearch.md

@@ -35,9 +35,8 @@ started, you need to add this to the initialization of InstantSearch.js:
 
 ```diff
 const search = instantsearch({
-  appId: opts.appId,
-  apiKey: opts.apiKey,
   indexName: opts.indexName,
+  searchClient: algoliasearch(opts.appId, opts.apiKey),
 + urlSync: true,
 });
 ```

functional-tests/app/app.js

@@ -1,10 +1,9 @@
-/* global instantsearch */
+/* global instantsearch algoliasearch */
 /* eslint-disable object-shorthand, prefer-template, prefer-arrow-callback */
 
 var search = instantsearch({ // eslint-disable-line
-  appId: 'latency',
-  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
   indexName: 'instant_search',
+  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
   routing: true,
   searchParameters: {
     hitsPerPage: 6,

package.json

@@ -52,6 +52,7 @@
     "es"
   ],
   "devDependencies": {
+    "algoliasearch": "3.30.0",
     "argos-cli": "0.0.9",
     "autodll-webpack-plugin": "0.3.9",
     "autoprefixer": "8.1.0",
@@ -129,7 +130,6 @@
     "webpack-dev-server": "2.11.2"
   },
   "dependencies": {
-    "algoliasearch": "3.27.0",
     "algoliasearch-helper": "2.26.0",
     "classnames": "2.2.5",
     "events": "1.1.0",