vue-instantsearch 4.2.0 → 4.3.3

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## [4.3.3](https://github.com/algolia/vue-instantsearch/compare/v4.3.2...v4.3.3) (2022-02-10)
+
+
+### Bug Fixes
+
+* **esm:** mark esm exports as type: module ([#1111](https://github.com/algolia/vue-instantsearch/issues/1111)) ([71c25d4](https://github.com/algolia/vue-instantsearch/commit/71c25d460e1b077b62ca41a59a5c4df7b713ec56))
+* **nuxt3:** forward `$nuxt` on the instance by default ([#1112](https://github.com/algolia/vue-instantsearch/issues/1112)) ([acda293](https://github.com/algolia/vue-instantsearch/commit/acda29326475bd1b73f12b058a0c02df00b8b239))
+
+
+
+## [4.3.2](https://github.com/algolia/vue-instantsearch/compare/v4.3.1...v4.3.2) (2022-01-31)
+
+
+### Bug Fixes
+
+* **ssr:** extend component correctly if at root (vue2) ([#1104](https://github.com/algolia/vue-instantsearch/issues/1104)) ([08b7124](https://github.com/algolia/vue-instantsearch/commit/08b71244c3bf7cf2cbd8183a671d1a589af75798)), closes [#1054](https://github.com/algolia/vue-instantsearch/issues/1054)
+
+
+
+## [4.3.1](https://github.com/algolia/vue-instantsearch/compare/v4.3.0...v4.3.1) (2022-01-11)
+
+
+### Bug Fixes
+
+* **dependencies:** update instantsearch.js requirement ([a36ae2b](https://github.com/algolia/vue-instantsearch/commit/a36ae2b964110f3e4bc98c39895dd31b79527701)), closes [#1096](https://github.com/algolia/vue-instantsearch/issues/1096)
+
+
+
+# [4.3.0](https://github.com/algolia/vue-instantsearch/compare/v4.2.0...v4.3.0) (2021-12-16)
+
+
+### Features
+
+* **dynamicWidgets:** pass parameters to connector ([#1093](https://github.com/algolia/vue-instantsearch/issues/1093)) ([247ed0f](https://github.com/algolia/vue-instantsearch/commit/247ed0f101b5dabd5eebf35a7b8c3a2504eef2e2))
+
+
+
 # [4.2.0](https://github.com/algolia/vue-instantsearch/compare/v4.1.1...v4.2.0) (2021-12-13)
 
 

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.2.0",
+  "version": "4.3.3",
   "files": [
     "vue2",
     "vue3",
@@ -28,9 +28,7 @@
   "repository": "https://github.com/algolia/vue-instantsearch",
   "scripts": {
     "prebuild": "rm -rf vue2 vue3",
-    "build": "yarn build:vue2 && yarn build:vue3",
-    "build:vue2": "./scripts/build-vue2.sh",
-    "build:vue3": "./scripts/build-vue3.sh",
+    "build": "rollup -c",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "storybook:build": "build-storybook -c .storybook -o website/stories",
     "examples:build": "yarn build && ./examples/build.sh",
@@ -48,7 +46,7 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "instantsearch.js": "^4.35.0",
+    "instantsearch.js": "^4.37.2",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -66,6 +64,7 @@
     }
   },
   "devDependencies": {
+    "@babel/core": "^7.17.0",
     "@storybook/addon-actions": "3.4.11",
     "@storybook/addon-knobs": "3.4.11",
     "@storybook/addon-options": "3.4.11",
@@ -75,6 +74,7 @@
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
     "@wdio/cli": "^5.11.13",
     "@wdio/jasmine-framework": "^5.11.0",
+    "@wdio/junit-reporter": "^5.11.7",
     "@wdio/local-runner": "^5.11.13",
     "@wdio/sauce-service": "^5.11.1",
     "@wdio/selenium-standalone-service": "^5.11.2",
@@ -95,7 +95,7 @@
     "eslint-plugin-jest": "22.3.0",
     "eslint-plugin-prettier": "3.0.0",
     "eslint-plugin-vue": "4.7.1",
-    "instantsearch-e2e-tests": "algolia/instantsearch-e2e-tests#v1.3.0",
+    "instantsearch-e2e-tests": "algolia/instantsearch-e2e-tests#v2.0.2",
     "instantsearch.css": "7.3.1",
     "jest": "23.6.0",
     "jest-serializer-html": "7.1.0",
@@ -104,6 +104,7 @@
     "lodash": "4.17.19",
     "prettier": "1.14.3",
     "rollup": "1.32.1",
+    "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-buble": "0.19.6",
     "rollup-plugin-commonjs": "10.0.1",
     "rollup-plugin-filesize": "9.0.0",

package/src/components/DynamicWidgets.js

@@ -50,6 +50,14 @@ export default {
       type: Function,
       default: undefined,
     },
+    facets: {
+      type: Array,
+      default: undefined,
+    },
+    maxValuesPerFacet: {
+      type: Number,
+      default: undefined,
+    },
   },
   render: renderCompat(function(h) {
     const components = new Map();
@@ -91,6 +99,8 @@ export default {
     widgetParams() {
       return {
         transformItems: this.transformItems,
+        facets: this.facets,
+        maxValuesPerFacet: this.maxValuesPerFacet,
         // we do not pass "widgets" to the connector, since Vue is in charge of rendering
         widgets: [],
       };

package/src/components/__tests__/DynamicWidgets.js

@@ -46,6 +46,51 @@ const MockHierarchicalMenu = {
   `,
 };
 
+it('passes arguments to connector', () => {
+  __setState(null);
+
+  const transformItems = items => items;
+  const facets = ['test'];
+  const maxValuesPerFacet = 100;
+  const wrapper = mount({
+    data() {
+      return { props: { transformItems, facets, maxValuesPerFacet } };
+    },
+    template: `
+      <DynamicWidgets v-bind="props">
+        <MockRefinementList attribute="test1"/>
+        <MockMenu attribute="test2"/>
+        <AisPanel>
+          <MockHierarchicalMenu :attributes="['test3', 'test4']" />
+        </AisPanel>
+      </DynamicWidgets>
+      `,
+    components: {
+      DynamicWidgets,
+      MockRefinementList,
+      MockMenu,
+      MockHierarchicalMenu,
+      AisPanel,
+    },
+  });
+
+  const dynamicWidgets = wrapper.findComponent(DynamicWidgets);
+
+  expect(dynamicWidgets.props()).toEqual({
+    classNames: undefined,
+    transformItems,
+    facets: ['test'],
+    maxValuesPerFacet: 100,
+  });
+
+  expect(dynamicWidgets.vm.widgetParams).toEqual({
+    transformItems,
+    facets: ['test'],
+    maxValuesPerFacet: 100,
+    widgets: [],
+  });
+});
+
 it('renders all children without state', () => {
   __setState(null);
 

package/src/util/__tests__/createServerRootMixin.test.js

@@ -660,6 +660,60 @@ Array [
         await renderToString(wrapper);
       });
 
+      it('forwards nuxt', async () => {
+        const searchClient = createFakeClient();
+
+        let nuxt = 0;
+        // every time the function gets called, we get a different "nuxt"
+        // this can be used to assert both "nuxt" objects are equal
+        const getNuxtCounter = () => ++nuxt;
+
+        // there are two renders of App, each with an assertion
+        expect.assertions(2);
+
+        const App = {
+          mixins: [
+            {
+              beforeCreate() {
+                this.$nuxt = getNuxtCounter();
+              },
+            },
+            forceIsServerMixin,
+            createServerRootMixin({
+              searchClient,
+              indexName: 'hello',
+            }),
+          ],
+          data() {
+            expect(this.$nuxt).toEqual(1);
+            return {};
+          },
+          render: renderCompat(h =>
+            h(InstantSearchSsr, {}, [
+              h(Configure, {
+                attrs: {
+                  hitsPerPage: 100,
+                },
+              }),
+              h(SearchBox),
+            ])
+          ),
+          serverPrefetch() {
+            return this.instantsearch.findResultsState({
+              component: this,
+              renderToString,
+            });
+          },
+        };
+
+        const wrapper = createSSRApp({
+          mixins: [forceIsServerMixin],
+          render: renderCompat(h => h(App)),
+        });
+
+        await renderToString(wrapper);
+      });
+
       it('searches only once', async () => {
         const searchClient = createFakeClient();
         const app = {
@@ -719,6 +773,82 @@ Array [
     },
   },
 ]
+`);
+      });
+
+      it('works when component is at root (and therefore has no $vnode)', async () => {
+        const searchClient = createFakeClient();
+        let mainIndex;
+
+        const app = {
+          render: renderCompat(h =>
+            /**
+             * This code triggers this warning in Vue 3:
+             * > Non-function value encountered for default slot. Prefer function slots for better performance.
+             *
+             * To fix it, replace the third argument
+             * > [h(...), h(...)]
+             * with
+             * > { default: () => [h(...), h(...)] }
+             *
+             * but it's not important (and not compatible in vue2), we're leaving it as-is.
+             */
+            h(InstantSearchSsr, {}, [
+              h(Configure, {
+                attrs: {
+                  hitsPerPage: 100,
+                },
+              }),
+              h(SearchBox),
+            ])
+          ),
+        };
+
+        const wrapper = createSSRApp({
+          mixins: [
+            forceIsServerMixin,
+            createServerRootMixin({
+              searchClient,
+              indexName: 'hello',
+            }),
+          ],
+          serverPrefetch() {
+            return this.instantsearch.findResultsState({
+              component: this,
+              renderToString,
+            });
+          },
+          created() {
+            mainIndex = this.instantsearch.mainIndex;
+          },
+          render: renderCompat(h => h(app)),
+        });
+
+        await renderToString(wrapper);
+
+        expect(mainIndex.getWidgetState()).toMatchInlineSnapshot(`
+Object {
+  "hello": Object {
+    "configure": Object {
+      "hitsPerPage": 100,
+    },
+  },
+}
+`);
+
+        expect(searchClient.search).toHaveBeenCalledTimes(1);
+        expect(searchClient.search.mock.calls[0][0]).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "indexName": "hello",
+    "params": Object {
+      "facets": Array [],
+      "hitsPerPage": 100,
+      "query": "",
+      "tagFilters": "",
+    },
+  },
+]
 `);
       });
     }

package/src/util/createInstantSearchComponent.js

@@ -1,7 +1,7 @@
 import { createSuitMixin } from '../mixins/suit';
 import { version } from '../../package.json'; // rollup does pick only what needed from json
 import { _objectSpread } from './polyfills';
-import { isVue3, version as vueVersion } from '../util/vue-compat';
+import { isVue3, version as vueVersion } from './vue-compat';
 
 export const createInstantSearchComponent = component =>
   _objectSpread(

package/src/util/createServerRootMixin.js

@@ -1,5 +1,5 @@
 import instantsearch from 'instantsearch.js/es';
-import { isVue3, isVue2, Vue2, createSSRApp } from '../util/vue-compat';
+import { isVue3, isVue2, Vue2, createSSRApp } from './vue-compat';
 import { warn } from './warn';
 
 function walkIndex(indexWidget, visit) {
@@ -41,7 +41,7 @@ function defaultCloneComponent(componentInstance, { mixins = [] } = {}) {
 
   if (isVue3) {
     const appOptions = Object.assign({}, componentInstance.$options, options);
-    appOptions.mixins = [...appOptions.mixins, ...mixins];
+    appOptions.mixins = [...mixins, ...appOptions.mixins];
     app = createSSRApp(appOptions);
     if (componentInstance.$router) {
       app.use(componentInstance.$router);
@@ -56,7 +56,10 @@ function defaultCloneComponent(componentInstance, { mixins = [] } = {}) {
 
     const Extended = componentInstance.$vnode
       ? componentInstance.$vnode.componentOptions.Ctor.extend(options)
-      : Vue2.component(Object.assign({}, componentInstance.$options, options));
+      : Vue2.component(
+          options.name,
+          Object.assign({}, componentInstance.$options, options)
+        );
 
     app = new Extended({
       propsData: componentInstance.$options.propsData,
@@ -101,6 +104,13 @@ function augmentInstantSearch(instantSearchOptions, cloneComponent) {
         app = cloneComponent(component, {
           mixins: [
             {
+              beforeCreate() {
+                if (component.$nuxt) {
+                  // In case of Nuxt (3), we ensure the context is shared between
+                  // the real and cloned component
+                  this.$nuxt = component.$nuxt;
+                }
+              },
               created() {
                 instance = this.instantsearch;
 

package/src/util/vue-compat/index.js

@@ -1,9 +1,9 @@
 /*
   By default, we maintain this repository based on Vue 2.
-  That's why this file is exporting from `index-2`,
+  That's why this file is exporting from `index-vue2`,
   which includes all the variables and methods for Vue 2.
   When `scripts/build-vue3.sh` runs, it will replace with
-  > export * from './index-3';
+  > export * from './index-vue3';
   and revert it back after finished.
 */
-export * from './index-2';
+export * from './index-vue2';