fix(state): change behaviour of preserveSharedStateOnUnmount (#6488)

With preserveSharedStateOnUnmount behavior, UI State is the source of truth, when a widget gets removed, the UI State is evaluated again and the parameters result out of that. [FX-3192] Not done in this PR yet: - changed the signature of dispose (no more helper and state) - implement a similar behavior for recommend BREAKING CHANGE: The option `future.preserveSharedStateOnUnmount` is removed and now behaves as if it was set to `true`
algolia · Dec 26, 2024 · b37ba30 · b37ba30
1 parent 882dbca
commit b37ba30
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 173 deletions.
diff --git a/examples/react/next/pages/index.tsx b/examples/react/next/pages/index.tsx
@@ -67,9 +67,6 @@ export default function HomePage({ serverState, url }: HomePageProps) {
           }),
         }}
         insights={true}
-        future={{
-          preserveSharedStateOnUnmount: true,
-        }}
       >
         <div className="Container">
           <div>

diff --git a/packages/create-instantsearch-app/e2e/__snapshots__/templates.test.js.snap b/packages/create-instantsearch-app/e2e/__snapshots__/templates.test.js.snap
@@ -1900,7 +1900,6 @@ const searchClient = algoliasearch('appId', 'apiKey');
 const search = instantsearch({
   indexName: 'indexName',
   searchClient,
-  future: { preserveSharedStateOnUnmount: true },
   insights: true,
 });
 
@@ -4125,8 +4124,6 @@ import './App.css';
 
 const searchClient = algoliasearch('appId', 'apiKey');
 
-const future = { preserveSharedStateOnUnmount: true };
-
 export function App() {
   return (
     <div>
@@ -4146,7 +4143,6 @@ export function App() {
         <InstantSearch
           searchClient={searchClient}
           indexName=\\"indexName\\"
-          future={future}
           insights
         >
           <Configure hitsPerPage={8} />
@@ -5218,7 +5214,6 @@ export default {
   data() {
     return {
       searchClient: algoliasearch('appId', 'apiKey'),
-      future: { preserveSharedStateOnUnmount: true },
     };
   },
 };

diff --git a/packages/create-instantsearch-app/src/templates/InstantSearch.js/src/app.js.hbs b/packages/create-instantsearch-app/src/templates/InstantSearch.js/src/app.js.hbs
@@ -14,7 +14,6 @@ const searchClient = algoliasearch('{{appId}}', '{{apiKey}}');
 const search = instantsearch({
   indexName: '{{indexName}}',
   searchClient,
-  future: { preserveSharedStateOnUnmount: true },
   {{#if flags.insights}}insights: true,{{/if}}
 });
 
@@ -174,4 +173,4 @@ function isModifierEvent(event) {
     event.shiftKey
   );
 }
-{{/if}}
+{{/if}}
diff --git a/packages/create-instantsearch-app/src/templates/React InstantSearch/src/App.tsx.hbs b/packages/create-instantsearch-app/src/templates/React InstantSearch/src/App.tsx.hbs
@@ -31,8 +31,6 @@ const searchClient = algoliasearch(
   '{{apiKey}}'
 );
 
-const future = { preserveSharedStateOnUnmount: true };
-
 export function App() {
   return (
     <div>
@@ -49,7 +47,7 @@ export function App() {
       </header>
 
       <div className="container">
-        <InstantSearch searchClient={searchClient} indexName="{{indexName}}" future={future} {{#if flags.insights}}insights{{/if}}>
+        <InstantSearch searchClient={searchClient} indexName="{{indexName}}" {{#if flags.insights}}insights{{/if}}>
           <Configure hitsPerPage={8} />
           <div className="search-panel">
             <div className="search-panel__filters">

diff --git a/packages/create-instantsearch-app/src/templates/Vue InstantSearch with Vue 3/src/App.vue b/packages/create-instantsearch-app/src/templates/Vue InstantSearch with Vue 3/src/App.vue
@@ -91,7 +91,6 @@ export default {
   data() {
     return {
       searchClient: algoliasearch('{{appId}}', '{{apiKey}}'),
-      future: { preserveSharedStateOnUnmount: true },
     };
   },
 };

diff --git a/packages/instantsearch-core/src/instantsearch.ts b/packages/instantsearch-core/src/instantsearch.ts
@@ -50,9 +50,7 @@ function defaultCreateURL() {
 
 export const INSTANTSEARCH_FUTURE_DEFAULTS: Required<
   InstantSearchOptions['future']
-> = {
-  preserveSharedStateOnUnmount: false,
-};
+> = {};
 
 /**
  * The actual implementation of the InstantSearch. This is
@@ -151,19 +149,6 @@ See ${createDocumentationLink({
       })}`
     );
 
-    if (__DEV__ && options.future?.preserveSharedStateOnUnmount === undefined) {
-      // eslint-disable-next-line no-console
-      console.info(`Starting from the next major version, InstantSearch will change how widgets state is preserved when they are removed. InstantSearch will keep the state of unmounted widgets to be usable by other widgets with the same attribute.
-
-We recommend setting \`future.preserveSharedStateOnUnmount\` to true to adopt this change today.
-To stay with the current behaviour and remove this warning, set the option to false.
-
-See documentation: ${createDocumentationLink({
-        name: 'instantsearch',
-      })}#widget-param-future
-          `);
-    }
-
     this.client = searchClient;
     this.future = future;
     this.indexName = indexName;

diff --git a/packages/instantsearch-core/src/types/instantsearch.ts b/packages/instantsearch-core/src/types/instantsearch.ts
@@ -90,18 +90,7 @@ export type InstantSearchOptions<
    * @default false
    */
   insights?: InsightsProps | boolean;
-  future?: {
-    /**
-     * Changes the way `dispose` is used in InstantSearch lifecycle.
-     *
-     * If `false` (by default), each widget unmounting will remove its state as well, even if there are multiple widgets reading that UI State.
-     *
-     * If `true`, each widget unmounting will only remove its own state if it's the last of its type. This allows for dynamically adding and removing widgets without losing their state.
-     *
-     * @default false
-     */
-    preserveSharedStateOnUnmount?: boolean; // @MAJOR remove option, only keep the "true" behaviour
-  };
+  future?: Record<string, never>;
 };
 
 export type InstantSearchStatus = 'idle' | 'loading' | 'stalled' | 'error';
diff --git a/packages/instantsearch-core/src/widgets/__tests__/index-widget.test.ts b/packages/instantsearch-core/src/widgets/__tests__/index-widget.test.ts
@@ -603,11 +603,9 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index-widge
           hitsPerPage: 5,
         });
 
-        instance.addWidgets([
-          configureTopLevel,
-          configureSubLevel,
-          virtualSearchBox({}),
-        ]);
+        const searchBox = virtualSearchBox({});
+
+        instance.addWidgets([configureTopLevel, configureSubLevel, searchBox]);
 
         instance.init(
           createIndexInitOptions({
@@ -628,12 +626,12 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index-widge
           })
         );
 
-        instance.removeWidgets([configureSubLevel]);
+        instance.removeWidgets([searchBox]);
 
         expect(instance.getHelper()!.state).toEqual(
           new SearchParameters({
             index: 'indexName',
-            query: 'Apple iPhone',
+            hitsPerPage: 5,
             distinct: true,
           })
         );
@@ -646,111 +644,9 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index-widge
         ).toHaveBeenCalledTimes(2);
       });
 
-      it('cleans shared refinements when `preserveSharedStateOnUnmount` is unset', () => {
+      it('preserves shared refinements', () => {
         const instance = index({ indexName: 'indexName' });
-        const instantSearchInstance = createInstantSearch();
-
-        const refinementList1 = virtualRefinementList({
-          attribute: 'brand',
-        });
-
-        const refinementList2 = virtualRefinementList({
-          attribute: 'brand',
-        });
-
-        instance.addWidgets([refinementList1, refinementList2]);
-
-        instance.init(
-          createIndexInitOptions({
-            instantSearchInstance,
-            parent: null,
-          })
-        );
-
-        // Simulate a state change
-        instance.getHelper()!.addDisjunctiveFacetRefinement('brand', 'Apple');
-
-        expect(instance.getHelper()!.state).toEqual(
-          new SearchParameters({
-            index: 'indexName',
-            maxValuesPerFacet: 10,
-            disjunctiveFacets: ['brand'],
-            disjunctiveFacetsRefinements: {
-              brand: ['Apple'],
-            },
-          })
-        );
-
-        instance.removeWidgets([refinementList2]);
-
-        expect(instance.getHelper()!.state).toEqual(
-          new SearchParameters({
-            index: 'indexName',
-            maxValuesPerFacet: 10,
-            disjunctiveFacets: ['brand'],
-            disjunctiveFacetsRefinements: {
-              brand: [],
-            },
-          })
-        );
-      });
-
-      it('cleans shared refinements when `preserveSharedStateOnUnmount` is false', () => {
-        const instance = index({ indexName: 'indexName' });
-        const instantSearchInstance = createInstantSearch({
-          future: { preserveSharedStateOnUnmount: false },
-        });
-
-        const refinementList1 = virtualRefinementList({
-          attribute: 'brand',
-        });
-
-        const refinementList2 = virtualRefinementList({
-          attribute: 'brand',
-        });
-
-        instance.addWidgets([refinementList1, refinementList2]);
-
-        instance.init(
-          createIndexInitOptions({
-            instantSearchInstance,
-            parent: null,
-          })
-        );
-
-        // Simulate a state change
-        instance.getHelper()!.addDisjunctiveFacetRefinement('brand', 'Apple');
-
-        expect(instance.getHelper()!.state).toEqual(
-          new SearchParameters({
-            index: 'indexName',
-            maxValuesPerFacet: 10,
-            disjunctiveFacets: ['brand'],
-            disjunctiveFacetsRefinements: {
-              brand: ['Apple'],
-            },
-          })
-        );
-
-        instance.removeWidgets([refinementList2]);
-
-        expect(instance.getHelper()!.state).toEqual(
-          new SearchParameters({
-            index: 'indexName',
-            maxValuesPerFacet: 10,
-            disjunctiveFacets: ['brand'],
-            disjunctiveFacetsRefinements: {
-              brand: [],
-            },
-          })
-        );
-      });
-
-      it('preserves shared refinements when `preserveSharedStateOnUnmount` is true', () => {
-        const instance = index({ indexName: 'indexName' });
-        const instantSearchInstance = createInstantSearch({
-          future: { preserveSharedStateOnUnmount: true },
-        });
+        const instantSearchInstance = createInstantSearch({});
 
         const refinementList1 = virtualRefinementList({
           attribute: 'brand',
@@ -816,13 +712,15 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index-widge
           expect(widget.dispose).toHaveBeenCalledTimes(0);
         });
 
+        const stateBefore = instance.getHelper()!.state;
+
         instance.removeWidgets(widgets);
 
         widgets.forEach((widget) => {
           expect(widget.dispose).toHaveBeenCalledTimes(1);
           expect(widget.dispose).toHaveBeenCalledWith({
             helper: instance.getHelper(),
-            state: instance.getHelper()!.state,
+            state: stateBefore,
             recommendState: instance.getHelper()!.recommendState,
             parent: instance,
           });

diff --git a/packages/instantsearch-core/src/widgets/index-widget.ts b/packages/instantsearch-core/src/widgets/index-widget.ts
@@ -438,8 +438,9 @@ export const index = (widgetParams: IndexWidgetParams): IndexWidget => {
       });
 
       if (localInstantSearchInstance && Boolean(widgets.length)) {
-        const { cleanedSearchState, cleanedRecommendState } = widgets.reduce(
+        const { cleanedRecommendState } = widgets.reduce(
           (states, widget) => {
+            // @MAJOR remove the "cleanup" part of the dispose method
             // the `dispose` method exists at this point we already assert it
             const next = widget.dispose!({
               helper: helper!,
@@ -462,24 +463,12 @@ export const index = (widgetParams: IndexWidgetParams): IndexWidget => {
           }
         );
 
-        const newState = localInstantSearchInstance.future
-          .preserveSharedStateOnUnmount
-          ? getLocalWidgetsSearchParameters(localWidgets, {
-              uiState: localUiState,
-              initialSearchParameters: new algoliasearchHelper.SearchParameters(
-                {
-                  index: this.getIndexName(),
-                }
-              ),
-            })
-          : getLocalWidgetsSearchParameters(localWidgets, {
-              uiState: getLocalWidgetsUiState(localWidgets, {
-                searchParameters: cleanedSearchState,
-                helper: helper!,
-              }),
-              initialSearchParameters: cleanedSearchState,
-            });
-
+        const newState = getLocalWidgetsSearchParameters(localWidgets, {
+          uiState: localUiState,
+          initialSearchParameters: new algoliasearchHelper.SearchParameters({
+            index: this.getIndexName(),
+          }),
+        });
         localUiState = getLocalWidgetsUiState(localWidgets, {
           searchParameters: newState,
           helper: helper!,