Revert "wip: update current usage"

This reverts commit 3834227d34.

plugins/woocommerce-blocks/assets/js/blocks/product-collection/frontend.tsx

@@ -1,7 +1,13 @@
 /**
  * External dependencies
  */
-import { store, getElement, getContext } from '@woocommerce/interactivity';
+import {
+	store,
+	navigate,
+	prefetch,
+	getElement,
+	getContext,
+} from '@woocommerce/interactivity';
 import { triggerProductListRenderedEvent } from '@woocommerce/base-utils';
 
 /**
@@ -114,10 +120,7 @@ const productCollectionStore = {
 					ctx.animation = 'start';
 				}, 400 );
 
-				const { actions } = yield import(
-					'@woocommerce/interactivity-router'
-				);
-				yield actions.navigate( ref.href );
+				yield navigate( ref.href );
 
 				// Clear the timeout if the navigation is fast.
 				clearTimeout( timeout );
@@ -158,10 +161,7 @@ const productCollectionStore = {
 			}
 
 			if ( isValidLink( ref ) ) {
-				const { actions } = yield import(
-					'@woocommerce/interactivity-router'
-				);
-				yield actions.prefetch( ref.href );
+				yield prefetch( ref.href );
 			}
 		},
 	},
@@ -183,10 +183,7 @@ const productCollectionStore = {
 			const context = getContext< ProductCollectionStoreContext >();
 
 			if ( context?.isPrefetchNextOrPreviousLink && isValidLink( ref ) ) {
-				const { actions } = yield import(
-					'@woocommerce/interactivity-router'
-				);
-				yield actions.prefetch( ref.href );
+				yield prefetch( ref.href );
 			}
 		},
 		*onRender() {

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/active-filters/frontend.ts

@@ -3,6 +3,11 @@
  */
 import { store, getContext } from '@woocommerce/interactivity';
 
+/**
+ * Internal dependencies
+ */
+import { navigate } from '../product-filter/frontend';
+
 type ActiveFiltersContext = {
 	queryId: number;
 	params: string[];
@@ -10,14 +15,13 @@ type ActiveFiltersContext = {
 
 store( 'woocommerce/product-filter-active', {
 	actions: {
-		*clearAll() {
+		clearAll: () => {
 			const { params } = getContext< ActiveFiltersContext >();
 			const url = new URL( window.location.href );
 			const { searchParams } = url;
 
 			params.forEach( ( param ) => searchParams.delete( param ) );
-			const { navigate } = yield import( '../product-filter/frontend' );
-			yield navigate( url.href );
+			navigate( url.href );
 		},
 	},
 } );

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/frontend.ts

@@ -5,6 +5,11 @@ import { store, getContext } from '@woocommerce/interactivity';
 import { DropdownContext } from '@woocommerce/interactivity-components/dropdown';
 import { HTMLElementEvent } from '@woocommerce/types';
 
+/**
+ * Internal dependencies
+ */
+import { navigate } from '../product-filter/frontend';
+
 type AttributeFilterContext = {
 	attributeSlug: string;
 	queryType: 'or' | 'and';
@@ -47,7 +52,7 @@ function getSelectedTermsFromUrl( slug: string ) {
 
 store( 'woocommerce/product-filter-attribute', {
 	actions: {
-		*navigate() {
+		navigate: () => {
 			const dropdownContext = getContext< DropdownContext >(
 				'woocommerce/interactivity-dropdown'
 			);
@@ -56,12 +61,11 @@ store( 'woocommerce/product-filter-attribute', {
 				.map( ( item ) => item.value )
 				.filter( nonNullable );
 
-			const { navigate } = yield import( '../product-filter/frontend' );
-			yield navigate(
+			navigate(
 				getUrl( filters, context.attributeSlug, context.queryType )
 			);
 		},
-		*updateProducts( event: HTMLElementEvent< HTMLInputElement > ) {
+		updateProducts: ( event: HTMLElementEvent< HTMLInputElement > ) => {
 			if ( ! event.target.value ) return;
 
 			const context = getContext< AttributeFilterContext >();
@@ -84,8 +88,7 @@ store( 'woocommerce/product-filter-attribute', {
 				);
 			}
 
-			const { navigate } = yield import( '../product-filter/frontend' );
-			yield navigate(
+			navigate(
 				getUrl(
 					selectedTerms,
 					context.attributeSlug,

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/clear-button/frontend.ts

@@ -3,6 +3,11 @@
  */
 import { store, getContext } from '@woocommerce/interactivity';
 
+/**
+ * Internal dependencies
+ */
+import { navigate } from '../product-filter/frontend';
+
 const getQueryParams = ( e: Event ) => {
 	const filterNavContainer = ( e.target as HTMLElement )?.closest(
 		'nav.wp-block-woocommerce-product-filter'
@@ -39,7 +44,7 @@ type ProductFilterContext = {
 
 store( 'woocommerce/product-filter', {
 	actions: {
-		*clear( e: Event ) {
+		clear: ( e: Event ) => {
 			const params = getQueryParams( e );
 
 			const url = new URL( window.location.href );
@@ -60,10 +65,7 @@ store( 'woocommerce/product-filter', {
 			productFilterContext.hasSelectedFilter = false;
 
 			if ( needsNavigate ) {
-				const { navigate } = yield import(
-					'../product-filter/frontend'
-				);
-				yield navigate( url.href );
+				navigate( url.href );
 			}
 		},
 	},

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/price-filter/frontend.ts

@@ -9,6 +9,7 @@ import { debounce } from '@woocommerce/base-utils';
 /**
  * Internal dependencies
  */
+import { navigate } from '../product-filter/frontend';
 import type { PriceFilterContext, PriceFilterStore } from './types';
 
 const getUrl = ( context: PriceFilterContext ) => {
@@ -35,7 +36,7 @@ const getUrl = ( context: PriceFilterContext ) => {
 	return url.href;
 };
 
-const debounceUpdate = debounce( function* ( context, element, event ) {
+const debounceUpdate = debounce( ( context, element, event ) => {
 	const { decimalSeparator } = getCurrency();
 	const { minRange, minPrice, maxPrice, maxRange } = context;
 	const type = event.target.name;
@@ -65,9 +66,7 @@ const debounceUpdate = debounce( function* ( context, element, event ) {
 	context.minPrice = currentMinPrice;
 	context.maxPrice = currentMaxPrice;
 
-	const { navigate } = yield import( '../product-filter/frontend' );
-
-	yield navigate(
+	navigate(
 		getUrl( {
 			minRange,
 			maxRange,
@@ -185,10 +184,8 @@ store< PriceFilterStore >( 'woocommerce/product-filter-price', {
 				element.ref.select();
 			}
 		},
-		*reset() {
-			const { navigate } = yield import( '../product-filter/frontend' );
-
-			yield navigate(
+		reset: () => {
+			navigate(
 				getUrl( {
 					minRange: 0,
 					maxRange: 0,

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/product-filter/frontend.ts

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
+import { navigate as navigateFn } from '@woocommerce/interactivity';
 import { getSetting } from '@woocommerce/settings';
-import { store } from '@woocommerce/interactivity';
 
 const isBlockTheme = getSetting< boolean >( 'isBlockTheme' );
 const isProductArchive = getSetting< boolean >( 'isProductArchive' );
@@ -11,42 +11,32 @@ const needsRefresh = getSetting< boolean >(
 	false
 );
 
-const { actions } = store( 'woocommerce/product-filter-router', {
-	actions: {
-		*navigate( href: string, options = {} ) {
-			/**
-			 * We may need to reset the current page when changing filters.
-			 * This is because the current page may not exist for this set
-			 * of filters and will 404 when the user navigates to it.
-			 *
-			 * There are different pagination formats to consider, as documented here:
-			 * https://github.com/WordPress/gutenberg/blob/317eb8f14c8e1b81bf56972cca2694be250580e3/packages/block-library/src/query-pagination-numbers/index.php#L22-L85
-			 */
-			const url = new URL( href );
-			// When pretty permalinks are enabled, the page number may be in the path name.
-			url.pathname = url.pathname.replace( /\/page\/[0-9]+/i, '' );
-			// When plain permalinks are enabled, the page number may be in the "paged" query parameter.
-			url.searchParams.delete( 'paged' );
-			// On posts and pages the page number will be in a query parameter that
-			// identifies which block we are paginating.
-			url.searchParams.forEach( ( _, key ) => {
-				if ( key.match( /^query(?:-[0-9]+)?-page$/ ) ) {
-					url.searchParams.delete( key );
-				}
-			} );
-			// Make sure to update the href with the changes.
-			href = url.href;
+export function navigate( href: string, options = {} ) {
+	/**
+	 * We may need to reset the current page when changing filters.
+	 * This is because the current page may not exist for this set
+	 * of filters and will 404 when the user navigates to it.
+	 *
+	 * There are different pagination formats to consider, as documented here:
+	 * https://github.com/WordPress/gutenberg/blob/317eb8f14c8e1b81bf56972cca2694be250580e3/packages/block-library/src/query-pagination-numbers/index.php#L22-L85
+	 */
+	const url = new URL( href );
+	// When pretty permalinks are enabled, the page number may be in the path name.
+	url.pathname = url.pathname.replace( /\/page\/[0-9]+/i, '' );
+	// When plain permalinks are enabled, the page number may be in the "paged" query parameter.
+	url.searchParams.delete( 'paged' );
+	// On posts and pages the page number will be in a query parameter that
+	// identifies which block we are paginating.
+	url.searchParams.forEach( ( _, key ) => {
+		if ( key.match( /^query(?:-[0-9]+)?-page$/ ) ) {
+			url.searchParams.delete( key );
+		}
+	} );
+	// Make sure to update the href with the changes.
+	href = url.href;
 
-			if ( needsRefresh || ( ! isBlockTheme && isProductArchive ) ) {
-				return ( window.location.href = href );
-			}
-
-			const { actions: routerActions } = yield import(
-				'@woocommerce/interactivity-router'
-			);
-			yield routerActions.navigate( href, options );
-		},
-	},
-} );
-
-export const { navigate } = actions;
+	if ( needsRefresh || ( ! isBlockTheme && isProductArchive ) ) {
+		return ( window.location.href = href );
+	}
+	return navigateFn( href, options );
+}

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/rating-filter/frontend.ts

@@ -5,6 +5,11 @@ import { getContext, store } from '@woocommerce/interactivity';
 import { CheckboxListContext } from '@woocommerce/interactivity-components/checkbox-list';
 import { DropdownContext } from '@woocommerce/interactivity-components/dropdown';
 
+/**
+ * Internal dependencies
+ */
+import { navigate } from '../product-filter/frontend';
+
 function getUrl( filters: Array< string | null > ) {
 	filters = filters.filter( Boolean );
 	const url = new URL( window.location.href );
@@ -22,7 +27,7 @@ function getUrl( filters: Array< string | null > ) {
 
 store( 'woocommerce/product-filter-rating', {
 	actions: {
-		*onCheckboxChange() {
+		onCheckboxChange: () => {
 			const checkboxContext = getContext< CheckboxListContext >(
 				'woocommerce/interactivity-checkbox-list'
 			);
@@ -35,11 +40,9 @@ store( 'woocommerce/product-filter-rating', {
 					return item.value;
 				} );
 
-			const { navigate } = yield import( '../product-filter/frontend' );
-
-			yield navigate( getUrl( filters ) );
+			navigate( getUrl( filters ) );
 		},
-		*onDropdownChange() {
+		onDropdownChange: () => {
 			const dropdownContext = getContext< DropdownContext >(
 				'woocommerce/interactivity-dropdown'
 			);
@@ -48,10 +51,9 @@ store( 'woocommerce/product-filter-rating', {
 			const items = selectedItems || [];
 			const filters = items.map( ( i ) => i.value );
 
-			const { navigate } = yield import( '../product-filter/frontend' );
-			yield navigate( getUrl( filters ) );
+			navigate( getUrl( filters ) );
 		},
-		*removeFilter() {
+		removeFilter: () => {
 			const { value } = getContext< { value: string } >();
 			// get the active filters from the url:
 			const url = new URL( window.location.href );
@@ -68,8 +70,7 @@ store( 'woocommerce/product-filter-rating', {
 				filtersArr.splice( index, 1 );
 			}
 
-			const { navigate } = yield import( '../product-filter/frontend' );
-			yield navigate( getUrl( filtersArr ) );
+			navigate( getUrl( filtersArr ) );
 		},
 	},
 } );

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/stock-filter/frontend.ts

@@ -6,6 +6,11 @@ import { DropdownContext } from '@woocommerce/interactivity-components/dropdown'
 import { HTMLElementEvent } from '@woocommerce/types';
 import { CheckboxListContext } from '@woocommerce/interactivity-components/checkbox-list';
 
+/**
+ * Internal dependencies
+ */
+import { navigate } from '../product-filter/frontend';
+
 const getUrl = ( activeFilters: string ) => {
 	const url = new URL( window.location.href );
 	const { searchParams } = url;
@@ -21,7 +26,7 @@ const getUrl = ( activeFilters: string ) => {
 
 store( 'woocommerce/product-filter-stock-status', {
 	actions: {
-		*onCheckboxChange() {
+		onCheckboxChange: () => {
 			const checkboxContext = getContext< CheckboxListContext >(
 				'woocommerce/interactivity-checkbox-list'
 			);
@@ -34,10 +39,9 @@ store( 'woocommerce/product-filter-stock-status', {
 					return item.value;
 				} );
 
-			const { navigate } = yield import( '../product-filter/frontend' );
-			yield navigate( getUrl( filters.join( ',' ) ) );
+			navigate( getUrl( filters.join( ',' ) ) );
 		},
-		*onDropdownChange() {
+		onDropdownChange: () => {
 			const dropdownContext = getContext< DropdownContext >(
 				'woocommerce/interactivity-dropdown'
 			);
@@ -45,10 +49,10 @@ store( 'woocommerce/product-filter-stock-status', {
 			const selectedItems = dropdownContext.selectedItems;
 			const items = selectedItems || [];
 			const filters = items.map( ( i ) => i.value );
-			const { navigate } = yield import( '../product-filter/frontend' );
-			yield navigate( getUrl( filters.join( ',' ) ) );
+
+			navigate( getUrl( filters.join( ',' ) ) );
 		},
-		*updateProducts( event: HTMLElementEvent< HTMLInputElement > ) {
+		updateProducts: ( event: HTMLElementEvent< HTMLInputElement > ) => {
 			// get the active filters from the url:
 			const url = new URL( window.location.href );
 			const currentFilters =
@@ -70,10 +74,10 @@ store( 'woocommerce/product-filter-stock-status', {
 					filtersArr.splice( index, 1 );
 				}
 			}
-			const { navigate } = yield import( '../product-filter/frontend' );
-			yield navigate( getUrl( filtersArr.join( ',' ) ) );
+
+			navigate( getUrl( filtersArr.join( ',' ) ) );
 		},
-		*removeFilter() {
+		removeFilter: () => {
 			const { value } = getContext< { value: string } >();
 			// get the active filters from the url:
 			const url = new URL( window.location.href );
@@ -90,8 +94,7 @@ store( 'woocommerce/product-filter-stock-status', {
 				filtersArr.splice( index, 1 );
 			}
 
-			const { navigate } = yield import( '../product-filter/frontend' );
-			yield navigate( getUrl( filtersArr.join( ',' ) ) );
+			navigate( getUrl( filtersArr.join( ',' ) ) );
 		},
 	},
 } );