Skip to content

feat(vue): port the five recommendation widgets#7032

Draft
aymeric-giraudet wants to merge 1 commit into
chore/port-widget-react-widgetsfrom
chore/port-widget-vue-recommend
Draft

feat(vue): port the five recommendation widgets#7032
aymeric-giraudet wants to merge 1 commit into
chore/port-widget-react-widgetsfrom
chore/port-widget-vue-recommend

Conversation

@aymeric-giraudet
Copy link
Copy Markdown
Member

Stacked on top of #7031.

Summary

Adds Vue wrappers for the recommendation/recommend-shared family — `AisRelatedProducts`, `AisTrendingItems`, `AisTrendingFacets`, `AisLookingSimilar`, `AisFrequentlyBoughtTogether`. Each one is a small render-function component that delegates to the matching `createXxxComponent` factory from `instantsearch-ui-components`, following the `Hits.js` precedent.

  • New `mixins/recommend.js`: subscribes to the InstantSearch render lifecycle to track `instantSearchInstance.status` reactively. The shared UI factories need it to switch between "render items" and "render empty state." Defensive: if the surrounding harness provides a stub instance without `addListener` (the package's registry tests do), it falls back to `'idle'` and skips the subscription.
  • Replaces the corresponding "X is not supported in Vue InstantSearch" placeholders in `packages/vue-instantsearch/src/tests/common-widgets.test.js` with real test setups that wait through a microtask plus two Vue ticks so the asynchronous Recommend response settles before assertions. Clears the per-suite `skippedTests` entries.

Test plan

  • `npx jest packages/vue-instantsearch --no-coverage` — 50 suites green, 596 passing on Vue 2.
  • `node scripts/prepare-vue3.js && npx jest packages/vue-instantsearch` — 50 suites green, 590 passing on Vue 3.
  • All five recommendation widget common-test suites pass (`renders with default props`, `renders transformed items`, `renders with no results`, `passes parameters correctly`, `escapes html entities`, `a click on a link with modifier doesn't search`).

Next in the stack: Vue FilterSuggestions.

Adds Vue wrappers for the recommendation/recommend-shared family:
`AisRelatedProducts`, `AisTrendingItems`, `AisTrendingFacets`,
`AisLookingSimilar`, and `AisFrequentlyBoughtTogether`. Each one is a
small render-function component that delegates to the shared
`createXxxComponent` factory from `instantsearch-ui-components`,
matching the `Hits.js` precedent.

Introduces `mixins/recommend.js`: the shared UI factories need a
reactive `status` prop to decide between "render results" and "render
empty state." React reads it from `useInstantSearch().status`; Vue
subscribes to the InstantSearch render lifecycle through this mixin
and falls back to `'idle'` when no real instance is available (so the
package's registry tests in `src/__tests__/index.js` keep passing).

Replaces the "X is not supported in Vue InstantSearch" placeholders in
`src/__tests__/common-widgets.test.js` with real test setups and clears
the per-suite `skippedTests` entries. The test setups wait through a
microtask plus two Vue ticks so the asynchronous Recommend response is
applied before the assertions run.

Depends on the Vue compat fixes and the common-test normalizers in the
two PRs stacked under this one.
@codacy-production
Copy link
Copy Markdown

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 23 complexity

Metric Results
Complexity 23

View in Codacy

TIP This summary will be updated as you push new changes.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 13, 2026

More templates

algoliasearch-helper

npm i https://pkg.pr.new/algolia/instantsearch/algoliasearch-helper@7032

instantsearch-ui-components

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch-ui-components@7032

instantsearch.css

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.css@7032

instantsearch.js

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.js@7032

react-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch@7032

react-instantsearch-core

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-core@7032

react-instantsearch-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-nextjs@7032

react-instantsearch-router-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-router-nextjs@7032

vue-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/vue-instantsearch@7032

commit: 936cbe6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant