feat(ais-dynamic-widgets): add implementation

[Haroenv]

Summary

Adds a new widget ais-experimental-dynamic-widgets that can be used to conditionally render other widgets. This condition is based on the search results, by default results.facetOrdering.facet.values, but can be overridden using transformItems

Result

<template>
  <ais-experimental-dynamic-widgets :transform-items="transformItems">
    <ais-refinement-list attribute="test1" />
    <ais-menu attribute="test2" />
    <ais-panel>
      <ais-hierarchical-menu :attributes="hierarchicalAttributes" />
    </ais-panel>
  </ais-experimental-dynamic-widgets>
</template>

<script>
export default {
  data() {
    return {
      hierarchicalAttributes: ["test3", "unused"],
    };
  },
  methods(_attributes, { results }) {
    // modified if you want to use userData instead of facet ordering
    return results.userData[0].ordering;
  },
};
</script>

See also:

• feat(dynamicWidgets): implementation instantsearch#4687
• DX-1665

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c0d1823:

Sandbox	Source
vue-instantsearch-e-commerce	Configuration

[francoischalifour]

Won't this behavior result in an unexpected UI flash were some widget will appear and then get removed because computed based on state.attributesToRender?

What if we don't render anything when we don't have a state?

[Haroenv]

note that the widgets we render initially are hidden, so this won't cause a flash, but possibly slightly delayed visuals compared to server side rendering (which solves this, as the widget information is available on that server + initial frontend render)

[francoischalifour]

Right, I think I rather meant: won't this results in an unnecessary search parameters computation because it mounts widgets that will likely get removed?

Why don't we render nothing?

[Haroenv]

if we render nothing, the parameters of the URL can't be applied unfortunately, this was the best workaround I found

[eunjae-lee]

let's go!