feat: server side rendering

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
+  presets: ['es2015'],
 }

.gitignore

@@ -3,3 +3,4 @@ yarn-error.log
 node_modules/
 coverage
 .DS_store
+.nuxt

__mocks__/instantsearch-es.js

@@ -0,0 +1,49 @@
+/* eslint-disable import/no-commonjs */
+const isPlainObject = require('lodash/isPlainObject');
+
+class RoutingManager {
+  constructor(routing) {
+    this._routing = routing;
+  }
+}
+
+class Helper {
+  constructor() {
+    this.search = jest.fn();
+    this.setClient = jest.fn(() => this);
+    this.setIndex = jest.fn(() => this);
+  }
+}
+
+const fakeInstantSearch = jest.fn(
+  ({
+    indexName,
+    searchClient,
+    routing,
+    stalledSearchDelay,
+    searchFunction,
+  }) => {
+    if (!searchClient && !isPlainObject(searchClient)) {
+      throw new Error('need searchClient to be a plain object');
+    }
+    if (!indexName) {
+      throw new Error('need indexName to be a string');
+    }
+
+    const instantsearchInstance = {
+      _stalledSearchDelay: stalledSearchDelay || 200,
+      _searchFunction: searchFunction,
+      routing: new RoutingManager(routing),
+      helper: new Helper(),
+      client: searchClient,
+      start: jest.fn(() => {
+        instantsearchInstance.started = true;
+      }),
+      dispose: jest.fn(),
+    };
+
+    return instantsearchInstance;
+  }
+);
+
+module.exports = fakeInstantSearch;

examples/build.sh

@@ -9,13 +9,17 @@ cd $(dirname `which $0`)
 
 for dir in ./* ; do
   if [ -d "$dir" ]; then
-      name=$(basename "$dir")
-      echo "building example: $name"
-      cd $name
+    name=$(basename "$dir")
+    echo "building example: $name"
+    cd $name
+    if [[ "$name" != "nuxt" && "$name" != "ssr" ]]; then
       yarn
       yarn build
       cp -R dist ../../docs/dist/examples/$name
-      cd ..
+    else
+      echo "build of $name skipped"
+    fi
+    cd ..
   fi
 done
 

examples/nuxt/README.md

@@ -0,0 +1,22 @@
+# nuxt
+
+> Vue InstantSearch & Nuxt
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn run dev
+
+# build for production and launch server
+$ yarn run build
+$ yarn start
+
+# generate static project
+$ yarn run generate
+```
+
+For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).

examples/nuxt/layouts/README.md

@@ -0,0 +1,7 @@
+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

examples/nuxt/layouts/default.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div id="nav">
+      <nuxt-link to="/">Home</nuxt-link> |
+      <nuxt-link to="/search">Search</nuxt-link>
+    </div>
+    <nuxt />
+  </div>
+</template>
+
+<style>
+html {
+  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, sans-serif;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+#nav {
+  text-align: center;
+}
+</style>

examples/nuxt/nuxt.config.js

@@ -0,0 +1,48 @@
+/* eslint-disable import/no-commonjs */
+const pkg = require('./package');
+
+module.exports = {
+  mode: 'universal',
+
+  /*
+  ** Headers of the page
+  */
+  head: {
+    title: pkg.name,
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: pkg.description },
+    ],
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+  },
+
+  /*
+  ** Customize the progress-bar color
+  */
+  loading: { color: '#fff' },
+
+  /*
+  ** Global CSS
+  */
+  css: [],
+
+  /*
+  ** Plugins to load before mounting the App
+  */
+  plugins: [],
+
+  /*
+  ** Nuxt.js modules
+  */
+  modules: [],
+
+  /*
+  ** Build configuration
+  */
+  build: {
+    /*
+    ** You can extend webpack config here
+    */
+  },
+};

examples/nuxt/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "nuxt",
+  "version": "1.0.0",
+  "description": "Vue InstantSearch & Nuxt",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "algoliasearch": "^3.32.0",
+    "cross-env": "^5.2.0",
+    "nuxt": "^2.0.0",
+    "vue-instantsearch": "^2.0.0-beta.2"
+  },
+  "devDependencies": {
+    "nodemon": "^1.11.0"
+  }
+}

examples/nuxt/pages/README.md

@@ -0,0 +1,6 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the `*.vue` files inside this directory and create the router of your application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

examples/nuxt/pages/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <h2>
+    Go to the search page: <nuxt-link to="/search">"/search"</nuxt-link>
+  </h2>
+</template>
+
+<style>
+h2 {
+  text-align: center;
+}
+</style>

examples/nuxt/pages/search.vue

@@ -0,0 +1,102 @@
+<template>
+  <ais-instant-search-ssr>
+    <ais-search-box />
+    <ais-stats />
+    <ais-refinement-list attribute="genre" />
+    <ais-hits>
+      <template
+        slot="item"
+        slot-scope="{ item }"
+      >
+        <ais-highlight
+          attribute="title"
+          :hit="item"
+        />
+        <p class="year">{{ item.year }}</p>
+        <p class="genre">
+          <span
+            v-for="genre in item.genre"
+            :key="genre"
+            class="badge"
+          >
+            {{ genre }}
+          </span>
+        </p>
+      </template>
+    </ais-hits>
+    <ais-pagination />
+  </ais-instant-search-ssr>
+</template>
+
+<script>
+import {
+  AisInstantSearchSsr,
+  AisRefinementList,
+  AisHits,
+  AisHighlight,
+  AisSearchBox,
+  AisStats,
+  AisPagination,
+  createInstantSearch,
+} from '../../../src/instantsearch'; // TODO: move this to 'vue-instantsearch'
+import algoliasearch from 'algoliasearch/lite';
+
+const searchClient = algoliasearch(
+  'latency',
+  '6be0576ff61c053d5f9a3225e2a90f76'
+);
+
+const { instantsearch, rootMixin } = createInstantSearch({
+  searchClient,
+  indexName: 'movies',
+});
+
+export default {
+  asyncData() {
+    return instantsearch
+      .findResultsState({
+        query: 'hi',
+        hitsPerPage: 5,
+        disjunctiveFacets: ['genre'],
+        disjunctiveFacetsRefinements: { genre: ['Comedy'] },
+      })
+      .then(() => ({
+        algoliaState: instantsearch.getState(),
+      }));
+  },
+  beforeMount() {
+    // Nuxt will merge `asyncData` and `data` on the client
+    instantsearch.hydrate(this.algoliaState);
+  },
+  mixins: [rootMixin],
+  components: {
+    AisInstantSearchSsr,
+    AisRefinementList,
+    AisHits,
+    AisHighlight,
+    AisSearchBox,
+    AisStats,
+    AisPagination,
+  },
+  head() {
+    return {
+      link: [
+        {
+          rel: 'stylesheet',
+          href:
+            'https://unpkg.com/instantsearch.css@7.1.0/themes/algolia-min.css',
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style>
+.ais-Hits-list {
+  text-align: left;
+}
+.ais-InstantSearch {
+  margin: 1em;
+}
+</style>

examples/nuxt/static/README.md

@@ -0,0 +1,10 @@
+# STATIC
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your static files.
+Each file inside this directory is mapped to `/`.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).