vue-instantsearch 4.25.0 → 4.26.0

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.25.0",
+  "version": "4.26.0",
   "files": [
     "vue2",
     "vue3",
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@swc/helpers": "0.5.18",
-    "instantsearch-ui-components": "0.24.0",
-    "instantsearch.js": "4.94.0",
+    "instantsearch-ui-components": "0.26.0",
+    "instantsearch.js": "4.96.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -62,9 +62,9 @@
     "@vue/test-utils": "1.3.0",
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
     "algoliasearch": "5.1.1",
-    "algoliasearch-helper": "3.28.1",
+    "algoliasearch-helper": "3.29.0",
     "babel-preset-vue": "2.0.2",
-    "instantsearch.css": "8.14.0",
+    "instantsearch.css": "8.16.0",
     "rollup-plugin-vue2": "npm:rollup-plugin-vue@4.3.2",
     "rollup-plugin-vue3": "npm:rollup-plugin-vue@6.0.0",
     "vue": "2.7.14",
@@ -81,5 +81,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "f80018c93d613832ccde1cdf98dc688140239865"
+  "gitHead": "17e816d7f2c0c3ace2552f9e5322a2e45d6c3492"
 }

package/src/__tests__/index.js

@@ -46,7 +46,7 @@ function getAllComponents() {
 
     try {
       suitClass = mixins
-        .find((mixin) => mixin.methods && mixin.methods.suit)
+        .find(mixin => mixin.methods && mixin.methods.suit)
         .methods.suit();
     } catch (e) {
       /* no suit class, so will fail the assertions */
@@ -78,17 +78,21 @@ function getAllComponents() {
         props.trackedFilters = {};
       } else if (name === 'AisIndex') {
         props.indexName = 'indexName';
+      } else if (name === 'AisFeeds') {
+        props.searchScope = 'global';
       } else {
         props.attribute = 'attr';
       }
 
       const Component = {
-        render: renderCompat((h) =>
+        render: renderCompat(h =>
           h(
             AisInstantSearch,
             {
               props: {
-                indexName: 'instant_search',
+                ...(name === 'AisFeeds'
+                  ? { compositionID: 'my-composition' }
+                  : { indexName: 'instant_search' }),
                 searchClient: {
                   search() {
                     return new Promise({ results: [] });

package/src/components/Feeds.js

@@ -0,0 +1,180 @@
+import { createFeedContainer } from 'instantsearch.js/es/connectors/feeds/FeedContainer';
+import { connectFeeds } from 'instantsearch.js/es/connectors/index';
+
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { isVue3, renderCompat, getScopedSlot } from '../util/vue-compat';
+
+const AisFeedProvider = {
+  name: 'AisFeedProvider',
+  props: {
+    feedContainer: {
+      type: Object,
+      required: true,
+    },
+  },
+  provide() {
+    return {
+      $_ais_getParentIndex: () => this.feedContainer,
+    };
+  },
+  render: renderCompat(function(h) {
+    const defaultSlot = getScopedSlot(this, 'default');
+    return h('div', {}, defaultSlot ? defaultSlot() : []);
+  }),
+};
+
+export default {
+  name: 'AisFeeds',
+  mixins: [
+    createWidgetMixin(
+      {
+        connector: connectFeeds,
+      },
+      {
+        $$widgetType: 'ais.feeds',
+      }
+    ),
+    createSuitMixin({ name: 'Feeds' }),
+  ],
+  props: {
+    searchScope: {
+      type: String,
+      required: true,
+    },
+    transformFeeds: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      feedContainers: new Map(),
+      removalTimer: null,
+      pendingRemovals: new Map(),
+    };
+  },
+  watch: {
+    state(newState) {
+      if (!newState) return;
+      this.reconcileContainers(newState.feedIDs || []);
+    },
+  },
+  [isVue3 ? 'beforeUnmount' : 'beforeDestroy']() {
+    if (this.removalTimer !== null) {
+      clearTimeout(this.removalTimer);
+      this.removalTimer = null;
+    }
+
+    const toRemove = Array.from(
+      new Set([
+        ...this.feedContainers.values(),
+        ...this.pendingRemovals.values(),
+      ])
+    );
+    this.pendingRemovals.clear();
+    this.feedContainers.clear();
+    if (toRemove.length > 0) {
+      this.getParentIndex().removeWidgets(toRemove);
+    }
+  },
+  methods: {
+    reconcileContainers(feedIDs) {
+      const parentIndex = this.getParentIndex();
+      const activeFeedIDs = new Set(feedIDs);
+
+      // Remove disappeared feeds (deferred)
+      const toRemove = [];
+      this.feedContainers.forEach((container, id) => {
+        if (!activeFeedIDs.has(id)) {
+          toRemove.push([id, container]);
+          this.feedContainers.delete(id);
+        }
+      });
+      if (toRemove.length > 0) {
+        toRemove.forEach(([id, container]) => {
+          this.pendingRemovals.set(id, container);
+        });
+
+        if (this.removalTimer !== null) {
+          clearTimeout(this.removalTimer);
+        }
+
+        this.removalTimer = setTimeout(() => {
+          const widgetsToRemove = Array.from(this.pendingRemovals.values());
+          this.pendingRemovals.clear();
+          this.removalTimer = null;
+
+          if (widgetsToRemove.length > 0) {
+            parentIndex.removeWidgets(widgetsToRemove);
+          }
+        }, 0);
+      }
+
+      // Create new FeedContainers (synchronous — must be registered before render)
+      const toAdd = [];
+      feedIDs.forEach(feedID => {
+        if (!this.feedContainers.has(feedID)) {
+          const pendingContainer = this.pendingRemovals.get(feedID);
+          if (pendingContainer) {
+            this.pendingRemovals.delete(feedID);
+            this.feedContainers.set(feedID, pendingContainer);
+            return;
+          }
+
+          const container = createFeedContainer(
+            feedID,
+            parentIndex,
+            this.instantSearchInstance
+          );
+          this.feedContainers.set(feedID, container);
+          toAdd.push(container);
+        }
+      });
+      if (toAdd.length > 0) {
+        parentIndex.addWidgets(toAdd);
+      }
+    },
+  },
+  render: renderCompat(function(h) {
+    if (!this.state) {
+      return h('div', { class: [this.suit()] });
+    }
+
+    const feedIDs = this.state.feedIDs || [];
+    const defaultSlot = getScopedSlot(this, 'default');
+
+    const children = feedIDs.map(feedID => {
+      const container = this.feedContainers.get(feedID);
+      if (!container || !defaultSlot) {
+        return null;
+      }
+
+      const slotContent = defaultSlot({ feedID });
+
+      return h(
+        AisFeedProvider,
+        isVue3
+          ? {
+              key: feedID,
+              feedContainer: container,
+              scopedSlots: {
+                default: () => slotContent,
+              },
+            }
+          : { key: feedID, props: { feedContainer: container } },
+        slotContent
+      );
+    });
+
+    return h('div', { class: [this.suit()] }, children);
+  }),
+  computed: {
+    widgetParams() {
+      return {
+        searchScope: this.searchScope,
+        transformFeeds: this.transformFeeds,
+      };
+    },
+  },
+};

package/src/components/__tests__/Feeds-integration.js

@@ -0,0 +1,65 @@
+/**
+ * @jest-environment @instantsearch/testutils/jest-environment-jsdom.ts
+ */
+
+jest.unmock('instantsearch.js/es');
+
+import { createCompositionClient } from '@instantsearch/mocks';
+
+import { mount, nextTick } from '../../../test/utils';
+import Feeds from '../Feeds';
+import InstantSearch from '../InstantSearch';
+
+const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+describe('AisFeeds (integration)', () => {
+  it('registers feed containers and scopes slot descendants', async () => {
+    const wrapper = mount({
+      data() {
+        return {
+          searchClient: createCompositionClient({}),
+          indexName: 'indexName',
+          compositionID: 'my-composition',
+        };
+      },
+      template: `
+        <InstantSearch
+          v-bind="{ searchClient, indexName, compositionID }"
+        >
+          <Feeds search-scope="global" v-slot="{ feedID }">
+            <ScopedFeed :feedid="feedID || 'default'" />
+          </Feeds>
+        </InstantSearch>
+      `,
+      components: {
+        Feeds,
+        InstantSearch,
+        ScopedFeed: {
+          name: 'ScopedFeed',
+          inject: ['$_ais_getParentIndex'],
+          props: {
+            feedid: {
+              type: String,
+              required: true,
+            },
+          },
+          template: `<div class="scoped-feed">{{ feedid }}:{{ $_ais_getParentIndex().getIndexId() }}</div>`,
+        },
+      },
+    });
+
+    await wait(20);
+    await nextTick();
+
+    expect(wrapper.findAll('.scoped-feed')).toHaveLength(1);
+    expect(wrapper.find('.scoped-feed').text()).toBe('default:');
+
+    const widgets = wrapper
+      .findComponent(InstantSearch)
+      .vm.instantSearchInstance.mainIndex.getWidgets();
+    expect(widgets.some(widget => widget.$$type === 'ais.feeds')).toBe(true);
+    expect(widgets.some(widget => widget.$$type === 'ais.feedContainer')).toBe(
+      true
+    );
+  });
+});

package/src/components/__tests__/Feeds.js

@@ -0,0 +1,221 @@
+/**
+ * @jest-environment @instantsearch/testutils/jest-environment-jsdom.ts
+ */
+
+import { mount, nextTick } from '../../../test/utils';
+import { __setState } from '../../mixins/widget';
+import Feeds from '../Feeds';
+
+jest.mock('../../mixins/widget');
+jest.mock('instantsearch.js/es/connectors/feeds/FeedContainer', () => ({
+  createFeedContainer: jest.fn(feedID => ({ __feedID: feedID })),
+}));
+
+describe('AisFeeds', () => {
+  beforeEach(() => {
+    __setState(null);
+  });
+
+  it('passes arguments to connector', () => {
+    const transformFeeds = feeds => feeds;
+    const wrapper = mount(Feeds, {
+      propsData: {
+        searchScope: 'global',
+        transformFeeds,
+      },
+    });
+
+    expect(wrapper.vm.widgetParams).toEqual({
+      searchScope: 'global',
+      transformFeeds,
+    });
+  });
+
+  it('renders slot content in feed order and updates when order changes', async () => {
+    const parentIndex = {
+      addWidgets: jest.fn(),
+      removeWidgets: jest.fn(),
+    };
+
+    const wrapper = mount({
+      components: { Feeds },
+      template: `
+        <Feeds search-scope="global" v-slot="{ feedID }">
+          <div class="slot-feed">{{ feedID }}</div>
+        </Feeds>
+      `,
+    });
+
+    const feedsComponent = wrapper.findComponent(Feeds).vm;
+    feedsComponent.getParentIndex = () => parentIndex;
+    feedsComponent.state = { feedIDs: ['products', 'articles'] };
+    await nextTick();
+
+    const feeds = wrapper.findAll('.slot-feed');
+    expect(feeds).toHaveLength(2);
+    expect(feeds.at(0).text()).toBe('products');
+    expect(feeds.at(1).text()).toBe('articles');
+
+    feedsComponent.state = { feedIDs: ['articles', 'products'] };
+    await nextTick();
+
+    const reordered = wrapper.findAll('.slot-feed');
+    expect(reordered).toHaveLength(2);
+    expect(reordered.at(0).text()).toBe('articles');
+    expect(reordered.at(1).text()).toBe('products');
+  });
+
+  it('removes disappeared feeds with deferred parent cleanup', async () => {
+    jest.useFakeTimers();
+    const parentIndex = {
+      addWidgets: jest.fn(),
+      removeWidgets: jest.fn(),
+    };
+
+    const wrapper = mount({
+      components: { Feeds },
+      template: `
+        <Feeds search-scope="global" v-slot="{ feedID }">
+          <div class="slot-feed">{{ feedID }}</div>
+        </Feeds>
+      `,
+    });
+
+    const feedsComponent = wrapper.findComponent(Feeds).vm;
+    feedsComponent.getParentIndex = () => parentIndex;
+    feedsComponent.pendingRemovals = new Map();
+    feedsComponent.removalTimer = null;
+    feedsComponent.state = { feedIDs: ['products', 'articles'] };
+    await nextTick();
+
+    feedsComponent.state = { feedIDs: ['products'] };
+    await nextTick();
+
+    expect(wrapper.findAll('.slot-feed')).toHaveLength(1);
+    expect(wrapper.find('.slot-feed').text()).toBe('products');
+    expect(parentIndex.removeWidgets).not.toHaveBeenCalled();
+
+    jest.runAllTimers();
+    await nextTick();
+    expect(parentIndex.removeWidgets).toHaveBeenCalledTimes(1);
+    jest.useRealTimers();
+  });
+
+  it('reuses a pending feed container when the feed reappears before deferred cleanup', async () => {
+    jest.useFakeTimers();
+    const parentIndex = {
+      addWidgets: jest.fn(),
+      removeWidgets: jest.fn(),
+    };
+
+    const wrapper = mount({
+      components: { Feeds },
+      template: `
+        <Feeds search-scope="global" v-slot="{ feedID }">
+          <div class="slot-feed">{{ feedID }}</div>
+        </Feeds>
+      `,
+    });
+
+    const feedsComponent = wrapper.findComponent(Feeds).vm;
+    feedsComponent.getParentIndex = () => parentIndex;
+    feedsComponent.state = { feedIDs: ['products'] };
+    await nextTick();
+
+    const [firstFeedContainer] = parentIndex.addWidgets.mock.calls[0][0];
+
+    feedsComponent.state = { feedIDs: [] };
+    await nextTick();
+
+    expect(wrapper.findAll('.slot-feed')).toHaveLength(0);
+    expect(parentIndex.removeWidgets).not.toHaveBeenCalled();
+
+    feedsComponent.state = { feedIDs: ['products'] };
+    await nextTick();
+
+    expect(parentIndex.addWidgets).toHaveBeenCalledTimes(1);
+    expect(feedsComponent.feedContainers.get('products')).toStrictEqual(
+      firstFeedContainer
+    );
+    expect(wrapper.findAll('.slot-feed')).toHaveLength(1);
+
+    jest.runAllTimers();
+    await nextTick();
+
+    expect(parentIndex.removeWidgets).not.toHaveBeenCalled();
+    expect(feedsComponent.feedContainers.get('products')).toStrictEqual(
+      firstFeedContainer
+    );
+    jest.useRealTimers();
+  });
+
+  it('scopes slot descendants to the matching feed container', async () => {
+    const parentIndex = {
+      addWidgets: jest.fn(),
+      removeWidgets: jest.fn(),
+    };
+
+    const ScopedFeed = {
+      name: 'ScopedFeed',
+      inject: ['$_ais_getParentIndex'],
+      props: {
+        feedid: {
+          type: String,
+          required: true,
+        },
+      },
+      template: `<div class="scoped-feed">{{ feedid }}:{{ $_ais_getParentIndex().__feedID }}</div>`,
+    };
+
+    const wrapper = mount({
+      components: { Feeds, ScopedFeed },
+      template: `
+        <Feeds search-scope="global" v-slot="{ feedID }">
+          <ScopedFeed :feedid="feedID" />
+        </Feeds>
+      `,
+    });
+
+    const feedsComponent = wrapper.findComponent(Feeds).vm;
+    feedsComponent.getParentIndex = () => parentIndex;
+    feedsComponent.state = { feedIDs: ['products', 'articles'] };
+    await nextTick();
+
+    const scoped = wrapper.findAll('.scoped-feed');
+    expect(scoped).toHaveLength(2);
+    expect(scoped.at(0).text()).toBe('products:products');
+    expect(scoped.at(1).text()).toBe('articles:articles');
+  });
+
+  it('mounts containers for all feedIDs even with empty slot content', async () => {
+    const parentIndex = {
+      addWidgets: jest.fn(),
+      removeWidgets: jest.fn(),
+    };
+
+    const wrapper = mount({
+      components: { Feeds },
+      template: `
+        <Feeds search-scope="global" v-slot="{ feedID }">
+          <div v-if="feedID === 'products'" class="slot-feed">{{ feedID }}</div>
+        </Feeds>
+      `,
+    });
+
+    const feedsComponent = wrapper.findComponent(Feeds).vm;
+    feedsComponent.getParentIndex = () => parentIndex;
+    feedsComponent.state = { feedIDs: ['products', 'articles'] };
+    await nextTick();
+
+    expect(wrapper.findAll('.slot-feed')).toHaveLength(1);
+    expect(wrapper.find('.slot-feed').text()).toBe('products');
+    expect(parentIndex.addWidgets).toHaveBeenCalledTimes(1);
+    expect(parentIndex.addWidgets.mock.calls[0][0]).toHaveLength(2);
+    expect(parentIndex.addWidgets.mock.calls[0][0][0].__feedID).toBe(
+      'products'
+    );
+    expect(parentIndex.addWidgets.mock.calls[0][0][1].__feedID).toBe(
+      'articles'
+    );
+  });
+});

package/src/widgets.js

@@ -33,3 +33,4 @@ export { default as AisVoiceSearch } from './components/VoiceSearch.vue';
 export { default as AisRelevantSort } from './components/RelevantSort.vue';
 export { default as AisDynamicWidgets } from './components/DynamicWidgets';
 export { default as AisExperimentalDynamicWidgets } from './components/ExperimentalDynamicWidgets';
+export { default as AisFeeds } from './components/Feeds';