feat: port missing widgets across InstantSearch flavors#7027
Closed
aymeric-giraudet wants to merge 3 commits into
Closed
feat: port missing widgets across InstantSearch flavors#7027aymeric-giraudet wants to merge 3 commits into
aymeric-giraudet wants to merge 3 commits into
Conversation
added 3 commits
May 11, 2026 11:02
The audit script previously missed widgets like `dynamic-widgets` (uses `.ts`, not `.tsx`) and falsely flagged variants like `range-input`/`menu-select` as missing their connector/hook. It also looked for Vue placeholders by exact PascalCase match, missing irregular names like `RelatedProduct` (singular). Adds a `--gaps` mode so contributors can see all open porting work across flavors at a glance, and refreshes the skill docs around an audit-first workflow with a Vue render-function template for the recommendation/chat family of widgets.
Adds a "Pitfalls discovered while porting recommendation widgets" section to the Vue reference, covering the Fragment shim, status tracking via `createRecommendMixin`, async state delivery in test setups, Vue's swallowed connector throws, and flavored test suites that need real Vue widgetParams. Captured while implementing the actual ports in a separate PR; surfacing the lessons here so the next contributor doesn't have to rediscover them.
Implements the gaps surfaced by the new `port-widget` skill audit:
- React: adds `MenuSelect` (variant of `useMenu`), `NumericMenu`, and
`RatingMenu` widgets along with new `src/ui` components and a new
`useRatingMenu` hook in `react-instantsearch-core`.
- Vue: adds `RelatedProducts`, `TrendingItems`, `TrendingFacets`,
`LookingSimilar`, `FrequentlyBoughtTogether`, and `FilterSuggestions`
render-function wrappers around the shared
`instantsearch-ui-components` factories. Introduces a small
`createRecommendMixin` that tracks `instantSearchInstance.status`
reactively so empty states render correctly.
- Vue 2 compat: makes the augmented JSX `h` tolerate `null` props from
shared `<Fragment>` JSX, exports a Vue 2 `Fragment` shim, and translates
React-style `onClick`/`onAuxClick` event props to Vue 2's
`on: { click, auxclick }` so shared UI components work without per-widget
shims.
- Tests: replaces "X is not supported in Vue/React InstantSearch"
placeholders with real test setups, removes the corresponding
`skippedTests` entries, and adapts the `filter-suggestions` common tests
to support per-flavor params (now using `skippableTest` /
`skippableDescribe` where Vue can't match the React/JS-only behavior).
Chat is intentionally out of scope — it deserves its own PR.
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 40 |
| Duplication | 49 |
TIP This summary will be updated as you push new changes.
More templates
algoliasearch-helper
instantsearch-ui-components
instantsearch.css
instantsearch.js
react-instantsearch
react-instantsearch-core
react-instantsearch-nextjs
react-instantsearch-router-nextjs
vue-instantsearch
commit: |
Contributor
|
intent looks good, maybe split up into different PRs for easier review? |
Contributor
Author
|
Superseded by a stack of smaller PRs based off #7020:
Will link from each PR once they're open. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Draft — opening early for review. Builds on top of #7020 (port-widget skill improvements), which surfaces the gaps this PR closes via
python3 .claude/skills/port-widget/scripts/audit_widget_coverage.py --gaps.Summary
MenuSelect(variant ofuseMenu),NumericMenu, andRatingMenu. Adds matchingsrc/uipresentational components and a newuseRatingMenuhook inreact-instantsearch-core.instantsearch-ui-componentsfactories:RelatedProducts,TrendingItems,TrendingFacets,LookingSimilar,FrequentlyBoughtTogether, andFilterSuggestions. Introduces a smallcreateRecommendMixinso each widget tracksinstantSearchInstance.statusreactively without per-widget boilerplate.util/vue-compat/index-vue2.js): toleratesnullprops from shared<Fragment>JSX, exports a Vue 2Fragmentshim, and remaps React-styleonClick/onAuxClickprops to Vue 2'son: { click, auxclick }event API so shared UI components work without per-widget shims.skippedTestsentries. Adapts thefilter-suggestionscommon tests to useskippableTest/skippableDescribefor the few cases where Vue cannot match React/JS-only behavior (templatesdescribe block;throws without agentIdis swallowed by Vue'screatedhook).Chat is intentionally out of scope — its surface area (1338 LOC widget + ~3200 LOC of common tests + tool registry + sub-components) deserves its own PR.
Test plan
npx jest packages/react-instantsearch packages/react-instantsearch-core --no-coverage— 107 suites, 884 passing.npx jest packages/vue-instantsearch --no-coverage— 50 suites, 590 passing.npx jest --testNamePattern="FilterSuggestions" packages/instantsearch.js/src/__tests__/common-widgets.test.tsx packages/react-instantsearch/src/__tests__/common-widgets.test.tsx packages/vue-instantsearch/src/__tests__/common-widgets.test.js --no-coverage— JS, React, and Vue suites all green.python3 .claude/skills/port-widget/scripts/audit_widget_coverage.py --gaps— onlychatremains in the porting list (down from 11 widgets).