chore: merge pull request #990 from algolia/feat/vue3-compat

feat(vue 3): support vue 3

.babelrc

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

.circleci/config.yml

@@ -39,7 +39,7 @@ jobs:
           name: Build & Test packages size
           command: yarn test:build
 
-  test_unit:
+  test_unit_vue2:
     <<: *defaults
     steps:
       - checkout
@@ -54,6 +54,24 @@ jobs:
           name: Unit Tests
           command: yarn test --maxWorkers=4
 
+  test_unit_vue3:
+    <<: *defaults
+    steps:
+      - checkout
+      - run: *install_yarn_version
+      - restore_cache: *restore_yarn_cache
+      - run: *run_yarn_install
+      - run:
+          name: Install Vue3
+          command: ./scripts/test-vue3.sh
+      - save_cache: *save_yarn_cache
+      - run:
+          name: Lint & Code styles
+          command: yarn lint
+      - run:
+          name: Unit Tests
+          command: yarn test --maxWorkers=4
+
   test_e2e:
     <<: *defaults
     steps:
@@ -85,7 +103,8 @@ workflows:
   ci:
     jobs:
       - test_build
-      - test_unit
+      - test_unit_vue2
+      - test_unit_vue3
       - test_e2e
   release_if_needed:
     jobs:
@@ -94,3 +113,4 @@ workflows:
             branches:
               only:
                 - master
+                - feat/vue3-compat

.eslintignore

@@ -2,4 +2,9 @@ _book/
 docs/
 coverage/
 dist/
+vue2/
+vue3/
 examples/*/node_modules/*
+scripts/es-index-template.js
+website/examples/*
+website/stories/*

.gitignore

@@ -1,13 +1,22 @@
-dist/
-es/
-yarn-error.log
+# package manager
 node_modules/
-coverage
+yarn-error.log
+
+# OS-specific files
 .DS_store
+
+# cache
 .nuxt
+
+# secret
 .env
 
 # Generated files
 /website/stories
 /website/examples/*
 !/website/examples/index.html
+coverage
+
+# published files
+vue2/
+vue3/

CHANGELOG.md

@@ -1,3 +1,60 @@
+# [4.0.0-beta.3](https://github.com/algolia/vue-instantsearch/compare/v4.0.0-beta.2...v4.0.0-beta.3) (2021-08-20)
+
+
+### Bug Fixes
+
+* **vue 3:** pass renderToString to findResultsState instead of createServerRootMixin ([#1044](https://github.com/algolia/vue-instantsearch/issues/1044)) ([43aed4f](https://github.com/algolia/vue-instantsearch/commit/43aed4f50a0bdfda301e047e84badc6e41892e7c))
+
+
+
+# [4.0.0-beta.2](https://github.com/algolia/vue-instantsearch/compare/v4.0.0-beta.1...v4.0.0-beta.2) (2021-08-19)
+
+
+### Bug Fixes
+
+* **range-input:** remove default min and max values from `ais-range-input` (BREAKING CHANGE) ([#1036](https://github.com/algolia/vue-instantsearch/issues/1036)) ([38987ac](https://github.com/algolia/vue-instantsearch/commit/38987ac74548baf239a7ca25d34743b4027704cd))
+* **Server-side rendering:** let users pass renderToString to createServerRootMixin (BREAKING CHANGE) ([#1035](https://github.com/algolia/vue-instantsearch/issues/1035)) ([bc5f58a](https://github.com/algolia/vue-instantsearch/commit/bc5f58a81a205e856207e6cf1e45bc8d11605efd))
+
+
+
+# [4.0.0-beta.1](https://github.com/algolia/vue-instantsearch/compare/v3.8.1...v4.0.0-beta.1) (2021-07-29)
+
+
+Vue InstantSearch now supports Vue 3.
+
+## Breaking Change for Vue 2 users with SSR
+
+From now on, Vue InstantSearch [dynamically imports](https://github.com/algolia/vue-instantsearch/blob/b3ad4a3fc49e1e7470a0e6dd383c24b1dcb0b5bd/src/util/vue-compat/index-2.js#L23:L23) `vue-server-renderer/basic` instead of `require()`.
+
+* If you're using CJS output of Vue InstantSearch, it doesn't change anything for you because it gets transpiled to `require` for CJS output.
+* If you're using ESM output, it should probably be okay. We've tested "dynamic import" with Vue 2 (vue-cli) and Nuxt and it worked fine.
+
+If you have different setup or use different bundler, you may check if it still works for you. If not, please [create an issue](https://github.com/algolia/vue-instantsearch/issues/new/choose) with a reproducible example.
+
+## For Vue 3 users
+
+Vue InstantSearch includes two packages, one for vue 2 and another one for vue 3. So for vue 3, you need to import with this path:
+
+```js
+import InstantSearch from 'vue-instantsearch/vue3/es';
+```
+
+## Regarding vue-router@v4
+
+If you migrate your `vue-router` to v4 along with vue 3, you need to replace
+
+```js
+vueRouter.currentRoute.query
+```
+
+with
+
+```js
+vueRouter.currentRoute.value.query
+```
+
+due to [its change](https://next.router.vuejs.org/api/#currentroute).
+
 ## [3.8.1](https://github.com/algolia/vue-instantsearch/compare/v3.8.0...v3.8.1) (2021-07-12)
 
 

examples/nuxt/pages/search.vue

@@ -64,6 +64,16 @@ import {
   createServerRootMixin,
 } from 'vue-instantsearch'; // eslint-disable-line import/no-unresolved
 import algoliasearch from 'algoliasearch/lite';
+import _renderToString from 'vue-server-renderer/basic';
+
+function renderToString(app) {
+  return new Promise((resolve, reject) => {
+    _renderToString(app, (err, res) => {
+      if (err) reject(err);
+      resolve(res);
+    });
+  });
+}
 
 const searchClient = algoliasearch(
   'latency',
@@ -96,9 +106,11 @@ export default {
     }),
   ],
   serverPrefetch() {
-    return this.instantsearch.findResultsState(this).then(algoliaState => {
-      this.$ssrContext.nuxt.algoliaState = algoliaState;
-    });
+    return this.instantsearch
+      .findResultsState({ component: this, renderToString })
+      .then(algoliaState => {
+        this.$ssrContext.nuxt.algoliaState = algoliaState;
+      });
   },
   beforeMount() {
     const results = window.__NUXT__.algoliaState;

examples/ssr/src/main.js

@@ -4,6 +4,16 @@ import { createRouter } from './router';
 import { createServerRootMixin } from 'vue-instantsearch';
 import algoliasearch from 'algoliasearch/lite';
 import qs from 'qs';
+import _renderToString from 'vue-server-renderer/basic';
+
+function renderToString(app) {
+  return new Promise((resolve, reject) => {
+    _renderToString(app, (err, res) => {
+      if (err) reject(err);
+      resolve(res);
+    });
+  });
+}
 
 const searchClient = algoliasearch(
   'latency',
@@ -96,7 +106,7 @@ export async function createApp({
       }),
     ],
     serverPrefetch() {
-      return this.instantsearch.findResultsState(this);
+      return this.instantsearch.findResultsState({ component: this, renderToString });
     },
     beforeMount() {
       if (typeof window === 'object' && window.__ALGOLIA_STATE__) {

jest.setup.js

@@ -1,7 +1,9 @@
 import createSerializer from 'jest-serializer-html/createSerializer';
-import Vue from 'vue';
+import { isVue3, isVue2, Vue2 } from './src/util/vue-compat';
 
-Vue.config.productionTip = false;
+if (isVue2) {
+  Vue2.config.productionTip = false;
+}
 
 expect.addSnapshotSerializer(
   createSerializer({
@@ -10,3 +12,44 @@ expect.addSnapshotSerializer(
     },
   })
 );
+
+const toHaveEmptyHTML = wrapper => {
+  const html = wrapper.html();
+  if (
+    (isVue2 && html === '') ||
+    (isVue3 && ['<!---->', '<!--v-if-->'].includes(html))
+  ) {
+    return {
+      pass: true,
+    };
+  } else {
+    return {
+      pass: false,
+      message: () => `expected ${html} to be an empty HTML string`,
+    };
+  }
+};
+
+const toHaveBooleanAttribute = attribute => wrapper => {
+  // :hidden="true" becomes
+  // hidden="hidden" in Vue 2 and
+  // hidden="" in Vue 3.
+
+  // So we need this to write correct tests to match them in both versions.
+  const value = wrapper.attributes(attribute);
+  if ((isVue2 && value === attribute) || (isVue3 && value === '')) {
+    return { pass: true };
+  } else {
+    return {
+      pass: false,
+      message: () => `expected ${wrapper} to have \`${attribute}\` attribute`,
+    };
+  }
+};
+
+expect.extend({
+  toHaveEmptyHTML,
+  toBeDisabled: toHaveBooleanAttribute('disabled'),
+  toBeHidden: toHaveBooleanAttribute('hidden'),
+  toBeAutofocused: toHaveBooleanAttribute('autofocus'),
+});

package.json

@@ -16,18 +16,21 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "3.8.1",
+  "version": "4.0.0-beta.3",
   "files": [
-    "dist",
-    "src",
-    "es"
+    "vue2",
+    "vue3",
+    "src"
   ],
-  "main": "dist/vue-instantsearch.common.js",
-  "module": "es/src/instantsearch.js",
+  "main": "vue2/cjs",
+  "module": "vue2/es",
   "sideEffects": false,
   "repository": "https://github.com/algolia/vue-instantsearch",
   "scripts": {
-    "build": "rm -rf dist es && rollup -c",
+    "prebuild": "rm -rf vue2 vue3",
+    "build": "yarn build:vue2 && yarn build:vue3",
+    "build:vue2": "./scripts/build-vue2.sh",
+    "build:vue3": "./scripts/build-vue3.sh",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "storybook:build": "build-storybook -c .storybook -o website/stories",
     "examples:build": "yarn build && ./examples/build.sh",
@@ -46,19 +49,31 @@
   },
   "dependencies": {
     "algoliasearch-helper": "^3.1.0",
-    "instantsearch.js": "^4.25.0"
+    "instantsearch.js": "^4.27.2",
+    "mitt": "^2.1.0"
   },
   "peerDependencies": {
+    "@vue/server-renderer": "^3.1.2",
     "algoliasearch": ">= 3.32.0 < 5",
-    "vue": "^2.6.0",
+    "vue": "^2.6.0 || >=3.0.0-rc.0",
     "vue-server-renderer": "^2.6.11"
   },
+  "peerDependenciesMeta": {
+    "vue-server-renderer": {
+      "optional": true
+    },
+    "@vue/server-renderer": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@storybook/addon-actions": "3.4.11",
     "@storybook/addon-knobs": "3.4.11",
     "@storybook/addon-options": "3.4.11",
     "@storybook/vue": "3.4.11",
-    "@vue/test-utils": "1.0.0-beta.25",
+    "@vue/compiler-sfc": "3.0.11",
+    "@vue/test-utils": "1.2.1",
+    "@vue/test-utils2": "npm:@vue/[email protected]",
     "@wdio/cli": "^5.11.13",
     "@wdio/jasmine-framework": "^5.11.0",
     "@wdio/local-runner": "^5.11.13",
@@ -96,29 +111,40 @@
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-replace": "2.1.0",
     "rollup-plugin-terser": "4.0.4",
-    "rollup-plugin-vue": "3.0.0",
+    "rollup-plugin-vue2": "npm:[email protected]",
+    "rollup-plugin-vue3": "npm:[email protected]",
     "rollup-watch": "4.3.1",
     "shipjs": "0.20.0-beta.3",
-    "vue": "2.5.18",
+    "vue": "2.6.0",
     "vue-autosuggest": "1.8.1",
     "vue-jest": "2.6.0",
     "vue-json-tree": "0.3.3",
     "vue-loader": "14.2.2",
     "vue-router": "3.4.3",
+    "vue-router4": "npm:[email protected]",
     "vue-server-renderer": "^2.6.11",
     "vue-slider-component": "3.0.15",
-    "vue-template-compiler": "2.5.18",
+    "vue-template-compiler": "2.6.0",
     "vuetify": "1.5.3",
-    "vuex": "3.5.1"
+    "vuex": "3.5.1",
+    "vuex4": "npm:[email protected]"
   },
   "bundlesize": [
     {
-      "path": "./dist/vue-instantsearch.js",
-      "maxSize": "54 kB"
+      "path": "./vue2/umd/index.js",
+      "maxSize": "55.00 kB"
+    },
+    {
+      "path": "./vue2/cjs/index.js",
+      "maxSize": "17.00 kB"
+    },
+    {
+      "path": "./vue3/umd/index.js",
+      "maxSize": "56.50 kB"
     },
     {
-      "path": "./dist/vue-instantsearch.common.js",
-      "maxSize": "16.75 kB"
+      "path": "./vue3/cjs/index.js",
+      "maxSize": "18.50 kB"
     }
   ],
   "resolutions": {
@@ -130,9 +156,6 @@
       "js",
       "vue"
     ],
-    "moduleNameMapper": {
-      "^instantsearch.js/es$": "<rootDir>/__mocks__/instantsearch-es.js"
-    },
     "transformIgnorePatterns": [
       "node_modules/(?!(instantsearch\\.js|vue-json-tree))"
     ],